User's Manual

607

ADOBE PHOTOSHOP CS2

User Guide

2. If using image maps, make each button a layer-based image map.

Choose Layer > New Layer Based Image Map Area. You’ll need to add each state, including the first state. See “To

add a rollover state (ImageReady)” on page 608.

3. If using slices, make each button a layer-based rollover button.

Clickthe Create Layer-BasedRolloverbuttononthe WebContent palette. ImageReady createsanimage-based slice

and adds the Over state to the Web Content palette. See “To create a layer-based slice for a rollover (ImageReady)”

on page 608.

4. Add rollover states.

Create additional rollover states as needed, or change the default Over state automatically created by the layer-based

rollover button. See “To add a rollover state (ImageReady)” on page 608 and “To change a rollover state

(ImageReady)” on page 608.

5. Edit the layer content for the state to create the rollover effect.

Select the state you want to work with in the Web Content palette. You can apply and change layer styles for each

state, change the position of content in each layer, or change the visibility of a layer. If you are replacing the contents

of one layer with another, make the first layer invisible and the second visible for that state.

For more information on changes you can make to each state, see “Editing layers in rollover states and animation

frames (ImageReady)” on page 613.

You can use layer styles to create instant rollover effects. When working with layer-based slices, you can also save the

series of states as a rollover style. (See “To apply a rollover style to a layer (ImageReady)” on page 609.)

6. If you are creating a remote rollover, target the remote slice to the selected state.

Usethe Pickwhip icon in theWeb Contentpalette to pointtothe slicethatcontainsthe imagefor theremoterollover.

See “To create a remote rollover (ImageReady)” on page 609.

7. Optimize the image.

Choose a file format for the image and set optimization options in the optimization palette. See “To optimize an

image for the web” on page 628.

8. Preview the rollover.

Previewthe rollover in ImageReady as youcreateit. Then previewitinvarious webbrowsersusedbyyouraudience.

See “To preview rollovers (ImageReady)” on page 611.

9. Save the rollover.

Save aweb versionofyourrolloverusing theFile > Save Optimizedcommand.Makesurethatthe outputsettingsare

set to save an HTML page along with the image files. ImageReady will write the JavaScript code for the rollover in

the HTML page.