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?

migrated from stackoverflow.com Jan 24 '12 at 7:07

This question came from our site for professional and enthusiast programmers.

  • 2
    stackoverflow is for programming questions – pivotnig Jan 23 '12 at 8:07
  • I thought maybe you guys could tell me if this could be done with code. – Jonas Jan 23 '12 at 8:46
  • 1
    You need to flatten the image before you save it. This cannot be done with code or via any other way. Just save a copy. Flatten the image. And then save it. It will look exactly how you imagine in any format, PNG, Jpeg, GIF, TIF. Won't matter. – Django Reinhardt Jan 23 '12 at 12:50
  • If you're developing on the iPhone, this could be of use: stackoverflow.com/questions/3679399/… – Django Reinhardt Jan 23 '12 at 12:54

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.

  • 1
    I'm not sure if that's what the original question was asking, but that's exactly what I was searching for when I came to this question. – user8783 Aug 16 '12 at 22:38
  • This answer is exactly what I was looking for too. Very nice method! – Joseph Marikle Oct 23 '12 at 17:40

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.


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

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.


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!


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!


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.


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.

Your Answer

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