1 – Creating the button shape

In a new layer, select a circular area with the selection tool. (Holding down Shift will make the selection stay circular, rather than being elliptical.)

Fill the area with the paint bucket. This is the curved end of your web button.

2 – Selecting a column for extension

Zoom in (Ctrl +) and select a one-pixel wide area in the centre of the circle. You can use the normal Selection Tool to do this, or you can hold down on the Selection Tool, and choose the Single Column Marquee Tool.

3 – Extending the button shape

With your one-pixel sliver of the web button selected, press Ctrl+T to “Free Transform” the selection. Extend the selection to the left as far as possible.

4 – Colouring Your web button

Press Ctrl+U to bring up the Hue/Saturation properties of the layer. Click “Colorize”. Drag the sliders around until your web button has a nice colour.

5 – Giving the button some Effects

In the layers list, double-click this layer (Photoshop 6.0 and 7) or right-click it and select “Effects” (Photoshop 5). Give your web button a Drop Shadow and a Bevel.

6 – Texturising the button

Click Filter, Texture, Texturizer. Choose Sandstone. I use this texture for most web buttons I do these days.

7 – Adding random colour variation

Create a new layer.

Click Filter > Render > Clouds (If your background isn’t white, you’ll first need to select the area of the button, by holding Ctrl and clicking on the button’s layer in the layers list. This keeps the clouds inside that area.) Click Image > Adjustments > Brightness/Contrast. Set the contrast to maximum. (This turns the random grey clouds into equally random patches of black and white.)

Change the new layer from Normal to Overlay. (This changes the layer from solid colour to a kind of illumination, as if it were cellophane over the web button layer, instead of coloured paper.)

8 – Adding light to the button

Make another new layer.

Choose the Gradient tool. Click on the visual representation of the gradient (Adobe Photoshop 6.0 and 7). In Adobe Photoshop 5.0, click the Options tab first.

On the visual representation of the gradient, put in several tabs. These tabs should be in a black, white, black, white pattern.

Apply the gradient to your image, and change the layer’s Mode from Normal to Overlay. This should give the button some nice illumination.

9 – Adding text to the button

Using the Text tool, add some text to your button. Some useful tips for button text are:

• Make the button text all capitals.
• Increase the tracking (letter spacing). It makes the text more dramatic.
• Make the first letter of each word two points larger.
• Make the first letter of each word red (pale yellow for white text.)
• Use Palatino Linotype font in place of Times New Roman.

Note: you can only change the colour of individual letters of the button in Photoshop 6.0 and 7. In Photoshop 5, you’ll have to right-click the layer in the Layers list, and render it, then lasso the letters you want to change, then Press Ctrl+U to colour-shift them. Most annoying.

10 – Embellishing the button text

Double-click the text layer (Photoshop 6.0 and 7.0) or right-click it and select “Effects” (Photoshop 5). Give it a Bevel and a white Outer Glow. I’ve also put a black outline on the button layer, to make it stand out more, but that’s optional.

http://www.pegaweb.com/tutorials