Creating a Rollover Button

Rollover buttons are used on web pages to make them more visually appealing or to provide more information. You can use Photoshop Elements to both prepare images for your web site and to create graphics for your site. The rollover buttons on the index page and at the top of this page were created using Photoshop Elements.
In this example, I’ve created a very simple rollover called “My Button” which is shown below.

Sample Rollover Button

I’ve also created a second image that will be shown when the user moves his cursor over the image on a web page. See the supporting web page to see the button in action. The “over” button is show below.


Steps to create this button:

1. Create a new image that is 200 pixel wide and 40 pixels high. Set the resolution to 72 DPI. Use a white background. (Note: In creating these for your web page you will want to use the same color as the background color of your page.)

2. Drag your Layer Palette from the Palette Well.

3. Create a new layer by clicking on the New Layer Button.  IMAGE

4. Name the layer “button.” Note: If you were creating this on your own, you wouldn’t have to do this step. Naming the layer will help identify it for us using these directions. However, if you have a complicated image with a lot of layers you will want to name them for organizational purposes.

5. Select a color for your text using the Foreground Color tool.

6. Using the Type Tool, type in a name for the button. I used My Button.

7. Duplicate the layer name “button” by dragging it onto the New Layer Button.

8. Name this layer “Over.”

9. Using the Layer Styles Palette choose an effect. I chose Inner Glows/Fire for a dramatic effect.

10. Hide the Over layer by clicking on the eye to the left of the layer in the Layer Palette.

11. From the File Menu choose Save for Web.

12. Optimize your button and choose jpeg/low.

13. Click OK and save the button as example.jpg

14. Using the Layer Palette show the Over layer by clicking on the eye on the left of the layer.

15. Again choose the File Menu and Save for Web. Use the same settings and click OK.

16. Save the button as example_over.jpg.

17. Next you would use a web page editor such as FrontPage, Dreamweaver or GoLive to create your web page with a rollover button.

To create more buttons in the same style, you would just change the type and save the two layers. You could create all of your navigation buttons in just a few minutes.


If you don't have Photoshop Elements, the next best thing is Picassa. Picassa is a great free program from Google.

| Home | Getting Started | Quick Fix | Images | Shapes | Text | Cropping | Vignettes |
| Animations | Print Layouts | Slide Show | Photo Gallery | Rollovers |
| Books | Web Sites | Classrom Ideas | Documentation | Buying a Digital Camera | About this Site |

These materials were created by Jim Wenzloff. You are welcome to reproduce them for educational purposes providing you include my name and the web address of the page. If you have any questions please contact

Wednesday, December 13, 2006