|
This week we are going to take the rollovers in
Imageready to a new level. We are going to create custom
rollovers and look at one of the new options in version 7. The
folks at Adobe have made it so easy to create killer
interactively.
Here is a menu bar I made for an example.
Choose the slice tool
Click and drag to define a slice area.
Continue until you have defined a slice for each button.
When you are finished, select the first button.
This is the one we will work with for the rest of this tutorial.
In the rollover pallette you can see that all
the slices are automatically assigned rollover numbers. These do
not actually become rollovers until a new state is added, but
they are all ready to go and you can see them all at a single
glance.
Click the new state button in the bottom of the
palette.
The over state is appliedabd you will see it
nested in the palette.
To change the rollover, apply a color overlay
layer effect to the button text.
Choose red. The text will now change to red when
the mouse rolls over the slice.
Click the add state again, and we have the
default down state. This will change the image when the mouse is
clicked.
With the color overlay palette still open (I
wish they would introduce these palettes to Photoshop) Choose
blue as the color.
You will see the blue color in the rollover
palette thumbnail.
Here is the document with the blue text.
What if we don't want the color to change until we release the
mouse button?
Easy, just click on the arrow at the top right of the rollover
palette and the drop down menu will appear. Choose Rollover
State Options…
A pop up appears. Select "Click" You will notice
all kinds of option including custom where you can do a little
javascript.
The Name on the thumbnail will now be changed to
"Click State"
You can test your rollovers in the web browser
to check they work correctly.
 |