: 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

@Merenda852

If you are using Photoshop CS6 Extended (and some prior versions) you can create your Vector Shape then right-click on it or select Create 3D Extrusion from the 3D menu. Once it's a 3D shape, select the button in the 3D panel and in the Properties change the Extrusion to 5 or 10 or something you like, and in the Cap attributes, adjust the Bevel and Inflation until you're happy with it. You can add and reposition lights to get the lighting just the way you like as well.

Select the Materials (Front/Back Bevel/Inflation) and then change the Opacity (in Properties panel) to what you like as well. The less opacity, the more transparent it is. You can even play with the shadows from the lights as they are transparent too. Finally, when you're happy with the shape, highlights and caps, select Render from the 3D menu—this may take a little longer but provides much better results than the real-time GL preview.

Once it finishes you can Save For Web... Use a PNG-24 and all of your transparent shadows and materials will be transparent as well. BEFORE you save the PNG, in the lower left of the Save For Web dialogue there is a preview button, preview it in Safari (or whatever browser you have)—and if your browser has developer tools, change the background color and you can see that all of the transparent parts of your graphic are allowing the background color/image to show through.

I will also say that if you start with a vector shape, you can select it in the 3D panel and select Edit Source from the Properties panel—this pops open the original vector shape so you can adjust it, save it, and then Photoshop applies the changes to the 3D object. This provides you with a non-destructive and fully-editable workflow.

More information on Photoshop's 3D features can be found at: www.photoshop.com/products/photoshop/3d
Cheers!

UPDATE: Merged in Example

Example of a 3D Extrusion with Bevel and Inflation, Glass material, rendered out, then Save for Web as PNG-24 with Transparency then placed on different backgrounds... I did this as a quick example and to stop the haters who thought I was spamming without even know the power of Photoshop's 3D features. (^_^)


@Cotton if you want the master PSD file, ping me and I'll send it to you... but not the haters—they'll have to read and learn on their own. I can provide you with the source image as well as the CSS to set the background color if you need that too. (^_^)

Cheers!

OH! And if you like the answer please +1 it. (^_^)

Vote Up Vote Down

@Angie364

The perfect and most simple way is this:


Make the to-be-overlapping layer
Set the effect(s) such as the Bevel & Emboss you mentioned
Set the layer fill to 0% (this makes the layer itself invisible, but not the effects)
Hide any background layers if there are any.
Save as .png image.


This is partly what KMSTR suggested, except I wouldn't bother with masks or inverting images. Also this answer isn't entirey clear IMHO (no offence :p).

Vote Up Vote Down

@Rivera951

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.

Vote Up Vote Down

@Nimeshi706

Yes. Provided you don't try and use any blending modes in conjunction with the transparency. Blending modes will not translate to transparent areas.

Here's a thread where I suggest doing just what you are asking:
design/ display user evaluation state's

Vote Up Vote Down