Education

Solutions for

K-12

Higher Education

Design and Film Schools

Students

Adobe Web Tech Curriculum

Unit 10: Intermediate Graphics

Lesson 10.4: Creating Rollover Effects

Rollover Styles

ImageReady includes several styles within the Styles Palette that have pre-defined rollover states. Rollover styles are indicated by a triangle in the upper left corner of the style thumbnail (see Figure 10.4-3).

Figure 10.4-3: ImageReady Styles Palette

To apply a rollover style to an object, follow these steps:

Open ImageReady.
Open the desired image.
Open the Styles Palette.
Select one of the designated rollover styles to be applied to the image. The Web Content tab displays the image and the layer with the applied style (see Figure 10.4-4). Click the access triangle if the style's pre-defined button states are not visible.
Preview the image via the Preview Document button in the Toolbox.
Modify layer states if desired.

Rollover Palette with Normal State shown

Figure 10.4-4: ImageReady's Rollover Style Example

Demonstration or Practice Activity

Using ImageReady, create a new document.
Create a rectangular navigational button with the word "Home" on it.
Select the shape layer and apply one of the pre-defined rollover styles to it. (Alternatively, you could select the text layer and apply the style to it.)
Examine the pre-defined rollover states in the Rollovers tab; click the access triangle if necessary.
Preview the rollover states.
Save the file as nav_rec.psd.