Tutorial: Making an Animated .gif

Per a request on Twitter, I’m going to put together a simple tutorial on creating an animated .gif.

You need two programs:

  • A program to record your screen area
  • A program to convert the video into a .gif

I use HyperCam and Adobe ImageReady, respectively. There are many programs that will do the same job, often better, but I use those out of familiarity. ImageReady is discontinued software, so you will have to find something more current most likely. My instructions will be specific to these programs, but likely have a lot of applicability no matter what you’re using.

You need to set up your options in HyperCam. I’ll go through the various tabs and tell you what to focus on.

Screen Area

The only thing I focus on here is “Select Region”. This allows you to drag a box over the screen area you want to record. So if I wanted to record my entire desktop, I’d click in the very top left corner and then again in the very bottom right corner. Because I tend to record from MLB.tv, I just drag a box around the screen area in the smaller browser window.

Hot Keys

Again, only one thing I focus on here, which is the Start/Stop hotkey. I set it to F2, but you can change it to whatever is most convenient for you.

AVI File

Set up where you want your video files to go when you’re done recording. I’m lazy, so I send everything to my desktop (C:Users”UserName”Desktop).

There are some technical options here. Generally, you won’t need to touch them, but my settings are as follows:

  • Rate in frames per second, Record: 20; Playback: 20
  • Cursor / Full frame capture ratio: 1
  • Key frame every 100 frames
  • Video compressor: Full frames (uncompressed)
  • Frame compression quality: 85%

Sound

Ignore this, since animated .gifs don’t have sound.

Options

You can ignore this as well.

License

Ignore.

The next step is to record our video. So get whatever you want to record ready. Start your video, then start recording by pressing your hotkey. When you feel you’ve captured everything, press your hotkey again to stop. Your video is recorded and went into the directory you specified above.

Now, you need to convert the video into an animated .gif file. Open your video editor of choice and select your video file. I like to resize it down to 500 pixels wide (or smaller if it is a long .gif). You should be able to edit each frame individually. I tend to delete frames at the beginning and end of the .gif to cut down on the file size, so the video captures only what you’re trying to display. For instance, if I recorded a few seconds of a pitcher getting set before pitching, I will delete those frames.

Save the file as a .gif. In ImageReady, this is achieved by going to File > Save Optimized As…

(Note: There are some specific AVI-to-.gif software and web-based applications. I have not used them, but advise caution nonetheless.)

Finally, you need to upload your .gif file. If it is small, you can use Imgur or Tinypic. I prefer to use Picasa Web since there isn’t a cap (or at least not one I’ve hit yet).

Here’s a video illustrating how I make an animated .gif in less than two minutes:

I’m sure there are some different ways to achieve the same goal, but this is the method I use. If you have alternative methods, feel free to post them in the comments.

Leave a Reply

*

2 comments

  1. Ian

    April 05, 2012 08:23 PM

    Thanks very much for this, Bill! I tried this method on my desktop and it didn’t work very well (because it’s a hunk of junk from 2005). Then when I used Hypercam on my laptop, it worked perfectly.

    For those who don’t have Imageready but do have Photoshop CS3, you can just import as video as frames, and then save as Animated GIF.

Next ArticleNightmare Scenario