Creating a Rollover by Using Layers






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.

  1. In the Layers palette, select a layer.

  2. 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.

    Click To expand
    Figure: 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.

  3. 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 shows the rollover in a browser window.

    Click To expand
    Figure: The leaf before the mouse passes over it (top) and during (bottom).



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows