Alright, today we’re going to create glossy OSX/Web2.0 style buttons. But we’re going to take a different, more flexible approach to creating them.

The most usual techniques (that I’ve seen, at least), usually require some form of blending and use of the select-tool to for creating the gloss. This quickly becomes a bit tedious when you want to create multiple buttons with different forms, sizes and colours. So let’s take a different approach to creating these buttons.

Using layer styles

Alright. Let’s create some good looking buttons from just one layer! Grab your rounded rectangle tool (U) on the keyboard and then select the rectangle. A corner radius of 20px will do well, also remember to make sure anti-aliasing is checked! Create a new layer and draw a rectangle on it in any colour you wish (we’ll change this later anyway).

Alright, now let’s get on to create a little more depth to it. Use fairly dark shades of gray, like so:

Ok, now for the trick which will provide us an easy way to change the button’s colour later on. Add a “Color Overlay” layer style, chose whichever colour you wish (bright shades, saturated shades work the best) and change the blending mode to Linear Dodge.

Alright, let’s get some more depth on that button, and combine it with a nice glossy effect. Add a “Bevel and Emboss” layer style, either use my settings or have a play with them yourself.

There’s an alternative way of adding a gloss (the results aren’t quite as good though) which I’ll show you later on.
Now let’s add an inner and outer glow to define the button’s edges a tad.

Alright, now let’s add a drop shadow and adjust the blending options a bit, and we’re all set!

Alright, here’s the alternative way of creating the gloss. First of all, uncheck “Bevel and Emboss”. Then add an “Inner Shadow” using these settings.

Alright, now that we’ve got our layer style, let’s save it so we can user it whenever we wish without having to go through this entire process all over again.

Alright, now we’ve got glossy buttons in multiple colours and shapes with the click of a button. Have fun using them!

I’ve uploaded the .psd containing the layer style if you’re too lazy to make it yourself. You can grab it here.

If you like this article, please digg it to help spread the word!