Defining a Button (for a Rollover Effect)

You’ve probably seen rollover effects on the World Wide Web. An image changes when a visitor passes the mouse over an area of an image. Rollovers involve switching one image for another.

With your bing_home.psd button open in Photoshop, perform the following:

1. 
   
   Hold down the Shift key. Click the Circle layer and the Home layer.
2. 
   
   Right-click on the selected layers. A submenu displays.
3. 
   
   Select Duplicate Layers. A Duplicate Layers dialog box displays, as shown in figure below.
   
   
   
4. 
   
   Press OK in the Duplicate Layers dialog box. Copies of the button and Home layers display.
5. 
   
   Rename the copied layers as button mouseover and HOME mouseover.
6. 
   
   Right-click the button mouseover layer. Select Blending Options from the submenu that displays. The Layer Style dialog box displays.
7. 
   
   Left-click on the Pattern Overlay option. Detail about the Pattern Overlay option displays at the right side of the Layer Style dialog box.
8. 
   
   Click the right-facing arrow in the Pattern box. A drop-down menu displays. Select the Color Paper item from this drop- down menu, as shown in figure below.
   
   
   
9. 
   
   Click OK to the message box that asks if you wish to replace the current pattern with the Color Paper pattern.
10. 
    
    From the Color Paper patterns, select the Blue Crepe pattern, displayed in figure below.
    
    
    
11. 
    
    Go back to the Blending Option check boxes. Check the Inner Shadow check box. This gives the impression of a pushed- down effect.
12. 
    
    Click on the Stroke option. The Stroke detail displays at the right side of the Layer Style dialog box.
13. 
    
    Change the Fill Type drop-down field to Pattern.
14. 
    
    Select the Blue Crepe pattern from the Pattern box, as displayed in figure below. Then press OK on the Layer Style dialog box.
    
    
    
15. 
    
    Select the HOME mouseover button. Then select the Move tool. Move your text down a couple of pixels (you can press the Down Arrow key three times). This (along with the changed pattern and Inner Shadow) will create a pushed-down effect. Your button should look like figure below.

In this tutorial:

1. Creating Shapes with Selections
2. Style Requirements for Web Buttons
3. Creating a Web Button
4. Adding Using Preset Styles with Your  Web Button
5. Defining a Web Button (for a Rollover Effect)