Create A Brushed Metal Texture

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.

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.

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.

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

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.

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

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!

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


Joel
May 7th, 2008
Nice TUT! I would never have thought about doing this in illustrator. Your blog is very insightful.
lex
May 7th, 2008
nice
tommy
May 7th, 2008
i know this in photoshop, but never tryed in illustrator either! thanks for the tip!
Grant Friedman
May 7th, 2008
Great texture! I love your blog for those “I should have thought of that” tips.
hfng
May 9th, 2008
I love this blog!! Fantastic tips. This is even better than Bittbox!!!
woofer
May 9th, 2008
wooooooow!! another greate tip, easy and fast
Lisandro
May 12th, 2008
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…
Gébé
May 15th, 2008
Thanks!
Jenny Burgesse
May 15th, 2008
Awesome tutorial! I’ve always used Photoshop for this as well. A vector version is AWESOME! ^_^
Thanks!
Arnaud Alves
May 19th, 2008
Awesome again !
DO
May 19th, 2008
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!
Esau
May 25th, 2008
No pude.. I can`t
al momento de tratar de poner: seleect > Sketch > Graphic Pen
dont let me do this.
Great Blog!!!
Tutorial Machine
May 28th, 2008
[…] To view: http://vectips.com/tutorials/create-a-brushed-metal-texture/ […]
MyInkTrail
May 30th, 2008
[…] 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. […]
Yoyoyo
June 29th, 2008
Good tut. although mine looked like complete crap even though I followed your instructions exactly.
Ajay
July 20th, 2008
Love this sie, great tutorials.
Thanks!
wutevah
August 4th, 2008
<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
MARIO
August 20th, 2008
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?????
Beeex.net
September 3rd, 2008
[…] 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. […]
Maga
September 4th, 2008
Mario,asegurate de que no estas intentado Filtro>Sketch (Filter>Sketch) sino que estas usando Efecto>Stekch (Effect>Sketch)
Rhapsody
October 2nd, 2008
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!
Rype
October 6th, 2008
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.