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

Comments

author
Kervin1008 (author)2016-04-25

It looks wonderful. In addition, I found a video guide about
converting video clips to GIF animated images, which also looks effective for
this job. Maybe, there’re some people also interested in it. You may check the
video here.

https://www.youtube.com/watch?v=vMKDZ8H439I&feature=youtu.be

author
workbetterv (author)2016-01-10

I use iDealshare VideoGo to convert video to GIF or convert GIF to other video formats.
Here is a sample on how to use it at http://www.idealshare.net/video-converter/mp4-to-gif-converter-mac-windows.html

author
workbetterv (author)2015-12-31

I highly recommend iDealshare VideoGo which can convert any video to GIF like WMV to GIF, MP4 to GIF, MOV to GIF etc

Here is the step by step guide at

http://www.idealshare.net/video-converter/wmv-to-g...

author
bravoechonovember1 made it! (author)2015-11-14

awesome!

Untitled-15ssqqq.gif
author
sayu220 made it! (author)2015-11-10

Thanks! Hehe here's my GIF :)

lionNowl.gif
author
Rohits1 (author)2014-10-07

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

author
Xinkiko (author)2014-09-30

author
Penolopy Bulnick made it! (author)2014-02-28

I dids it!

I-did-it.gif
author
deschmeyer (author)2013-05-02

here is my attempt for free pro acct

waves.gif
author
audreyobscura (author)deschmeyer2013-05-02

awesome good work!

author
Dendad (author)2013-02-26

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.

author
thinkdunson (author)2013-02-24

is Elements or Premiere Elements be able to create gifs?

author

Is there a "File>Import from Video" option? I have never used elements....

author

i don't have it either… i was hoping someone could tell me if it would work before getting it.

additionally, does anyone know of another program, preferably free (without pirating it), that can create gifs?

author

Mikeasaurus explains how to do it in GIMP....


https://www.instructables.com/id/make-an-animated-GIF/

author

awesome.
thank you.

author
bbontems (author)2013-02-24

Thanks! I've always tried to make gifs, but I can never get it to work correctly. I managed to make this gif of Andrew Garfield from the Daleks in Manhattan episode of Doctor Who. Any ideas on how to add text? The only way I could think of was to add the text in the same exact spot in every single frame. Which is a bit tedious...

author
olmon (author)2013-02-24

Much easier to convert the video clip to either MP4 or WMV, take into Window Live movie maker, take a sequence of snapshots of what you want to make a GIF of . then go into Photoscape & put the snapshots together as a GIF. Makes excellent GIFs using free programs. http://download-photoscape-free.com/

author
miguipda (author)2013-02-20

Hi,

it is good except you use tools that must be bought.

Then how could we do it with other tools like Gimp (Photoshop like and free) and others solutions ?

Have a nice day,

Miguipda ;-)

author
stuuf (author)miguipda2013-02-24

ffmpeg can transcode video files into gif. of course you have to specify all the time selection, croping, and scaling options on the command line, but that's always more fun anyway

author
mikeasaurus (author)miguipda2013-02-21

I got you covered: make an animated GIF

author
Jayefuu (author)miguipda2013-02-21

I'd like to see that too. :D

author
amesj (author)2013-02-24

Your friend Gary looks like Cameron from Ferris Bueller's day off!

author
Kemerd (author)2013-02-24

Lol, thumbs up if you saw the girl in the backround shaking her head back and forth.

author
atasevski (author)2013-02-24

There... No more pain :)

http://i.imgur.com/CVWAeRa.gif

Thanks a lot man, I really needed this.

author
fungus amungus (author)2013-02-22

There's a non-software way of making the gif from a video as well. Try this

author

Personally I tend to use a program called Super (C) Media Converter. Be warned, it's a very crappy obscure website, great tool though. Also look out during the install, because it asks to install some crappy toolbar I think. But it's essentially a GUI front-end to ffmpeg with a lot of codecs strapped to it. That way you don't have to install quicktime on your computer either!

author
Jayefuu (author)2013-02-21

Ha. That's excellent. Is Amanda singing in the background?

author
audreyobscura (author)Jayefuu2013-02-21

This was filmed during your residency - I've been holding off on publishing though...

author
GorillazMiko (author)2013-02-21

.

mrburns.jpg
author
SargentMcFluff (author)2013-02-21

Very Useful

author
budhaztm (author)2013-02-20

thats pretty neat.

author
kazmataz (author)2013-02-20

This makes me happy :)

About This Instructable

144,601views

207favorites

License:

Bio: I'm an Instructables success story! After relying on the site to DIY my way through art school, I was able to join the Instructables ... More »
More by audreyobscura:IKEA KALLAX and PVC Workbench16 Ways to View the EclipseCardboard Box Eclipse Viewer
Add instructable to: