hidef

Icon design is a fascinating niche that requires its own bag of tricks and techniques. One popular technique I've been seeing around lately is a perforated metal texture. If you have an iPhone or iPod Touch take a look at the Settings icon. If you look closely you will see a very subtle but wonderful perforated metal background. Textures such as this add a level of polish and detail that can set your icons apart and can help make you a leading icon designer. Today I'll walk you through how this texture is created using simple shapes, basic gradients and easy to master transformations.

Final Image Preview

This is final image that we will be creating. Download the final Illustrator file.

Video Tutorial

This video is a compliment to the text and image tutorial.

Step 1

Draw a rectangle and fill it with gray.

Step 2

To create the holes draw two circles with one being smaller and centered inside the larger one. Fill the large circle with a dark gray to light gray gradient. Fill the smaller circle with black.

Select both circles, group them together and move them to the upper left corner.

Step 3

To duplicate our holes horizontally in evenly spaced increments we need to set up step and repeat values. With the holes still selected go to Object > Transform > Move. Enter Horizontal: 50px, Vertical: 0px then click Copy.

With the second hole still selected, press Command + D to repeat the transformation until the circles fill the width of the gray rectangle. Group the row of holes together.

Step 4

Next we need to set up our vertical step and repeat values. Select the grouped row of holes and go to Object > Transform > Move. Enter Horizontal: 0px, Vertical: -50px then click Copy.

Now press Command + D to repeat the transformation to fill up the rectangle vertically. Select all of the holes to group them into a single object.

Step 5

Select the grouped holes once again and select Object > Transform > Move. This time enter Horizontal: 25px and Vertical:-25px, then click copy. This will center the holes relative to each other.

Conclusion

There you have it! This is a quick and easy way to create a really nice perforated metal background using simple shapes and transformation commands. This technique is perfect for icons but can easily be used for web and print designs.