Creating a Cool Brushed Metal Surface in Photoshop
In Interface by FabioToday's tutorial comes in response to a reader request from Tom and it won't be about lighting effects, glows, or sparks. Instead, I will show you how to create the brushed aluminum texture similar to the Apple products!
Step 1
To start, create a new document. As I wanted to create a wallpaper for my laptop I used 1440x900. Unlock the background layer, then apply a Gradient Overlay using a Layer Style. Use Multiply for the Blend Mode, for the style use Radial, and for the colors use #f2f2f2 and #c3c3c3.

Step 2
Create a new layer and rename it to "noise." Select the Paint Bucket Tool (G), fill the layer with white, and change the Blend Mode to Multiply . Make sure that the background color is black and go to Filter > Noise > Add Noise. Use Monochromatic, Uniform, and 8-10%.

Step 3 Creating the Pattern.
With the Ellipse Tool (U), create six very small circles. Select them and align them horizontally. Then click on the Distribute Vertical Centers Button. It will make the distances among the circles the same.

Step 4
Make sure the rulers are visible. If they are not, just go to View > Rulers. Now add some guides like I did and move three of the circles like the image below.

Step 5
Duplicate the three circles from the first column and move them as I did in the image below.

Step 6
Select all circles and Convert them to Smart Objects. If you are not using a CS2 or CS3 version of Photoshop, just go to Layer > Merge Layers. Then double-click on the layer to open the Layer Style dialog box. First add a Color Overlay, use a very dark grey, or even black. After that, add an Inner Shadow.

Step 7
Hide the background and the noise layers. With the Rectangular Marquee Tool (M) select four circles but use the others as reference for distances. Then go to Edit > Define Pattern. Name it "holes."

Step 8
With the Rectangular Tool (U), create a rectangle. Then, again, lets use a Layer Style. First change the Fill Opacity to 0. Add a Pattern Overlay and select the pattern we have just created. Then just copy the rectangle and place it on the other side of the image.

Step 9
Add your logo or any symbol you would like to use and place it in the center of the image. Go to the Layer Style and select Gradient Overlay. For the Style, use Reflected and black-and-white for the colors. After that, select Bevel and Emboss and just follow the image below.

Step 10
Then create a new layer on top of the logo's layer and name it "noise logo." Fill it with white and change the Blend Mode to Multiply. With the Rectangular Marquee Tool, create a selection like the image below. After that go to Filter > Pixelate > Mezzotint, then Filter > Blur > Radial Blur, like we did on the Creating a Vinyl Record In Photoshop tutorial, and the last thing will be to change the Opacity to 50%.

Step 11
Create a selection from the logo, just click on the thumbnail of the layer while holding the Command/Control key. Then make sure that the "noise logo" layer is selected, and go to Layer > Layer Mask > Reveal Selection.

Step 12
With the Pen Tool (P), create a shape like the image below. Convert it to Smart Objects and go to Filter > Blur > Radial Blur. Select Zoom for the method and click OK. Go again to Filter > Blur > Radial Blur and this time use the Spin method.

Step 13
Repeat Step 11, but this time apply the layer mask to the “rays” layer.

Step 14
Create a new layer rename it to “white brush.” Make a selection from the logo again, like in the Steps 11 and 14. Select Brush Tool (B) with basic brush with 35px width, and select the white color. Start painting some areas that will be the highlights of the logo.

Conclusion
This technique can be easily applied on Web design and interface design projects. Besides that, we can create a huge set of holes patterns with different sizes and distances that will be very useful for future projects. I hope you enjoyed the tutorial!

Comments
Leave a CommentAdd a Comment


























