Button, Button

This is a bit of a departure. This is about using Photoshop to create buttons for your website. It has nothing to do with photography. But everyone has a website, right?

One of the basic rules of design is to maintain a consistent look and feel  and one way to do that is to make all your user interface buttons look alike, or at least similar. I set this up some time ago for my First Aid site, and I use the same devices on my other sites.

The idea is to be able to quickly change the text on a button, and possibly to change the colour of it as well, for example if you want it to change colours when you hover over it.

If you're already using Photoshop to create webpages, with sprites and slices and good stuff like that, this is going to seem rather simplistic. But if you're like me, and you only know a little HTML (and perhaps a smattering of Javascript), then this might work for you. Without further ado...

It took me less than 30 seconds to make the second button from the first one. Want to know how? It will take you a few minutes to create a master template then a new button is only a few seconds away.

Create a new document in Photoshop. Keep it larger than you're going to need, you can reduce it in your HTML. Don't worry, it'll be a small file.

Create a type layer. Use whatever font you want. You can scale it, resize it, change it any time in the process.

Create a shape. I used two circles and a rectangle to create an elongated button (I want room for a couple of words). The colours are just so you can see what I'm doing. Recolour them the same and merge the layers together.

Open the Layer Styles dialogue and make it pretty! I used a bevel and emboss, gave it a drop shadow and used a gradient overlay. Note that to keep the colour in place, the blend mode for the gradient has to be "overlay".

Duplicate the layer, open the Layer Style again and add a color overlay. You can change the colour of the overlay in the dialogue.

But we lost the gradient overlay. (OK, that was an "oops". But I have a solution which gets you a bonus too!)

Convert each layer to a Smart Object. That way you can change anything you want with ease. That's the bonus. Go back into the Layer Styles and add your gradient.

By the way, when you create a button, turn off all the unused layers because the drop shadow multiplies. It's outside the filled area.

Here's another hint. If you do a gradient and you make it darker on the top, the button looks concave. If you make it darker on the bottom, it looks convex.

You can edit the type layer just as easily. You can even add styles to it, change the colour, the size... anything! Move it to the top.

Of course, you have saved your work as you went along. In the end, you have a .psd file with a layer of text and as many layers for colours that you want. Normally you would use colours which are coordinated with your website palette.

To create a button, open the PSD file, choose the colour layer that you want, choose the type layer and modify it.

To save your button to use on your website, choose "Save for Web & Devices". If you make it a GIF file and leave Transparency on, the drop shadow will work with your web page background.

Complicated? Not really. Does it make it easy to give your website a consistent look? Can you create buttons in a few seconds? You bet.

If you never really used layers in Photoshop, this might give you a bit more understanding of how they work. Smart objects too.

-- 30 --