Add Transparent pattern/effects to png image on saving

Question

I need to export a png file with pattern or light effects. I have a tshirt shape with shadow effects on tshirt. The shadow effects has 75% fill and Multiply. If i add a background like color on back layer, it will show me the color of tshirt with shadow effects correctly. After save it in png, and import in new file, when i try to add a background layer on back, the color not is the same ( more lighter ).

How i can export the image with multiply effects or like this ? because i need to use it online on website but with same effects on photoshop.

Answer 1

Here's a fairly simple method to create a transparent PNG which you could use to place over a colour background, without using any blending modes.

1. Desaturate an image of a light coloured t-shirt on a white background
2. Select the T-shirt with the Quick Selection tool
3. Use the Background Eraser tool to remove the white from the t-shirt

Test it by filling the background with a colour. Then delete (or hide) the background layer, and export your transparent PNG.

Example

Answer 2

Blending modes are not preserved when exporting to PNG, when you export your image Photoshop converts it to Normal blending mode, hence your result.

Since you're going to use in a website you could try CSS blending modes:

mix-blend-mode: multiply;

or

background-blend-mode: multiply;

or if you use canvas:

ctx.globalCompositeOperation = 'multiply';

Although I'd check browser support (canvas should have more support).