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

Creating Website Buttons


1. First start by making a new document, I'll be using a document size of 300 x 300 pixels. Now fill the background with a very dark gray, I used #282828.

Find and get out the Custom Shape Tool, then find the following shape:

image 1

If that shape isn't there, click the little arrow on the right then go to either All, or Nature, then you'll be able to find it.

After you've got the shape out, change your foreground to black then draw a few shapes on a new layer. Lower the opacity for the flowers layer to 10-20%.

image 2

2. Now you've made the background, let's start on the buttons.

First start by getting out the Rounded Rectangle Tool, change the radius in the options to about 5 px.

image 3

Reset your foreground color to white (Press D then X,) now draw a rounded rectangle on a new layer.

image 4

Apply the following layer styles to your button layer:

Inner Shadow

image 5

Gradient Overlay

image 6

Stroke

image 7

Your button will now look like this:

image 8

3. Create a new layer then again get the Custom Shape Tool out. With the same shape, make a very small version down in the bottom left of the button. Be sure you're on a new layer when making this shape.

image 9

On another new layer create a much larger flower shape on the right.

image 10

Hold ctrl then click the main button layer's thumbnail, this will have made a selection around it.

Invert the selection by right-clicking the selection (with a selection tool out) and clicking Select Inverse. Press delete to remove the outside of the flower.

image 11

Change the layer mode for this layer to Soft Light and lower the opacity to about 50-70%.

image 12

4. Lastly you have to add text to the button.

image 13

The font I used above is called Tahoma, I used a size of 12 pt, and a color of #ffffff.

After writing out your text, add the following layer styles:

Drop Shadow

image 14

Gradient Overlay

image 15

Your text should now look like this:

image 16

Lastly, duplicate the button layers, change text, etc.

Thanks for reading, we hope you enjoyed the tutorial. If you need to, you can download the PSD file from here.

Creating Website Buttons



About the Author:

I started Web Design 5 years ago, and I now make a substantial monthly income each and every month, and so can you.

Author's URL: Michael Dunlop
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 "Creating Website Buttons"

Captcha