Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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:
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:
Also some relevant info here:
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:
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.
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.
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.
save for web. gif. make sure to choose diffusion transparency dither.
Gif's do not support transparent effect. So acc to my suggestion you can delete those grey area , It looks better after this. Thanks.
