How to make brushed aluminum text and backgrounds in Photoshop

By Jim on November 17th, 2008 | Posted in Photoshop Tutorials | 2 Comments
Tags: add noise filter, aluminum background, brushed aluminum text in Photoshop, metal website header, motion blur filter

I got an email from someone asking for a tutorial on how to make brushed aluminum text in Photoshop. This technique is very easy to accomplish using only a few basic Photoshop tools and filters. We’ll be creating a new document, and using the noise and motion blur filters to create our aluminum. We’ll then add some text and play around with a few simple techniques. Let’s get started.

This tutorial will show you how to create a simple brushed aluminum website header similar to this.

For this tutorial, we’ll make a very simple and metallic brushed aluminum website header. Create a new document with a size of 960×200 pixels. Fill the background with 75% gray (or #555555), and duplicate the background layer. Rename the copied layer to Aluminum. Here’s what you should have:

Fill the background with #555555, duplicate and rename the new layer to Aluminum.

Now we need to make some noise. Choose Filter > Noise > Add Noise…. Set Amount value to 10%, and set the Distribution to Gaussian and make sure the Monochromatic box is checked… like dis:

Set your noise options just like the screenshot shows.

Now we’ll use a motion blur to give us the brushed effect. Choose Filter > Blur > Motion Blur…. Set the Angle value to 0º, and the Distance value to 80 like the following screenshot:

Set your motion blur values to match this screenshot.

Our canvas is now starting to resemble brushed aluminum. If you notice, the sides of the canvas look kind of shitty compared to the inside of the canvas. The easiest fix for this is transforming the Aluminum layer to be wider than the document. This will get those nasty frayed edges the hell out of our way. Command or Control + T to transform the layer, and hold down the ALT (option on Mac) as you drag the layer wider than the document. Drag it just wide enough to hide those frayed edges off to the side. After you’re done, it should look something like this:

Transforming the aluminum layer wider than our canvas hides those shitty frayed edges.

Our aluminum is starting to look decent, but still lacks depth and realism. In order to give it a true metallic sheen, we’ll use gradients and blending modes to give us a more realistic aluminum finish. Create a new layer above the aluminum layer, and call it Shine. Choose white as your foreground color and select the gradient tool. Drag a guide from the top ruler down, setting it at the 100px mark so we have a visual reference to go by when creating our gradient. Make sure to choose Foreground as Transparent for your gradient, and choose Reflected Gradient for the gradient type, like so:

Be sure to choose these gradient types, drag a guide, and set foreground color to white.

Now we can make our gradient. Click and hold the gradient tool somewhere near the guide, and drag it up to around the top edge of the canvas. Holding down the shift key will restrict the gradient to x or y axis. After you have your gradient, set the layer blending mode to overlay. You should be left with something like this:

Use Photoshop's gradient tool... remember holding shift lets us restrict to x or y axis.

Adding some shine to our brushed aluminum.

Now we gots a basic brushed aluminum base that we can really start sprucing up and adding detail. We’ll now work on building a navigation bar. Create a layer group called Aluminum Background containing the Shine and Aluminum layers. This will keep our layers tidy.

Now grab the guide we made at the 100px mark and drag it down to the 160px mark. Choose your marquee tool, and drag a selection of the entire document beneath the guide. Create a brand new layer called Navigation Background and place it in a brand new layer group called Navigation. Fill the new layer with solid black. Set the blending mode to overlay and drop the opacity down to 50%. This allows our aluminum to show through just a little bit:

Here we've made a new layer, filled it black, set the blending mode to overlay and adjusted the opacity to 50%.

For realism sake, we need to give our navigation bar some depth, and make it appear as though it’s inset from the top part of the header. We can do this very easily by creating a new layer above our Navigation Background layer, and option + clicking on the Navigation Background layer thumb. This will give us a marquee selection of our black rectangle. Choose your gradient tool again, only this time choose black. Drag a gradient from the top of the marquee tool down to around the middle of the black rectangle. This will create a shadow underneath the main header, which makes it look recessed and cool.

To add a bit of detail, option + click the Navigation Background layer thumb again to give us another marquee selection. Create a new layer above the shadow layer, and fill it white. Press M to select the Rectangle Marquee Tool, and press the arrow down key one time. This shifts the selection one pixel down from our rectangle. Press delete and we’re left with a 1 pixel high white line. Drop the opacity to 70% and you should be left with something like this:

Using gradients and marquee selections has our navigation looking more realistic.

Duplicate the navigation shadow, and flip it vertically. You can flip stuff by choosing Edit > Transform > Flip Vertical or you can command + T and then right-click and choose it from the options. Once you get the shadow layer flipped vertically, command or control + I to invert the selection to white. Change the blending mode to overlay and position the shadow to where it’s butted up against the white line we just made. This will give the metal a ‘lip’ and make it look better.

Now is a good time to add in a bit of placeholder text so we can see how our header is taking shape. I made up a few random buttons and used 14pt Trebuchet MS. You should have something similar to this:

Our metal website header so far.

Now it’s time for cool logo that looks inset in the aluminum. For this effect, bolder, fatter text works much better than thin shitty text. Start off by adding some text, I used Futura Extra Bold size 45pt in all uppercase. Set the blending mode to overlay. I also placed my text roughly in the center of the bright aluminum and around 30px from the left side, like so:

I used Futura Extra Bold size 45pt to start our logo

Notice that some of the brushed aluminum shines through our text. We simply need to create a few shadows and highlights to make the logo appear cut-in to the aluminum background. Start off by command or control + clicking the text layer’s layer thumb. Create a new layer on top of the text layer, and fill it black. Before deselecting the marquee selection of your text, select the marquee tool, and use your arrow keys to move the selection down. Each arrow click represents 1 pixel moved. I moved mine 2 pixels to the right, and 5 pixels down:

Here's what you should have after adding drop shadow to text.

Now we can add in some highlights using the same technique as the shadow, only this time we won’t need to blur it. Create another new layer on top of your text drop shadow layer, and again grab a selection of the original text. This time, fill it white.

With your marquee tool selected, use the arrow keys again to shift the position of our selection. I moved mine up 1 pixel and left one pixel. Press delete and then deselect. You should now see a feint highlight. Set the opacity to 80%.

We can now add a little bit more highlight to around the text to help it stand out a little more. Create yet another layer on top of the highlight layer, and get yet another selection of our text. Fill the selection with white, deselect it, and add a gaussian blur of 4 pixels. Again create a selection of our original text, and press delete. Change the blending mode to overlay, and drop the opacity to 80%. If all goes well, you should be looking at something like this:

With highlights and drop shadow added, our logo takes on a bit more depth.

Alright! Our header is shaping up a bit more, but still lacks a little pizazz. Luckily, we can use the same techniques as above to continue adding highlights. First though, we’ll add an adjustment layer and bump up the contrast of our aluminum, to help make it look a bit more shiny. At the bottom of your layers palette, click on the half moon looking icon thing and select the Levels… option. This will prompt us with a levels dialog box. Change the settings to something close to this, it should help increase the contrast of our metal surface and make it ‘pop’ a good bit more.

Something close to these settings should help increase the contrast on our aluminum just a bit.

Now we just need a couple more quick gradients set to overlay to act as highlights. Create a new layer, and drag a gradient that looks something close to the following. Try to make the gradient at a slight angle:

Add another gradient to act as a highlight for the metal.

Change the blending mode to overlay and bump the opacity down to 70 or 80%, this will prevent the highlights from completely blowing out to white. Duplicate the layer, and flip it horizontally in the same way we flipped vertically earlier in the tutorial. Invert the layer so it’s black and change the opacity to 40%.

Our header is looking like metal more and more, but could still use a few smaller touches. Create another new layer, and select your brush tool. Pick the Soft Round 100 pixels brush, and choose white for your color. Be sure your brush pressure is set at 100% and click somewhere in the middle of the canvas to create a white round blob. Set the blending mode to overlay. You should now have something like this:

Use a soft round brush to create a white highlight.

Now add several more highlights across the metal, varying the size, opacity and shape of the highlights. Don’t forget to keep them all grouped in their own layer group… this will help make editing at a later time much easier. You should be able to tweak layer opacities and adjust levels to optimize the shine of your header. Here’s our completed header:

Here's our finished aluminum header.

Hopefully, you should have little trouble making these super simple techniques work for you. Try to build a few different graphics using the noise and blur tools and see how it goes. You can also reuse many of your elements by duplicating layers or layer groups. For this version of the header, I simply duplicated the Navigation layer group, flipped it vertically and nudged the opacity down a bit to create a simple site stripe at the top:

Making a site stripe at the top is easy by simply duplicating your Navigation layer group, flipping vertically and repositioning.

You’ll probably also find that using a Hue/Saturation adjustment layer gives you an easy way to alter the color temperature and mood of your header. Here, I used Hue/Saturation to give my aluminum header a bit more character:

Using Hue/Saturation adjustment layers allows us to easily control color temperature.

Here we made the color temperature slightly warmer.

So there ya go, easy and quick brushed aluminum using Photoshop. Hope you learned something.