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
-
Make a new layer that is black and add a mask to it
-
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
-
Save for web as 24 bit PNG with transparency
-
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
