Export Settings For Animated GIF

Community Beginner ,
Dec 01, 2017 Dec 01, 2017

Copy link to clipboard

Copied

I have this GIF animation for my job that I created in After Effects and sent to Media Encoder I set it to Animated GIF and matched the settings. When i play it in my web browsers they all do the same thing. The text is repeating as it slides, can someone please explain what is causing this.Untitled.pngUntitled2.pngUntitled3.png

TOPICS
How to , Import and export

Views

74.1K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Guide , Dec 01, 2017 Dec 01, 2017

To be honnest AE and AME are not to great tools for exporting GIFs, but if you have AE you already probably have Photoshop also - and that is the way to go.
So:

1.
a) prepare your animation in AE
b) export your animation using AME to f.eg. h.264 mp4 file
c) open PS

EXPORT GIF FROM PS.gif
d) open your mp4 animation in PS
e) use File/Export/Export for Web
f) there chose gif format, your color settings, and if you wish your animation to play ones or loop
g) then export
Voila!

Second way is to use paid scrpt inside AE called GiF

...

Likes

Translate

Translate
Adobe Employee ,
Dec 01, 2017 Dec 01, 2017

Copy link to clipboard

Copied

Moving to After Effects

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Dec 01, 2017 Dec 01, 2017

Copy link to clipboard

Copied

To be honnest AE and AME are not to great tools for exporting GIFs, but if you have AE you already probably have Photoshop also - and that is the way to go.
So:

1.
a) prepare your animation in AE
b) export your animation using AME to f.eg. h.264 mp4 file
c) open PS

EXPORT GIF FROM PS.gif
d) open your mp4 animation in PS
e) use File/Export/Export for Web
f) there chose gif format, your color settings, and if you wish your animation to play ones or loop
g) then export
Voila!

Second way is to use paid scrpt inside AE called GiFGun GifGun - aescripts + aeplugins - aescripts.com

And one other way is to use some online gif converter f.eg. Free Online Animated GIF Maker - Make GIF Images Easily

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 08, 2017 Dec 08, 2017

Copy link to clipboard

Copied

So I followed the process and the first version came out perfect. But now i'm getting this error. Adobe Save for Web Error ; Could not complete this operation. An unknown error has occurred. None of the setting are changed for the first import the only difference is that this file is 1080x1080 the first one was 800x418. I deleted my saved preferences i don't use Photoshop much so i don't think anything major changed but it still does not work. i just checked it again and now the last part of the gif does not show for some reason but it plays most of it.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Dec 08, 2017 Dec 08, 2017

Copy link to clipboard

Copied

As for the unknown error - i'm not sure what is that about. But as for your gif not playing last part - probably the reason is that you've reached Ps GIF limit witch is 500 frames. If your animation is longer than 500 frames - PS will not render anything above 500frames.
Yes, I know - limitation. But 500 frames is in most cases enough. 500frames in 25fps is 20 seconds but if you lower your framerate f-eg to 12 fps (enough for decent quality for most) it will give you 41 seconds.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 11, 2017 Dec 11, 2017

Copy link to clipboard

Copied

Thanks for the help my team didn't know about those limitations. We are looking to see how we can implement the use of GIF's for smaller shorter promo projects in the future for now the MP4 is fine.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 29, 2019 Mar 29, 2019

Copy link to clipboard

Copied

Hi, a quick question surged, please.

How do I change or lower the framerate in PS before exporting the GIF file, please?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 31, 2021 Jan 31, 2021

Copy link to clipboard

Copied

Lowering the frame rate needs to be done prior to importing your vidoe file into Photoshop.

Keeping the 500 frame limit of Photoshop in mind while you're in After Effects, reduce your Comp frame rate in the Composition Settings.  So, if you are animating originally at 24fps, change the Comp to 12fps.  Or if you are aniamting at 30fps, change the comp to 15fps.  While you can reduce the frame rate in the Render Settings, it's a little easier to do it in the Comp Settings as that change lets you see the frame count in the Current Time indicator in the Timeline panel.

 

Render the lower frame rate movie and then import that into After Effects.

 

While MP4 works, you might consider using Apple ProRes422 Proxy or Apple ProRes422 LT (better PSNR that MP4 and better color depth).

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 16, 2019 Oct 16, 2019

Copy link to clipboard

Copied

I just applied this same process using adobe animate, not ae and it worked fine. Thanks! Trying to figure out a good way to do this all day.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 16, 2019 Oct 16, 2019

Copy link to clipboard

Copied

