Button Changes Rollover Lesson

Let's start with a simple trick so we don't hurt ourselves. I have a group of 5 rounded rectangle buttons along the left edge of my screen. When I roll over these buttons I want the button color to change.

This example is based on the rounded rectangle buttons created in the Navigation Lesson in the Web Graphics class. At the end of that lesson I had a Photoshop document with 5 layers of red rounded rectangles which served as buttons and another 5 layers with the button text.

Now I need to create a rollover effect which allows the button color to change when I roll over it.

I create copies of the button layers and label them "linda-button roll", "marie-button roll", etc. To make a copy of a layer just drag the layer over the new layer icon at the bottom of the layer palette, or choose duplicate from the layer palette options.

With the linda-button roll layer selected I double click on the icon which displays the dark red color.

This color picker window appears and I am able to select a new color for the button. I select a lighter and brighter red for the rollover effect.

My layer now looks like this.

Now I want to transfer that color to all the rollover button layers. I repeat the double clicking trick so that all my rollover layers are the lighter shade of red.

I place the rollover layers above my original button layers. When all the rollover layers are turned on the document looks like this.

In reality you will never have all the rollover buttons displaying at the same time. However I often turn them all on, just to make sure they are done correctly.

For purposes of your homework you can simply submit a single flattened image like the one shown below. 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.

Now I crop the image slightly to remove extra pixels at the top and bottom, turn off all the rollover button layers, and add guides to the document between each button. The file now looks like this.

Now I save the file as a PSD file (I named this file "round-rect.psd"). Next I switch to ImageReady to slice and create rollovers.

I access the Slice menu > Create slices from guides. If these buttons were being used for an actual site I would name each slice, add linking code to the slice, and then use the rollover window to create my effects. Refer to the slice and rollover section to review these concepts.

Since this is a "down and dirty" version which is a class sample, I did not name the slices or create links which work. Here is what my images look like as working rollover buttons.

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