Design Grid

A web button is one of the most common call to action elements in web design.

With this in mind, this tutorial is to teach you how to create awesome web buttons using photoshop.

Setting up the canvas and palette

To start this tutorial, we need to fire up Photoshop and set the canvas settings as outlined in the following screen grab.

This gives a nice large canvas to work from. For the next step, we need to select the colours for out colour scheme. I have chosen to do my button in red, but the colour is entirely up to you.

As outlined in the screen grabs below, I have selected two colours for the pallete. My base red colour and a darker red for the gradient.

Base Red

Darker Gradient Red

Creating the button

Using the Rounded Rectangle Tool [Shortcut: 'U'] with a 10px corner radius, create a rounded corner rectangle in the center of the canvas.

We want our button to look glossy and have a little more depth to the colour. To achieve this, we are going to add a gradient to the button to make it feel shiny and more 3 dimensional.

To add a gradient to the button, select Layer > Layer Style > Gradient Overlay.

We will now need to select the darker red > transparent gradient from the gradient colour chart. [Second from top left in the screen grab here]

For me, the preset gradient settings worked just fine. But feel free to have a play with the settings at this point to get it looking good.

The button already looks good, but I like to add a subtle outline to finish at this stage to make it look crisper and sharper.

To do this, I select ‘Stroke’ from the Layer Style menu and apply the following settings:

The Roundup

There we have it, you now have an awesome looking web 2.0 button. This is a really basic way of doing it, don’t be afraid to play with settings to get the button looking just right for you.

In case you want it, I have also included the source PSD file which can be downloaded from here.