Text Changes - Rollover Lesson

In this example I want to have the text color change when the rollover occurs. Let's refer back to the tab examples and review how these tab bars work at our site. These 4 images will appear at the top to 4 sections of our site. As we analyze the images, note that the top tabs of each image are exactly the same, while the bottom area changes color in each area.

dark blue bottom

blue bottom

medium blue bottom

light blue bottom

When I place my text, and then slice my image I want to make sure that the area where the changing text displays is above the bottom area that changes. This allows me to use the same rollover images on every section. One image which displays the bottom of the tabs will be needed for each section. Here is how it works.

I begin by adding 4 layers of text which label the tabs. The text is displayed in the lightest Web safe shade of gray, it can be difficult to find a color which displays well on several tones of blue. The gray looks fine on the first 3 shades, but disappears on the light blue color.

I changed the color of the text for the light blue tab to a darker shade of blue. Then I copied the layers of text and changed the color to pure white. All 4 rollover layers will display white text, since the white color contrasts with the light blue. I rename the text layers so the word "roll" is in the name. Here is how the document looks with the 8 text layers.

One other minor point. We have 2 layers of text for each tab. White, and light gray. If both layers are displaying, the white will look thicker than if the gray layer is turned off, and the white displays alone. Look carefully at the images displayed below. The first text has both gray and white layers turned on, the second has only the white layer turned on. There is no correct or incorrect way to create the rollover text, just make sure you are consistent and observe the effect the text is creating.

For purposes of homework, you could now stop at this point. If you want to actually make these images work, keep reading....

I added several guides to establish which images will be created for the rollover effect. I have described the 5 guides I created.

1. guide between the first tab and second
2. guide between the second tab and third
3. guide between the third tab and fourth
4. guide which defines the top of the tab
5. guide which defines the bottom of the text area which will change. Note that the guide is above the curved area at the bottom of the tabs. Since these images will not have bottom curved areas, they can be used on every page.

I turn off the rollover text, save the file, and then switch to ImageReady.
I accessed the Slices menu and selected Create slices from guides. This produced the following slices.

I produced more slices than I needed, so I used the slice selection tool to select several slices and accessed the Slice menu > Combine slices

Next File > Save Optimized as

I needed to create 3 other bottom files. I found that I needed to rename the slice each time so that the image created would not override an earlier bottom file. Here is the final rollovers.

This required 12 images, here is the break down:
2 images for the "huma huma" text
2 images for the "angel fish" text
2 images for the "royal tang" text
2 images for the "maroon tang" text
4 bottom images which are unique to each section.

Here are the images:

If I had sliced thru the lower tab area, I would have needed 32 images.

I would have needed:
2 images for the "huma huma" text in the first section
2 images for the "huma huma" text in the second section
2 images for the "huma huma" text in the third section
2 images for the "huma huma" text in the fourth section
etc....

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