I realise that they these style of buttons has been widely used, but I've had a few people ask me how they are done. The "glossy" look certainly wasn't invented by Microsoft or Apple, but it's the current "in" look, and provided it's not overdone, can make for some very slick interfaces!

Step 1.
Create a new image in photoshop - to keep things trim I just made mine 300px by 150px. I also gave mine a dark background - but you can choose whatever you like.
Step 2:
Create a new layer, and select a dark grey as the forground colour (I've used #282828). Next, select the rounded rectangle tool, and use the following settings:
Draw your button shape ontop of the canvas, and it should be looking something like this...
Step 3:
Next we'll add some style to the button base! Click on the layer styles button at the bottom of the layers pallette and select "Stroke". The stroke settings I've used are below on the left. We'll also add a subtle drop shadow for depth (drop shadow settings on the right).
Step 4:
Beleive it or not, we're almost done! We need to add the "gloss" now, and it's easy to do, but read carefully as there are a couple of parts to it. We have to put a small, but sharp gradient over the top.
- Hold down shift-ctrl-alt and click on the thumbnail of the button layer within the layers pallette.
While it's still selected, create a new layer.- Select the gradient tool and choose a nice light grey (I've used #5c5c5c). Make sure it's fading from that colour to "transparent" (the gradient type selector for this is in the top left corner).
- Hold down shift, and drag down a gradient in your image. Holding down shift forces the gradient to be "straight". Once you're happy with the look, select the bottom half of the gradient and delete it!
- Reduce the opacity of the layer to around 30%
- Adjusting the curves can also add more depth to the button after these steps by making the bottom section darker.
Your image should now look a little something like this:
Step 5:
Just add some text, and we're done, perfect!
Hey.. Great and helpful tutorial. Any thing on how to make vista style icons?
Thanks
-P
@Pradeep: this will give you an idea:
http://www.pixel2life.com/publish/tutorials/489/quick_tutorial_to_make_vista_style_icons/





#1 Fatih YASAR says:
Its great, Thank you for sharing.