Create a rollover button

Create a rollover button using the ImageReady Layers palette and Web Content palette.
Many Web sites contain rollover buttons, buttons that change when you mouse over or select them. The different display modes of the button are called rollover states. You can design a button and its rollover states using layers in Photoshop. You can put the elements that change each on their own layer and preview them using the Photoshop Layers palette. When you are satisfied with the design, you create a slice for the button. The slice marks the area triggered by the mouse to display the different states. You then edit the button in ImageReady® to define the content of the rollover states. Using the Web Content palette and the Layers palette together, you create a state and then set its look by turning layers on or off.

In Photoshop, create the button image, text, and the content of each of the button's rollover states. Keep any rollover state content that is different than the normal state on separate layers. The rollover state layers can either augment the normal state of the button or be used instead of the normal state layers. For example, if you want to add a circle next to a button when the user mouses over it, create the circle on a separate layer. You do not need to duplicate the button itself.

In the Layers palette, select the layer that represents the normal state of the button. Then, choose Layer > New Layer Based Slice. Photoshop creates a slice outlining the button on the layer. The slice determines the area triggered by the mouse to activate a rollover state.

Save the file, and choose File > Edit in ImageReady. The ImageReady application opens and displays the image.

Click the Layers tab and the Web Content tab to bring the palettes to the front or, if the palettes are not open, choose Window > Layers, and then Window > Web Content.

In the Web Content palette, select the Normal state. Then in the Layers palette, make sure the correct layers are visible and hidden for this state. Click the eye icon to hide a layer or the empty eye column to show a layer.

In the Web Content palette, select the slice created for the button. Then, click the Create Rollover State button at the bottom of the palette. Photoshop inserts the Over state below the slice. The Over state occurs when the user positions the mouse over the button.

With the Over state selected in the Web Content palette, click the eye icon or the empty eye column next to the layers in the Layers palette that you want to hide or show for this state.

Important: Before you make any changes to the layers of a button, always make sure you have the correct rollover state selected in the Web Content palette.

If you want to add additional states to this button, such as a Down state (the state when the user presses the mouse button) or the Selected state, repeat steps 6 and 7.

Note: If you want to change the state Photoshop creates to a different state (for example, from Down to Selected), select the state, and choose Rollover State Options from the Web Content palette menu. Then, select the desired state, and click OK.

To preview the rollover states, select the Preview Document button in the toolbox, and move the mouse over the button. If you created other states, try activating them as well (such as pressing the mouse button or clicking). Select Preview Document again to turn off the preview mode.

When you are satisfied with the button, save the file. It is important to first save the file using the Photoshop format. The Photoshop format preserves all components of the button and allows you to make changes later if necessary. Once you have saved it as a PSD file, you can incorporate the button into another Photoshop file or optimize it for use in a Web page.