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

  • related: stackoverflow.com/questions/2958813/… – Luciano Mar 1 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 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 at 13:36
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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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