I get a handful of messages every month from users at the Something Awful Forums asking how I make all the animated GIFs that I post throughout the site. With all of the continued interes, I thought I'd put together a basic step-by-step guide to creating GIFs from video files.
I use a combination of two programs to make my GIFs. There are other ways and other software you can use to animate the files, but this is how I learned.
- First, you must download and install VirtualDub (available here for free) to be able to capture individual frames from your video file.
- The second thing you'll need is Adobe ImageReady. This program is bundled with every edition of Adobe Photoshop up until version "CS3" (released in Spring 2007). In "CS3" and "CS4" (released in October 2008), ImageReady was absorbed into Photoshop, creating different functionality for the program. This tutorial was written for CS2 users, but I'll eventually get around to re-writing it for the more current software.
Animated GIFs are just a set of still images played in sequence at a certain rate. The first thing we have to do is to pick a select portion of video to turn into this series of images before they can be animated in to a GIF.
Step 1: Open VirtualDub.
Very exciting. Once you have the program open, go to FILE > OPEN VIDEO FILE... to select the video you would like to capture.
You may see the following message when your file opens. You can simply hit OK; it just indicates an issue with the audio stream. Since your animated GIF won't have any audio, it's not a problem for us.
Step 2: Adjust the frame rate.
By default, VirtualDub will capture every single frame in the select portion of video you choose. This will give you a lot more images than you need. For general GIF making, I recommend that you adjust the frame capture rate.
To do this, go to VIDEO > FRAME RATE... and choose "Process Every Other Frame (Decimate by 2)". Then hit OK.
Step 3: How to Choose What to Capture.
Using the video controls, pause the playback where you would like the frame capture to begin. Then press the first circled button below.
Then, continue playback until you've reached the end of your desired segment. Press the second circled button below. The range between your "Start" and "End" points should now be highlighted on the playback bar. If you've selected a very short segment, it may be hard to see.
Step 4: How To Export Your Frames
Now that we've picked what we want to capture, it's time to actually capture it! Go to FILE > SAVE IMAGE SEQUENCE... to save your frames.
You must choose your target folder, and also a name for your set of frames. If you leave "Filename Prefix" blank, VirtualDub will simply number your frames sequentially.
If this is your first use of VirtualDub, make sure your "Output Format" is set to JPG!
Press OK, and your specified folder will now look like the folder below. You may now close VirtualDub.
This is where Adobe ImageReady comes into play. If you don't have ImageReady, you can use similar programs like Macromedia Fireworks, etc., but I don't know how they work, so don't ask me! This is the part where people seem to have the most trouble getting colors, timing, and file size to where they want, so I'll touch on all three topics below.
Step 1: Importing Your Frames.
The first thing you have to do is get all of those frames you've captured into ImageReady. To to this, go to FILE > IMPORT > FOLDER AS FRAMES... and browse to the folder where your frames are saved.
Step 2: The ImageReady Environment.
There are four basic windows we'll be using. The first is the file itself: that's the image. The "Animation" panel controls your frames and the animation's timing; "Layers" is used for editing specific frames; and "Optimize" lets you control the image quality (number of colors, transparency, etc.).
Step 3: Hitting a Target File Size.
Here on the Something Awful Forms, the staff prefers inline GIFs to be no larger than 500k-600k in size to prevent those with slower Internet connections to have their tubes all filled up. So we have to downgrade image quality to meet that need.
To see what your actual GIF will look like, click on the Optimized tab on your image panel. On the lower status bar, you'll see the current GIF file size.
There are three basic ways to cut down your image's file size.
- Make the picture smaller.
You can always just reduce the actual image dimensions to a smaller height and width. Choose IMAGE > IMAGE SIZE... to pick a smaller set of dimensions. Start with a "medium" size, because you want to give yourself room to go smaller (without losing visibility) if necessary.
- Reduce the number of colors.
GIFs don't really need to be at the default color setting (256 colors) to still look good. Most images still look decent between 64 and 128 colors; I've found that a setting of 90 colors (as shown below) is an acceptable compromise.
The settings shown below are my personal default, so it's always a good place to start. Remember: when the color levels are lowered, moving images look better than still images.
- Reduce the number of frames in the animation.
Do you really need every frame you captured? Can you cut out some frames that appear to be nearly identical? Can your GIF be split into two separate files? Must you have every single frame of that ten-second explosion?
The Animation window allows you to modify your frames. You can also change the length of time a frame stays displayed (the default is "0 Seconds," or constant play) if you have certain frames you want featured during playback.
The frames are usually the last thing I work on to bring down that file size. You just have to know that you can't always get exactly what you want if you are trying to reach a target size.
Once your file size is to your liking (as you can see, this GIF is now 565.3k), it's time to export those edited frames as an animated GIF file! This step is very simple. Choose FILE > SAVE OPTIMIZED AS..., and save the GIF wherever you'd like!
After capturing, exporting, importing, resizing, de-coloring, and frame-adjusting my source file, I end up with this as my final (acceptably-sized) GIF. I hope this helps you all understand my process, and is clear and easy to follow. Feel free to shoot me an email with any questions!
