Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


How can you export a gif with a transparent background?

New Here ,
Mar 09, 2019 Mar 09, 2019

Copy link to clipboard

Copied

I'm trying to export a gif with a transparent background, but the gif always has a black background even if there's none in the composition.

Views

26.2K

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

Adobe Community Professional , Mar 09, 2019 Mar 09, 2019
GIF is a graphic file not video/movie file and AE is not the best tool to export that but if you wish to do that straight from AE - you have to use script called GifGun. I you don't wanna spend money on that - you have to: - export your animation to image sequence with alpha channel - open that in PS - export to GIF by going to File/Export/Save for webBut you have to remember that GIF don't have actually real alpha as f.eg. png. As for small in size animated stuff with alpha - you can try to ex...

Likes

Translate

Translate
Adobe Community Professional ,
Mar 09, 2019 Mar 09, 2019

Copy link to clipboard

Copied

GIF is a graphic file not video/movie file and AE is not the best tool to export that but if you wish to do that straight from AE - you have to use script called GifGun.
I you don't wanna spend money on that - you have to:
- export your animation to image sequence with alpha channel
- open that in PS
- export to GIF by going to File/Export/Save for web

But you have to remember that GIF don't have actually real alpha as f.eg. png. As for small in size animated stuff with alpha - you can try to experiment with animated webp format.

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 ,
Apr 10, 2021 Apr 10, 2021

Copy link to clipboard

Copied

Well this is strange! photoshop can do the job but after effects or Media encoder can not !

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 ,
May 22, 2020 May 22, 2020

Copy link to clipboard

Copied

Hi,

 

I have tried this method but once I go to export my GIF from photoshop I get an error message :  'Adobe save  for web error: Could not complete this action. An uknown error has occurred'

 

I have read on other forums to reduce the image size but this still does not work.

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 ,
Apr 10, 2021 Apr 10, 2021

Copy link to clipboard

Copied

If I need an animated gif from an After Effects comp I do the following:

  1. Set the comp frame rate to 8, 12, or 15 - there is no need for any higher frame rate in an animated gif
  2. Set the comp frame size to an even number of pixels high and wide because Gif's work better that way
  3. Make sure that are no duplicate frames in the animation (see details below)
  4. Add the comp to the Render Queue and choose the Lossless With Alpha preset in the Output Module settings
  5. Render the file and open it in Photoshop
  6. In Photoshop, adjust the duration of any frames that I want to last longer than one frame (read the explanation)
  7. Use the Photoshop File menu to export an animated gif for the web using the Legacy option

 

That's it. 

 

Let me talk about the no duplicate frames. Inside Photoshop you can set any frame for an animated gif to any duration. You can have that frame last for 30 seconds if you like. There is never any need for duplicate frames in an animated gif. Let's say you are designing an animated banner for a website. The banner starts with a static image. Fifteen seconds layer there is a 10 frame transition to the next frame and it holds for 15 seconds, then there is another 10 frame transition to the next frame, then that frame (image) holds for another 15 seconds, then the third transition for 10 frames to the final frame before the last transition back to the first frame.  The total length of the banner is 45 seconds plus 4 * 15 frame transitions. 

 

The way I would set up the comp is to start the first 15 frame transition on frame 1, finish it on frame 16, then start the next transition on frame 18 and finish it on frame 33, then start the next transition of frame 35 and finish it on frame 50, then start the last transition on frame 52 and finish it by ending on the first layer at frame 67. 

 

The entire comp is 67 frames long, with only 0 frames that are not animated every 15 frames. When you open the rendered movie in Photoshop you go to frame 1 and set the duration to 15 seconds, then move to frame 17 and set the duration to 15 seconds, and so on. You have reduced the frame count from 960 frames to 67 and reduced the file size by about 90%. You can't do that with Gif Gun. 

 

If your animated gif has constant motion, just reduce the comp frame rate and use Gif Gun, but I still prefer the render to lossless with alpha/open in Photoshop/Export using Legacy for the web workflow because you have complete control over the compression and the frame duration.

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 ,
Aug 22, 2021 Aug 22, 2021

Copy link to clipboard

Copied

LATEST

We've created a free script for exporting GIFs from AE and it support transparent background as well. Download and learn more at https://aejuice.com/blog/how-to-make-a-gif-in-after-effects/?utm_source=adobe_comment

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