Button & Text Change - Rollover Lesson

This example is based on the horizontal buttons created in the Navigation Lesson in the beginning class. At the end of that lesson I had a Photoshop document with 5 layers of beveled buttons and another 5 layers with the button text.

These are the images this file produced:

Now I need to create a rollover effect which allows the button to appear to press down and the text color to change.

I create copies of the button layers and label them "linda-button roll", "marie-button roll", etc. Remember to make a copy of a layer just drag the layer over the new layer icon at the bottom of the layer palette.

With the linda-button roll layer selected I make sure the style menu is showing
Window > Show styles

I need to load the button styles. I select the arrow at the top right hand corner of the style window and select the button.asl file. This allows the button styles to load.

I drag the style which creates an downward bevel and the "linda" button changes its appearance. Another technique is to double click on the style and the active layer will automatically take on that style. If this does not work for you, make sure the layer for the rollover button is on top of the original button layer.

Once again I modify the style by removing the drop shadow style, adjusting the bevel from 10 to 5, and changing the inner glow from black to transparent.

My linda rollover button now looks like this.

Now I want to transfer that effect to all the button layers. With the "linda-button roll" layer highlighted, I access the Layer menu > Layer Style > Copy Layer Style

Next I highlight the "marie-button layer" and then link all remaining rollover button layers. Finally I access the Layer menu > Layer Style > Paste Layer Style to Linked

All my buttons now have the downward bevel appearance.

Next I make a copy of each of the layers which contain text. I label these layers "linda roll", "marie roll", etc.

With the linda roll layer selected I access the style menu at the bottom of the layer window and select bevel and emboss I use the settings shown below to modify the text.

Once again, I recommend you place the layer with the rollover text above the layer with the original text. My linda text now looks like this.



Again I I access the Layer menu > Layer Style > Copy Layer Style. Next highlight the "marie roll" layer and then link the remaining rollover text layers. Now access the Layer menu > Layer Style > Paste Layer Style to Linked

All the text will take on the embossed look.

At this point my navigation bar looks like this.

My layers are displayed below. Note that each button has 2 layers for the original button and 2 layers for the rollover effect. These 5 buttons requires 20 layers.

For purposes of your homework you can simply submit a single flattened image like the one shown above. if you would like to go above and beyond you can crop the image, place guides between the buttons and then switch to ImageReady slice up the buttons and create the rollover effect. Refer to the slice and rollover section to review these concepts.

Refer to the CD to review the PhotoShop document I used to create these buttons.
CD > CIS 58.53B Advanced Class > PSD Files > rollovers > horiz-buttons.psd