Skip to main content
T
thomasg63357212
Inspiring
October 23, 2020
Answered

Exporting GIF with Transparent Background for Web Logo

  • October 23, 2020
  • 3 replies
  • 6682 views

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. 

This topic has been closed for replies.
Correct answer thomasg63357212

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. 

3 replies

T
thomasg63357212AuthorCorrect answer
Inspiring
December 4, 2020

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. 

T
trashr98764240
Participant
December 5, 2020

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. 

R
Community Expert
Rick GerardCommunity Expert
Community Expert
October 23, 2020

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.

T
thomasg63357212Author
Inspiring
October 23, 2020

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. 

R
Community Expert
Rick GerardCommunity Expert
Community Expert
October 23, 2020

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.

T
thomasg63357212Author
Inspiring
October 23, 2020

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
Mylenium
Legend
October 23, 2020

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

T
thomasg63357212Author
Inspiring
October 23, 2020

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices