Strange effect when exporting GIF

[olllieelmes]

Hello, 

I'm trying to export an animated GIF from AE but I'm getting this strange orange pixel effect shown below in the top left of the still. It seems whenever I use a feathered mask or an opacicty drop, this happens. 

I also tried to export a mov file from AE to import into Photoshop to create the GIF from there, but PS said there was not enough memory.

Any suggestions much appreciated. 

Thanks,

[Conrad_C]

My guess is that it has to do with the creaky old Animated GIF format supporting only 256 colors. When the composition includes a smooth transition, especially across a large area, GIF simply runs out of colors. After Effects tries to simulate more colors through dither patterns, so you see the side effects of trying to dither the few available colors into patterns.

In addition, the animated GIF export in After Effects, Premiere Pro, and Media Encoder is not the best available. You might also try running an exported video through the Gifski app; it does a better job of translating colors to animated GIF.

If Photoshop said there wasn’t enough memory, what is the duration of the composition, and what are the pixel dimensions of the frame? Larger or longer compositions can be too much for the old Save for Web code to handle.

GIF was not designed for high quality, high resolution video. It’s only used a lot because if you can’t use actual video formats, there aren’t many other options. But if it’s possible to use an actual video format with full color support such as H.264, these problems won’t happen.

[olllieelmes]

Thank you! 

That Gifski app was spot on, really simple interface and a much better end result, especially with the colours. 

The video is 16 seconds long, HD, so yes, a huge file for PS to deal with I guess but all sorted now thank you.  

[Rick Gerard]

If you are exporting a 16 second gif you need to make sure that there are no duplicate frames. No two frames are identical. If ther are transitions between text or graphics, those should run at no more than 12 fps (the actual frame rate of allmost all cartoons made before there were flat screen TV's). 

Sticking with After Effects, you create a comp and render a Movie file that is 12 frames per second. Each part of the animated gif that does not move should only be one frame long. Then you open the rendered movie in Photoshop and set up the timing of each frame. Something like this would work for a 16 second animation that has 4 messages:

1. The duration of Frame 1 is set to a diration of 4 seconds so that the viewer has time to read the first message.
2. Frames 2 through 7 have their original duration of .083 seconds (the length of single frame running at 12 frames per second) to give you a nice transition to give you a half second transition to the second message.
3. Frame 8 is then set to a duration of 4 seconds so that you have time to read the second message.
4. Frame 9 through 15 keep the original duration of .083 seconds to give you a smooth transition to the third message.
5. Frame 16 is then set to a duration of 4 seconds so you have time to read the fourth message.
6. Frame 17 through 22 keep their original duration for a smooth transition to message 4.
7. Frame 23 through 28 give you a smooth transition from message 4 to message 1,

Now you have a 16 second looping animated GIF that is only 28 frames long. That's how you make an efficient animated GIF using After Effects. I started building Animated GIF Banners for websites in 1994 using software dedicated to the task and that's how we did it then to keep file sizes small. I kept the technique when Photoshop allowed you to set the duration of each frame and import movies. I then transitioned to a couple of other tools until I stopped creating animated gifs and turned to Flash, then Animate to create animated messages for the web and even for email. Just creating a long movie with repeated frames so that a viewer can read the message is a waste of bandwidth and money. Any tool or tools that you use to create animations for the web should give you the option to set the duration of static images and control the duration and timing of the transitiions.

[emily.wong-qbuild]

another solution with Photoshop is to reduce the format and amount of colors. That seems to work for me anytime Photoshop says there's not enough memory 

[Danila Miatselski]

Gifski's got only 10/20/50 fps which makes it hard to convert a 29,97 composition so that it looks like original. Or is this a problem of the free version?

[Conrad_C]

If you’re using Windows, it might be a limitation of the Windows version. I use the Gifski app on macOS, and for FPS it has a continuous slider that goes from 3 to 50 fps.

An alternative is to download the command line version available on the Gifski website so you can enter whatever FPS you want, as long as it’s supported by both the Gifski code and the GIF89a format.

Because the source code of Gifski is free open source, if you or someone you know is a programmer, it might be possible to build your own version of Gifski that has whatever features you need, subject to the limitations of the source code and GIF89a format.

I could be wrong but I don’t think there are any paid versions of Gifski. But I only know about the open source code and the free apps based on it. 

[Joost van der Hoeven]

Put a back solid as background layer and see if this helps.