Creating Animated Web Graphics

The GIF image format allows you to create animated images that can be used to add some motion and spice up any web page. Animated GIF images also transfer much faster than most video or multimedia files. The Paint Shop Pro image editor originally included a module called Animation Shop, which was designed especially for creating web page GIF animations. This module is now an entirely separate product also called Animation Shop that is offered by Corel, which acquired Paint Shop Pro from its previous manufacturer, Jasc. You can download a trial version of Animation Shop from the Corel web site at http://www.corel.com/. A few other GIF animation programs are available, including both freeware and advanced commercial software packages. Animation Shop offers a solid mix of great features, ease of use, and low price.

The first step in creating a GIF animation is to create a series of images to be displayed one after the other. Each of these images is called a frame. (By the way, this use of the word frame has nothing whatsoever to do with the frames you'll learn about in Hour 16, "Multipage Layout with Frames.") You can use any graphics software you like to make the images, though Paint Shop Pro is an obvious choice if you plan on using Animation Shop to put the animation together.

If you know how to use the Paint Shop Pro (or any other advanced graphics software) Layers feature, you'll find that creating animation frames is easier because you can easily turn parts of a picture on and off to make variations or move layers to simulate motion. Don't fret, however; layer manipulation is a bit beyond this discussion at the moment. You can easily make very effective animations by copying an ordinary one-layer image and painting on some variations, or moving some parts of it around to make the next frame.

When you have your animation's individual frames ready, use Colors, Decrease Color Depth to limit the frames to 256 or 16 colors, and then save each of them as a separate GIF file in your image editor.