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

Website Button


Step 1

Create a new document in Adobe Photoshop with the dimensions 200x100 pixels and a white background. Draw a rounded rectangle with a light grey color.

image 1

Step 2

Select Layer > Layer Style > Drop Shadow to apply the drop shadow effect. When applying the effect use the next settings:

image 2

Step 3

Apply the inner shadow effect on your layer. To do this select Layer > Layer Style > Inner Shadow and set the next settings in the window which appears:

image 3

Here is an intermediary result:

image 4

Step 4

Draw another rectangle, like in the next picture, with a white color and "rasterize" it. To make this step choose your layer in the Layers Tab and select Rasterize. Now you can work better on this layer:

image 5

Step 5

Using the "Polygonal Lasso Tool" (find it in the Tools Tab) make a selection like in the next picture (make this selection on the last rectangle that you drew, the white rectangle):

image 6

Using the DELETE key delete the selected area:

image 7

Step 6

Select a small brush in the Tools Tab, like "Soft Rounded 45 pixels" and delete the bottom corners of the white polygon like here:

image 8

Set the "Opacity" to 50% in the Layers Tab:

image 9

Step 7

Draw another rectangle with a white color and place it in a position like here:

image 10

Set the "Opacity" of this layer to 12%, and the result should be something like this:

image 11

Step 8

Select the layer "Shape 1" in the Layers Tab. In the Tools Tab select the Horizontal Type Tool and type a text on your button with a grey color:

image 12

Step 9

Set a stroke to your text. To do this select, on the layer with the text, Layer > Layer Style > Stroke. Apply the next settings to the stroke:

image 13

And another intermediary result:

image 14

Step 10

A little bit more color on your text and that's the result:

Website Button Tutorial: Final Result



Author's URL: DesignTutorials.info
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Share print this page subscribe to newsletter subscribe to rss

Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Website Button"

Captcha