Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout How to make Web Buttons in Adobe Photoshop

How to make Web Buttons in Adobe Photoshop

Browse Pages: 2  > >>

image 1

1 – Creating the button shape

image 2 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.)

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

image 4

2 – Selecting a column for extension

image 5 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.

image 6

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.

image 7

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.



Author's URL: Daniel Piechnick
Browse Pages: 2  > >>
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "How to make Web Buttons in Adobe Photoshop"

Captcha