How Do I Make An Animated GIF?
WHAT IS AN ANIMATED GIF (GIF89A Format)?
An animated gif is simply a .GIF file that is composed of 2 or more individual .gif images or FRAMES. Each frame is displayed for a set time and a set number of cycles. (the times and number of cycles are completely controllable by the creator.) The changes in the frames are what gives the graphic the sense of motion. There are no additional plugins or enhancements to a web browser necessary to see an animated gif.
Note: Not all computers and browsers will display the animation the same. The animation may play slower or faster depending on your processor speed and the colors may appear different due to type of computer or screen resolution.
HOW TO MAKE YOUR OWN ANIMATED GIFS?
You will need two programs to create your animation. First of all you need a program to create the individual frames. I normally use a 3D animation program called Lightwave 3D by Newtek, but any graphics program will do (Paint Shop Pro, Corel, Photoshop, etc.) Secondly you will need a software tool that will allow you to assemble your individual frames into an animation. There are several gif assembly programs available, but one of my favorites is Gif Movie Gear from Gamani Productions. In this tutorial we will be using Gif Movie Gear to assemble and optimize the graphics but the steps would be pretty much the same for other software packages.
OK, Lets get started.
Make the individual frames.
The biggest thing here is to remember less is more. You don't want to cram too much needless information into an animation. The fewer images you use, the better. If you can accomplish the desired effect using only two frames, great! I designed this penguin to open his mouth and blink using just 4 frames.
The frames for an animation like this could be created in a program such as PhotoShop, Paint Shop Pro or any other drawing program.
The graphics at the Animation Factory are sort of unique since we use a 3D animation program to create these graphics. Below is a series of frames from a frog animation, I created a while back. Instead of drawing the images by hand, I created the object in a 3D program and used the program to animate the image.
There are several good 3D programs available, ranging in price from $30-$10,000. At Animation Factory, we mostly use a higher-end 3D program called Lightwave 3D (www.newtek.com).
When you are done making the individual images, I have found that saving the frames as a bit mapped file (.BMP) seem to make the cleanest images, but you can save them as .GIF or .JPG images also. A good gif assembly program will allow you to choose from many different file formats to create your animation.
Once you have the individual frames created and saved, you are ready to assemble them.
Assemble your frames.
Next you will need to use your animated gif assembly program. I've used several programs, Gif Movie Gear is a good one and so is Ulead's Gif Animator. A trial version of Gif Movie Gear is available at www.gamani.com.
Here we can adjust the time each frame will display, how each frame is displayed, and the number of repetitions or loops the animation will play.
Load all of the individual frames into the program. At this time you can also adjust the number of times the animation will play. Any number of times is available, from once to infinity. Normally we just let the animation loop infinitely but there are times when you would like your viewer to be left looking at the last frame. (In Gif Movie Gear, set looping to 0, for continued play.)
Gif Movie Gear
Once the images are loaded make sure they are in the order you want them. The animated gif will play only in one direction (there is no way to make it play backward or in a 'ping pong' method.)
Next you will want to adjust the FRAME DELAY for each frame. You can make each frame as slow or as fast as you want. (Note: an animation will not play the same on all computers. Older, slower machines will play much slower than newer machines with big processors. Keep this in mind if you are creating an animation on an older machine.)
On this animation, I used frame delays of 150, 50, 15, 50 (1/100's of a second) for each frame. Note the third frame has a really short delay (15) so the eyes will appear to blink.
Be sure to preview your animation, to make sure you have the timing right.
This is a complicated subject to explain. Frame removal deals with how an animation displays each frame. This is an important selection depending if you are working with transparent gifs or graphics with a solid background. (A transparent gif will allow you to see the background through a selected area of the graphic.) You have the option of telling the web browser how to remove each frame after it is displayed. We will discuss these settings and transparent gifs later on.
Since I am making a graphic for use on a white background, I will leave the frame removal set to 'Leave Alone.' (Note: when optimized, this setting normally will result in a much smaller file size, but will normally not work with a gif designed to be transparent.)
The Completed Animation
If you are happy with the results, save the animation. We are ready to move to the final step, optimizing the animation.