How Do I Make Rollover Buttons in Photoshop?

By Darrin Koltow

Rollover buttons are the images you see when you hover a mouse over many Web page buttons. Other button states may have their own images, including the clicked and disabled states. Making rollover buttons in Photoshop distinguishes your program or Web page from other media. It also lets you create buttons with interactive shapes that relate to your application's function. For a game that depicts dragons, for example, you could create a button whose normal appearance is the closed eye of a dragon, and whose rollover appearance is the opened dragon eye.

Step 1

Click the "File" menu's "New" command, then click the "Web" item from the "Preset" drop-down control.

Step 2

Click the tool palette icon shaped like a rounded rectangle to run the "Rounded rectangle" tool, then click the color swatch above the canvas. Click a color you'd like for the button from the palette that appears.

Step 3

Click toward the left side of the canvas, then drag right to define the button. Release to complete the button's shape. Click the "Styles" item from the "Windows" menu to show a palette of preset button styles.

Step 4

Hover your mouse over the gallery of style icons, then click one of the styles whose name includes "normal." For example, click the "Beveled normal" style. The term "normal" indicates that the style is for the button's enabled, non-rollover state.

Step 5

Click the "T" icon in the tool palette to run the "Text" tool, then drag over the button to define a text box. Type the text you want for the button in the text box, then click the check mark icon located above the canvas to finalize the text for the text box.

Step 6

Click the "Merge visible" command of the "Layers" menu to merge the text and effects into a single image. Click the "Duplicate" command from the "Layer" menu to duplicate the button for the rollover state.

Step 7

Use the instructions from Step 4 to apply a button style to the duplicate button. However, click a style whose name includes "mouseover" instead of "normal." For example, click the "Beveled mouseover" style. This will be the appearance of the button when the user passes the mouse over it

Step 8

Use the instructions from Step 4 to apply a button style to the duplicate button. However, click a style whose name includes "mousedown" instead of "normal." For example, click the "Beveled mousedown" style. This will be the appearance of the button while the mouse is over it and being clicked.

Step 9

Click the "File" menu's "Save for Web" command, then click the "4-up" tab to view four images showing different image qualities for the button you selected. Click an image whose quality you find acceptable, and whose text below the image includes the file type "GIF." Buttons are usually in the GIF format, largely because they usually require little disk memory.

Step 10

Click "Save" to open the "Save optimized" dialog box. Type a name in the "Name" text box that indicates the image is the rollover button, not the normal one. For example, type "rollover.gif." Click "Save" to save the rollover button.

Step 11

Use the instructions from Step 8 to hide the rollover button's layer and reveal the normal button's layer. Use the instructions from Steps 9 and 10 to save the normal button with a name like "normal.gif" or "enabled.gif."