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:
0:32
2:56
8:03
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.
The easiest free (assuming you already have Adobe Creative Cloud) way to render a .gif file is to use Media Encoder. Here's how:
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.
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.
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.
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.
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.
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.
Now hit the Render button! Here's what you should have after the render is complete:
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".
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.
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.
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)...
In the Save for Web settings, there are a few things you may want to adjust:
Those are the options I usually adjust, but you can experiment with the other settings to get exactly what you need.
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!
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.
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:
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.
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.
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.
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 how to create seamlessly looping animations for websites, social media, or as part of longer, narrated animations in this class.
Check out the class
