White shadows when exporting as PNG

[EthanSuero]

Hi.

I have an item with a shadow that I want to export as a PNG for a website, the problem is that when exporting as a PNG the shadow is turning a little bit white and you can spot the white on different BG colors, it doesn't look natural.

I have the item in one layer and the shadow in a separate layout and in PS looks great, but when exporting the image as PNG looks as below.

This is the goal:

This is how it looks:

Is there a way to export the image with the shadow avoiding this white tone? I'm exporting the image as PNG with Transparency.

Thanks

[Mylenium]

Even transparent PNGs have a solid backdrop color stored against which semi-transparent regions are blended. Simply use a color that matches the shadow color or the alternate background you plan on using it on, i.e. tint your "Background" layer black or pink...

Mylenium

[Derek Cross]

Cut out the image in Photoshop, so it's on a transparent background, then add a shadow, then add in the solid colour on a new layer and move it below the cut-out layer, finally export as a PNG.

[EthanSuero]

Sorry Derek I don't quite understand what you mean here, you mean cutting the whole image including a background?
The idea is to use a solid BG with the same color I'm planning on using I believe then?

[Derek Cross]

You need to have a layer for your cut-out object (your image) on a transparent background, another layer for your shadow (which you create) and another layer for the background solid colour (your choice of colour) – three layers in all

[EthanSuero]

I ended up adding a solid BG to match the BG of the website, this gave me the same result and managed to export as JPG to save some file size for the web.

But following your method I don't see the point since I still need to add a layer with the BG, I was trying to export the object + shadow without the BG layer, but seems that doesn't work like that as you can see above.

[defaulterzj8ouzm45c]

You can also cut out the object and shadow separately (so that they are on two different layers) and then change the blending mode on just the shadow to Multiply.

[Mark Repa]

Hello, @EthanSuero ! Not sure if you still need advice on this one but, here it goes:

If you created the shadow by using a lighter/brighter color than the background you are applying it to, then the png export will manifest just like in your given example.

Ok, ok, hold your horses, you might say. How can you create shadows from lighter shades than the bg itself? That doesn't even make sense. Partially true.

You can generate darker shades of color from lighter ones if you have the multiply blend mode selected on the layer you are currently working on. That tricks you into believing you are drawing shadows with shades dark enough, when in fact, you have multiply activated. Multiply darkens by default, check your layers to make sure that you are using darker colors than the bg itself, and apply blending modes afterward.

Of course, for best results, I find that shadows work well for png files if you create them from full black (or a very dark color swatch) and use multiply with transparency anywhere from 40 to 90% depending on your designated graphic asset.

I hope my answer helps with your issue, considering you are still looking for a solution.

Cheers!

[jacqueperri]

Depending on the situation you got going on with the shadow layer, it might work to change them blending mode of the shadow layer from multiply to normal. or vice versa!

[mpocoroba]

I'm very late to the game here but I created an action script that retains the original shadow as shot on white along with the subject and ends with a single layer that can be saved as a PNG. There is no milky white halo around the shadow antialiased area either. It behaves as if it is multiplied when placing a color beneath the subject/shadow layer. There's a whole thread about this that I created several years ago that I'm trying to locate, and that's why I stumbled into this thread.