Submit Your Article
Home Articles News Tutorials Videos Add An Article
Topics: Design Photoshop Programming PHP CSS Java Database Web Development Javascript Ajax
– Close + Open

Find Out More About DevWebPro!

Sign up for the newsletter


» Terms & Conditions

Welcome to the New DevWebPro!

DevWebPro Includes:
  Hundreds Of Tutorials   Developer News
  Unique Gadget Videos   Tons of Topics to Discuss
  Expert Advice   We Will Publish Your Articles

Metal Textured Button with Chiseled Text

By: John Overbee
Thursday, March 6th, 2008
Text: Decrease Font Size Increase Font Size | Print Print Article | Share: Delicious Digg StumbleUpon Post to Twitter Post to Facebook

In this tutorial I am going to show you a few ways to make a cool metal textured button. I am making a button just to show you the technique but you can use it to do a lot of other things.

Before we start the main tutorial I am going to show you how to make the pattern, which makes a cool looking texture you can use with anything.

Just start a new document with 10×10px and zoom in all the way to 1600%.

Grab your pencil tool and make a pattern that looks like this:

I know that looks kind of odd but it will definitely give a cool effect!

Now to save it as a custom pattern go to edit>>define pattern:

Then when you click on that, photoshop will ask you to name the pattern and call it whatever you want. I called mine metalbutton for this tutorial:

Ok we are done with that and will move on to the main tutorial.

First I am going to start a new document and make it 400X400px and make the background black.

Then I am going to get the rounded rectangle tool to make the basic shape of the button.

Make a new layer and make sure the rounded rectangle options are set to fill and pick the color black.

Now start a new layer and make your rounded button shape. Here is mine:

After making that I want to go ahead and go to my blending options by right clicking on my layer and clicking “blending options”.

Once in there check inner glow and use these settings:

Then “bevel and emboss” and choose these settings:

Also under bevel and emboss check “contour” and choose these settings:

Then check satin and choose these settings:

Then gradient overlay:

Then choose the pattern overlay and choose the new pattern we made with earlier.

Leave all other setting under pattern overlay to their defaults.

Lastly ad a stroke to your button with these settings:

My result so far:

Pages: 1 2

Topics: , , ,

About the Author:
John Overbee is a graphic designer for the iEntry Network.

Leave a Comment

DevWebPro is an iEntry Network ® publication - © 1998-2010 All Rights Reserved