Web Button

In this tutorial you will learn how to make a nice looking WEB BUTTON for your website.

Step 1

Open any texture image on Photoshop.

Step 2

Now select the Rectangular Marquee Tool & select Fixed Size from the style drop down box and put in a width of 88 and a height of 31. You see this at the top of the screen.

Step 3

Now click any where on the image. This will make a selection of 88x31. Moving your mouse pointer on the image. If you think you have found the good looking area of the image. Now copy your selection and paste in a new document with an image size of 88x31 and with a transperent background.

Step 4

If you want to change the colour of the button, Goto Image->Adjustments->Hue/Saturations(CTRL+U) and choose which colour you like best suitable for your web button.

Step 5

Now create a new layer & select again the Rectangular Marquee Tool & change Fixed Size Width 88 Height 10. Now press D & X to reset your foreground & Background color & fill the selection with white color. Now go to Edit->Stroke & follow these setting.

Width: 1 PX , Colour: Black (#000000) Location: Inside & press ok.

Step 6

Set the layer2 opacity:75% Now Select layer1 go to Edit->Stroke & follow these setting.

Width: 1 PX , Colour: Black (#000000) Location: Inside & press ok.

Result

Need to put the text into the button, select the type tool, and pick a font you like, I used Tw Cen MT Condensed pixel font. Now type your site name into the middle of the white bar below! And lastly give your text a 1px stroke.