More Animated Gifs

In this example, there are actually two images. Since an animated gif is slightly larger than a static one (due to the extra information of the "stacked" images), I separated this into the top bar and the portion below.

Here's one of the source images for the top bar:

You should be able to quickly see that I only needed three source images to create the animation. If you number the lights from left to right, you'll get:

• Image 1: Lights 1, 2, 4, 5, 7, 8, 10, 11, 13 are "on"
• Image 2: Lights 2, 3, 5, 6, 8, 9, 11, 12 are "on"
• Image 3: Lights 1, 3, 4, 6, 7, 9, 10, 12, 13 are "on"

If you loop these three images, you get the illusion of lights marching across.

This is how I created the image in Photoshop:

1. Start a new rectangular file, fill it with red, then select all and stroke with black (border).
2. Set the selection marquee as a fixed circle (about 6 pixels?) and select a circle in each place you want a light, fill with grey, and stroke with black (2 pixels). This creates the "light off" look.
3. Once you have all the lights done the way you want them to look when they're off, save the file as a "master" file which you will use as your source when you create each of the three images.
4. Using a copy of the "master", "turn on" the lights for the first image. I did this by making the selection marquee fixed (around 12 pixels) with heavy feathering (maybe 4 pixels), selecting around the "off" light and applying a lens flare filter. Experiment with the settings until you get something you like. Then just make sure you use the same settings consistently.
5. Save the file as a gif.
6. Do the same thing for creating the other two images.
7. Bring all three finished images into GifBuilder, set the delay for around 30/100 of a second, select "loop" and have it build the gif. Put the gif in your page and see how it looks. If you don't like the timing or other aspects, go through this step again until you're satisfied.

It's that simple.