Happy 25th Birthday, GIF: How to Make an Animated GIF

The GIF, the workhorse image format of the web, is 25 years old today. Once declared dead—the format only supports 256 colors and the file sizes tend to be enormous in comparison to JPGs and PNGs—the recent explosion of animated GIF blogs proves that the GIF is still very much alive.

Though I snicker when I overhear someone ask “How do you make those tiny movies?” I also have to admit that most GIFs do seem to emerge on the internet as if by magic. But if you’ve got Photoshop (and what designer doesn’t?), DIY GIFs are easy. So here’s a quick guide to making animated GIFs from images or movie files.

How to make an animated GIF from static images

Using Photoshop, open up all the images you want to combine into an animated GIF. (You can work with any image format you like.) Make sure they’re all the same size; if not, resize them. I’m using a series of scanned photos from college of my friend Andrew talking to a sock puppet.

Next, set the images up as layers within one PSD file. Open up the Animation (Frames) palette under Window>Animation and set the frame to show only the image you want visible first. (Do this by removing layer visibility in the layers panel for all but the image you need.)

Specify the length of time you want the frame to appear. (You can pick from 0.1 seconds to 10 seconds, or any other time you specify.) Then click the “duplicate selected frames” button in the Animation panel to create a new frame of the same time length, and adjust the layer visibility to add the next frame of your animation.

Be sure to change the looping options setting in the bottom left of the Animation panel from Once to Forever. Because GIFs are forever.

When you’ve set up all the frames, click Save for Web and Devices and save the image as a GIF. (Select the number of colors you want in the Save for Web panel—doing less than 128 will give it an old-timey-internet feel; going for all 256 colors will be most lifelike.)

And you’re finished! Below are my final GIFs—one in 256-color mode, and one in four-color mode.

How to make a GIF from a video

I’m using Photoshop CS5, so I had to open Photoshop in 32-bit mode (see this video if you need help with that) to be able to access the Import Video Frames to Layers feature.

Select the video you want to import (it should be in MOV, AVI, MPG, or MP4 format). You can choose a specific range or import the whole thing, and you can limit the number of frames used to keep the file size down. From there, you just open up the Animation panel and proceed as you would with a static image with the instructions above!

If you want to change the speed of the images, just highlight all the frames in the Animation panel and click on any frame’s time specification and it’ll be applied to all frames. You can also add in some text if you want. Make a new layer for the text, bring to front, and make it visible in all frames.

Here’s a GIF I made from my “Sh!t Designers Say” video: Who needs 800 DPI?

Free GIF makers

If you can’t be bothered to mess around with Photoshop layers, try these free GIF makers to create animations:

One thought on “Happy 25th Birthday, GIF: How to Make an Animated GIF

  1. Pingback: Web Design News Roundup: June 15 from HOW Interactive Design | HOW Magazine Blog