Everything you need to know about making Animated GIFs

#gif #animation #web #images

This is a technical break down of how GIFs work, simplified, and with lots of examples.

How GIFs store frame data

GIFs are restricted to a 256 color palette, so the fewer colors the better. When GIFs are saved and compressed, they only store the pixels on a frame that have changed from the previous frame, the rest of the pixels are just transparent. So if only a part of an image changes then the next frame will be made of entirely transparent pixels except for where the change occurred.

For example, take a look at this amazing animation I made!

As you can see, a GIF would drop most of the information in the 2nd and 3rd frames of this animation. In fact, removing the first frame of a GIF can give you some pretty interesting results.

Here's some more examples.

GIF Masking

So the fewer pixels that change in a GIF, the higher the quality (and much lower file size).

One way of achieving this is to pick the main frame you want to use for all the still/background pixels that don't change. Then duplicate it and put it at the top of your layers. Mask it so that the areas of the image you want to have movement will be transparent in the mask.

For example, in this beautiful GIF, the mask that was created for the top layer would look something like this.

Then just make sure that your mask is always visible when you export out each frame. If you are using the "Animation" tab in Photoshop, set them as key frame.

Compression Artifacts

Banding

The last thing to be aware of is dithering and banding. You only have 256 colors for your GIF (at max), and every frame of the GIF must pull from the same 256 shade palette. So the software creating the GIF will want to know how it will go about crushing the image down from 17 million colors to 256. You'll need to experiment with the settings of your application.

One of the things that can occur in the compression process is what's called "banding", and it can be seen in this unnaturally happy GIF.

Notice how in the girl's hat, you can actually count 4 or 5 shades of red, and clearly see where one shade ends and another starts. Each shade of red bands together and creates a border. In the original image, before compression, this hat showed a smooth gradient.

Dithering

To prevent banding you can use dithering. However, dithering can produce poor results as well. Take a look at the background behind this wonderfully gay asian astronaut.

It's most apparent in the red hand rails. See how the pixels are constantly changing and bouncing around. It occurs across the entire image and in every frame. This lowers the image quality and increases the file size. It can be very difficult to use just the right amount of dithering in just the right parts of the image to create a really nice looking GIF. You typically want dithering around the eyes, mouth, and hair. These are the detail areas, the rest of the image should only have pixel movement when necessary.

Tools

The GIF file format was made in 1987 and finalized in 1989. GIF creation software hasn't really changed much since 1995. So don't be afraid of older software when it comes to GIFs. Try out different programs.

ScreenToGif - Good UX, nice features for many workflows.
Animation Shop 3 - This is still probably the best tool out there for output options and detailed control over how an image is compressed.
Photoshop's "Animation" tab works pretty good. Though prior to CS6 the outputs were pretty bad. Many use Photoshop as a "pre-production" step, creating the frames as individual files, then assembling them in a different tool
GIF Construction Set Professional Hasn't really been updated since 1995 (terrible UX), but it does have a couple of unique features, like being able to see the transparent pixels stored in each frame and edit them directly.
ImageReady was alright, the last version Adobe released was with CS2
Avoid Adobe Fireworks, it's pretty awful for GIFs
Adobe Flash Professional had notoriously horrendous GIF outputs. I haven't used the modern Adobe Animate CC to see if it is any better though.
Adobe After Effects - Same, it had some pretty awful GIF outputs. Much better to export out each frame as a PNG and then import them into something else.