Turn a Video Into a Gif

145,749

208

37

Posted

Introduction: Turn a Video Into a 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

Step 1: Getting a Video Clip.

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.


Step 2: Importing Video to Photoshop

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.

Step 3: Image Settings

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.

Step 4: Time Settings

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.

Step 5: Exporting

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.

Step 6: Play!

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 :)

3 People Made This Project!

Recommendations

  • Epilog Challenge 9

    Epilog Challenge 9
  • Sew Warm Contest 2018

    Sew Warm Contest 2018
  • Gluten Free Challenge

    Gluten Free Challenge
user

We have a be nice policy.
Please be positive and constructive.

Tips

Questions

31 Comments

I can't see any details on the pictures; how do I see the image notes for the instructions?

nice article ! explaining in details to convert a video into gif animation.

here is my attempt for free pro acct

waves.gif

I have an app on my iPhone that's great for making animated GIFs. It's easy, fun and it's FREE!. It's called GifBoom. I'll try to attach one that I recently completed. Hope it works.

is Elements or Premiere Elements be able to create gifs?