How Do I Make An Animated GIF?
Optimize Your Animation.
Next you should optimize your graphic for use on the net. Much of the information in your frames is probably the same and can be removed from all but the first frame. (Think about Disney cell animation; animators don't redraw the background for each frame because it just takes too much time. They simply draw the background once and then place the characters over the top of it. The same is true of gif animations. There is no need to redraw the background each time and if you can eliminate that information, you save an incredible amount of file size.)
Most programs come with a way to optimize your files. Gif Movie Gear is no exception. For the smallest possible animations in Gif Movie Gear, select as many options as possible. (In some rare instances, a highly optimized animation may not play properly in some older browsers.)
Gif Movie Gear's Optimization Panel
You can also even further reduce an animation by reducing the number of colors the animation uses. This will also allow you to choose the number of colors the animation has (the fewer colors the smaller the animation). After the Optimization Wizard has run, you will be presented with the old file size, the new 'optimized' file size and the ability to preview your new lightweight animation before saving. If you don't like what you see, there is also the option of trying again with new settings.
Gif Movie Gear's Color Reduction Panel
Let's look at the differences between an un-optimized and an optimized gif. Can you see any differences? It's very hard to tell the difference, but look at the difference in file sizes! The optimized graphic will download twice as fast. Remember, when creating an animation, take time to optimize and reduce colors. Your visitors will thank you for it.
Un-optimized 256 Color
Optimized - 32 Color
If you like what you see and the file size seems reasonable, save your completed, optimized animation. It is all ready to be uploaded and used on the WWW.
Many people ask how to make a gif transparent so it will appear to float over or be a part of a textured background or a different color. It can be a difficult, if not impossible, process to convert an already optimized graphic to a transparent background.
A few things to keep in mind when making a transparent graphic:
1. You need to un-optimize the frames, if they are already optimized. (That's right, you will to return the animation to its original state, before you try to manipulate it.) A good on-line tool to do this is located at www.gifworks.com
2. The animation needs to be on a solid color background such as white, black, grey etc.. We will be setting this color to transparent. (Note: When making a graphic to be used as a transparent gif, try not to use the background color in your image. If you do, you run the risk that unwanted portions of your image will become transparent.)
Re-load the frames of your animation and let's start. I'm going to make our little penguin friend to work as a transparent gif.
1st Step: Set the transparent color using the select transparent option. You will need to set every frame's background to transparent.
2nd Step: Set the Frame Removal type:
For transparent gifs, you normally cannot use the default setting of 'leave alone' for the frame removal. You will need to use 'restore background.' You will probably notice 'trails' or remnants of the previous frame left behind as the animation plays if you have chosen the wrong removal setting.
3rd Step: Optimize your Graphic:
Always try to optimize your graphic as much as you can. Transparent graphics normally do not optimize as well as non-transparent graphics.
Here is what I ended up with after I made the background transparent and tried to optimize it as best I could.
I'm not a big fan of transparent gifs. To me, they don't look as good, nor do they optimize as well as non-transparent images. But sometimes they are the only way to achieve the desired effect.