gifs

Here's a quick tutorial on creating animated gifs.

What is an animated gif? Simply put, it's a series of gifs which have been "stacked" into a single gif, with information on how they should be loaded (how fast, whether to start again when you get to the end, etc.). This completed gif shows up as a single object which is referred to in the HTML coding in the same way (ie. <img src="gifname.gif">). Netscape will then be able to interpret it and make it "move." The trick is more in coming up with the idea and executing the art, than in actually creating the code.

Here's what you need to do.

1. Get a copy of "GifBuilder." It's the best. In fact, I have it for you right here. Click to download. You can also visit the site of the creator of GifBuilder.
2. Get a Mac. If that's not an option, you'll have to change number 1 above, 'cause "GifBuilder" is for the Mac, or alternately, you can check out "Gif Animation on the WWW" -- a good site with more detailed tutorials, and links to Windows-based software.
3. Use any drawing or paint program (I prefer Photoshop for all graphics work).
4. Create an series of images and save them individually.
5. Drag them all into GifBuilder and set duration time for each one, and whether you want it looped, transparent, interlaced, etc., tell it to build the gif, and voila -- you have a single gif file which, if put into a web page and viewed by Netscape 2.0, will be animated!
6. After you've created all your animated gifs, get rid of most of them. An important point -- Don't overuse animated gifs. They can become obnoxious very quickly. Try staying on this page for a long time, and you'll see what I mean.

The animation above is actually 8 separate animated gifs (7 really, the A is the same file) put next to each other. I could have made one gif and had the shifting colors, but I enjoyed seeing how this would work, because they each follow their own pattern.

Here are some other animated gifs I've created with a brief description of how they were made, along with the opportunity to see them in context on their actual pages:

• A theatre marquee with moving lights across the top -- great for a calendar of events. Full details on how the image was made. Good starting point.
• The words "Freedom of Expression" gradually eaten away in a non-looped animated gif.
• A logo from the Illinois Shakespeare Festival pages, set up with a nice subtle shifting colors effect.
• A couple of other animations I have created.