Creating glossy buttons

Comments Off

Posted on 26th April 2007 by Fredrik W in internet |Uncategorized

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

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

Glossy btn 1 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).

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

Glossy btn 3
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.

Glossy btn - 4
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.

Glossy btn - 5Glossy btn - 6
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.

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

Glossy btn - 8
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.

Glossy btn - 10
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.

Glossy btn - 11
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!

Photoshop shortcuts

Comments Off

Posted on 25th April 2007 by Fredrik W in internet |Uncategorized

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Nik Ainley, who also go under the pseudonym shinybinary recently published a list of Photoshop shortcuts that he finds useful and uses frequently in his workflow.

It’s a really great read, and even if I knew most of them, I learned a few (like holding the ALT-key when using the text-tool and then pressing the left/right arrow allows you to adjust the kerning between individual letters).

I’d like to add a few myself, which I find invaluable in my workflow:

  • Holding CTRL while clicking on a layer in the layers palette will select every pixel in that layer
  • CTRL+SHIFT+i inverts your current selection
  • CTRL+Backspace/ALT+Backspace fills your current layer/selection with your foreground/background colour
  • If you have snap to guides enabled, holding CTRL will temporarily disable this function (works with most tools!)
  • Holding ALT while using the rectangular marquee will scale the marquee box from the middle instead of the bottom corner

Have you got any good tips for a smoother Photoshop workflow? Feel free to share them in a comment!

Oh, and by the way, don’t forget to check out his art – amazing stuff!