Rollovers

Rollovers
Skill level: Intermediate
Programs used: Photoshop 6, ImageReady 3

N.B. Netscape Browsers (at the time this tutorial was written) do not yet fully support the single loop GIFs which are used in this tutorial. The rollover examples at the bottom of this page may appear as simple on/off rollovers. Try using a browser such as Microsoft Internet Explorer 5+.

On a site I recently designed, I decided to do something different with the rollovers, as an experiment. I think I'd had just about enough of the usual simple rollovers which changed text or button color. The problem with Flash images is that not every browser supports them, and making a "flash-like" GIF image takes up a lot of file size. I had also thought about using javascript to create a dynamic (nested) rollover, but in the end I opted for this easier alternative.

1. Create a new canvas, 100 x 100 pixels, with a white background. Press [D] to reset your colors palette (your foreground color should now be black!), and now select the custom shape tool

. I'll let you pick any shape you like :) but just drag out a shape to cover a fair area of the canvas. I myself chose the superb looking tick:

2. We need to be able to edit the shape, so I'm going to tell you about rasterizing. Photoshop is a raster-based program; it works with pixel information to create images. However, programs such as Macromedia Flash or Adobe Illustrator are based on vector information. There are certain tools in Photoshop which also use vector components to create shapes and bounding objects, such as the shape tool and the path tool. What rasterizing does is simply to convert vector information into pixel information so that Photoshop can edit the layer. Well, it makes sense to me :) so you can now right-click on the layer in the layers palette and choose to "Rasterize".

3. In the layers palette, duplicate this layer 3 times by left-clicking on it and dragging it into the "Create new layer" button

3 times. For convenience's sake, I also renamed the layers, because I'll be referring to them later.

4. Change the opacity of each layer as follows:

Frame 1 - 75%
Frame 2 - 50%
Frame 3 - 25%
Frame 4 - 0%

And now hide all of the frame layers by clicking on the eye

next to each layer.

5. You can now load this file into ImageReady, but before you do, read on. Adobe Photoshop takes up a lot of RAM; by default, it uses 50% of all available RAM. If you are using a complex photoshop file with many layers (as in 100+), it will take the computer a long while to load up ImageReady and get the file ready for use. I'd suggest closing down Photoshop first to free up some memory and then opening ImageReady. But this file is only 5 frames, so go ahead and press the "Jump to ImageReady" button

. It's the one right at the bottom of the tools palette.

6. Now that you're in ImageReady, you can proceed to make your GIF file. Down on the bottom left of the screen, you should find the animation palette. Click on the "Duplicate current frame" button

3 times so there are a total of four frames.

7. Activate the first frame and click on the place where the eye would be in frame 1 of the layers palette. This will make the layer "frame 1" visible in the first frame of the GIF. Now activate the second frame, and make the layer "frame 2" visible. Repeat for third and fourth frames, each with their own layer visible.

8. Now, in the above image, can you see that button in the bottom left hand corner which says "Forever"? Click on it and change the value to "Once".

9. Now you can save the image by selecting the "File >Save Optimized As" menu command, but don't close it.

10. Now activate the first frame, and change the opacity of the layer "Frame 1" to 25%. The "Frame 2" layer of the second frame is alredy set at 50%, so we can leave that alone. Instead, activate the third frame, and change the opacity of the layer "Frame 3" to 75%. Lastly, activate the fourth frame, and change the opacity of the layer "Frame 4" to 100%.

11. You can save this by using the "File >Save Optimized As" menu command but make sure you don't overwrite your other GIF file. Roll your cursor over the image below to see the results.

As you can see, for the purposes of this tutorial, I didn't use too many frames, and so the animation is not very smooth. Using more frames will help to create a more realistic animation. Experimenting with this technique, I also managed to come up with these effects:

You can also go further, and combine the simple text rollovers with the fade rollovers to create amazing rollover effects:

Rollovers Skill level: Intermediate Programs used: Photoshop 6, ImageReady 3

Rollovers
Skill level: Intermediate
Programs used: Photoshop 6, ImageReady 3