How to Create Rollovers in Photoshop

Rollover buttons may change colors or fonts when the mouse hovers over them.

A rollover button is a button on website that changes its state when the mouse hovers over it. The state change may be any number of changes including color, font, size or a combination of these. Rollover buttons add polish and professionalism to your website and can be created easily in Adobe Photoshop and ImageReady. These steps detail how to create a simple rollover button, but the process can be altered for more stylized graphics.

Things You'll Need

• Adobe Photoshop
• ImageReady

Instructions

Create the Button Images in Photoshop

1. Go to File>New and set the image size to 80 by 25 pixels with a resolution of 72 pixels per inch.

2. Click on the foreground color swatch near the bottom of the tool palette on the right side of your screen. Select a color for the text on your button. Then click on the background swatch and select a color.

3. Press ""Control+Backspace to fill the image area with your chosen background color.

4. Select the "Type" tool from the tool palette, and set the font and size in the tool menu across the top of your screen. Click on the document area and type the button name, such as "Portfolio" or "Home."

5. Use the "Move" tool to align the text to your liking.

6. Copy both the background and type layer. Create a copy of a layer by right-clicking on a layer in the layer palette and selecting "Duplicate."

7. Merge the original background and text layers by holding the "Shift" key while clicking both layers in the layers palette. Then go to Edit>Merge Layers. Rename the layer "Normal State."

8. Double-click on the "T" image to the left of the copied type layer to highlight the text. Click the color swatch in the tool menu at the top of the screen, and select a different color for the text when the mouse hovers over the button.

9. Change the color in the background layer, if desired.

10. Merge the two copied layers, and rename the layer "Rollover State." Your file should now contain two layers: the "Normal State" layer on the bottom and the "Rollover State" layer on top. You can preview how the button change will look by turning the visibility of the top layer on and off. Click on the eye graphic to the left of the layer to show or hide it.

Create the Rollover Button in ImageReady

1. Click the "Jump to ImageReady" button at the bottom of the tool palette with your button file still open.

2. Go to the appearance palette (in CS or newer) or the rollover palette (in older versions); if it isn't already open, go to Window menu and select the palette from the drop-down menu.

3. Hide the "Rollover State" layer; this will set the normal state of your button to the "Normal" layer.

4. Click the "Create New State" icon at the bottom of the "Appearance" or "Rollover" palette. Turn on the visibility on the "Rollover State" layer to set it as the rollover state.

5. Go to the slice palette; if it isn't already open, it can be found in the Window menu. Assign a URL to your rollover button; this is the web page the user will be taken to when he clicks on your button.

6. Test your rollover button by clicking the "Preview in Default Browser" button near the bottom of the tool palette.

7. Go to File>Save Optimized to save the HTML file and image folder.

Tips & Warnings

• The steps described here walk you through creating a simple rollover button, but you can make the normal and rollover images as elaborate as you want.

References

• Photoshop Cafe: Create Rollovers in ImageReady Photoshop Tutorial
• Bloomsburg University: Creating Rollovers