Austin Web Design Blog

Realistic Brushed Metal Graphic in Photoshop

Photoshop is more than just software for photo editing. It is possible to create almost any texture under the sun. This can help you add realism or abstract graphics providing depth and interest to your site. In this lesson, Realistic Brushed Metal Graphic in Photoshop we will look at a method for creating a realistic metal texture which can be used to make tiling backgrounds, shiny buttons, plaques, shimmery ribbons, or drawn objects such as buildings or vehicles. We will use two of the most useful filters in our lesson: Blur and Noise. They are used time and time again for effects, so learn to use them and experiment with the versatility they provide. Let’s get started.

Create a Gradient

The first step is to create a custom gradient using the Gradient Tool and Gradient Editor. Creating custom gradients in Photoshop is a snap.

Select a light gray such as #fafafa for the foreground, and a medium-dark gray for the background like #c6c6c6. Make sure there is enough contrast between the two colors, so that we will have a nice, obvious shimmering effect on the metal. Click on the Gradient Tool. Click on the drop-down arrow, and on the Gradient Palette menu choose New Gradient:

Photoshop gradient tool, create new gradient

Go back up to the gradient color selection and click in the box to open the gradient editor, and then click to create new color selection stops, alternating between the two colors:

Photoshop gradient editor, create stops

Create your rectangle

Use the Rectangular Marquee Tool to draw the outline of the button and then use the Gradient Tool to fill the rectangle. Hold down the shift key to get a straight gradient.

Rectangle with gradient fill


Metal Effect

Two filters are used to create the metal effect, and they are filters you can use to create a wide variety of effects. These filters are Blur and Noise:

Blur and Noise Filters under the Filter menu

Go to Filter – Noise – Add Noise, and in the Add Noise dialog box make sure your settings are Uniform, Monochromatic and about 6% for the Amount.

Rectangle with gradient fill

Ok, not so pretty, but you can see the gradient is still present. In the next step we will have the effect we’re after.

Go to Filter – Blur – Motion Blur. The angle should be at 0% for a perfectly horizontal blur, and the Distance can vary depending on the effect you would like to achieve. For example, a Distance of 40 pixels you will get a coarser metal, and for 200 pixels it will be smoother. I used a Distance of 150 pixels here:

Rectangle after noise and motion blur filters applied

Add Dimension

Add a Bevel layer style. Double-click on the layer to open the Layer Style dialog box, then select Bevel and Emboss. Play around with the settings to suit your particular project, but the settings used to create our finished project are Style: Inner Bevel, Technique: Smooth, Depth: 100%, Direction: Up, Size: 3, and set Soften: 0.

Bevel and emboss dialog box settings

Our finished product looks like this:

Brushed metal graphic

Experiment with this process. It would be easy to adapt this to different types of metal, colors using new custom gradients, or to add other realistic effects such as knicks, scratches, rust spots or grunge. We will use this as the starting point in our next tutorial, Engraved Text Effect, and we will also do a little more with the 3d look making a realistic metal name plate.

Wed, 14 Sep 2011 10:11

Comment Realistic Brushed Metal Graphic in Photoshop