Making Animated GIF with After Effects and Photoshop

It’s easy to create your own GIF's with After Effects and Photoshop. Here are three quick ways to make it happen.

 

Whether you’re creating animated elements for web/UI design, making simple looping images or tutorials, or making the next crazy reaction meme, knowing how to export your After Effects creation to animated GIF's can come in extremely handy. Here are three tools you can use to make a perfect gif out of your After Effects comps!

 

If you have After Effects, you’ve probably got Photoshop as well (it comes with a full subscription to Adobe Creative Cloud). You can use Photoshop in conjunction with After Effects to turn your rendered comps into GIF's. This method is the most involved, but it gives yo the most control over the quality and file-size of the end product GIF.

 

Step 1: Export Your Comp From After Effects

 

Once your animated masterpiece is finished in After Effects, render it out to a video file. I’m on a Mac, so I render to a ProRes .mov file. If you did your animation at a large resolution, you can save yourself a step and downscale in After Effects, but that’s not absolutely necessary; you can do it in Photoshop just as easily.

 

Step 2: Import Your Video File Into Photoshop

 

Did you know Photoshop can import video files? Pretty cool, huh? This open all sorts of options for matte painting, rotoscoping, etc., but those are topics for another tutorial. In this case, just open the video like you would any other file in Photoshop. It’ll take it a bit longer than usual to open, but once you do, you’ll have an extra “timeline” palette along the bottom that you can use to scrub through the file.

 

Step 3: Resize the Video

 

If you did’t already do it in After Effects, you should downscale the video in Photoshop. It’s really easy to do — just go to ‘Image > Image Size…’ like you would resize any normal image file (some versions of Photoshop may ask you to convert the video to a smart object — go ahead and do that).

 

Step 4: Set up Your GIF Export Settings

 

To get the most control of the GIF export, you’re going to use the legacy Save for Web option.

Inside this export dialogue, you’ll have access to several presets, including ones for animated GIFs, and fine-tune control over the settings for each.
The different GIF presets have to do with how much color information is stored. With GIFs, the more color info, the bigger the file size, and GIFs get large quick, so use the lowest setting that still looks acceptable.

Dithering should help smooth gradients/shading. In this example, my animation is just a few solid colors, so I can safely use the 64 color preset, but this will vary based on the GIF.
One important setting to take note of — down at the bottom, you get ‘Looping Options.’ By default, looping is turned off in Photoshop, so be sure to select this if you want your GIF to loop (you probably do).

 

Step 5: Export Your GIF

 

Once you have your settings dialed in, hit “Save…”, and tell it where to go. To watch the animated GIF, your best bet is to open it in a web browser (Chrome, Firefox, IE, etc.).

www.rocketstock.com