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:
- Hold down the Shift key. Click the Circle layer and the Home layer.
- Right-click on the selected layers. A submenu displays.
- Select Duplicate Layers. A Duplicate Layers dialog box displays, as shown in figure below.
- Press OK in the Duplicate Layers dialog box. Copies of the button and Home layers display.
- Rename the copied layers as button mouseover and HOME mouseover.
- Right-click the button mouseover layer. Select Blending Options from the submenu that displays. The Layer Style dialog box displays.
- Left-click on the Pattern Overlay option. Detail about the Pattern Overlay option displays at the right side of the Layer Style dialog box.
- 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.
- Click OK to the message box that asks if you wish to replace the current pattern with the Color Paper pattern.
- From the Color Paper patterns, select the Blue Crepe pattern, displayed in figure below.
- Go back to the Blending Option check boxes. Check the Inner Shadow check box. This gives the impression of a pushed- down effect.
- Click on the Stroke option. The Stroke detail displays at the right side of the Layer Style dialog box.
- Change the Fill Type drop-down field to Pattern.
- Select the Blue Crepe pattern from the Pattern box, as displayed in figure below. Then press OK on the Layer Style dialog box.
- 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.