It’s been a couple years since Cameron Moll first blessed the ‘net with his series on That Wicked Worn Look and I’ve been meaning to post a related how-to for almost that long. Having designed for apparel for several years, “that worn look” - or distress - has always been one of my most effective tools. Designing for t-shirts, 90% of my workflow is in Adobe Illustrator, and that’s where I apply distresses. When you buy a t-shirt with a distressed design, it was most likely acheived using the method I am about to share. I first learned this when I was an intern at Fossil, and have used it almost daily ever since. Don’t think that this is limited to t-shirt designs, however. This method is as versatile as Illustrator itself, and can be exported, saved for web, etc..
As Cameron said, It’s easier than you think. The steps I am about to share with you are even easier. Without further ado, let’s get started on tastefully destroying your artwork & photos.
Step 1: Find a good texture.
This can be done in a variety of ways. I have a habit of scanning in just about anything I think has a cool texture. For example, for the distress on this tutorial’s title image, I printed out a full page of black toner, wadded it up, scraped it on the concrete then scanned it. An easier method is to start from a photo of a real-life texture and that’s what we’ll use in this how-to. I highly recommend Mayang’s Free Texture Library. It’s a great hi-res collection - and you heard correctly - it’s free. For this tutorial, I’ve chosen this image.
Step 2: Create a Bitmap TIFF
Open up your image in Photoshop. What we want to accomplish in the next few steps is producing a black and white version of our texture that Illustrator can use. It’s easy.
Begin by converting the image to grayscale (Image>Mode>Grayscale). Then adjust the levels (Image>Adjustments>Levels). Our goal with the levels tool is to eliminate as much of the mid-tones as possible, leaving us with a clean black & white texture. Keep in mind that the black areas are going to be your distress, so the more black there is, the more is going to be removed from any design to which you apply it. Take a look at my levels sliders to the right to get an idea (or you can always try Auto Levels and see what you get). With those settings, this is what we’re looking at now:
Now it’s just a matter of making it a bitmap and saving it. Go to Image>Mode>Bitmap choose a resolution (72 should be fine for this how-to), and make sure your Mode is “Diffusion Dither.” Now click “OK.” Diffusion dither might look a little funny to you if you haven’t seen it before, but it will work just fine once we’re in Illustrator. All that’s left to do now is Save As… and we want to choose TIFF from our list of formats. That’s all the Photoshop work necessary. Once you’ve gotten these few steps down, this stage of the process should only take a minute or two.
Step 3: Distress your Image or Artwork
Now the work is essentially over. We should be in Illustrator, preferably with a design we’d like to distress. I’m going to be using the design at left, but you can use anything, including a placed image. All we need to do is go to File>Place and choose the TIFF we created in Photoshop. Once that is placed into our Illustrator document, we are able to witness the beauty of Bitmap TIFFs. That is, you can apply any of your swatches to this TIFF and it will change color just as if it were a vector object. So, since our test artwork has a colored background, I simply select the that color with my eyedropper and - voila - we have a distressed design. (click to view larger)
You might noticed that your distress looks very “bitmappy.” This is because, by default, Illustrator is set to work with vector objects. If you’d like to see a pixel (raster) preview, simply go up to View>Pixel Preview and you can see how the distress will look printed or saved as any raster format.
There you have it. A little verbose, but actually a pretty straightforward method for generating some very realistic distresses. Make sure you play around with it; since the TIFFs are transparent, various effects can be acheived by overlapping multiple distresses in different angles and colors. Happy distressing!
P.S. I’m just getting started around here. Check back soon (or subscribe to the feed) for more design commentary, tips & tricks!
