Turn a Video Into a Gif

by audreyobscura in Craft > Digital Graphics

154675 Views, 213 Favorites, 0 Comments

Turn a Video Into a Gif

GaryDance_MAIN.gif
As an avid Tumblr user, I see a lot of great GIFs. Some of my favorite GIFs use clips from movies, or TV, or even YouTube. In an effort to perpetuate a movement towards more GIFs on the web, I want to share how to turn a video into a GIF In this Instructable I will go over how these GIFs are made.

You will need:
  • Photoshop
  • Quicktime
  • An internet browser

Getting a Video Clip.

Trim.png
Trim2.png
Export.png
Exporting.png
Saving.png
For my clip I will be using footage of my co-worker, Gary. He is an excellent dancer and has consented to be featured in this Instructable. I used my video-camera to record Gary dancing, and then opened the clip in Quicktime.

It is important to use a relatively short clip for this, you want to keep your file-sizes down. I cut down my original clip of 20 or so seconds down to 2 seconds. That's about 60ish frames of video.

An easy way to shorten videos in Quicktime is to use the Trim command. (Command + T, or Edit>Trim)

After the video has been trimmed, it is time to export it.  (Shift + Command + S, or File>Export)

I use the 480p dedicated export settings, and make sure it saves as a .MOV file.


Importing Video to Photoshop

PhotoshopIcon.png
CS5.png
Import.png
ImportSelect.png
ImportDialog.png
37Frames.png
In Adobe Photoshop (I'm using CS5), you are give the option to Import video. (File>Import>Video Frames to Layers)

When in the dialogue box, I selected the checkbox to limit the video to every 2 frames, so that I wouldn't have too many frames beefing up my file-size.

After the video was imported, I had 37 frames, or 37 layers to work with. That's pretty good.

Remember, I had started with two seconds of video, which at 29.97 frames per second should yield about 60 frames. In an effort to keep my file size small, I limited Photoshop to only import every other frame.

Image Settings

ImageSize.png
ImageSize2.png
To optimize my animation for the web it is a good idea to reduce the image quality. I started by playing with the Image Size Settings (Option + Command +I, or Image>Image Size)

I changed the animations width to 500 pixels. I have found that this a pretty internet friendly size.

Time Settings

Time1.png
Time2.png
Time3.png
The default amount of time for each frame to show is .03 seconds, but I wanted to make this gif comedically faster. From the Animation Bar, I selected all of the frames. (If you don't see the Animation Bar go to Window>Animation, to toggle it on)

With all the frames selected, I clicked on the downward pointing arrow next to the time increment on the frame, and selected .01 second.

Exporting

Export1.png
Export2.png
Export3.png
Export4.png
Export5.png
To export the Gif so that it can be uploaded to the interwebz, I went to File>Save for Web & Devices, or Option + Shift + Command + S.

This brings up another dialog box that you are able to manipulate your file-size from. It is best to get the image under 1MB, if you can.

Please see my image notes for specific instructions.

Play!

GaryDance_loop2.gif
GaryDance.gif
GaryDance_loop1.gif
Play around with it, isolate your favorite frames and create goofy looping gifs. I 

For more great Gif possibilities Check out these Instructables:

How to Create Animated Gifs About Pizza
Make an Animated Gif
Make A Wiggle Gif

Thanks! I will award a few 3 Month Pro Memberhips to the first five posters that turn a movie clip into a gif :)