Skip to content

Instantly share code, notes, and snippets.

@magicznyleszek
Created August 20, 2014 11:27
Show Gist options
  • Star 49 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save magicznyleszek/178576519be1ea9e36cd to your computer and use it in GitHub Desktop.
Save magicznyleszek/178576519be1ea9e36cd to your computer and use it in GitHub Desktop.
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
Copy link

rtpHarry commented Apr 8, 2016

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

@amjo
Copy link

amjo commented May 8, 2016

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

@dliebner
Copy link

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

@Nick-of-All-Trades
Copy link

Yes.

@Yogsther
Copy link

Yogsther commented Oct 6, 2017

Aha!

@stymco
Copy link

stymco commented Dec 4, 2017

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

@scottfc
Copy link

scottfc commented Dec 13, 2017

Thanks, helped out a lot.

@WarrenPJ
Copy link

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

@sueharaluke
Copy link

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

@davevanhoorn
Copy link

Thanks, awesome!

@martumo
Copy link

martumo commented Mar 22, 2018

This is great!! Thank you!!!

@zenbug
Copy link

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
Copy link

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
Copy link

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
Copy link
Author

@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
Copy link

@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
Copy link

Cheejyg commented Jun 19, 2021

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

@noxtras
Copy link

noxtras commented Oct 14, 2021

Wohoo! Thank you!

@cagdastakis
Copy link

This tip worked for me like that;

  1. ..... done but wont work
  2. ..... done but wont work
  3. ..... done but wont work
    ...
    All done lets refresh the page
    OMFG!!!!! ITS WORKED ! Kisses!

@hamidamadani
Copy link

Great. Thanks

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