Here's the most efficient way to generate an animated gif in After Effects

  1. Plan your animation and set times for all transitions and movement as well as the time for the parts of the animation that have no movement
  2. Create an 8bit Project and a GIF sized comp, preferably with an even number of pixels in each row and column long enough to accommodate the animation and 12 or 15 fps is plenty for an animated gif
  3. Set up the animations in the usual way except when you complete an animation - say something like a 1/2 second move in from the left for a new graphic, set the hero position keyframe, move forward 1 frame and then start the next transition. You will set the duration of the single still frame later in Photoshop
  4. When your animation is complete and every section that is not moving is only one second long, set the work area to the last frame of the animation and trim comp to the work area
  5. Send the comp to the Render Cue, NOT the Media Encoder and render the comp using the default LOSSLESS or LOSSLESS With Alpha preset (if you need transparency in the GIF) in the output module. Do Not Use H.264 or any other interframe compression scheme if you want good color dithering because the color will be encoded in blocks of at least 4 pixels with each block having the same color value - that's how h.264 4.2.2 or 4.2.0 color works and there is nothing you can do about it
  6. Open the lossless render in Photoshop and open the Motion workspace
  7. Examine the timeline, step through the transitions one frame at a time and when you get to a spot where you want to hold for a few seconds set the duration for that frame. Animated GIF's are the only format that I know of that let you set the duration of each frame
  8. When everything looks good and you like the timing export the Animated GIF - This is where you get to choose the kind of dithering, transparency, and other options. You don't have transparency options with h.264 or most other formats.

 

That's about it. You could create an animated GIF with 10 half-second transitions and 10 slides that ran for 4 seconds each that only had 70 frames @ 12 fps or 90 frames at 15 instead of a file that had a minimum of 240 frames. That's how to use AE to generate an animated GIF.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 17, 2022 Jan 17, 2022

Copy link to clipboard

Copied

Hi Rick, You seem to know a lot about gifs so I thought I would ask you in this tread I found while searching for an answer to my problem. I have a client that is requesting a 16fps gif ( they have said that the machine the gif will run on can only run 16 fps) I'm working in after effects where there is no option to export in 16 FPS. my frame rate in After effects is 16 FPS. what might be the best way to export the gif to ensure it is 16fps? or is this even possible?

Thank you,

Chris

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 17, 2022 Jan 17, 2022

Copy link to clipboard

Copied

Just use 16 for step two in Rick's instructions and you are good.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 17, 2022 Jan 17, 2022

Copy link to clipboard

Copied

LATEST

Thanks, I actually ended up springing for GifGun after learning that it has a "fps same as comp" setting for rendering straight from AE.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 26, 2020 Jan 26, 2020

Copy link to clipboard

Copied

Wow...this worked great. I've been trying for an hour to figure out a way to do this and this worked great!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 31, 2021 Jan 31, 2021

Copy link to clipboard

Copied

I had a logo intro project where I wanted it as a gif for my Behance project. By reading through all the comments, I decided I'll try to use photoshop as recommended in most of the answer but didn't work for me. So I decided I'll use Media Encoder and it worked for me very well. 

  1. First I exported the video as Avi from after effects and then pushed it to Media Encoder
  2. With the inbuilt presets that Media Encoder comes with, I navigated to the Gif options in the Presets Browser where I first chose the "Gif Sequence preset." It didn't work. This option outputs the file into hundreds of files which was shocking to me .
  3. I chose the second option which is "Animated Gif preset" which worked like magic.
  4. The gif was well output and all animations were as smooth as I expected.

 

Someone else can try this and can share the results. 

 

adobe screenshot.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 31, 2021 Jan 31, 2021

Copy link to clipboard

Copied

It's probably worth noting that if your Animated GIF uses #ffffff white for the background that there's a known issue with exporting from Adobe Media Encoder where the white will shift to #fbfbfb.  This can be corrected in Photoshop by opening the Anaimted GIF, making the correction to the Color Table and re-saving it.  Or this can be avoided by exporting the Anmated GIF in Phtoshop to begin with.

 

Animated GIF exported with Adobe Media Encoder (white BG shifts)Animated GIF exported with Adobe Media Encoder (white BG shifts)Animated GIF exported with Adobe Photoshop (white does not shift)Animated GIF exported with Adobe Photoshop (white does not shift)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 05, 2022 Jan 05, 2022

Copy link to clipboard

Copied

There is something fundamentally wrong with the fact that After Effects is used for motion animations, and yet the export workflow for the most commonly used animation formats takes you from AE to Media Encoder, to Photoshop...

 

There is a preset for animated GIF in Media Encoder - it should work.  Adobe pros are here with workarounds and links to third party solutions that can get the job done - exporting from AE.

 

This is just another example of a really broken set of product interactions, where everyone on the web is using a set of file protocols and Adobe is not paying attention to how their customers make them. It's true of GIF, Lottie, webp and several others. What will it take for someone at Adobe to wake up to what's going on? 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 05, 2022 Jan 05, 2022

Copy link to clipboard

Copied

You make a good point.  If you'd like to see stronger support for Aniamted GIF (or any other format) be sure to vote for it on the Adobe User-Voice page for After Effects (After Effects: Hot (3849 ideas) – Adobe video & audio apps (uservoice.com)).

 

In the meantime, I highly recomment GifGun - aescripts + aeplugins - aescripts.com if you need to create Aniamted GIFs and don't want to jump over to Photoshop.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines