Multiply blending mode to PNG

Question

I have a layer in Photoshop with multiply on, when I however save to web it loses the blending mode.

How can I keep multiply or achieve the same effect in another way?

Answer 1

Here is one thing you can do.

1. Copy the image you want to multiply. (CtrlA and CtrlC)

2. Make a new 'Black' color layer and click 'add mask'.

3. alt-click the Mask icon, so that you can enter to mask edit mode.

4. Paste your 'multiply' images in the mask (b/w) , and then invert it.

5. You will have a black layer with your multiply material masked.

6. You can adjust opacity of that layer to find best looking image. (30~40%?)

7. If you save it as transparent PNG file, you are done.

It is not perfectly same with 'multiplied image' , it will be somewhat dimmed, not that vivid enough, but it is quite useful when you need normal images or textures to apply on top of something.

Answer 2

Blending modes are not supported by PNG. All you get is alpha transparency. If you want something blended with the background, blend it in photoshop first, and save the flattened image.

Answer 3

There's a simple solution for this:

1. Choose the layer
2. Click fx in the layers tab
3. Choose "Blending Options"
4. Start dragging "This layer"'s right-most arrow to the left

Answer 4

If i understand correctly, you want to create png to multiply color with html background, to drop some shadow on html background. There are mixing of two worlds involved, that is why you cant blend image world with html world.

Anything inside png looks ok and blends and multiplies across layers, and then when you put it into web it doesnt look ok.

One way is to blend it onto flat color same as html background (i am sure that's not acceptable or the case) or flatten all blended layers together. You can't blend 50% black + multiply on green html background to get dark green but you will always get 50% grey over green which is a dull grey green. Multiplyed 50% black turns into normal transparent 50% black if it is over transparent background so as any other blended color in any other mode. Web browser isn't a live environment to support graphic blending modes as found in photoshop.

Answer 5

If you drag down the 'fill opacity' bar in Advanced Settings, it will keep the transparency effect through the entire .png.

Answer 6

If you have multiple layers, select all your layers and then convert it to a smart object by clicking right and then 'Convert to smart object'.

Then rasterize the layer by clicking right and select 'Rasterize layer' and save it as a PNG. This must do the trick!

Answer 7

I was just having the same issue. What worked for me was going to "fill" in my layers and adjusting it from 100% to 0% then saving the png. Hope you figure it out!

Answer 8

First select all layer which have blending modes, then right click, duplicate layers (while duplicating layer choose in popup box New file>now open in new file and save for web with png 24.

Answer 9

PNG does not support multiply, period. But there are ways around this. Assuming the issue is similar to shadows are not appearing dense enough. You could use Z Index (not available 8 years ago, when this question was asked) which allows for blending modes, which would mean saving the object and it's shadow as separate.PNGs and setting the shadow to multiply.

Alternatively if you know what the background colour is going to be, flood a background layer with the desired colour, then take a sample (ensure 'sample all layers' is enabled) of the colour of the multiplied shadow, then fill that shadow with the sampled colour and turn off multiply, merge and save. It will look a bit odd while it's transparent, but once on the background colour should look identical to a multiplied shadow.

Answer 10

Here are some stuff I needed to do to get this working:

• First make the image that you want to use gray scale.
• Paste it in to the mask channel in the channel window.