How to export an image from Photoshop with the multiply effect?

by

I have a design in Photoshop with two images with the multiply effect. This effect is not possible in all browsers with Javascript/CSS3, so I decided to export the images with the effect from Photoshop.

I copied the layer of the image with the multiply effect. Then I exported this. But when I put it in browser, the multiply effect is gone.

What is the correct way to export images with multiply?

Answer

  1. Make a new layer that is black and add a mask to it

  2. Paste your image into the mask (alt+click the mask) and invert it

All the white is now masked out of your image, while black is solid, similar to multiply

  1. Save for web as 24 bit PNG with transparency

  2. Use ImageAlpha if you want to save it at a smaller size

It looks a bit dark compared to “real” multiply transparency, but is OK in my opinion.

Attribution
Source : Link , Question Author : Dvex , Answer Author : rangi

Leave a Comment