Previous article : Designing Video Information Density for Optimum Audience Engagement

Creating basic buttons is an important core skill for a web designer, and can lend a sheen of professionalism to any UI. They're not hard to create at all - and this tutorial will take you through the step-by-step process.

For this tutorial, I was using Adobe Photoshop CS3, although any recent edition should suffice.

First of all, you will need to create a new PhotoShop document - exact size is unimportant, but you will need some space to work with. I'd recommend something like 600x400 to work with. Set the background to transparent.

Next, up select the Rounded Rectangle tool. You can either click + hold on the rectangle / polygon tool item and select the rounded rectangle from the pop-up tool menu, or press Shift+U until the rounded rectangle tool is selected.

Ensure the 'shape layer' option is selected at the top of the page.

Select your desired button background colour. In my case I'm using the UI orange, #c45f3a

Next, draw a rounded rectangle of the rough proportions you would like your button to be. You can always change the size later.

Once you've drawn your rounded rectangle, it is desirable to adjust the points to better fit the pixel grid. Select the pen tool for this.

Select the buttons path by Ctrl+Left Click inside the rectangle. Next, hold Control and drag the selection box over the edge you want to move. Ensure all 4 points relevant to that edge are selected.

Use the arrow keys to nudge the points until the edge of the rectangle appears sharp (you may find it helps to add a matte background layer). Repeat this process for each of the four edges.

Next, we can start to add effects to our buttons - select the 'fx' button from the bottom of the layers palette, ensuring the button layer is selected.

I added a 2px internal stroke of a slightly darker shade for my button - you might also consider a subtle drop shadow, or a gradient overlay (a black and white vertical gradient with a blend mode of 'overlay' and opacity of about 30% works well). It's good to experiment here.

Once you're happy with your basic button shape you can add the caption. Select the text tool, then click somewhere on your canvas to start typing.

Drag the text into position and resize it (Ctrl-T to transform) to sit nicely on the button.

You may want to use the arrow keys to nudge the text into position. You can also use the pen tool to adjust the button width for a better fit.

A small drop shadow can help the text stand out a little more on the button - I used 33% opacity, 1px distance and 1px size.

Readjust positions and sizes if needed - once you're finished select Image > Trim to remove any excess whitespace.

Save your newly created button by going to File > Save for Web. Select your desired filetype in the drop-down in the right panel (I would recommend PNG-8 for most circumstances), then click save to choose a filename and location.

All done! Repeat and adjust text / width as necessary. You could even try some CSS hover effects by altering the border style to a highlight colour. You can try it out with this handy pre-made PSD file..

Next article : 3 Simple Rules for Getting Youtube Subscribers

---