4

As my title says my goal is to create a gif with a transparent background. I've created an animation within After Effects. Because there is no possibility to export as a gif with that kind of background, I export it as a png sequence and remerge all images later in Photoshop. Finally, I can export it as a gif with a transparent background. Now if I do so, the gif has a transparent background but the animation is surrounded by a white stroke and is a kind of pixely. Does anyone have an idea how to fix this or maybe another possible solution for me? Other file formats than gif like svg etc. are also possible. In the end this animation is going to be used as a loading animation for web.

I've exported it already in many file formats that allow an alpha channel but still no success. Something I wanna say about the pixely resolution. Sure it can be the small resolution but on the other hand, why is it high res with a colored background then?

Image of the Problem

Greetings Yannick

Improve this question

3 Answers 3

Reset to default
1

If you are going to use it on a black background, put a black background in the first place.

That border is the result of anti-aliasing, which is making some pixels a middle tone between two colors. Blue-white or yellow-white.

Image showing the anti aliasing

A transparent gif can only make 1 color transparent, this is "the pure white". The "no so white" pixels are not transparent at all.

Improve this answer
1

Unfortunately, GIFs don't support Alpha transparency. There's no way to fix this really. GIFs only support either fully transparent, or fully opaque pixels, with nothing in between. So basically, the usefulness of the format for your particular use-case will depend entirely on the background you are placing it on.

If the background is a single colour, or close to being a single colour, then you could use the "Matte" option to change the colour of the outer pixels (the matte), so that when the GIF is placed over a background image, it should blend in with the background. Obviously, you need to know what the background colour will be for this to even have a chance of working.

You can find this feature under File > Export > Save for Web (legacy), when you choose GIF as the output format. Obviously each GIF frame also needs to have transparency for it to work.

Here's an example of the Save for Web dialog with the Matte set to black. In the Optimized image window, you can see how it gives the GIF a black outline rather than a white outline.

enter image description here

Improve this answer
2
  • Thanks you for your help Billy! Is there any possibility of exporting the same thing in another file format like svg etc. instead?
    – BeatB
    Oct 21, 2020 at 8:01
  • @BeatB If you want it to be animated SVG, you can do that using something called Lottie - a bit complex. But there are also other formats like WebM which I like to use instead of GIF
    – Michael
    Oct 21, 2020 at 16:41
0

In Photoshop there is Export setting called Matte if you see it to None , it will remove the weird black/white outlining, BUT it will look pixelated. enter image description here

But if you already know what color the background will be on the website, you can set your own outline color with that it won't look pixelated and it will blend with the background color.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.