Note: You can print this (or any page) from your web browser by selecting File/Print. This information is provided for your personal use only and is not to be redistributed without permission of the author.

This tutorial will teach you how to create a small cat's eye graphic, then add animation. This tutorial will teach you how to use the Selection and Gradient tools in your paint program. This tutorial uses Photoshop, but you could also create the image using Corel PhotoPaint or PaintShop Pro version 4.

Photoshop screenshot showing the gradient tool 1. In Photoshop, select File/ New. Fill the background with black. Use the Marquee tool to create an ellipse. In Photoshop 4, you'll find the Eliptical Marquee tool by click and holding on the Rectangular Marquee tool.

You can also change the setting of the Marquee tool from rectangular to elliptical by double-clicking on the Marquee tool, which will open the Option pallete for the Selection tool. Then change the Shape setting to Elliptical. Select a dark color for the background color, and a light color for the foreground color. In this example, I've used yellow and dark orange, but you can use a light and dark blue, gray, green, red...use your imagination!

Select the gradient tool, and doubleclick on the gradient icon to open the Options Palette. Make sure the type of gradient is set to Radial, and the Gradient type to Foreground to Background. This creates a circular blend between your foreground and background colors. Drag the Gradient tool to fill the elliptical selection.

Gradient Fill 2. Choose the Marquee tool, and create a narrow ellipse in the center of the gradient ellipse. Fill this selection with black to create the cat's pupil.

The narrow ellipse 3. Create a very small elliptical selection at the upper left edge of the black ellipse. Fill this with white. This will create a highlight.

4. Select Mode/Indexed, or Image/Mode/Indexed in Photoshop 4, and save this as a gif file.

5. Create a second image the same size (you can check in Image/Image Size to find the size of your first image) as the cat's eye gif you created. Fill this image with black, select Mode/Indexed, and save this file as a gif. This will be the second frame of your gif animation

To Create the Animation
Note: You'll need Netscape 2.0 or higher or Internet Explorer 3.0 or higher to view Gif Animations

1. To create the animation, you'll need Gif Construction Set (for Windows) or GifBuilder (for the Mac). Create a new file. In Gif Construction Set, select Insert Loop. Select Insert Control Block, then select Edit. Set the Delay to 30.

2. Select Insert Image, and select the Cat's Eye gif. Select Insert/ Control Block, then select Edit. Set the Delay to 40.

3. Select Insert/Image, and select the black.gif. Select Insert/Control Block, then Edit and set the Delay to 40. Select Insert/Image, and select the Cat's Eye gif again. Save your image. You can preview the animation by selecting View in Gif Construction Set, or by opening the gif in Netscape or Internet Explorer. Note that the timing you see in Gif Construction Set may be different than the timing the animation displays in the web browser.

Home | Guestbook | Tip Menu | Tip #19