Create A Brushed Metal Texture

Tutorials

Brushed Metal Thumbnail

The second texture up for Vectips Texture Week is brushed metal. Like the previous Water Texture Tutorial, this brushed metal technique also utilizes Illustrator’s Effects. Again this tutorial is pretty simplistic when you break it down, and easy to replicate numerous times. You can use the brushed metal texture in almost anything, but I find myself using it in icons, logos, and interfaces quite a bit.

Notes

This tutorial was created with Illustrator CS3.

Keyboard shortcuts are displayed in orange. ⌘ is displayed for the Command key (mac), with the Ctrl key being the Windows equivalent (not displayed).

Rectangle

Create a 5 inch by 5 inch rectangle with the Rectangle Tool (m). An easy way to draw an exact rectangle is to click on the artboard with the Rectangle Tool (m) to bring up the Rectangle dialog to enter dimensions.

Rectangle

Gradient

Next comes the gradient. Create a Linear Gradient (>) from the Gradient Panel and take off the stroke. Adjust the gradient with the Gradient Tool (g) by clicking and dragging from the top of the rectangle to the bottom. In the Gradient Panel grab the left swatch and drag it to the middle of the Gradient Slider. Next, select the black swatch on the Gradient Slider. If you look in the Color Panel, you will see it is now black. Click on the large black thumbnail and drag it into the Gradient Panel on the left side of the Gradient Slider. If you did it correctly, you should have a black swatch on the left, a white swatch in the middle, and another black swatch on the right in the Gradient Slider. Select the first black swatch and change it to a 60% black, select the white swatch and change it to a 30% black, and change the last black swatch to a 60% black.

Gradient

Next Copy (⌘c) the rectangle and Paste In Front (⌘f). With the copied rectangle selected, change the dimensions in the Transform Panel to .5 inches wide and fill the rectangle with a 40% black.

Copy Paste Transform

Texture

Select the narrower rectangle and go Effect > Sketch > Graphic Pen. When the Graphic Pen Effect dialog comes up change the following settings.

  • Stroke Length = 15
  • Light/Dark Balance = 5
  • Stroke Direction = Horizontal

Texture

Trace and Expand

With the texture selected go Object > Expand Appearance. With the new image selected, the Control Panel defaults to the Live Trace options. Click the arrow beside the Live Trace Button and select Tracing Options. Or you can go Object > Live Trace > Tracing Options. You don’t have to change all the options, just the ones below.

  • Mode: Black and White
  • Path Fitting: 1px
  • Minimum Area: 1px
  • Corner Angle: 1
  • Ignore White: Check this box

I like to save a preset in the Tracing Options. It makes it easy to recall these setting. If you have read previous tutorials, you will see I use these setting all the time for tracing. Next, press the Expand button on your tool bar.

Trace and Expand

Transform Texture

With the texture selected, change the width to 5 inches from the Transform Panel.

Transform

Color Texture

With the texture selected, create a Linear Gradient (>) from the Gradient Panel and take off the stroke. Illustrator will remember the last gradient used, so you should have the same gradient fill from the first rectangle. If not, repeat the steps for the gradient from the first rectangle or use the Eyedropper Tool (i) and sample the first rectangle. Once the texture is the same gradient, select the first 60% black and change it to a 70% black, then change the 30% black to 35% black, and then change the last 60% black to a 70% black. With the Gradient Tool (g) click and drag from the top of the texture to the bottom to adjust the gradient. Done!

Color Texture

Experiment

This brushed metal texture is great to incorporate into logos, icons, interfaces, and much more. Look below for some examples

Example

  1. Nice TUT! I would never have thought about doing this in illustrator. Your blog is very insightful.


  2. nice


  3. i know this in photoshop, but never tryed in illustrator either! thanks for the tip!


  4. Great texture! I love your blog for those “I should have thought of that” tips.


  5. I love this blog!! Fantastic tips. This is even better than Bittbox!!!


  6. wooooooow!! another greate tip, easy and fast


  7. Great TUTORIAL!….I’ve discovered this blog today and I’m very glad i founded it.
    I’d like to know how to do the effect like the RSS Feed Icon in the Example.
    Thanks a lot…


  8. Thanks!


  9. Awesome tutorial! I’ve always used Photoshop for this as well. A vector version is AWESOME! ^_^

    Thanks!


  10. Gravatar

    Arnaud Alves

    May 19th, 2008

    Awesome again !


  11. This things are awesome dude. How to do the emboss on the icon? I never know how, i tried few techniques but not as looking good as yours, except I can do it in photoshop. Man love your tutz!


  12. No pude.. I can`t
    al momento de tratar de poner: seleect > Sketch > Graphic Pen
    dont let me do this.

    Great Blog!!!


  13. […] Create a Wood Grain Texture This tutorial examines how to design a realistic wood grain using Adobe Illustrator. You will learn about graphic pen effect, the warp tool and the twirl tool. This is just one of three tutorials on creating textures in Illustrator by Vectips. The other two cover creating a water texture and creating brushed metal. […]


  14. Good tut. although mine looked like complete crap even though I followed your instructions exactly.


  15. Love this sie, great tutorials.

    Thanks!


  16. <3<3<3<3<3<3<3<3<3<3<3
    <3 <3
    <3 t h a n k y o u ! ! ! <3
    <3 <3
    <3<3<3<3<3<3<3<3<3<3<3


  17. No se que pasa, me sucede lo de ESAU, al momento de tratar de poner: select > Sketch > Graphic Pen, en Sketch, no tengo activada ninguna opcion…. Que tengo que hacer como activo las opciones?????


  18. […] This is some decent metal for your favorite vector art application, Adobe Illustrator. The advantages of vector art (Illustrator graphics) over raster graphics (Photoshop psd) is that you can scale the former indefinitely. A virtue any graphic designer should value. Check out this great brushed metal texture tutorial right here. […]


  19. Mario,asegurate de que no estas intentado Filtro>Sketch (Filter>Sketch) sino que estas usando Efecto>Stekch (Effect>Sketch)


  20. Hi all, Im stuck @ “Effect > Sketch > Graphic Pen” part. I’m unable to select the option no matter what i did. I tried rasterizing, toggling the gradient/colors, etc, but to no avail. It seems most of the effects are not selectable.

    Can anyone help me on this? Is there anything i have missed out?

    THank you!


  21. Rhapsody,

    What version of Illustrator are you working on? Maybe if you try to change the Document Color Mode to RGB. Sometimes that helps with CS2. Just go File > Document Color Mode > RGB. Let me know if that helps.


Add a Comment