I've been trying to do this for a few days now and have not gotten the results I need. I'm not sure I'm using the correct terminology in the title, if not, please feel free to correct me, and I'll update it.

I want to go from this: enter image description here

to this (i've sampled an area of the transparency to show the k value in case that helps). Notice the shadows/highlights are there, but nothing else: result image

This allows me to place a layer filled with a solid color below the transparent image. The result is a different color shirt, and shadows/highlights are seen:

layer filled with blue placed below the transparent shirt layer enter image description here

layer filled with black placed below the transparent shirt layer enter image description here

Does anyone have any ideas on how I might be able to accomplish this? I've been able to get close to the result, but my transparency is either not enough or too much. I lose much of the shadow/highlight detail. The starting image is of filetype JPG.


I need the final result to be a PNG like this one: enter image description here

This PNG looks like it has a white background but taking it into Photoshop or GIMP you'll see the shirt is transparent. I need to reverse engineer how this was done so it can be done to other pieces of clothing.

What is interesting about the above PNG is the Shadows, Highlights, and Midtones in the transparent part of the image can all be selected individually. Photoshop: Select->Color Range->Shadows, Highlights or Midtones. Image below to show what I mean: enter image description here

  • 2
    Why not do a Layer Blend with a mode of Multiply? Looks like your shape has pretty well defined edges so you'll be able to mask it off pretty easily.
    – ckpepper02
    Commented Sep 23, 2013 at 20:26
  • 1
    Because OP wants to export the image as a transparent PNG. Multiply relies on a color to be behind it.
    – Hanna
    Commented Sep 23, 2013 at 20:56
  • possible duplicate of Photoshop - turn white transparent, specifically preserving shadows - new issue
    – Hanna
    Commented Sep 23, 2013 at 20:57
  • Multiply + mask is the way to go then.
    – John
    Commented Sep 23, 2013 at 20:59
  • Could you expand on that, John?
    – Hanna
    Commented Sep 23, 2013 at 21:48

4 Answers 4


When assigning white as alpha channel for transparency we will not be able to have opaque highlights, as these per definition will be white, hence fully transparent.

To have an alpha channel sparing both highlighted white areas, and black shadows we better choose a grey color for assigning alpha.

  • To show the effect more clearly I first made your original image darker, and increased contrast. You will need to both, adjust the source contrast, and choose a grey level which suits your needs best for better results.

  • Then I assigned an alpha channel to a 'grey' color (rather than white):

    enter image description here

Now when we overlay this picture with e.g. a green background we can see, that both highlights, and shadows are maintained.

enter image description here

We can see, that when used on dark colors the white areas of the original image may still be too bright for the desired effect. This can be overcome when we choose a grey rather than a white source for creating our alpha channel template.

Below (top left) I used a grey bucket fill with 20% opacity on the white original. After assigning a transparancy alpha channel to grey (top right) we can overlay a colored background (left black, middle dark red, right ivory white) to achieve the bottom line effects.

enter image description here

  • I am a novice at this and am having trouble with the alpha channel. My method of getting the transparency effect up until now has been going to the channels tab and control+clicking on the RGB channel. I then use a quick mask and adjust the levels, but I can't seem to get to where you are in the first image you posted. How are you assigning an alpha channel to gray?
    – aMMT
    Commented Sep 23, 2013 at 13:36
  • @Phonetic: I quickly did this with Gimp (there is a menu entry to selecting any color for transparency). This makes me believe there is (or should) also be such an option in PS or whatever application you use. A much better approach however is given by Peter's very nice anwer, i.e. separating highlights and shadows. This will allow for much finer adjustments.
    – Takkat
    Commented Sep 23, 2013 at 13:51
  • I got it now. Have achieved exactly what I need following these instructions. Thanks very much
    – aMMT
    Commented Sep 24, 2013 at 3:52
  • Could i have the psd for this tutorial, i am having troble getting the transparency.
    – user74703
    Commented Aug 20, 2016 at 21:43
  • @Takkat can you please mention the steps for the second point - "Then I assigned an alpha channel to a 'grey' color (rather than white)"?
    – Vishal
    Commented Aug 10, 2017 at 5:57

For this, you best create separate channels for the shadows and highlights.

The shadows can be directly taken from the white T-Shirt, and be used as a multiplicator (0-100%) for the shirt's color (layer mode: multiply)

As for the highlights, this really depends on the material. Cloth doesn't reflect much light on the surface, so most of its color comes from diffused light (the shirt's color). To extract the specular light, I'd use a high-pass filter (histogram adaption: only the bright colors, and none of the dark colors) on the white shirt's image and use that to brighten the shirt, but only with maybe 20% (low reflection).


enter image description here

Resulting images:

enter image description here

  • This is great. Is there any way to get the final image as a transparent PNG? The end goal here is to use 1 single png image on a website, and by changing the background color of the html div that contains the image, the shirt color will effectively change.
    – aMMT
    Commented Sep 23, 2013 at 13:00
  • I'm having trouble getting the highlights. I think I am missing a step because after applying a high-pass filter, the shirt in the layer that I've applied the high-pass filter to looks very gray (there isn't much contrast like I see in your Highlights layer). I used a 20 pixel radius on the high-pass filter at first and then tried a few different radius values, but I'm not getting close to what is seen in your highlights layer. What can I be missing?
    – aMMT
    Commented Sep 23, 2013 at 15:21
  • Use the same method, fill the background/outer of your image in white and let your css act as the bottom layer. The shirt would be a semi-transparent window.
    – John
    Commented Sep 23, 2013 at 21:03
  • I wish I understood this answer better because it sounds really cool.
    – Hanna
    Commented Sep 24, 2013 at 4:25
  • This effect needs blend modes (multiply, brighten), whereas HTML only uses normal blending (painting transparent images over each other). HTML5+SVG would be an option, but the SVG blend modes seem not to be supported yet by browsers. See dev.w3.org/SVG/modules/compositing/master/…. An effective way to do this effect in a browser would be with a small java program (Java2d blend modes) embedded in the page. Commented Sep 24, 2013 at 7:19

There is easier way - select the white background, invert it, define brush preset, create new file based transparent, grayscale - and this is. Select the brush, which is the last in the list and click once with black fourground swatch. Voila! Than you can save as web - png.


Use CSS Filters Rather then Multiple Images

You should use CSS filters to colour the image for a website.

enter image description here

The benefits are as follow.

  1. Only one image required.
  2. Smaller image file size.
  3. More control over your colours without having to use an image editor.
  4. Mobile friendly.
  5. Faster load times.
  6. Better SEO.

For Hue use this CSS filter:

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);

For Brightness use:

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);

For Saturation use:

img {
  -webkit-filter: saturate(8);
  filter: saturate(8);

For Greyscale use:

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);

Not the answer you're looking for? Browse other questions tagged or ask your own question.