Today, we are going to make an animated .gif using all free, open source programs with no watermarks. (This version of this tutorial is not going to cover ripping videos off YouTube. If you need to do so, there are many free browser add-ons available for that— do some searching to find something that works well for you.)
What you need:
- For easily getting screencaps from videos: Avidemux (We’re using 2.5.6. THIS IS IMPORTANT: LATER VERSIONS MAY NOT WORK WITH THESE DIRECTIONS. You can find the Windows installer for 2.5.6 on SourceForge.) If you can’t use Avidemux, see the note on part one.
- For making screencaps into animated .gifs: The GIMP (in a previous post I mistakenly said that GIMP isn’t available on Mac — actually, it is. We’re using v2.8 here. Earlier versions of GIMP should work fine with this, but you’ll want to use ‘Save As…’ instead of ‘Export…’)
Download and install these as necessary.
For this example, I’m making a .gif from the 1925 silent film of The Phantom of the Opera, as it’s in the public domain and I happen to have it downloaded (doesn’t everyone?!).
Part one: Getting the screencaps
Note: The important part of this step is to amass the frames you’ll need for the animation. Avidemux is not the only option out there to accomplish this and so there are ways around this step if you need it. If you even have any video player that can take screencaps (VLC is a free program that does) you can do this manually by taking screencaps yourself— you’ll probably want one screencap for every few frames of the section of video you want to use.
We’re going to need a set of screencaps from our video to form the frames of our animation, and Avidemux is very good for this.
Open your video in Avidemux. You might get messages from Avidemux about different options for dealing with your video depending on its format. This tutorial isn’t going to cover the details of Avidemux — as a general rule, just pick one, and if that doesn’t work, open the video again and pick the opposite.
Find the place you want your animation to start (try using the arrow keys to nudge to the perfect spot). Click the button. Find where you want the animation to end, and click the button.
Now File > Save > Save Selection as JPEG Images… (If you don’t have this option, you probably don’t have the right version of the program— see the notes at the start of this tutorial.) Avidemux will save for you all of the frames in your selection as individual .jpgs, which could lead to a lot of images, so give your set of images a name and save them in an appropriate place.
Check to make sure Avidemux saved the images correctly.
Part two: Create the Animation
Open GIMP and go to File > Open as Layers…
If you used Avidemux to generate images for you, you probably have a lot of them and will have trouble keeping the filesize of your gif low enough if you use all of them. Consider selecting all the even- or odd-numbered images (in Windows, you can select multiple, non-consecutive files by holding ctrl while you click them). Hit ‘Open’. GIMP will use each layer as a frame of your animation.
Now you’re going to want to crop and resize as necessary. In GIMP you crop using this tool: Click and drag to choose the area you want to keep and hit enter to crop it. To resize, go Image > Scale Image… You probably don’t want most gifs to be over maybe 250px at most in height or width unless they’re really short.
(If you’re making a Photoset, you might like to know that in rows with one image, that image should be 500px wide. In rows with two images, each should be 245px wide. In rows with three images, each should be 160px wide.)
Part three: Save the animation
Choose File > Export… (In older versions of Avidemux, ‘Save As…’ would be used here.)
Give your animation a name and be sure to end it in ‘.gif’.
GIMP will give you these export options, and be sure to check ‘as animation.’
In this dialog we can control the speed of the animation. 100ms delay will probably be sufficient, but feel free to adjust as necessary.
For a gif to work on Tumblr, it shouldn’t be over 1MB! If your gif is frozen on Tumblr, you may need to cut down the file size by resizing the image further or removing frames.
Using this process, we can produce a simple gif like this:
Further Reading From Me
- Reducing file size of your gifs
- Some notes on timing of gifs
- Adding text (unfortunately a rather roundabout method)
- Fading to black or white
- Some notes on adjusting lighting and coloring (unfortunately this isn’t too pleasant either)
Hopefully now you understand how to make simple gifs on your own. If you run into problems with this tutorial, you can leave me a message in my ask box and I’ll try my best to help you out.
Go forth with the power of gifs!
The single greatest gif of The First Doctor ever.
Of all time.
Chris Evans aka Johnny Storm and Ioan Gruffudd aka Reed Richards in Fantastic Four: Rise of the Silver Surfer (2007)
gifs that break tumblr’s fourth wall?
well fuckity fuck me
- Gifs for begginers
- Gif making
- Easy gif tutorial for Mac
- Blur effect
- Tweening frames
- Transition tutorial
- How to add transitions to gifs
- Reducing the amount of color on your gif
- How to make a 500px x 500px gif
- Two gifs on one canvas
- Multiple animations with continuous effect in one image
- How to put multiple gifs in one shape them
- Lyrics gif tutorial
- Gif inside gif
- Overlay gifs
- Another overlay gif
- Spinning effect
- Twirly effect
OH THANK YOU
I have a tutorial for making very simple gifs from videos without buying or pirating any software a la Photoshop.
as a fandom i don’t think we appreciate this gif enough
a handy guide
Helena Bonham Carter - Order of the Phoenix Behind the Scenes
And then,in the end, he was all alone again…
Omg..omgomgomg, this show is so killing me!Every season ends so sad and breaks my heart(s) Omg, I try to keep calm but I feel like crying all over..
I don’t know what my emotions are doing, can’t explain it…
Rory, please teach me how to badass.