In general animated gifs should be avoided, however in some special circumstances they can help convey information much more concisely than a static image. Many commercial graphics programs will create animated gifs, however here are step by step directions for creating an animated gif using GIMP, a freely available open source graphics program.
- Create a series of images that will compose your animation, preferably in bmp or png format (jpg images have small artifacts that cause each image to be slightly different from frame to frame, making it much larger than it needs to be when optimizing the gif frames - information that is the same is removed from later frames instead of being duplicated with lossless formats like bmp and png).
- Open the first image with GIMP. If you don't have a Layers panel open, press CTL + L.
- Drag and drop the rest of the images onto the opened image. You should now see a layer for each image in the Layers panel. Drag the layers one by one to order them from last image in the animation at the top, to the first image in the animation at the bottom (all in the Layers panel). (To do this click on a layer, then while holding the left mouse button drag it up or down, and release the mouse click when it's in the desired order.)
- Go back to the panel with the main image and under the menu select Filters, then Animation, then Optimize (for GIF). This examines each layer and removes any pixels that are the same as in the previous image and makes that area transparent (becomes checkered in the Layers Panel).
- Under the menu, select File, then Save As, enter a name for the file.
- Change where it will be saved if desired.
- Click the + button by Select File Type and select GIF and then click Save.
- A dialog will open with details specific to Gifs. Select Save as Animation then click Export.
- Check Loop forever if you want the animation to display over and over, uncheck if you want it to animate once, then stop.
- You can change how fast or slow the animation occurs by altering the Delay between frames (in milliseconds, 1000 = 1 second). Be sure to also check Use delay entered above for all frames.
- Click Save.
- Double check the size of your gif. If it's too large, make the images you start with smaller, use fewer frames, or try to minimize frame differences. For example breathing in game can result in slight differences from frame to frame that appear as speckling of individual pixels in areas that don't look like they should be changing. Clean them up by using the select tool to go around those areas and delete them. (To work on a specific layer, click the eye icons next to all the other layers until just the desired layer has an eye icon next to it. Zooming in can help for detail work (use the drop down menu at the bottom of the image panel).
- Note that some browsers allow users to turn off animations if they find them annoying so be sure that the first image is one that would at least make sense (not blank, etc).