Mobile app version of vmapp.org
Login or Join
Shakeerah625

: Saving Animated GIF With Transparency (Photoshop) I am trying to save an animated GIF, but for some reason areas that are more transparent than others (e.g. the grey shadow) don't come out with

@Shakeerah625

Posted in: #AdobePhotoshop #Animation #Gif #Transparency

I am trying to save an animated GIF, but for some reason areas that are more transparent than others (e.g. the grey shadow) don't come out with opacity, they become fully grey when saved.



When I save it, it turns out like this:



These are my settings when trying to save:

10.05% popularity Vote Up Vote Down


Login to follow query

More posts by @Shakeerah625

5 Comments

Sorted by latest first Latest Oldest Best

 

@Ogunnowo857

Animated GIF with (partial) transparency? No.

But I can do you one better anyhow: Animated PNG

So here's how to do it...


Save your PS animation out as a PNG sequence by going to File > Export > Render Video
Choose export folder, then select 'Photoshop Image Sequence'




Make sure to enable the alpha channel as well. You'll want 'Straight - Unmatted'.

So now that you have your image sequence – here are some of your options for assembling them into an APNG:


Free programs: here, here, here and here (free trial period only on this one)
Online tools: here, here and here)


As for support – Chromium (and therefore other Chromium based browsers such as Vivaldi and Google Chrome), Firefox, Opera and Safari browsers all now support APNGs:



The only major browsers lagging behind are (as usual) Internet Explorer and Edge... As we've seen – the world does not wait for Microsoft.

Now we'll see this format take off for sure and here's why:

Here is an example I made with (full and partial) transparency – first saved out as an animated GIF and lastly as an animated PNG:





Just a wee bit of a quality difference eh? And the animated GIF is 66kb while the animated PNG is only 45kb...

No contest... game over.

10% popularity Vote Up Vote Down


 

@Lee3735518

Gif's do not support transparent effect. So acc to my suggestion you can delete those grey area , It looks better after this.
Thanks.

10% popularity Vote Up Vote Down


 

@Martha945

GIFs don't support transparency in the sense that other formats (PNG, TIF, etc.) do.

The GIF format does support transparency, but pixels are either filled or transparent, there is no in between.

10% popularity Vote Up Vote Down


 

@Samaraweera207

This has nothing to do with Photoshop. It's a limitation of the file format.

The GIF format doesn't support semi-transparency. There is only one level of transparency in GIF images - i.e fully transparent.

However, there might be a solution. The APNG format (Animated PNG) does support multiple levels of transparency - however, not all browsers support the format, and neither does Photoshop, unfortunately. So probably not much use.

10% popularity Vote Up Vote Down


 

@Turnbaugh909

It's not possible. The GIF format doesn't support alpha transparency. Every pixel either needs to be completely transparent or not, no in betweens, and there's no way around it.

If you know what background color your GIF will be on you can set the "Matte" in the Save for Web dialog to that color, which will give you a better result, but that'll only work well if it's being placed on a relatively uniform background.

It's also worth noting that you're viewing the "Original" tab on the Save for Web dialog; that is just showing you your original PSD artwork. Switch to the "Optimized" tab and it will preview the final output based on the settings you have.

Some related posts:


Problem in opacity after saving in photoshop
How can I remove the white pixels around the edges when exporting a transparent GIF?
Transparent GIF with Media Encoder


Also some relevant info here:


What web graphics formats to use?

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme