Photoshop CS Timesaving Techniques For Dummies [Electronic resources] نسخه متنی

Substituting Another Image

Creating a substitution rollover is easy. All you need is two layers containing different images. One image is active in the Normal state, when the mouse is off the image. The other image is the substitution image, which replaces the original image when the Over state is triggered by a mouse action, such as passing over the slice area.

Use the following steps to create a substitution rollover:

Create a document with two layers.

On one layer is the original image, which you’ll attach to the Normal state. The user sees this image when the mouse is off the sliced area. The other layer contains the substitution image. The user sees the substitution image when the mouse passes over the sliced area. (It doesn’t matter which layer is on top in the stacking order.)

Figure 59-11 shows two penguin layers, one labeled Standing and the second labeled Flying.




Figure 59-11: I’m using two penguin layers, Standing and Flying, to create a substitution rollover.






Select the Slice tool from the Toolbox.





Create a slice that encompasses the larger of the two layers.

Notice that when you create the slice, it appears in the Web Content palette.





In the Layers palette, select the layer that you want to use as the Normal state (when the mouse is off the image).

For my example, the Standing layer is selected, as shown in Figure 59-12.




Figure 59-12: Use the Layers palette to hide the layer that you don’t want to see when the mouse is not over the image.






In the Layers palette, hide the substitute layer (in my example, the Flying layer) by clicking the eye icon.

Figure 59-12 shows that the Flying layer is hidden.






In the Web Content palette, click the Create Rollover State button at the bottom of the palette.

The Over rollover state appears below the slice with the same image in the thumbnail as the slice, as shown in Figure 59-13.




Figure 59-13: When you create the Over rollover state, the thumbnail contains the same image as the Slice thumbnail.






With the Over rollover state selected in the Web Content palette, use the Layers palette to make the substitution image visible and the Normal state image hidden.

In this example, the eye icon next to the Flying penguin layer is clicked to make it visible and the Standing penguin layer eye icon is clicked to hide the layer, as shown in Figure 59-14.




Figure 59-14: When you make the substitution image visible, it appears in the Over rollover state thumbnail in the Web Content palette.


When you hide one layer and make the other layer visible, the Over state thumbnail in the Web Content palette changes to display the visible layer.

And that’s it! Try out the rollover by previewing it in ImageReady or in a browser.