Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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 :

glow

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

transp

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?

share|improve this question
1  
The specific example you've chose would be fairly easy. Do you need the method to be highly accurate and work with a variety of source images? (If you do, that changes things a little and makes it harder.) –  Marc Edwards Dec 13 '12 at 0:22
    
Well i did this example manually because i knew what it would look like, but i would not be able to do it with something more complicated. I don't need to do it with very complicated images like photos, but i plan to use this mainly with glass-style buttons. –  Virus721 Dec 13 '12 at 0:43
    
Do not cross-post questions on different SE sites. The question on the wrong SE ends up getting migrated to the correct site, where you've already posted a copy. –  Farray Dec 19 '12 at 16:27

3 Answers 3

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.

share|improve this answer
    
Thanks for your help :) I've tried this but when i delete the selection, it only leaves the outer glow and all the rest is totally transparent (i "resterized" the round to turn the layer styles into real pixels before). Maybe i did something wrong, i'll try again tomorrow, 4 AM now x) THanks anyway. –  Virus721 Dec 13 '12 at 2:50

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.

share|improve this answer
    
Thanks for your help ! –  Virus721 Dec 13 '12 at 10:56

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.

share|improve this answer
    
Simplify this: use white, not green. Delete the background layer, and set the top layer blending option to "darken" –  horatio Dec 13 '12 at 15:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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