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

Metal Buttons


1. Make a new document. Now choose your background color. I used #CCCCCC.

2. Grab the Rectangular Marquee Tool and make a selection like mine below:

image 1

Now make a new Layer in your Layers window. Make sure you are on the new layer and then paint the selection in with any color you want. I used #464646.

image 2

3. Now we want to make another new layer. This will be the border layer. So you want to use the Rectangular Marquee Tool once again. Start off by making a selection like mine below:

image 3

Fill it in with any color you choose. I used #717171. After filling in the selection click the Marquee Tool again and press the arrow keys to move the selection over the the right so we can also fill it in (note that we are still on the same layer (Layer #3)).

image 4

Ok few more selections left to do! Now we want to make a horizontal selection like mine below:

image 5

Also fill it in and move the selection down to the bottom to complete the border:

image 6

4. We got the hard part of the button done now. All we got to do is add blending options to our 2 layers:

image 7

Feel free to use any type of blending options you want. It is always best to learn what all the blending options do. Or you can use all my settings below:

For Layer #2 (border layer):

image 8

image 9

Gradient Editing:

image 10

For Layer #1:

image 11

image 12

image 13

image 14

Metal Buttons

Hope you enjoyed the tutorial!



Author's URL: Think-Designs.com
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:
Made the button. It looked more grey than brown. For those who want it more brown looking, simply increase the inner glow.

I wish he would have told how he did the texture for the border. Easy tut overall but a little disappointed how it doesn't explain how to get the exact same result.

Reply
Add comments to "Metal Buttons"

Captcha