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.


White shadows when exporting as PNG

New Here ,
Jun 06, 2020 Jun 06, 2020

Copy link to clipboard

Copied

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:

Screen Shot 2020-06-06 at 16.45.05.png

This is how it looks:

Screen Shot 2020-06-06 at 16.45.26.png

 

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

TOPICS
How to

Views

1.0K

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 ,
Jun 06, 2020 Jun 06, 2020

Copy link to clipboard

Copied

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

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 ,
Jun 06, 2020 Jun 06, 2020

Copy link to clipboard

Copied

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.

 

example1.jpg

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 ,
Jun 07, 2020 Jun 07, 2020

Copy link to clipboard

Copied

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?

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 ,
Jun 07, 2020 Jun 07, 2020

Copy link to clipboard

Copied

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

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 ,
Jun 08, 2020 Jun 08, 2020

Copy link to clipboard

Copied

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.

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 ,
Oct 21, 2021 Oct 21, 2021

Copy link to clipboard

Copied

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.

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 ,
Nov 21, 2021 Nov 21, 2021

Copy link to clipboard

Copied

LATEST

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!

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