In this AdobeĀ® Photoshop tutorial, you will be learning various techniques involved in creating web buttons. This tutorial can also be extended to Photoshop CS2. First, open up a new .psd document. 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.

141.jpg

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.

341.jpg

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.

240.jpg

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 color.

439.jpg


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.

535.jpg

Click Filter, Texture, Textures. Choose Sandstone.

76.jpg

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.

81.jpg

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.

Popularity: 12% [?]

Share and Enjoy:
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
Subscribe in a reader |

Links you may find interesting -