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

Button with Metal Border and 3D Look


There are different methods for creating buttons. i will show you how to make a nice looking button only with a few layer styles

So let's start.

Open a new document. 400 X 400 px will be good ,( this is not important )

Then select Rounded Rectangle Tool and draw a simple button.

image 1

Now add the following layer styles:

image 2

image 3

image 4

image 5

image 6

image 7

image 8

image 9

image 10

And this is the final button. You can add text alone if you want, or you can leave the button empty so you can confuse your visitors from your own website

Button with Metal Border and 3D Look



Author's URL: amitk
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

Reader's comments
comments Kitty44381 August 16, 2011 says:
I did this tutorial twice and still did not get the same result. It's sad, I really liked how this button looks.

It looks as though you may have used dodge tool for the white effect. (because mine has grey in the end instead of white) I'm guessing you left out a bunch of details and those prnt scrns probably are not accurate. Further more, your "metal border" in the end is much thicker than the result this tutorial gives. As for the gradient, I'm not sure how you got it to look like that. It's a great looking button, but I wasn't able to replicate it.

PS: Those attempting this tut

Reply
comments Kitty44381 August 16, 2011 says:
I did this tutorial twice and still did not get the same result. It's sad, I really liked how this button looks.

It looks as though you may have used dodge tool for the white effect. (because mine has grey in the end instead of white) I'm guessing you left out a bunch of details and those prnt scrns probably are not accurate. Further more, your "metal border" in the end is much thicker than the result this tutorial gives. As for the gradient, I'm not sure how you got it to look like that.

It's a great looking button, but I wasn't able to replicate it.

PS: Those attempting this tu

Reply
comments Kitty44381 August 16, 2011 says:
I did this tutorial twice and still did not get the same result. It's sad, I really liked how this button looks.

It looks as though you may have used dodge tool for the white effect. (because mine has grey in the end instead of white) I'm guessing you left out a bunch of details and those prnt scrns probably are not accurate. Further more, your "metal border" in the end is much thicker than the result this tutorial gives. As for the gradient, I'm not sure how you got it to look like that.

It's a great looking button, but I wasn't able to replicate it.

PS: Those attempting this tu

Reply
Add comments to "Button with Metal Border and 3D Look"

Captcha