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.