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

Creating a Rollover by Using Layers

Using the Create Layer-Based Rollover button at the bottom of the Web Content palette, you can quickly turn a layer into a layer-based slice and create a new rollover state all with the click of one button. When you create a rollover by using a layer, the only way that you can create changes between the rollover states is to use layer styles.

In the Layers palette, select a layer.





At the bottom of the Web Content palette, click the Create Layer-Based Rollover button.

The layer is instantly turned into a layer-based slice. This change is indicated in the Layers palette by the tiny Slice tool icon that appears next to the layer’s name. Simultaneously, the Over rollover state is generated by using the slice in the Web Content palette, as shown in Figure 59-9.




Figure 59-9: When you click the Create Layer-Based Rollover button, the selected layer is used to create a layer-based slice, and the Over rollover state is assigned to the slice in the Web Context palette.


Over is the default rollover state. If you want to change to a different rollover state, double-click the word Over and select a state from the Rollover State Options dialog box. For this example, I use the Over state.






In the Layers palette, click the Add layer style button at the bottom of the palette, and then choose an effect from the menu.

Use the Layer Style dialog box to create an interesting effect, such as a drop shadow, bevel, or gradient overlay. In this example, I used a drop shadow. To find out more about layer styles, take a look at Technique 20.

When you’re finished creating the layer effect, click OK to close the Layer Style dialog box. Notice that the rollover state thumbnail in the Web Content palette changes to reflect the layer style that you applied.

That’s all there is to it! You just created a rollover by using a layer style. To preview the rollover in ImageReady, click the Preview Document button in the Toolbox. To preview the rollover in a browser, click the Preview in Browser button in the Toolbox. Figure 59-10 shows the rollover in a browser window.




Figure 59-10: The leaf before the mouse passes over it (top) and during (bottom).

If you come up with a layer-based rollover effect that you really like, you can save it as a preset, and (here’s the great part) apply the rollover effect to any other layer with just one click!

Here’s how to save your preset:

Create a layer-based rollover following the steps in the section “Creating a Rollover by Using Layers.”





Make sure that the layer that was used to create the layer-based slice is selected in the Layers palette.





In the Swatches palette, choose New Style from the palette menu.





Enter a name for your rollover style in the Style Options dialog box and make sure to select the Include Rollover States check box.





Click OK to close the Style Options dialog box.





Your custom rollover style appears as a swatch at the bottom of the Swatches palette.

To apply your custom rollover style to another layer, just select the layer, and then click the swatch. Preview the rollover in a browser. Cool!