A step-by-step GIF guide to GIFing everything you see

NOTE: Click here to see the original story with higher quality GIFs.

GIFs rule the Internet, and you’re never gonna survive out there if you’re incapable of whipping together on a moment’s notice a four-second animation of Jason Kidd’s game-winning three-point shot or a happy corgi running on a sidewalk.

If you’re equipped with Photoshop, there are plenty of GIF-making guides out there—but none of them (as far as we can tell) use GIFs themselves to show you how to make them. And that’s just silly. GIFs are the best way to explain anything, ever—whether it’s Election Day, Thanksgiving, or McKayla Maroney’s silver-medal vault.

Ready, class? This is going to be fun. These are the steps I used to teach my own parents, and now they’re pros. But before we start, you’ll need two things: a YouTube video (preferably of a Jack Russell puppy) and the DownloadHelper extension on Firefox. (I still can’t find a Chrome extension I like; if you have a recommendation, let me know!)

OK, got it? Here we go.

1) Use DownloadHelper to save a video

Just click on those little balloons or atoms or whatever they are.

2) Open Photoshop and Import

Select “Import Frames to Layers” under the File menu. Then select the video you just ripped.

3) Select which part of the video you want

The shorter the better. GIFs have to be small so they can load on your page!

See the option that says “Limit to every [ __ ] frames”? Play around with that. The higher the number, the lower the frame rate, and the faster and choppier your video will be. Try it with 2, 3, or 4.

Note: If you increase this number, you’ll have to make each frame longer to keep your animation at its normal speed.

It’ll look like this when it’s imported:

4) Adjust the length of each frame

If your GIF is limited to every two frames, try changing 0.02 seconds to 0.04. If it’s every four frames, try 0.08.

If you didn’t touch the frame rate, skip this step, fool.

5) Export the GIF

Click “Save for Web” under the File menu.

6) Adjust the size

Your ideal file size is 2 megabytes (or 1MB for Tumblr). If it’s too large, adjust your image size down to no lower than 300 pixels. Bigger is better, but if the GIF is going on Tumblr, 500 is as wide as you’ll need.

You can also play with the lossy and dither settings. The higher the lossy or the lower the dither, the grainier your image will be.

Don’t play with the color settings unless you want a really crappy-looking image; 256 colors should be fine.

7) Finally, save!

The result:

High-five yourself. You did it!

We like Imgur as a host for GIFs, but Minus, which accepts images up to 30 megabytes, is another good option. Upload your image, copy the URL, and spread like wildfire. Your life is about to get a whole lot Internet-ier.

What if I just want to make one on my iPhone?

Easy. There are tons of apps. I like GIFBoom and Loopcam. We’re also fans of Cinemagram.

Where can I find those awesome reaction GIFs?

Good question! Here are some excellent resources to bookmark:
-The Definitive Collection of High-Five GIFs
-Dog GIFs
-The 60 Best Breaking Bad GIFs
-Reddit’s favorite 700 GIFs
-A wonderfully well organized reaction GIFs archive
-The 121 Best Dancing GIFs of All Time
-Another collection, with more than 200

All right, you’re ready now. Go forth, friends. And dance. Dance!




Main photo by Cooper Fleishman. Dancing GIFs via Funny or Die/Tumblr. Tina Fey via Lovelyish.

989 notes

Show

  1. thesandwoman reblogged this from thesandwoman
  2. bmreferences reblogged this from kurrito
  3. theultimatereferenceblog reblogged this from tbhplzstop
  4. hegexo reblogged this from books
  5. kimbo-art reblogged this from forgivetheinsubordination
  6. doodlemcnoodles reblogged this from artist-refs
  7. gina87 reblogged this from penns-woods
  8. crazypeopleplaychess reblogged this from cloudymcmuffin
  9. quietserval reblogged this from books
  10. johndisneys reblogged this from oak23
  11. magimaka reblogged this from z-raid
  12. sandvicheater reblogged this from dailydot
  13. harpsdisch0rd reblogged this from livinmokotory
  14. takeabreakdesign reblogged this from dailydot
  15. lucasbieneke reblogged this from evil-bones-mccoy
  16. alexander-gray reblogged this from artist-refs
  17. forgivetheinsubordination reblogged this from doctastrange
  18. monsterkingofhell reblogged this from livinmokotory