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

Button Depth


Step 1

First open a new layer and create a new layer. For this tutorial I'm going to make a rounded rectangle shape/button. You can make any shape you like, but for this tutorial, try to stick with rectangles.

image 1

Step 2

Now, lets give it a gradient overlay. Double click the layer and apply a gradient. The gradient should make the top of your button a lighter color than the original color. See picture for gradient example.

image 2

Step 3

Your button should look like this.

image 3

Step 4

Now, apply a 1px stroke around the rectangle. To apply a stroke, goto it's Layer Style(double click layer) and click on stroke. Change the size to 1px and change the color. Make sure the color matches the original dark color of the button.

image 4

Step 5

Now make a new layer above the button layer. Use the rectangular marquee tool and make a selection of the top half of the button. Fill it with white and change the opacity of this layer to 20%.

image 5

Step 6

Make anew layer and grab your pencil tool. Set it to 1px and trace around the inside of your button. Make sure you stay within the boundaries of your stroke, but don't trace over the stroke. See picture for details. The color on my trace is red so you can see, but you should make yours white. Set this layer to 30%.

image 6

Step 7

Finally, apply a layer mask on this layer. To apply a layer mask, click on the button located at the bottom of your Layer's Palette. It should be a square with a circle in it. Apply a gradient to the mask so that the bottom of the outline fades away. To do this, grab your gradient tool and make sure the mask is selected in the Layers Palette. Click and drag your mouse (with the gradient tool selected) starting from the top of the button to the bottom of the button. This should have faded the outline away at the bottom. Add some text and your done.

image 7

Final Result:

Button Depth Tutorial: Final Result



Author's URL: Amoebic Tutorials
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 "Button Depth"

Captcha