How to create a detailed brushed steel button in Photoshop

A brushed steel button

The internet is saturated with tutorials on how to create web buttons in Photoshop, and if you’re anything like me, you’re probably ready to scream if you ever see another tired and dusty old tutorial showing how to make a “glossy” or “gel” button. If that’s the case, hopefully this tutorial is a bit different from those and will give you some helpful tips.

We’re going to be creating a stylish, detailed and realistic brushed steel button, reminiscent of steel dials on old fashioned stereo equipment. These are really fun and simple to make once you know the techniques and steps used to create them, and you’ll be able to modify or customize the steps to your liking to achieve the effects you prefer.

Step 1 – Set up your document space

This step is really up to you, and will depend on the project you’re working on. For the purpose of this this tutorial, I’ve created a document that is 630 pixels wide by 333 pixels high. I’ve filled it with a mid-gray background, with darkened corners (I used the gradient tool on radial gradient setting). Then I added a slight noise effect (filter > add noise) to create a subtly textured background for my brushed steel button.

Background for my brushed steel button

Step 2 – Creating the base of the brushed steel button

Create a circle in the middle of your document. Any color will do, because we’re going to use layer styles to colorize it to give it a brushed metal look. Name this layer “brushed steel button base” or something that will help you identify it as the base layer, as that is how I will be referring to this layer in this tutorial.

Create a circle

Double click on the circle layer preview to open the layer styles palette. Check the “gradient overlay” button. Next to “style” be sure the gradient is set to angle mode. The red arrows below show the settings you need to pay attention to and adjust.

The layer styles palette

Click on the gradient preview to change the colors to something like the settings shown below. The exact shades you use aren’t important, as long as you’re using dark grays and light grays / white in the order shown here. It’s important that your first color and last color are identical in order to avoid an awkward line where the two colors meet, so copy and paste the hexadecimal value for these two points on the gradient.

Set up your gradient like this

So now you should have something like the image below. The angled gradient created a very sleek silver circle that captures the highlights and reflections for our brushed steel button.

Adding highlights and reflections

Step 3 – Texturing the brushed steel button

So what we have now would be great if we were just making a steel button, but since we’re looking for a brushed steel button, we’re going to push it a bit further to create the brushed, scratchy texture we need.

Make a selection of the circle layer (command-click on Mac, control-click on PC) and then click on Select > Modify > Expand. Enter a value of 5 pixels, and click okay. Add a new layer above your brushed steel button base layer. Fill this layer with a mid gray, and then clear your selection by clicking on Select > Deselect (command-D on Mac, control-D on PC). Click on Filter > Noise > Add Noise. For distribution, select uniform and for amount, set it at around 50%. Click okay. These dots are going to eventually form the brushed scratches on the brushed steel button.

Adding the brushed texture

Click on Filter > Blur > Radial Blur. Set the Amount to 100, the Blur Method to Spin, and the Quality to Best. Repeat the Radial Blur filter two more times (command-F on Mac, control-F on PC). Set the layer blending mode to overlay. Now create a selection of the brushed steel button base layer as you did previously, and invert the selection by clicking Select > Inverse (command-shift-I on Mac, control-shift-I on PC). Hit delete. Clear the selection as you did before. This should clean up the edges so that your texture layer fits perfectly over your brushed steel button layer.

Texture added to the brushed steel button

Step 4 – Adding the beveled edge detail to the brushed steel button

As it stands right now, the texture of our brushed steel button is looking really good and pretty realistic, but it needs some depth to make it stand out more. It’s the details that are going to make this button really shine.

Create a selection of your brushed steel button base layer as you did previously, create a new layer above all the other layers, and fill the selection with a color (any color will do, as we’ll be using layer styles to colorize this layer again). Now click on Select > Modify > Contract. Enter a value of 3 pixels, and click Okay. Hit the delete key to clear the fill in the selection. You should now have a thin bevel around the edge of your brushed steel button. Deselect as you did before.

Open up the layer styles palette for the bevel by double clicking on the layer preview, and go into the gradient overlay settings. Adjust your settings to something like the image below. Note that the gradient used is identical to the one we used previously, except this one is set to linear instead of angle. I adjusted the Scale on mine until I was happy with the way the bevel looked on my brushed steel button.

Adding the gradient to the bevel

The beveled edge of the brushed steel button

Step 5 – Adding the shadow to the brushed steel button

There’s about 20 different ways you could make a shadow in Photoshop, and the most obvious would be to use the drop shadow layer style on the brushed steel button base layer, but I’m not particularly fond of the way that looks, as I prefer a bit more of a realistic shadow.

Create a selection of the brushed steel button base layer as you’ve done previously, and create a new layer behind the brushed steel button base layer, and fill the selection with black. Deselect as you did previously. Click on Filter > Blur > Motion Blur and adjust the settings similarly to the image below – the Angle should be 90 degrees, and the Distance should be a relatively low value.

Creating the shadow for the brushed steel button

Move the shadow layer down until only the bottom portion of it is showing, and the top half is hidden behind the brushed steel button. Drop the shadow layer’s opacity to around 60%. It should now look something like the image below.

The shadow beneath the brushed steel button

If you followed the steps above, you should have a pretty realistic looking, detailed, stylish brushed steel button, perfect to be used in your interface and web designs.

Be Sociable, Share!

•