Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Multiply blending mode to PNG in Photoshop
  1. copy your image (Ctrl+A and Ctrl+C)
  2. make a new document-sized pure-black layer behind it
  3. group the black layer and yor image together
  4. add mask to the group
  5. enter mask edit mode (alt+click on the mask icon/thumbnail)
  6. paste your image in the mask (b/w) and then invert it.
  7. save it as a 24-bit transparent PNG
@rtpHarry

This comment has been minimized.

Copy link

@rtpHarry rtpHarry commented Apr 8, 2016

I can't believe this tip is only found tucked away in a gist on a programming website!

@amjo

This comment has been minimized.

Copy link

@amjo amjo commented May 8, 2016

@rtpHarry because mainly programmers face this issue when a design is given in Photoshop XD

@dliebner

This comment has been minimized.

Copy link

@dliebner dliebner commented Jul 11, 2016

Great tutorial. Just a note, I could only get this to work if I hid the original layer.

@Nick-of-All-Trades

This comment has been minimized.

Copy link

@Nick-of-All-Trades Nick-of-All-Trades commented Mar 31, 2017

Yes.

@Yogsther

This comment has been minimized.

Copy link

@Yogsther Yogsther commented Oct 6, 2017

Aha!

@stymco

This comment has been minimized.

Copy link

@stymco stymco commented Dec 4, 2017

Awesome, man. Worked like a charm. Thanks for sharing.

@scottfc

This comment has been minimized.

Copy link

@scottfc scottfc commented Dec 13, 2017

Thanks, helped out a lot.

@WarrenPJ

This comment has been minimized.

Copy link

@WarrenPJ WarrenPJ commented Dec 28, 2017

I've been looking for this for days! Thank you

@sueharaluke

This comment has been minimized.

Copy link

@sueharaluke sueharaluke commented Mar 6, 2018

You should get paid for this !! Thank you !
Worked perfectly !

@davevanhoorn

This comment has been minimized.

Copy link

@davevanhoorn davevanhoorn commented Mar 8, 2018

Thanks, awesome!

@martumo

This comment has been minimized.

Copy link

@martumo martumo commented Mar 22, 2018

This is great!! Thank you!!!

@zenbug

This comment has been minimized.

Copy link

@zenbug zenbug commented May 10, 2018

Curious as to what types of images you would normally do this with? Icons and things? Would you use this technique on photos?

@wanderingcrow

This comment has been minimized.

Copy link

@wanderingcrow wanderingcrow commented Feb 19, 2020

I've seen this tutorial in other places, but it was far more convoluted. This is perfect. You have made my afternoon. Thanks.

@zenbug one application is if you have an image cut out of the background, for instance, an image of a piping hot mug of well-deserved coffee for @magicznyleszek, and that coffee was dropping the perfect shadow and you wanted to put a colored div behind that coffee mug and have it blend magically.

@lewisisonfire

This comment has been minimized.

Copy link

@lewisisonfire lewisisonfire commented May 13, 2021

Hi All.

I am trying to follow this, but perhaps I am missing a trick as everyone here seems to have this working perfectly.

I have an image on a white background that was taken in a photo booth. This has a particularly nice shadow that I would like to retain on a PNG, while removing the white background. Colour replace is not working as effectively as a multiply blending option, so this guide seems perfect.

However, I copy the images with the blended layer and the original, to a new document with a black background, then perform step 2 to 5, but upon ALT clicking the mask I cannot seem to past the image in the mask b/w and then invert. Nothing happens when I paste.

Can anyone suggest what I might be missing?

Here is a file that I am trying to do this to, but I am looking for the method, not just the result. I am so sorry if I come off as a little slow here.

@magicznyleszek

This comment has been minimized.

Copy link
Owner Author

@magicznyleszek magicznyleszek commented May 24, 2021

@ALL OMG I only today noticed people are using this :) I need to turn on my notifications.

@lewisisonfire I think this is not for you. What you're trying to accomplish is a bit different. This instructions are for a photoshop file with a complex transparent group of objects that you need to export as a single usable png. What you are looking for is cutting out objects with their shadows from a white background. It will take quite a lot of manual work unfortunately. I would do something similar to this YT video https://www.youtube.com/watch?v=zakUq2BTQDQ

@lewisisonfire

This comment has been minimized.

Copy link

@lewisisonfire lewisisonfire commented May 24, 2021

@magicznleszek, I ended up using this and a similar method using an inverted version and pasting into a solid black later mask. Worked out perfectly, so thank you so much for taking the time to respond.

@Cheejyg

This comment has been minimized.

Copy link

@Cheejyg Cheejyg commented Jun 19, 2021

Wow, I just needed to do this and this was really useful, thanks!

@noxtras

This comment has been minimized.

Copy link

@noxtras noxtras commented Oct 14, 2021

Wohoo! Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment