Semi-transparent button that changes color based on backgound


Is it possible to create a button with only the shadings... (e.g. Photoshop: Bevel & Emboss, Drop Shadow etc.)

...and then place that button on top of another graphical element, e.g. a green square and get the effect of a nice shaded green button?

The big win is that then I could have my app users personalize the color of the buttons.

Anybody heard of this technique before and have some tips?


7/1/2012 3:58:00 PM

Basically you have to keep transparency where you want the color to change. So I would start with a shape with 0% fill and only the effects showing. Then, depending on the shape, you might have to create a mask (e.g. invert the shape) in the color or texture of the background to hide unwanted coloring from the background. Export to .png to maintain the transparency.

the checkered background is fake to illustrate transparency

7/3/2012 1:06:00 PM