*500x600

anonymous asked:

How can I learn how to make a gif?

I wrote up some instructions here for doing it on a Mac…

First think you’ll need is a video file to use.  I won’t mention, er, shady ways to get that. More legit ways would be to use a program called Handbrake to rip your DVDs to your hard drive as a .m4v or .mp4 file (the extension doesn’t matter).  Use the Universal profile.  Lifehacker has a nice guide to ripping DVDs you can reference.

Once that’s ripped you’ll want to open up the video in a program that can export a GIF. You can use Photoshop, but it creates 1:1 frames of videos to GIFs, and takes extra editing to drop frames. Basically the more frames of video you have, the larger the GIF will be. Also the more complex of a picture (lots of leaves, grass, details, etc) the larger the GIF. Cartoons and animations work best, as large fields of single colors compress very well in GIFs.

Instead of Photoshop, I usually fire up GIFBrewery. It’s only $5, and makes great GIFs.

Head to GIFBrewery’s preferences first. Be sure to check “Automatically calculate count & delay” and the default should be 10 FPS. You’ll also want to check “Reduce the number of colors” and “Apply dithering to video frames.” The developer plans to update these options very soon to let you specify the number of colors and the default algorithm. I always start at 96 colors and the “Ordered” algorithm, but at the time of this writing you can only choose those options when working with the GIF itself.

So the first step now that you’ve opened a video is to resize it. If you’re working from a DVD file the image will already be 640x480. HD sources could be as large as 1920x1080.

Hit the resize button:

Now you’ll need to pick what you’re going to make. If you’re going to run the video in the normal aspect ratio (i.e. not crop it) then resize the WIDTH to 500px to start:

We might change this to something smaller later, but you won’t want to go wider than that for Tumblr. If you’re after a portrait sort of GIF like this one then set the HEIGHT to 600px, and use the CROP tool to crop it to 500x600.

Now you’ll want to set your in and out points. Either watch the video or drag the scrubbing control at the bottom to the moment you want to pick. The most you’ll be able to get in a GIF is 3.6 seconds or so. If you’re making clips from cartoons or animation you might be able to get that many frames in. With films or television shows you’re probably only going to get 1-1.5 seconds in typically.

Once you found the in point, click “Set Start”. You can move forward and back a frame at a time with the arrow keys. You can go 5 seconds forward and back with Command+Shift+arrow key. Set your out point, then click Create GIF.

Odds are you now have a 2.5 MB GIF that’s way too large for Tumblr. Ooops!  Now we need to work our way through getting something under 1MB.  Tumblr will allow GIFs that are less than 500px wide, under 1 MB. There’s some weird rules too where too many frames can also be banned even though you are under 1 MB.

Now some techniques for shrinking GIFs. GIFs are limited to 256 colors. Each color that you add makes the image look better, but takes up more file size. Also the more change from frame to frame, the larger a GIF will get. In this program you’ve got three things to reduce file size.

  1. Reduce the number of frames
  2. Reduce the number of colors
  3. Reduce the dimensions of the image.

Depending on what you’ve made, you can try any of these techniques. First, I’d start with the frames.Try and trim your clip down to the barest minimum you can and still get the right motion. Try a new export and see how close you are. Still not enough? Let’s get advanced.

On the main window click “GIF Properties”. You’ll get this palette:

The next lever to play with is the number of colors in your clip. If it’s a black and white movie you might get away with 32 colors. Animation can sometimes drop to 48 colors, but usually I’ll stick with 96 or 64 colors.

The “algorithm” option chooses how the GIF is dithered. Since a GIF has limited colors, it uses the algorithm to decide how to make a pattern of colors to fool your eye into thinking a third color exists. If you have a GIF with a lot of solid colors, like a modern cartoon with a digital source then “Sierra Lite” works well. On older sources, or films, tv, or things with gradients, only “Ordered” looks good. You’ll see some crappy noise in the image if you don’t use Ordered. 

Why not use Ordered all the time? It creates larger files than any other algorithm, and that means you might have to make shorter clips.

The last lever you can do is to resize the dimensions. So if you have a great 500x600 portrait GIF that looks awesome, but it’s still too large and you can’t reduce the colors down, you can open up the resize tool and start shrinking. Just reduce the width of the GIF, the height will be adjusted automatically. So instead of a 500x600 GIF you might wind up with 400x480. Since the initial proportions were correct, Tumblr will resize it to fill the space on the Dashboard and mobile app. Less pixels are being used, so you’ll get under the 1MB limit.

There’s a lot more too it I’m not going into here, like reversing the frames, or using the “palindrome” option to have a clip play backwards and forwards. This should be enough for you to start playing around though!