Tutorials

How to Make an Animated GIF from Any Video Clip

30
Comments

We all love GIFs, those little bite-sized browser-friendly animations. Here’s how you can easily turn your video content into an optimized GIF using Adobe Photoshop.

Here’s the clip we’re going to be turning into an optimized GIF. (You can find the original Pond5 clips used here at the bottom of this post.)

 

Step 1

Start by opening your video file (I use an .mov file) in Photoshop. The timeline panel should automatically open with your file, but if it doesn’t, you can find it in the “Window” menu drop-down.

Gif-Tutorial-1
 

Step 2

Depending on the aspect ratio you saved your video file at, you may need to resize your image. For posting on this blog, I kept the same aspect ratio, but scaled the width down to 780px. You can find the image resize tool within the “Image” dropdown menu, or by hitting the shortcut ⌘⌥+I on a Mac.

Tutorial-Pic-3
 

Step 3

I prefer to break my animations into frame animations, but before converting, it’s best to use the splitting tool (scissors) to cut it up into the key frames you actually need. (If you export the native file at its default frame rate of 24fps, you’ll end up with a massive, non-web-friendly GIF.) Move the scrubbing tool to the position on the timeline you want to key out and hit the scissors icon. I’ve broken mine into 15 key frames.

Tutorial-Pic-2
 

Step 4

Clicking on the “Convert to Frame Animation” button (located on the bottom left of the timeline toolbar, it looks like three squares in a row) turns your timeline into keyed-out frame animation.

Gif-Tutorial-4
 

Step 5

Since we want this particular GIF to play as smoothly as possible, I’ve set the timing on each of the frames to “No Delay.” Generally, Photoshop defaults the frames to .5 seconds, so you’ll have to manually change each frame by clicking under the thumbnail on the small dropdown arrow icon under it. When selecting “No Delay,” the thumbnail will show “0 sec” underneath. You can preview the animation by using the controls on the bottom of the Timeline toolbar.
 

Step 6

Now that we have the animation in order, it’s time to save out an optimized version of the file in .GIF format. Click on File > Export > Save for Web (Legacy) in the main menu. You can also access this by hitting shortcut ⌘⌥+Shift+S. There are a lot of settings here, but the main idea is that, if your image still looks good with less colors, you can save on file size by adjusting the colors dropdown on the right.

Try playing with all of the options to see which combination works for you. When you feel good about the output quality (this might take a couple of tries to nail), hit the save button, name your file, and you’re good to go.

Gif-Tutorial-4
 

Step 7

Now that your .GIF is complete, you can run one last optimization pass using a tool like ezgif to get the file size down even further. (The smaller the file, the faster it will load online.)

The trick with .GIF animations is to find a good balance of image quality for file size. Sometimes it takes some compromise to get the file size down, but in the end, a little sacrifice can go a long way.

Check out the final product below!

Gif-Tutorial-Final
 
Like these visuals? Get the original Pond5 clips used in this tutorial:

Aerial View Of Steam Engine at Sunset by stockmedia1

Golden Gate Bridge Aerial by BenLynn