It’s easy to create your own GIFs from After Effects comps. 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 GIFs can come in extremely handy. Here are three tools you can use to make a perfect gif out of your AE comps!

1. Photoshop CC

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 GIFs. This method is the most involved, but it gives yo the most control over the quality and file-size of the end product GIF.

Making Animated GIFs From After Effects Comps: Photoshop Method

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.

Making Animated GIFs From After Effects Comps: Photoshop Import

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).

Making Animated GIFs From After Effects Comps: Photoshop resize

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.

Making Animated GIFs From After Effects Comps: Save for Web

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.

Making Animated GIFs From After Effects Comps: Save for Web Dialogue

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 (Safari, Chrome, etc.).

Making Animated GIFs From After Effects Comps: Export


2. GifGun!

An even easier way to export your GIF from After Effects is to use the newly-released plugin called GifGun. Once installed, you’re given a simple UI panel with a ‘Make GIF’ button and a gear button to define your settings. For this example, I went into the settings and told it to resize to a max width of 320px (just like I did in Photoshop).

Click ‘Make Gif,’ wait to for it to process, and your GIF pops up in no time at all! If you make GIFs often, the one-click method easily makes it worth the price.

Making Animated GIFs From After Effects Comps: GifGun

For a quick comparison, the GIF I exported from Photoshop is 446 KB, while the GifGun version is 800 KB. Your mileage will vary widely depending on your GIF, but what you gain in ease of use with GifGun, you lose in the ability to specifically preview and control final output quality vs, file-size (though GifGun does do a good job of optimizing).


3. gifmaker.me

Don’t want to mess with Photoshop and don’t want to spend the money on GifGun? There’s a website called GifMaker.me that will take a JPEG/PNG sequence rendered from After Effects and create a GIF for you.

While it can resize the output for you, to save on upload time, you’re better off resizing in After Effects before exporting your image sequence.

Making Animated GIFs From After Effects Comps: sequence folder

Once your export is done, upload the images to GifMaker.me:

Making Animated GIFs From After Effects Comps: gifmaker upload

After the frames are uploaded, you have a few settings you can adjust on the right. The most important one is ‘Animation Speed’ — since you’re uploading an image sequence that doesn’t contain time data, you have to set a duration for the animation.

This example is four seconds long with 95 frames, so a quick bit of math (4000 milliseconds in total, divided by 95 frames) equals about 42 milliseconds per frame (what the site is asking).

Click ‘Create GIF Animation,’ then hang tight for a few while it stitches everything together.

Making Animated GIFs From After Effects Comps: gifmaker UI

The output will probably end up pretty large (mine was 1.2MB), but the site has a built-in optimizer.

Just click ‘Reduce the file size of this GIF,’ give it a setting (I reduced mine to 32 colors), and click ‘Optimize Now.‘ It tells you how much it reduced the file size by (down to 780 KB in my case), and lets you download the new GIF.

Making Animated GIFs From After Effects Comps: gifmaker Final


So, there you go: Three ways to make your own GIFs from After Effects. Something to keep in mind: GIFs are big, and they take up a lot of file space for what they are. A complex animation can bloat in file-size quickly. If you’re putting the GIF online, you want the file-size to be as small as possible so that they load quickly. Here are a couple things to help keep your GIF size in check:

  • Limit colors – One of the easiest ways to keep the size of your GIFs small is to limit yourself to only solid colors, and just a few of those.
  • Dither – If you use complex colors, gradients, or shading, dithering is your friend. This will simplify the colors used in the shading to reduce file-size.
  • Keep it Short – The more frames in an animation, the bigger the final file-size.
  • Keep it Small – Make the dimensions the smallest you can.
  • Keep it Stuttery – If you can do with a lower frame rate (maybe 12 fps, maybe even 8fps!), this will help control size tremendously.

What’s your favorite way to make gifs from After Effects comps? Share in the comments below.