How to Make an Animated GIF

(Or at least how I make animated GIFs.)

If you follow me on Twitter (I apologize if you do and you’re not really into baseball), you’ve probably noticed that I am rather fond of the good ol’ animated GIF. Who doesn’t love a good animated GIF? Especially if you’re on the internet.

Occasionally I’ve had people ask me how I make animated GIFs. Because it’s something that’s a lot easier to explain in more than 140 characters (some things just aren’t meant to be explained on Twitter), I thought I’d write a blog post about it. (Exciting! Thrilling! Hold on to your hats!)

So you’ve found a video that you’d like to turn into a GIF. First you’ll need to save that video to your computer. I use a Mac. Macs come with Quicktime. Quicktime comes with the ability to make screen recordings. (I used to do this entire step in a much more complicated way. Once I figured out Quicktime did screen recordings, my whole world changed. Well, not really, but things got a lot easier and faster. I’ve yet to find something as quick and easy for screen recordings as Quicktime, especially on my Quicktime-less PC.)

As my example, let’s make a GIF of Madison Bumgarner tipping his baseball cap like a cowboy hat at the All-Star Game last night.

Load up the video in your browser and open Quicktime. Select New Screen Recording.

Screen Shot 2014-07-16 at 8.36.27 PM

Once you click New Screen Recording, it gives you the option to record your entire screen or select a section of the screen to record. I usually choose to record the portion of the screen that the video is on. Once you’ve got that set, hit play on your video.

When your video finishes or you’ve played the part that you want to use in your GIF, stop the recording.

Screen Shot 2014-07-16 at 8.37.51 PM

Make sure you save the recording.

Screen Shot 2014-07-16 at 8.38.07 PM

Now it’s time for the real GIF making magic.

I make all of my GIFs in Photoshop, so I don’t know if there are other similar programs that you can edit images and make GIFs in. There might be. Let me know in the comments if you’re an animated GIF maker and you use another program. I’m curious! In this case, we’re going to pretend that you’re using Photoshop.

Open your video in Photoshop.

Screen Shot 2014-07-16 at 8.41.08 PM

(Yeah, my movies folder is full of baseball clips with super descriptive names.)

Once the video is open, move the sliders on the Photoshop timeline to select the portion of the video that you want to use in your GIF.

Screen Shot 2014-07-16 at 8.42.03 PM

Unless you want a gigantic GIF file, you’ll have to adjust the frame rate of your GIF. To do this, you’ll have to click on Document Settings. (You can find this if you click on the top right corner of the timeline.)

Screen Shot 2014-07-16 at 8.42.12 PM

I like my GIFs to have enough frames that they still move smoothly, but I also try to keep the file size as low as I can. If I’m making a longer clip into a GIF, I’ll probably use less frames. If it’s a shorter clip, I’ll use more frames. I usually keep the number between 10 to 15 frames. For this GIF, I’ll use 15 frames.

Screen Shot 2014-07-16 at 8.42.25 PM

Click OK.

Now you’ll want to adjust the size of your GIF. (Unless you want a huge GIF.) You can also do this when you’re saving the GIF, but I’ve found my computer likes me better if I adjust the size before saving.

Screen Shot 2014-07-16 at 8.42.39 PM

Choose your image size based on where you’ll be using/uploading the GIF later. When I used to upload GIFs to Tumblr, I had to keep them to under a megabyte, so I’d make them smaller. Now I usually use Gfycat (which is pretty awesome), so I can use bigger files. In this case I made the GIF 500 pixels wide.

Screen Shot 2014-07-16 at 8.42.49 PM

Photoshop will tell you that your video layer will need to be converted to a smart object layer. Go ahead and convert it.

Screen Shot 2014-07-16 at 8.42.54 PM

We’re almost there! It’s time to save your GIF.

Screen Shot 2014-07-16 at 8.43.04 PM

You can see the settings I use here. You can copy these or tinker around with them and come up with the ones you like best. (I don’t know why I use Adaptive and Pattern for GIFs other than I like the way the GIFs look when I use those settings. If you play around with those settings, you’ll see that your file size will also change.) You can also adjust the size of your image here, too. But like I said my computer tends to like me better if I do that before the Save For Web stage. Make sure you set your GIF to loop forever.

Screen Shot 2014-07-16 at 8.43.36 PM

Once you’ve got everything set the way you want, click save. Your GIF is now ready to plaster all over the internet!


Bumgarner GIF


no comments
Add a comment...

Your email is never published or shared. Required fields are marked *



On Instagram

On Twitter

Shop now: