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.

That’s all we have time for this week. I hope you enjoyed our little venture into the rollover palette. Next week we will look at animations in the new rollover palette and a couple of the new options. Until then, see you at the café www.photoshopcafe.com

No Comments

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

Name (required)

Mail (will not be published) (required)

Website