kelisjunky
March 13th, 2008
Pretty Nice!
Eva
March 13th, 2008
Nice and so simple
Thanx
Kim Dolleris
March 13th, 2008
beautiful…
craZed
March 13th, 2008
Very cool , thanx : ]
chandan
March 13th, 2008
supercool
Markus
March 13th, 2008
I was waiting for this, and it came pretty fast!
It is great! Realistic
ZaFaR
March 13th, 2008
GREAT,COOL TUTORIAL, THANX’S
kuldeep
March 13th, 2008
Very cool!!
Salva
March 13th, 2008
nice one
Leo
March 13th, 2008
thx for the tutorial!!
dip
March 13th, 2008
Great!!!
Will use it right now in one work, thanks for the good idea
Shane
March 13th, 2008
Great reader request Tom
Thanks for the tutorial Fabio. Very nice work - and it’s quite a short series of steps too!
Paulo Sales
March 13th, 2008
fab…
Arnaud
March 13th, 2008
Very usefull !
giackop
March 13th, 2008
yes.. cool and simple.. thanks fabio
Lamin Barrow
March 13th, 2008
Nicely done effect. Thx
andy stewart
March 13th, 2008
http://www.andystewart-design.com
Nodster
March 13th, 2008
hi there
in Step ten i am unable to get complete
‘With the Rectangular Marquee Tool create a selection like the image below. After that go to Filter > Pixelate > Mezzotint,’
when i create the logo noise layer, the new layer is transparent, i fill it then can create the marquee area but the filter option is not available.
can someone give a pointer where i may have gone wrong.
Thanks
Leyre
March 13th, 2008
Another wonderful tutorial. I love you guys!
Kev
March 13th, 2008
cant get step 3 to work; it wont let me select the ‘Distribute Vertical Centers Button’. can any1 help?
PLZ
Andrei Constantin
March 13th, 2008
I was looking for the tut since yesterday when i’ve seen it on your blog.
good job
PixlNinja
March 13th, 2008
WOW.. ! thankyou very much.. Actually I was trying to get such a result in many ways..
Sumesh
March 13th, 2008
Quick and easy tutorial, this one.
Been some time, especially after marathons by Collis and Andrew.
JamieO
March 13th, 2008
Nice tutorial. A tutorial that shows ways to take that brushed metal effect and turn it into a tile-able texture / background image would be very nice as well. Metal is one of those topics which there seem to be a lot of little ones that are ok, but I haven’t found a “PSDTuts” quality one yet…
b00m
March 13th, 2008
wow I love the background
Andrew D
March 13th, 2008
Awesome! Looks very real.
Martin
March 13th, 2008
very nice fabio but the logo is gay
you could pick a better logo
Ozwall
March 13th, 2008
excelente tutorial !!!
saludos!!
JoelG
March 14th, 2008
slick.
Markus
March 14th, 2008
Martin are you danish?
Dragolux
March 14th, 2008
Very nice tut! The result is awesome. Thanks for your contribution!
Tom
March 14th, 2008
Thanks for running my request!
There are so many effects in this that can be applied in so many ways. Which is why I suggested it!
Very well written, and I’m sure I can use this effect in many ways.
Thanks again.
Wouter
March 14th, 2008
Hello.
I tried this tutorial but i lost the point on step 9.
I used a brush tool but can’t get him oke like your steps
Can you help or made that stap with screenshots ?
Ty
(Further : Nice tutorial)
Wade
March 14th, 2008
I really appreciate the instructions for this tutorial.
I can’t quite remember which one, but a while back I felt retarded and couldn’t quite get through a step similar to 11 in this tutorial. Will post results when finished!
kev
March 14th, 2008
on step 3 theres the alignment panel thats used with the elliptical tool but i cant seem to find mine. how can i open find this to do the Distribute Vertical Centers Button part? thanks.
John
March 14th, 2008
Sweet.
Brent
March 14th, 2008
Dude, you rock!
VectorCars
March 14th, 2008
Ha-ha
Very nice..
Felds
March 14th, 2008
I’m sorry if I’m being stupid… but where is the “brushed” part?
Henriette f.r
March 14th, 2008
Hi
On step 12 it says “…Convert it to Smart Objects and go to Filter > Blur > Radial Blur…” But how do I convert it to Small Objects?
I love the turtorial! =D
Michael Steel
March 14th, 2008
Cool!! Congratulations. from Colombia
Tama
March 14th, 2008
cool! thank you!
Cain
March 14th, 2008
Final product is soooo cool. Looks like a real apple product. Great tut and thanks for sharing.
Ben Griffiths
March 14th, 2008
Cool, this has to be one of the better brushes metal tutorials I have seen, thanks!
goldenthunder
March 14th, 2008
this is way cool! nice job!
Fabio Sasso
March 14th, 2008
Hey guys thank you very much for the comments… now let me try to answer some questions.
@Henriette - Probably your Photoshop version doesnt have the Smart>objects feature, it’s not really necessary though you can do everything without it.
@Nodster - Make sure that the right layer is selected, because I did what you said here and it worked.
Jonathan Solichin
March 14th, 2008
Nice. Step 11 is a nice touch. very detailed and stunning. Good job.
Bruce Ackerman
March 14th, 2008
Did one for Kerosin Clothing.
Thanks!
http://i31.tinypic.com/29w7mdi.png
Wil
March 14th, 2008
Very nice! I made something similar a while back for a wallpaper, with a similar layout and perforated theme.
Ham
March 14th, 2008
cool! Arigatou!
jayhan
March 14th, 2008
Cool tuts! Thanks for sharing your skill
Loves it.
mikeyork
March 14th, 2008
Beauty & Styled
PSDTUTS ROCKS!!!
Joefrey Mahusay
March 14th, 2008
Nice tut again Fabio thanks for sharing.
BogDinamita
March 14th, 2008
really cool one for real
Braintrove.com
March 15th, 2008
Very nice. I like it! Great job.
wildwise
March 15th, 2008
simple and reallistic. Nice one
dev
March 15th, 2008
i luve u…..
maurizio
March 15th, 2008
Very very nice….. and easy…….
Thanks from italy ……….
computer jobs
March 17th, 2008
Thanks for tut. it was really helpful
Fubiz
March 17th, 2008
Very good technique!
David
March 17th, 2008
I’d like a little clarification on Step 3 as well.. What settings does the ellipse tool need to be on?
ryaninc
March 18th, 2008
I really like this one! Well done, I definitely learned a few things from following along. Thanks!
Stronghold Crusader Extreme
March 18th, 2008
its looks quite good thought
Abhisek
March 18th, 2008
Great tutorial. I really like it…
Reader
March 19th, 2008
Sorry I am writing this here but I don’t know where else to.
I was wondering what there is in the psd file you can download and psdtuts require when you submit a tut. Because I am writing one and got a bit confused when I read about that.
Any help would be great
By the way
Wonderful tutorial. Will be very useful for my design work
Thanks
Andrew J
March 19th, 2008
Awesome and free! My favorite price
Mark H. Abucayon
March 19th, 2008
This is simple yet nice. thanks for the tut
Katalog Stron
March 19th, 2008
Looks nice.
workingondreams
March 21st, 2008
superb!
Omar Essam
March 22nd, 2008
thnxxxx alottt that helped me muccccchhh
Alex
March 22nd, 2008
Wow this is a very great and easy tutorial. Im 12 ad i’m a professional graphic designer and i’ve been using Photoshop since grade 5. http://www.nowthatsintense.piczo.com
reader
April 1st, 2008
Really cool! Thanks for sharing!
Tom
April 3rd, 2008
The metal effect on the hearth is amazing. Great work!
Enes Kaya
April 8th, 2008
Very gorgeous effect. Thank you!
Qbrushes
April 26th, 2008
simple but great outcome.
riri
May 7th, 2008
great metal effect, thanks for sharing!
John
May 17th, 2008
Great tutorial. Like some other people here, though, I’m looking for a way to create a metal/brushed-metal image that can be tiled as a web-page background. Anyone here have any links to good tutorials that help to do that?
Thanks!
Maya
June 16th, 2008
Really great !!!
Thanks
wibo
June 17th, 2008
kickarse tutorial, top-quality everything.
raj
June 30th, 2008
Excellent work!
Thanx
hm
July 5th, 2008
How do you white brush step 14 to neatly in the center? isn’t the 35px brush too big? i’m having tough time on this step
suckoja
July 8th, 2008
Thanks a lot! This is just so cool!