| |
|
Although ImageReady is really the best tool to create rollovers, there
are times when you require a single image. For that scenario, and for
anyone using Photoshop 5 or earlier, this is the only way to create
the final rollover images.
|
|
The Save for Web screen (set for 2-up) saving the original
image. Normally, this image would have a transparent background, but
for clarity, I have left the white background showing.
|
|
Create your original and rollover image as described on the previous
page. To save the original image, turn off the rollover effect layer(s).
Version 5.5 or above: Select Save for Web and optimize the image.
Select a name for the image that makes sense, and is relatively short
(long image names in a repeating elements add unnecessarily bytes to
your page). Remember, you will be adding to this name for your rollover
image. Save the image.
To save the rollover image, turn the visibility on for the rollover
layer and off for the original layer. Select Save for Web and assign
a name that will be easily identified as the "over" image
for your rollover. Repeat for more rollover states. The optimization
settings are usually the same for each image, unless you have effects
like shadows or 3D on some layers but not on others.
Version 5 and lower: Follow the above instructions, but since
you do not have Save for Web, you will have to save each image using
the normal save routes as a GIF or JPG image.
|
| |
|
Creating a Menu without ImageReady
The method above works fine when you have only and exact size image as
the base for your saved files, but what if you want to save separate areas
of a menu? The answer for most situations is ImageReady, but if you do
not have access to it, or have other reasons not to use it, you can still
create individual images. The method is a little tedious, but it is quick
to create once you are familiar with the method. |
|
Menu prepared, guides set and selection in place to
copy for individual images.
Original selection shown with resulting file that is
saved to create the final image. The rollover effect is shown here,
with the sample above showing the original.
|
|
Create your graphics as explained on the previous page, but with all
the menu items in the same document. You must save each menu item individually,
which means you must crop the unnecessary parts of the image away. You
can accomplish this through using snapshots and returning the image
to the original state every time, but I find it just as fast to select
and copy the images, create a new image and then save as usual.
With the graphics and rollover layers or effects ready, pull guides
to the exact spot that you would like to divide the menu. Make sure
that the Snap to Guides feature is activated. Select the are for the
first menu item area, using the guides for precise placement. Select
Edit>Copy Merged.
You will now create a new image. Select File>New and accept the
default size. Paste the copied image into the new file and Save for
Web, or save as a JPG or GIF (when Save for Web is not available). Repeat
for each menu item. Activate your rollover effect layers and go through
the process again. With the exception of your main document, there is
no reason to save a PSD file of the images you create through this process.
Although for the sample above you would create six separate documents,
the process is fast. However, ImageReady is a faster, more accurate
way to accomplish the same effect. If you have ImageReady, you should
use it. Carry on to complete the same process in ImageReady.
|
