Menus with Beauty and Brains 4 pg 2: Production Graphics with Wendy Peck at webreference.com

Menus with Beauty and Brains 4: Creating Rollover Images in PS

Photoshop is a favorite program for many Web designers. Adding ImageReady, with its slicing and automated rollover capabilities, turned this giant of the print world into a viable option for Web work.

Can you create rollovers in Photoshop, without ImageReady? Yes, and occasionally I do that if I am doing a single rollover image. Working in layers, and using the Save for Web feature does the job as well as ImageReady. However, if you are creating a menu, or any other type of image that requires separate areas, ImageReady is the best route. I will start with a short description of how to create the rollover effect. Then I will show you how to save the rollover images directly from Photoshop and then move to creating a menu using ImageReady.

The top image here was created with separate layers for each image in the rollover. The rollover image for the lower sample was created by applying a yellow color overlay to the original layer. There is no difference in the final result.

The secret to any rollover in Photoshop (or any other program) is to be perfect. You saw the example on the previous page that was only one pixel off from perfect. I usually create my rollover effects by creating new layers, and to keep the perfect alignment, I always duplicate the original layer before applying the desired rollover effect. Many designers create rollover effects by using layer styles, including color overlay to change the color. How you create the effects is not important – precision is.

The samples at the left used different methods to change the color on the rollover image, but the effect is the same. I will only show these two methods for changing the color for a rollover, although there are many different ways to create a rollover effect. 3D effects can be used to make the image appear to be on a button that is pressed down. A simple drop shadow on either the original or the rollover image can simulate movement, and let the user know a link exists.

Color Overlay Rollovers
An easy way to change the color of a rollover image is to add a color overlay layer style to the original image. Create the original image. Double-click the layer containing the content to be changed. In the Layer Style window, click on Color Overlay to add the effect and bring up the Color Overlay options at the right of the window. Choose the color and opacity that you desire. Click OK to return to the document. Your rollover image is now ready. You can turn off the effect to show the original image, and activate the effect for the rollover image.

The screen shot at the left shows the original orange image. The color overlay effect has been added, but note that it is set to be invisible. The lower sample shows the active effect, and the image is now yellow. That's all there is to that method. You will face no problem with precision using this method, since you are only changing the color of the layer, not aligning layers.

Note: If you will be creating a menu and slicing it in ImageReady, it is easier to keep all of your menu items on one layer.

Separate Layer Rollovers
To create rollover effects using separate layers, create the original image on a separate layer. Name your layers as you create them to make your work easier later. In the example at the left, my original layer is named Rollover and the text is orange. Make sure you are satisfied with the look you create, because any changes you make will have to be made to the rollover layer separately (that is a drawback of this technique when compared to the color overlay method described above).

Select Layer>Duplicate Layer, or right-click the layer and select Duplicate Layer from the menu. Assign a name to the new layer that will be easy to identify, as you will be switching between layers to save your rollover images later. On the new layer, change the color of the text, or add the effect you desire. The sample at the left shows both the original layer as active (orange text) and then the new layer (yellow text) active. Note that only one layer is active at a time.

If you require more than one rollover state, create another layer as above with the desired effect.

Although the overlay method is precise and fast, I usually work with separate layers to create my rollover effects. I like the extra control I have to create effects, although even I admit that most rollovers I do could be accomplished with layer effects. Choose the method that works best for you, or both at different times.

Carry on to learn how to save the graphics you require for your project.

Next page

Menus with Beauty and Brains 4: Tutorial Index

Photoshop and ImageReady Rollovers
Creating Rollover Images in Photoshop
Saving Single Rollover Images
Slicing Images with ImageReady
Saving Rollover Images