How to extract the black and white components of an image to superimpose it over colored backgrounds

Question

Say I want to create a glowing button for a website. I would like to have the possibility to dynamically change the color of that button by changing the color of it's background.

For this I need to create some kind of transparent layer from my original image that i will then superimpose over a colored background.

Imagine I create a round button with an external glow such as this one :

The image I need to create from the image above is the one below :

By superimposing this transparent layer over a colored background, I could "re-create" the first image, but with the color of the background.

Is there a way I can create the second image from the first one using Photoshop CS4?

Answer 1

You asked how we would do it for that particular image, so I'll tell you. I'm not sure if this method is applicable to your particular problem, but for what it's worth:

In this case, you basically want to turn luminosity into transparency - the blacker a pixel is, the more opaque it is. Go into the Channels panel (same window as the Layers panel) and Ctrl+Click on the thumbnail for the RGB channel. Just like with layers, ctrl clicking on the channel thumbnail selects based on the "opacity" (not sure what the correct term is, here) of that channel. The RGB channel basically acts like a layer that's more opaque the more color there is at any particular pixel (not sure if it acts on saturation or some function of R, G, and B, but that's the basic idea... sorry, it's 2 AM and too late to go do my technical homework). So you've basically now got a selection which is more opaque the more color a given pixel has.

So just go back to your main layer and hit the Delete key. There was a bit of green left when I did it, for some reason, so I also desaturated the image.

Answer 2

As stated by Jack M, ctrl click channels. Then click on the layer, and click the "add layer mask" button at the bottom of the layers panel. You can also adjust the transparency with the brush tool that way by clicking on the mask box and using any type of brush/opacity combination to adjust it (white adds, black subtracts).

Or alternately just make the whole thing by making a blank mask layer (click (create new fill or ajustment layer next to the mask button, choose solid color, pick black), get a big brush with hardness set to 0% and click in the middle of the canvas with the color set to black using black as the color for your brush (you can turn on quick mask mode to help you visualize what this is doing if you like). You can also use a charcoal brush or any of the textured ones to get a gritty effect. Then just save for web as png.

Answer 3

Thanks for your answers everyone ! I've managed to do what i wanted. I don't know if this is what you explained because i'm a complete beginner with photoshop, but here is what i did :

-Create a black image with say 400x400. -Create a green (or any other color) round in the middle with a 200 diameter. -Add an outer glow to it with the same color. -Convert to smart object and rasterize (i've no idea what that means) to get real pixels. -Ctrl + click on the RGB channel in the channel panel to get some kind of round selection -a bit larger than the round without its outer glow. -Go the the black background layer -Turn the background to a layer -Delete selection -Delete the glowing round.

I'm not sure this will work with every case but at least it works for this one.