JavaScript Rollovers
in Photoshop 6
Home
> Build
> Software > Photoshop
by Don Herion
(1)
(2) (3)
Scene
from the classic movie, The Treasure of the Sierra Madre.
EXT.
Near gold mine
Fred C. Dobbs confronts the bandit nicknamed
Gold Hat.
DOBBS: Well, I think we need to see your JavaScript
before we'll let you do our Web site rollovers.
GOLD HAT
(grins through blackened teeth)
JavaScript? We ain't got no JavaScript. We
don't need no JavaScript. I don't have to know any stinking JavaScript to do Web
site rollovers!
Okay, okay, the scene does actually plays a
little differently than that. But Gold Hat is right, using Photoshop and Image
Ready, we JavaScript deficient, blackened teeth Web site designers do not need
to know JavaScript to do image rollover effects. Old Gold Hat shows you how it's
done.
STEP 1
Okay, you stupid gringo Web designers
this is what you have to do .... sorry I got carried away. The first task is to
create a simple column of buttons, each on its own layer. In my case I created
4 buttons on a black background (you can use any color or go transparent). Each
button consists of two parts, a white rectangle and some text. I save this file
as buttons.psd.
 |
| Original .PSD file |
STEP
2
The next step is to slice the image up into 4 separate buttons. I select
my first rectangle shape layer (Layer 1 in the above example) and then go - Layer
- New Layer Based Slice. This creates a slice around the white rectangle. I do
the same for the other 3 buttons. As you can see by the example below my image
is now sliced into 11 different parts. My goal is to create rollovers for slices,
03, 06, 08, and 10.
 |
| Image sliced by layers |
Now
I save the file again. Then I must export the file to Image Ready to create the
rollover effects. Simply click the icon at the bottom of the toolbar.
