0

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.

enter image description here

Improve this question
3
  • related: stackoverflow.com/questions/2958813/…
    – Luciano
    Mar 1, 2019 at 12:15
  • 1
    Photoshop renders the blend mode. You can't save blend modes as png just like you can't save adjustment layers or filters or smart objects. If all browsers could read .psd and supported these special Photoshop features... Then yes... but this is not the world we live in. — You should remove the white color from the shirt using a layer mask instead of using a blend mode. — Luciano suggests using css blend modes, but I'd advice against for most use cases, because while it is support in browsers isn't terrible, none of the Microsoft browsers support them.
    – Joonas
    Mar 1, 2019 at 12:38
  • Here's a little example: jsfiddle.net/lollero/2t1er0u6 and the psd file: dropbox.com/s/zoixl74wih90fzd/t-shirt-mask.psd?dl=0
    – Joonas
    Mar 1, 2019 at 13:36

2 Answers 2

Reset to default
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

enter image description here

Improve this answer
0

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).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.