Creating a Cool Brushed Metal Surface in Photoshop

Download Source Files

Today’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 1440×900. 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!

Add Comment

Discussion 128 Comments

Comment Page 2 of 3 1 2 3
  1. jayhan says:

    Cool tuts! Thanks for sharing your skill :) Loves it.

  2. mikeyork says:

    Beauty & Styled
    PSDTUTS ROCKS!!!

  3. Nice tut again Fabio thanks for sharing.

  4. BogDinamita says:

    really cool one for real

  5. Very nice. I like it! Great job.

  6. wildwise says:

    simple and reallistic. Nice one

  7. dev says:

    i luve u…..

  8. maurizio says:

    Very very nice….. and easy…….

    Thanks from italy ………. :-)

  9. Thanks for tut. it was really helpful :)

  10. Fubiz says:

    Very good technique!

  11. David says:

    I’d like a little clarification on Step 3 as well.. What settings does the ellipse tool need to be on?

  12. ryaninc says:

    I really like this one! Well done, I definitely learned a few things from following along. Thanks!

  13. Abhisek says:

    Great tutorial. I really like it…

  14. Reader says:

    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

  15. Andrew J says:

    Awesome and free! My favorite price ;)

  16. This is simple yet nice. thanks for the tut

  17. Omar Essam says:

    thnxxxx alottt that helped me muccccchhh

  18. Alex says:

    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

    • haeclark says:

      “Im 12 ad i’m a professional graphic designer and i’ve been using Photoshop since grade 5″
      ….Ummm….I doubt the professional part, especially since to be a professional, you must have a quality portfolio…and your link has broken images.

  19. reader says:

    Really cool! Thanks for sharing!

  20. Tom says:

    The metal effect on the hearth is amazing. Great work!

  21. Enes Kaya says:

    Very gorgeous effect. Thank you!

  22. Qbrushes says:

    simple but great outcome.

  23. riri says:

    great metal effect, thanks for sharing!

  24. John says:

    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!

  25. Maya says:

    Really great !!!

    Thanks

  26. wibo says:

    kickarse tutorial, top-quality everything.

  27. raj says:

    Excellent work!

    Thanx

  28. hm says:

    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

  29. suckoja says:

    Thanks a lot! This is just so cool!

  30. araz says:

    dear sir or madam, we need a proffesional gold material design on our company arm. can you help us? what`s your prices? singerely yours ARAZ

  31. Peredo says:

    Oh that’s incredible it amazing. i like so much i remember the Mac Pro

  32. dave says:

    Way too hard for me

  33. tsauri28 says:

    thank you for your tutorial, it’s so useable for me.. :) :B

  34. Galinette says:

    awesome!

  35. Max says:

    Great tut! Thanks!

  36. sam says:

    Nice tutorial, but I’m still struggling finding the Distribute Vertical Centers Button.. theres no aligment panel.
    Using Photoshop CS3.
    Couldn’t google the solution.
    Does anyone know where it could hide?

    greetings to fellows anyway

  37. sam says:

    @kev (and everyone :) )
    just found it out myself.
    just do as you’re told xD – create the circles and then select all 6 layers – the alignment panel will appear.

  38. anon says:

    THANK YOU PSD Tuts!!
    These are all so helpful

  39. Legs says:

    Just as a heads up for those who are struggling at step 3..
    Make sure you have EACH of your 6 circles on a seperate layer. One for each circle. Click the top layer and hold down shift, then click the bottom circle layer. Either press V for move or select the move tool and then the alignment panels will appear up the top.

  40. ActiveBox says:

    wow thankx bro, this is what i’m looking for

  41. Jeevan says:

    Thanks for this detailed tutorial.

  42. jp says:

    nice!! 10x :D

    jp

  43. iddaa says:

    cool! thank you!

  44. iagofs says:

    I just love tutorials that are Mac-themed :D

    Congrats on whoever did this!

  45. Indya says:

    that’s awesome. thanks for sharing.

Comment Page 2 of 3 1 2 3

Add a Comment