Transparency and shadow problems while exporting

[chasecates]

Hi everyone,

I'm working on a website for a client and I'm experimenting with transparency and shadow effects for the first time. We've incorporated these "paper cut" effects throughout the website, but the effect isn't the same when I export as a PNG. The below screenshot is essentially what the effect should look like on a solid color background or white/transparent.

Now the idea is to have these "paper cuts" attached to a photo that floats over the parallax background on the website. Something like below. In this particular example, the two paper cut shadows would be grouped with the photo of the puppy and exported as one PNG.

Here is a shot of my export settings:

And here is the result:

I'm hoping that it's a simple fix and I just need to adjust colors or something. I've exhausted my resources and I need some help from you guys.

Thanks in advance! I'd be happy to offer up any more information if needed.

Working in CC on MacBook Pro Mojave 10.14.3

[Monika Gause]

I don't understand how you combine these elements.

Do you combine photo and PNG in Illustrator?

Or do you put the PNG on top of the photo in HTML?

[chasecates]

Hi Monika, thanks for the reply.

I combine the photo and PNG shadows in illustrator. In the example above, the shadow elements sit behind the photo on the same layer. I then group them together and export as PNG. Then I drop this PNG into the HTML editor (in this case, I'm using Squarespace).

[Monika Gause]

But your screenshot doesn't show the shadow with the image in the export dialog box.

[chasecates]

I didn't use the photo in my original export dialog for the screenshot I posted in the question. But please see below:

The artboard on the left is 3 objects on 1 layer (top shadow, photo, bottom shadow). As separate objects, the shadow effects work properly. I then group them together and export as PNG with the settings below. The right artboard is the result. As you can see the transparency of the shadow is filled in with white and I lose the effect.

I also tried Save For Web option, but that gave the same results.

[lambiloon]

Hi yes use save for web option for saving this then hope you get your problem fixed...Thanks

[chasecates]

Hi lambiloon. Thanks for your reply.

I used the Save For Web option with the below settings.

The results were the same as grouping the objects and exporting to PNG. The left artboard is the original artwork (shadow 1, picture, shadow 2 on 1 layer) and the right artboard is the result.

Do I need to change something in the settings for this option to work?

[Kenneth Kawamoto]

Can you try exporting to PNG-24 with Transparency instead of GIF?

[chasecates]

Thanks for your reply.

The left artboard is the original artwork (shadow 1, picture, shadow 2 on 1 layer) and the right artboard is the result as PNG-24 with transparency. Still the same problem (maybe even a bit worse?)

Below are the settings used to export as Save For Web PNG-24:

[Monika Gause]

You can't work with "Multiply".

You need to make the shadow using reduced opacity.

[chasecates]

I don't follow. You want me to change the blending mode from multiply to normal? And then reduce opacity in the transparency panel? How would this solve the problem?

Btw thanks for all your replies Monika, much appreciated.

[Monika Gause]

You have to create that blend from black 100% to black 0%

Only then you can export a PNG 24 that has transparency it it.

[Mariam Hovhannesyan]

Try to select all then create outlines then try to export it

[chasecates]

Thanks for the reply Mariam, but I'm not working with type. I did try to convert all strokes to outlines, but that didn't work either

[Monika Gause]

You need to do it like this: https://www.dropbox.com/s/cr0ub38jwkoir86/shadow.ai?dl=0

[ShellyDSmith]

I'm  having the same problem. Illustrator used to be able to do this [remarks removed by moderator]

[Monika Gause]

I'm  having the same problem.

By @ShellyDSmith

Which problem exactly?