|
The Jump to button in Photoshop leads directly to ImageReady
with the current image open.
|
|
ImageReady has some editing capability, but it is best to do the creation
work in Photoshop and the slicing and saving in ImageReady. Following
that policy keeps each program doing what it does best.
Prepare your images as described on the second page of this article.
Jump to ImageReady by clicking on the bottom button in the toolbox.
(There is a corresponding button in ImageReady that leads back to Photoshop.)
|
|
Slice is set using the Slice tool.
Editing the slice only affects where ImageReady will
slice the image. In the top sample, the About Us menu item contains
the dividing bar. In the lower sample the bar would not be included
with this menu item.
There are now three slices for this image, with only
the far right slice selected.
|
|
Slicing an Image
Your first job is to create slices in your document. This process tells
ImageReady where you would like to have the separate images created
and is a step requiring accuracy.
 Select
the Slice tool as shown here. Click and drag over the area for the first
slice. A yellow border will appear, with handles along the edges. This
is your slice, and is not related to the image at all. You can resize
the slice using the Slice Select tool (in the fly-out for the Slice
tool), but the image will not be affected, other than the changes to
the size of the slice. Think of the slices in an ImageReady document
as a transparency placed over the image to mark where to cut the image.
If you have the program set to snap to slices (View> Snap To>
Slices) the next slice will snap to the first if you place your cursor
close to the slice. Draw the second slice. Note that there is now a
01 and a 02 slice, and the slice outline for the first slice is shown
with a blue outline. The yellow outline signifies a selected slice.
This image is now ready to name and optimize, before we set up the
rollover images.
|
|
The optimize window with settings for the selected
slice.
|
|
Optimize Slices
If the Optimize window is not open, select Window> Show Optimize.
Select the slice you wish to optimize and enter the desired settings.
This screen presents the same options as the Save for Web function,
and sets the optimization for the selected slice or slices. The rollover
settings are taken from this optimization, so make sure that you set
the optimization with this in mind. One slice look great with only contain
8 colors, but the rollover for that image could require many more to
include a drop shadow or 3D effect.
Naming Slices
Naming your slices is an important step. The name you provide in
ImageReady will be used as the file name for your rollover images. If
the window containing the Slice tab is not visible, select Window>
Show Slice. Make sure the slice tab is active. Select the first slice.
Type a meaningful name into the Name field of the Slice window.
Note: I am not covering the automatic HTML generation feature
in ImageReady, but if you want to use this feature, you must fill in
the Link and Target fields on this screen.
We are now ready to create a rollover ... almost finished. Although
the setup does take time, the beauty of this system is that you can
change many things about your menu look, but as long as you do not change
the size of the sliced areas, you can just save the whole set again
with just a few clicks.
|
