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.

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?

Thanks!

share|improve this question
    
I use similar methods all the time, I'm very old fashioned that way... –  Joonas Jul 1 '12 at 16:35

4 Answers 4

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

share|improve this answer

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).

share|improve this answer
    
No offense taken. I am open to edit mine. –  KMSTR Jul 3 '12 at 12:44
    
The mask was simply a hint to work around an issue with rounded corners (or custom shapes) that have seen in the past where webdevelopers need to put a rectangular field behind the PNG. –  KMSTR Jul 3 '12 at 12:46
    
@KMSTR Oh ok, I understand. However, if I'm not mistaken, it isn't possible to actually save a mask, right? –  poepje Jul 3 '12 at 12:51
    
That is correct. My approach was to simply leave non-transparent background around the button (e.g. the menue background the icon will be used on), leaving a rectangular graphic with a "hole" in the middle where css color can show through. Essentially faking a surronding background. –  KMSTR Jul 3 '12 at 12:58
    
Ah yes that would be a good solution in most cases, I agree! –  poepje Jul 3 '12 at 12:59

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: http://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. (^_^)

enter image description here

@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. (^_^)

share|improve this answer
    
And here's a few pure CSS methods: 1. tympanus.net/Tutorials/CSSButtonsPseudoElements 2. nova-fusion.com/2011/06/05/making-a-3d-button-in-css 3. onextrapixel.com/2011/09/14/… and a list of other tutorials: webresourcesdepot.com/… Cheers! –  Kevin Bomberry Jul 3 '12 at 11:41

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

share|improve this answer

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.