Making your own gifs
Or: how to leverage 27-year-old tech to your Web 3.0 advantage
I’ve been asked how to make gif a couple times, and while I have to say they’re a pleasure to make and an even greater pleasure to get right, Murphy’s Law applies. Gifs are hard to get right, easy to get wrong.
First, some caveats. Medium will render page-width gifs into static images. They can be choppy if you’re limiting it by every second or third frame. Gifs will increase your page weight by a metric fuckton. Don’t make your reader wait for it to load, please.
Plus they’ll be eventually be outmoded once the gears of standardized web start grinding (lol) and people get over the kitsch factor (maybe never).
Another thing: I expect you to know the basics of Photoshop to continue. By that I mean you won’t wig out if I say the words “layers” and “adjustments” with impunity.
Alright. Let’s do this thing.
1. Decide what you’re making
Do you want to make a straight up gif or a cinemagraph? Maybe something different? The steps for both are pretty much the same, but cinemagraphs require some meticulous planning.
Cinemagraphs, by my definition, are gifs that show infinite, unbroken continuity. They can be subtle and guise as a static image for a second (a waving flag or an eyebrow flutter usually gives the lie), and the longer it keeps you transfixed, the better it is. If it’s a not subtle one, the action has to flow and loop flawlessly.
The first example here is pretty straightforward—movement in the background that ends up looping very easily, writer making subtle movements in the foreground.
The second one is a trompe l’oeil. The subject is taking a drag, but at the moment he sticks the cigarette in his mouth, the gif actually plays in reverse, putting the hand in the same exact position as where it started. Without this forwards-rewind trick, you’d need to do a bit of AfterEffects wizardry to get the same effect.
That being said, keep the forward-rewind trick in mind if you’re filming your subject. Shoot with a tripod. Don’t be a hero. Make your subject’s movements brief and simple.
2. Cut your footage
You’ve got a mov file. What do you do with it? Well first, you cut it down to scale to show exactly what sort of loop you’d like to make.
I’m using FCP to gut the loop I need. CMD+= and CMD+- zoom in and out. Use the razor tool by pressing B. You’ll want your loop to be a solid two to three seconds, give or take some.
Export by going to File > Share > Master File > Settings > H.264. It won’t matter what your export settings are, really, because your gif dimensions are going to be a lot smaller anyway.
3. Import to Photoshop
After you’ve shared a master file and located it, open up Adobe Photoshop and go to File > Import > Video Frames as Layers. This will bring up an import dialog:
Limit it to every two frames, every three if you’re feeling confident/your footage is long. Make sure “Make Frame Animation” is checked.
Your Photoshop window should now have a Timeline pane that shows every frame in the gif-to-be.
Video frames import in reverse for some weird reason. To fix this, select the first frame labeled “1" on the top left and select every frame by scrolling all the way to the last frame and Shift + Click it.
Now click on the little menu button on the top right of the Timeline panel (in red above) and click on Reverse Frames.
Play the animation back using the play button on the bottom left of the Timeline panel. Is the gif choppy? Limit fewer frames in your import options.
But if your timeline is showing more than 50 frames, think about trimming down a few frames — file size is important and there’s no better way to shave it down than by deleting extraneous frames.
4. Mod it
When that’s looking good, change the image size of the animation by pressing CMD+Opt+I. I generally try and shoot for 350. Start large and see what you can get away with. If your file’s too huge, shrink it down by 25px increments until you’re satisfied.
Just make sure you’re retaining the image’s aspect ratio (check the resample box before doing anything).
Now if you press the little play button on the bottom left of the Timeline panel, your animation will play. Each frame will last for whatever duration is shown in the thumbnail. So in the examples above, the duration for each frame is .03 seconds (in retrospect this was ridiculously fast, do not set your frame delays at .03 seconds ever ever).
You can change this by clicking the little upside-down triangle next to the duration and clicking “Other…” You can set the delay to whatever you want, but the sweet spot is between .06 and .08 seconds. Just make sure you have all frames selected, otherwise you’re only modifying a single frame.
If you’re a little more adventurous with Photoshop, feel free to add adjustment layers using the Adjustment Layer button in the Layers panel. Make sure you have every frame selected before you add an adjustment layer. Also make sure the adjustment layer is bumped above all other layers. To do that, select the adjustment layer and press CMD + Shift + ]. You can change around the colors, brightness, contrast, basically anything your heart desires.
5. Save it
Done screwing around? Got all your frames in a row? Go to File > Save for web and this thing should pop up.
So there are a number of fun things here. The bottom left of the panel that says “GIF — 1.456M” gives you an estimate of how big your file will be. Shoot for 1.5MB or lower.
At the top, make sure the dropdown below the “Preset” option is gif. Set your number of colors. Usually people keep the full 128, sometimes you can bring it down to 64 without a noticeable difference. Every situation is a little different.
The options below that (Perceptual, Diffusion, Dither) determine the sort of compression presets that will appear on each frame. You can experiment with these by selecting each one and pressing the play button on the bottom right to see a frame-by-frame preview of how your file will be affected.
Please note that the gif will not actually play at the speed you indicated in the preview window. It’ll work fine when you actually save it.
You kind of get a handle on what everything does by just messing around with the settings and previewing, but almost none of them will affect the file size by more than marginal amounts, so feel free to mess around until you have something you’re happy with.
Click save, drop your gif somewhere and preview it in your browser.
Fin.
