How To Make Your Own Animated Gif

19 March 2012

We don’t live in the world of Harry Potter, but sometimes we can pretend. With popular blogging platforms like tumblr, we see the magical picture format of a .gif, a picture that moves without having to press play, and that can go on forever.

Today I will be discussing (with pictures!) how to make a gif of Captain Jack Sparrow awkwardly and suavely leaving the scene, which I permit all of you to use as a reaction image or what have you. (Always credit the source!)

I have a Mac, so I will be doing all of the business on that, but the process is essentially the same for Windows.

Alright, let’s punch it.

Honest College’s Introductory GIF Tutorial:

1. Have a video file.
You have to make the gif out of something!

2. Extract the frames.
The best app for this in my experience is Avidemux2, although I have heard that Windows-users like KMPlayer. Once you download and open it, go to file, open, select your file, and allow it to load.

There is a possibly that a number of alert messages will pop up.
If it is “Build VBR time map?”, answer no.
If it is “Packed Bitstream detected”, answer no.
If it is “Index is not up to date”, answer yes. This will take a minute and is super important.
If it is “H.264 detected”, answer yes (unless you really don’t care).

If the file is .mkv, it will take a little longer than formats like .avi or .mp4 or .m4v would, so let it think.

After your file is open and ready, go forward until you find the section that you want to make into a gif. I usually record the timestamp of the scene while I am watching it and then type the timestamp into the bottom next to “Time” and then finagle until I find the exact frame.

The left arrow goes back one frame; the right arrow goes forward one frame; the up arrow skips forward several frames, and the down arrow skips back several frames.

When you are on the first frame you want, click the first red button. (See pic 1)

pic 1

Then go until the last frame that you want, and click the second red button next to it.

Once you have your files selected, click: File, Save, Save Selection as JPEG Images. (see pic 2)

pic 2

3. Photoshop!
Make sure you have it. Any will do; I have CS5.

4. Load the frames into Photoshop.
Once you open Photoshop, click: File, Scripts, and Load Files Into Stack. Click browse, open the folder where the frames are, select them all; “Open” and “OK”. (see pic 3)

pic 3

When the files are loaded (the more there are the longer it will take), click the button to the top right of the frames and select “Make Frames From Layers”. (see pic 4)

pic 4

Then click that button again and select “Reverse Frames”.

5. Have a static background (optional).
This is optional and should be used with caution and a keen eye. In order to make only part of the gif move while keeping the background static (another great way to save space), select the first frame on both the bottom horizontal row with the frames and the right vertical column with the frames, then right click the vertical first frame, select “Duplicate Layer” and “OK”. (see pic 5)

pic 5

Make sure you stay on that layer, select the “Erase” tool on the left column, adjust the size to your liking (right above the picture), and brush over everything that moves.

Now this will be utterly useless if the background does move, so please don’t ever do that or people will laugh at you.

6. Crop the image (optional).
Use the fancy crop tool (fifth from the top on the right column) to choose what part of the image you want to be in the gif. Keep it within 500px.

7. Shorten the number of frames (optional).
Each frame takes up an enormous amount of space, so the less frames you use the better!
You can delete frames from the beginning and end to contain the meat of what you’re giffing, or a really smart way to cut down the amount of frames by half or by third is to delete every other or every third frame. Select the second frame, hold down Command or Control, and select the other frames. Then click the trash can button right beneath them.

Now once you have done this it is very important to change the delay between frames, or otherwise the gif will move so quickly that no one will know what is happening. A good number is 0.08 seconds. Click the button to the top right of the bottom horizontal frames, select “Select All Frames”, click any of the arrows next to “0 sec.” on the frames, click “Other”, type in the new time delay, and click OK. (see pic 6)

pic 6

8. Save the gif!
You should be ready now (although there is so much more that you can do, but these are the basics to make a quality gif), so go to: File, Save for Web and Devices, and observe just what your gif looks like.

Go to the bottom right, click next to the “W” under “Image Size” and type in 500px. No matter what, don’t give in to pressure and go below 500px. That’s tacky and everyone will hate you. (see pic 7)

pic 7

Now, we’ve done all the editing we want to get the file size down, we’ve adjusted the image size to 500px, and it’s still not under 1mb. (I am operating under the assumption you want to upload this to tumblr, but if not then just go ahead and save now!)

There are options here!
You can sacrifice the number of colors, although I recommend against this.
You can turn it black and white, by clicking “Selective” at the top right and selecting “Grayscale”.
You can use Lossy. This is a great method. The higher it is the smaller the file will be.
You can change the Dither to 99%. It makes a world of difference in file size, but it’s also noticeable in the image most of the time.

Oftentimes these methods don’t work out the way you want them to, so you have to go back to the image and edit it from there. But I promise that with time and practice it’ll get easier and you’ll get better. Sometimes there are still days when I for the life of me cannot make a good gif, so I go do something else for a while and by the next day I can do it just fine.

9. Believe in yourself!
Don’t make crappy bad-colored less-than-500px grainy jerky gifs, and everyone on the internet will love you.

To see the gif I made (and others), click here!

For more honest insight, check out this post:
A Girl’s Guide to Hair Dying

And use our SEARCH above to find information on ANYTHING college.

Add Comment