How to make Web Buttons in Adobe Photoshop – Page 2 of 2

 

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.

 

 
<< Back to Photoshop Tutorials   Post a question/comment to the Forums >>

Random Tutorials