RSS Feed
Sponsored by the National Association of Photoshop Professionals. Learn More
Imageready Rollover Palette Part 2
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
Photoshop Tutorials
Design Effects
Corey shows how to use the luminosity of an image to create a cool design effect and spice up your simple photos.
Stylized Comic Book Effect
Using this effect, you can transform anyone into a comic book character with a halftone, saturated look.
Text Shape Layers
Converting text into shapes allows you to distort the text as you like while retaining straight, clean edges.
-
Stylized Background
This week, Corey is inspired by a Hollywood poster to figure out how to create a colorful background pattern.
-
3D Design
Using 3D tools in Photoshop CS4 Extended to create a logo element.
-
Bullet Hole Brushes
Here we will uses a series of custom shapes to create a bullet hole on a brush.
-
Displaced Effects
Here is a quick and easy way to use displacement maps to create a cool grunge look.
-
Animate a Flying Bird using Illustrator and Flash, Part 1
In this two-part tutorial, J. Schuh demonstrates how to animate a flying bird using Illustrator and Flash. -
Animate a Flying Bird using Illustrator and Flash, Part 2
In this two-part tutorial, J. Schuh demonstrates how to animate a flying bird using Illustrator and Flash. -
Center Align CSS-Based Layout
Geoff Blake uses Dreamweaver to center align his css-based webpage design. -
Soundbooth Audio Files with Flash Video
Soundbooth is a useful tool for creating audio for Flash video. Soundbooth's preset scores can be set to length and easily added to Flash movie projects.
The Clone Source Panel
This panel has a couple of neat features for people who spend a lot of time in cloning. You can now set up a series of preset areas in the Clone Stamp tool. Simply click on one of the icons at the top of the Clone Source panel and Option-click (PC: Alt-click) on a point. That will save that location to the first icon. Click on the second icon and do the same thing. Now you can save a series of location points and go back by just clicking on the icon.
