Grayscale to Transparency with Photoshop

By Josh Wright on December 2010 in tips

 

Five years ago, David Chess wrote a blog post that blew my December 13, 2010 mind. It is titled: Making PNGs with alpha-channel transparency in Photoshop.

What's the problem?

Take this martini glass image:

It has a solid white background, but I want it to be on black. Or on orange. Or on a llama.

You can delete the white parts with the magic wand tool, but the gray areas begin to look choppy.

Inverting the image looks fine with a martini glass, but not so great with most other images. You could change the hue or colorize it, but the image gets an ugly tint.

Bad Martinis

What's the solution?

What I really want is to make the white transparent, the black opaque, and map the grey from transparent to opaque. Before today, I thought this was easy in theory, but impossible in practice. I was wrong.

Here are the steps:

  1. Open the image you want to transparencyize.
  2. Merge all the layers together
  3. Convert it to greyscale (Image -> Mode -> Grayscale)
  4. Select the whole image & copy to your clipboard
  5. Press "Add Layer Mask" in the Layers tab
  6. Open the "Channels" tab
  7. Show the bottom channel & hide the top one
  8. Paste your image
  9. Invert it (Image -> Adjustments -> Invert)
  10. Show the top channel & hide the bottom one

It's actually quite easy in Photoshop and it looks great on black, white, or any color! You can even drop it on another image and it looks great!

If you want the new image to have a bolder look, just duplicate it a few times.

Good Martinis

My hat is off to David Chess!