Creating the effect of a brushed metal surface in Photoshop can be done in many different ways, but the technique I’m going to illustrate in this tutorial is one of the most effective in my opinion.  Specifically, I’m referring to the technique used to create the texture or ridges in the surface of the metal.  This can be accomplished using radial blurs and several other techniques, but using a noise gradient, as I will illustrate in this tutorial, is the most effective technique I have come across.

I’ve provided the Photoshop file so you can refer to it for style details such as gradient start and stop points, etc.  Download it here.

Step 1

Draw a circle.  Make sure you have “align edges” checked so you get a nice, clean edge that snaps to the pixel grid.  Apply the styles shown here.  This will become the shiny, beveled edge of the knob.

This layer will become the shiny, beveled edge of the knob.

Refer to the Photoshop file (download link at top of post) for gradient details.

Step 2

Duplicate the first circle and use the transform command to shrink it by 4 to 8 pixels, depending on your preference and the overall size of the knob you’re creating.  Just make sure you reduce it by an even number of pixels.  This layer will serve as the main, metal surface of our knob.  Apply the styles shown below.

This inner circle is the main, metal surface of the knob.

Refer to the Photoshop file (download link at top of post) for gradient details.

Step 3

Next, duplicate the previous layer and apply the styles shown below.  This layer adds the brushed metal texture to the knob using a noise gradient.

This layer uses a noise gradient to add the brushed metal texture to the knob.

Refer to the Photoshop file (download link at top of post) for gradient details.

Step 4

Add the light glints or “hotspots”.  Draw a small, white ellipse and rotate it slightly so it aligns properly with the edge of the knob at the lightest region of the gradient.  Add “outer glow” and “drop shadow” styles as shown below.  Duplicate this ellipse and place the copy on the opposite side of the knob as shown.  Adjust the opacity of the two hotspots as you see fit.

The light hotspots add flair and character to our knob.

Add an outer glow with these settings. This adds a tight, pronounced glow around the edge of the hotspot.

Add a drop shadow with these settings. This adds a wider, more subtle, ambient glow.

Step 5

To make the indicator mark, draw a thin, vertical, rounded rectangle at the 12:00 position on the knob.  You can experiment with the color.  For this example I chose a very dark grey hue.

Step 6

Add a drop shadow by drawing an ellipse below the bottom-most layer of the knob.  Blur the edge by a pixel or two, and apply a layer mask using a black to white gradient to fade the shadow from dark to light.  Experiment with the angle of the shadow depending on where the light in your image appears to be coming from.

That’s all there is to it!  Now you have a very realistic-looking, eyecatching, brushed metal knob to use in your interface design projects.

Aaron Craig

Aaron Craig is a graphic designer & entrepreneur. He is the founder of NTDesigns, a UI design firm that specializes in touchscreen based interfaces, especially in the home automation industry. He is the primary author for the NTDesigns Blog, and writes periodically for other blogs and publications in the UI design and automation realms when he can. Aaron lives in Milwaukee with his family and two dogs, Napoleon and Kip.