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.
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 (Safari, Chrome, etc.).
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.
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).
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.
Once your export is done, upload the images to GifMaker.me:
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.
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.
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.