AE fundamentals

Render a GIF

In this After Effects Fundamentals lesson, you'll learn how to export (render, in After Effects language) your animation as a .gif file. GIFs can be useful on the web because they play automatically and can loop forever.

There are 3 ways to render a GIF, but it can't be done with After Effects alone. You'll need either Adobe Media Encoder or Adobe Photoshop (both are included in a Creative Cloud subscription) or a paid After Effects script called GifGun. All 3 ways are covered in this lesson.

Jump to topic on this page:

Find in video:

Adobe Media Encoder

0:32

Adobe Photoshop

2:56

GifGun

8:03

More About GIFs

10:42

If you're curious, the puffer fish I'm using as an example in this lesson is from my class Looping Animated Scenes in After Effects. This class covers how to make seamlessly looping animations so it might be of interest if you're making looping GIFs.

Render a GIF with Adobe Media Encoder

The easiest free (assuming you already have Adobe Creative Cloud) way to render a .gif file is to use Media Encoder. Here's how:

  • With the composition you want to make into a GIF open in the timeline (or selected in the Project panel), go to Composition > Add to Media Encoder Render Queue. This should open Media Encoder and add your comp to the queue, but it might take a second.
Add to Adobe Media Encoder Queue

You can render multiple GIFs at once by selecting multiple compositions in the Project panel and then adding them to Adobe Media Encoder's Render Queue. More general rendering help here.

  • Click on the blue text under "Format" to get to the Export Settings.
How to get to Media Encoder settings

  • Change the Format to Animated GIF.
Media Encoder file settings

  • Once you've selected the correct settings, click OK.
  • Make sure to choose where you want to save the GIF file by clicking the blue text under "Output File".
  • Finally, click the green triangle button to start the render.

The Downside of Using Media Encoder

Notice how the frame rate is set to 25 by default. If you go under the Video tab you can uncheck the box next to Frame Rate to change it.

Media Encoder frame rate options

However, I usually animate in 30 frames per second and that's not an option. Sometimes, to make GIFs feel more choppy and have a smaller file size, I use 15 frames per second since that's half of 30. But, 15 fps isn't an option either.

If the frame rate Media Encoder uses doesn't match the frame rate used in After Effects, there could be missing frames (or extra, blank frames). This results in not as smooth of an animation if there are small glitches. Most people probably won't notice if there are a few missing frames, but you may want to look into one of the other options to render a GIF.

Render a GIF with Photoshop

To export a GIF using Photoshop, you first need to render out a sequence of PNG images from After Effects which you'll then import into Photoshop to create a GIF.

In After Effects

With your composition open in the timeline or selected in the Project panel, go to Composition > Add to Render Queue.

In the Render Queue, click the blue text next to Output Module. In the pop-up window, change the Format to PNG Sequence. If you want your GIF to have a transparent background, change the Channels to RGB + Alpha. If you don't need a transparent background leave this on RGB.

You don't have to use PNGs; any format of still image should work. You could also use a video file and in the next step in Photoshop go to File > Import > Video Frames to Layers. I like using PNGs because they tend to be better quality and have the option for transparency which not all video files or images do.
Output Module settings to render a PNG sequence

Next, click the blue text next to Output To to choose where to save the file. Since we're rendering a .png image for every frame of the animation, it's a good idea to save all the images in a subfolder. Make sure Save in subfolder is checked.

Where to save your PNG sequence

Now hit the Render button! Here's what you should have after the render is complete:

PNG sequence is a still image for every frame of your animation

There should be a .png still image for every frame of your animation. So, for example, my animation is 8 seconds long and my frame rate is 30fps so I have 240 .png images in a folder called "puffer fish".

In Photoshop

Open Photoshop then go to File > Open (or ⌘/Ctrl O). Navigate to where you saved your PNGs. Open the folder with the PNGs, then select just the first one. Make sure Image Sequence is checked (if you don't see this option, click the Options button). Then click Open.

Open PNG sequence in Photoshop

It will ask you what frame rate you want to use. By default it should already have the frame rate you used in After Effects in both boxes. You probably want to leave it just like that.

Photoshop frame rate

Once your PNG sequence has been opened in Photoshop, it should look like this with a Timeline and a Video layer. Go to File > Export > Save for Web (Legacy)...

Photoshop save for web

In the Save for Web settings, there are a few things you may want to adjust:

  • Change the number of colors to the smallest number that still looks good in order to keep the file size as small as possible.
  • Set the Looping Options to Play Once, which will play once then stay at the last frame, or Forever which will continue to loop your animation until the end of time :)
  • If you need to reduce the file size (which you can preview in the bottom left), one option is to reduce the Image Size.

Those are the options I usually adjust, but you can experiment with the other settings to get exactly what you need.

GIF settings in Photoshop

When you're happy with the settings, click Save... Then navigate to where you want to save the .gif file, then click Save again. That's it!

Render a GIF with GifGun

If you create a lot of GIFs and the two methods above aren't cutting it, try out GifGun. This is what I personally use because it saves a lot of time, does a good job of keeping file sizes small, and gives me the options I need.

Purchase GifGun here (not sponsored or affiliated in any way). There's also a free trial.

When you purchase GifGun, it comes with a User Manual that explains how to install it, so let's jump into how to use it.

GigGun tool

Here's what the GifGun tool looks like. You can doc this panel anywhere in your After Effects workspace by dragging and dropping it (click the name to do this).

First, you'll probably want to click on the gear icon to adjust the settings:

GifGun settings
In AE, hover over any of the GifGun settings for an explanation.

Then just hit DONE. Then Click the Make GIF button. You'll see a video rendering in the Render Queue, then you'll see GifGun counting down until the GIF is ready.

One downside of GifGun is that you can't preview what your GIF will look like with different numbers of colors like you can with Photoshop. So, you may have to render a few different versions of your GIF to find the best one.

More About GIFs

You can play a .gif file in a web browser. Right click the file then choose Open In... whatever web browser you prefer. Or, drag the .gif file onto the web browser icon.

Optimizing File Size and Quality

When using GIFs on websites, you'll want the smallest possible file size so that it loads quickly. But, you also want the GIF to look good.

What size are we talking?

I use Webflow to build my website and they limit .gifs to 4MB, so that's a good reference point. It's easy for GIFs to end up bigger than that, but when you keep GIFs smaller it helps with loading speed.

Even if you aren't limited to a certain size by the platform you're uploading your GIF to, too big of a file size might make it play slower than it should and/or take too long to load.

Learn what affects the file size of GIFs in this video:

Underwater scene with fish, seaweed and coral

Looping Animated Scenes

Learn how to create seamlessly looping animations for websites, social media, or as part of longer, narrated animations in this class.

Check out the class

All the keyboard shortcuts you need, in one place:

That's it for the AE Fundamentals Series! What's next?

Check out my class curriculum for learning motion design!

The best way to really master the skills you learned in these lessons is with hands-on projects.

Show Me