Exporting GIF with Transparent Background for Web Logo

[thomasg63357212]

I am creating an animated logo (200 Px in height). Doing so I went through the entire process of designing the animation in after effects, scaling that animation down to the needed dimensions, exporting the file via "Add to Render Queue", changing the format to Quicktime and changing RGB to RGB & Alpha for the video to recognize the transparency. I then open the video in Photoshop and export it as a gif with a matte set for the desired background. After Export the gif file still seems to have jagged edges and appears low quality. When I export at a higher resolution the gif looks perfect but unfortunatly I can't use that version for web. Is it a mistake I made when scaling down the animation at some point. I have done this before some time ago but completly forgot. Any help would be greatly appreciated. 

[thomasg63357212]

The untitled 2 image is what it looks like once uploaded to the site. WHich is starnge because the gif animation that I uploaded here as well is the exact same one. I don't beleive it is the website compressing the image because when I test one I have done in the past it uploads fine

[Mylenium]

Don't scale the image/ comp! This will of course introduce additional resampling/ antialaising and create more "mushy" pixels where foreground and background colors blend. And even if you can't avoid scaling you might want to control the edge behaviors by applying additional adjustments like e.g. a Levels effect on the Alpha/ transparencys to clip out dirty pixels in a controlled manner. Same of course in Photoshop. Also from the look of some of your images you may have an issue with PS' hardware acceleration messing up things, so that is definitely something you have to look into, because the whole animation stuff in PS relies on it.

Mylenium

[thomasg63357212]

Thank you for your reply. Unfortunatley scaling down is a must. Creating an animation at 200 pixels in height is nearly impossible given the how small a size that is for After Effects. I have already tried to adjust the edges using adjustments such as this both in After Effects as well as when I bring it over to Photoshop but the changes made were very small. Would you be able to tell me a bit more on how to correct this possible issue with "PS' hardware acceleration" as I beleive that last time I encountered this problem it was one switch or option that fixed this.

[Mylenium]

Check the PS preferences' "Performance" section and play around with the drawing modes as well as verifying the compatibility settings.

Mylenium

[thomasg63357212]

I checked out the performance tab and experiemented with a few chnages and have not noticed a difference. I do feel as if this is a simple problem due to the way Photoshop is processing the low pixel gif. Could there be something simple within the View menu that is impacting the overall quality of the GIF Export. I did a test and attempted to input text directly from the After Effects Text Editor as well as directly from the photoshop text editor to test if it was my image, it was not. It must be something to do with the reading of the low pixels. Any ideas?

[Rick Gerard]

If you want to generate an efficient animated gif using After Effects the proper workflow is as follows:

• Create your animation making sure that there are no duplicate frames in the comp. If the animation needs to pause then all you need in one frame for the pause, the duration of the pause will be set later.
• Add the completed comp to the Render Cue and choose the Lossless With Alpha preset from the Output Module presets
• Render your movie and import it into Photoshop
• Step through the timeline in Photoshop and set the duration of any frames you want to pause.
• Export the Animated Gif using the File menu in Photoshop

Using this workflow you get the best color control, the smallest file size, and you have complete control. Exporting an animated Gif directly from AE is not only inefficient, but you lose all control over color and dithering. I don't even think the option should exist.  Using this technique you can create a 1-minute long animated gif that pauses on 6 different images for 10 seconds and has a 10 frame transition between frames that only contains 66 frames. Using After Effects, if the frame rate was only 10 fps you would have 600 frames. That's how a professional would create an animated gif using After Effects.

[thomasg63357212]

Thank you Rick but I feel you may be misunderstanding my problem. I am indeed exporting the gif from photoshop nearly the exact way you stated. At this point I am not as concerned of keeping file size down as I am retaining quality of the original animation. 

[Rick Gerard]

If you are concerned with scaling or changing the size I always find it best to work at the same size as the final output. If your gif needs to be 200 pixels high, make the comp that size and magnify the display so you can see the actual pixels. Precisely lining things up on the pixel grid and making sure that you don't have any antialiased edges is the only way I know of to increase the quality of any animation. 

If your artwork starts in Illustrator make sure that you have Snap to Pixel turned on, make sure that you use Pixel Preview, and avoid any edges that do not precisely line up with the pixel grid. Preparation is 90% of the quality control process.

[thomasg63357212]

I scale everything down just in case me or my clients require the same animation or asset within a larger setting. That is the most practical use and ideally scaling images or animations down should not degrade them as drastically as what is happening to my animated logo. I did a test and attempted to input text directly from the After Effects Text Editor as well as directly from the photoshop text editor to test if it was my image, it was not. It must be something to do with the reading of the low pixels. Any ideas?

[Rick Gerard]

The best option - create all of your original artwork in Illustrator so you can precisely match the pixel grid, import as a comp retaining layer size. If you need different sizes, nest the original comp in a larger or smaller comp, collapse transformations, and scale while carefully looking at the edges at a magnification factor of 400% or more. Even scale factors should work. Another option is to resize the AI document and make the new artboard the right size while keeping snap to pixel turned on.

The most important thing for animated gifs is to make sure that horizontal and vertical edges of your design precisely line up with the pixel grid and keep all horizontal and vertical lines that move at least 2 pixels wide.

[thomasg63357212 · Accepted solution]

I actually have discovered the solution to this problem on my own. I was uploading the gif for a shopify website and I was uploading at too large of a size and in turn shopify would downsample it wich created a pixelated logo animation. To fix this I scaled the quicktime file version of the logo down smaller in Photoshop. 

[trashr98764240]

I think it is best to ditch Gif format all together. Although it has its uses, but since you are creating a logo, it must look as clean as it can. And the gif files at a low scale tend to become pixelated. Research .json formats instead if you like. Json files unforunately can only be exported from after effects using an external plugin called Bodymovin. However, the quality difference when compared to Gif files is just remarkable.