Photoshop Tutorial: Brushed Metal

This tutorial will teach you how to create a metallic shape which you might be able to be used as part of an interface or button.

Step 1

The first step will be to make the brushed metal to be used to fill the shape. To begin, open a new image and make a thin rectangular selection across the left or right side with your Rectangular Marquee tool. Fill the selection with a medium grey color.

Example 1

Step 2

Next, go to Filter » Noise » Add Noise. You should probably set it to around 50 or so. Make sure that you have “monochromatic” checked.

Example 2

Step 3

After that, choose Edit » Transform » Scale (transform/scale is located in Layer instead of Edit in older versions). Use your pointer to grab the outside-middle handle and then drag it way past the edge of your canvas. Double-click in the center to apply the scale.

Example 3

Step 4

Press Cmd+A (PC: Ctrl+A) and then repeat the transformation several more times if necessary—if you pull the scale handle longer, the lines in the metal will be thinner and sharper. When you’re satisfied with the results, press Cmd+A (PC: Ctrl+A) to select all and choose Image » Crop in order to chop off the section we expanded far out to the right past the edge of the image (otherwise the file size will be unnecessarily massive). Drag the layer to the New Layer icon to create a copy, then select all on the background later and press delete. This will allow the background of your choice to show through later on.

Example 4

Step 6

Now, we will make the shape which the brushed metal will be used in. You can use just about any shape you wish for this, but for the tutorial we will use a simple circle with a rectangle merged with it. Choose the Elliptical Marquee tool and draw a circle near the middle of the image. Now, switch to the Rectangular Marquee tool and, while holding the Shift key on your keyboard, draw a rectangle or square that overlaps part of the circle from the previous selection.

Example 5

Step 7

Make sure your new layer is active, and choose Select » Inverse. Press Delete to get rid of the parts of the brushed metal texture that we won’t be using. Select » Inverse again to get back the original selection around your shape.

Step 8

Now we need to add some depth to the shape… one way is with Layer » Layer Style » Bevel and Emboss in newer versions of Photoshop. Otherwise, the best way is to use a texture channel and Lighting Effects to add a bevel around the brushed metal shape. Create a new channel and fill the shape selection with white. Now drag this channel to the New Channel icon to make a copy to work with. With the new copy, choose Filter » Blur » Gaussian Blur, with an amount of about 6.

Example 6

Step 9

Repeat the Gaussian Blur again with a radius of 4 and again with 2, each time strengthening the edges of the shape. Then press Cmd+D (PC: Ctrl+D) to deselect and apply one more time with a radius of 1 to get rid of the rough edges. Hold Control and click on the first channel we made (without the blur) to load the selection—then go back to the Layer Palette.

Step 10

Click on the layer with the shape to make it current and go to Filter » Render » Lighting Effects. Choose the very last option under “Texture Channel” (might be called Alpha 1 copy) to load the height map we just created with the channels. Drag the Mountainous slider down until you have a nice smooth height (I used 25). The light direction is coming from the upper left, with White is High unchecked. The rest of the lighting settings are set at default, but you can fiddle with these if you want.

Example 7

Step 11

You could easily stop right there, but if you’d like to go a step further, you can add a few metal screws to the shape. You can create your own screw graphic to use for this step, or if your prefer click here to download a copy of the screw used for this tutorial (with layers intact).
Just drag the screw onto the graphic and make a few separate copies of the layer with the screw on it. Position these throughout the shape and you’re done!

Final image with screws, drop-shadow, and background texture.

Sample

Tutorial resources
Back to top