Type Destruction Kit

By John McWade

Before & After Magazine

Beat-up, worn-out and looking comfortingly old, distressed type is fashionably in. But why wait for years?

Have you noticed at the mall? — off-the-shelf clothing is giving rummage a new name. Scuffed up, dragged about, stepped on, washed forever, brand-new apparel is on purpose looking decades old. Not old-fashioned old, lived-in old. There’s a hip comfort in old stuff — it’s lived, it’s survived, it means something — that the Latest Thing can’t claim. And the look is easy to duplicate. Silkscreened images, especially on fabric, wear in fairly predictable ways that the Photoshop eraser can mimic. Key first step, though, is the design. To look convincingly old, your type must first look like it was set years ago, and not all that well.

The Barely Designed Look

Think few words, simple layout, almost no artistry. Wardrobes come and go. The clothes that get kept are the special ones—the team sweatshirt, something of Granddad’s, the tanktop from that Kiss concert, a cool old ad, stuff like that. Garments are miniature billboards, plain, bold, utilitarian-looking; real artistry is fairly rare. You’ll need a hint of amateur, so generally speaking s–p–a–c–e o–u–t your letters more than you would on paper. Alignment? Detail? Don’t worry about it.

In the gym. Name-on-an-arc is classic athletic style; giant garment size says P.E. class or team practicewear. Well-sweated-in, comfy and lovable; note that the stenciled XXL appears only in negative. Centered.

So bad it’s good. Funky old advertising shirt dates to the ’50s, when type was still set in hot metal. Thirst-quenching descriptor is appropriately set in a contrasting script, but nothing aligns with anything anywhere.

Surf’s up!. Standard-issue lifeguard sweatshirt is surplus-store chic; sprayed-on stencil says fashion was not a concern. Ultra-skinny block letters align left and right — spacing? what spacing? — forming a neat, if unstylish, block.

Club style. Eagle glaring from the past is clip art probably picked like a tattoo from a printer’s sample book. Quirky, slab-serif typeface has muscle, but its flat sides are a “mix-and-mismatch” with the pointy-edged bird. Centered.

Most type-styles last a long time, although their use ebbs and flows with fashion and the times — the ’50s, ’60s, ’70s and so on all have distinctive looks. The only sure typefaces to avoid are brand-new styles, which simply haven’t been around long enough to wear out.

Athletic imagery is usually plain block lettering, often without curves and on long names highly compressed. Outlines, which you can add yourself, are common.

Advertising messages use a wider range. Make-it-yourself shadow letter is just a copy of the original moved down and over. You’ll see an occasional bold script.

Rare are swashes, fine lines and detailed serifs. And to look old, you’ll of course have to avoid young fonts (below).

Stencil type is common on gymwear and easy to make. Just set any plain typeface, and draw a line to keep the middles from falling out. To look really homemade, set the lines cockeyed.

Now Wear it Out

Age your design 20 years in one minute.

1. First set and color your type and background .

Open a new Photoshop document, and Fill the page with color.

Set some type, which will automatically create its own layer, color it, then Rasterize the type (Layer > Rasterize > Type, right). Duplicate the type layer, hide the original and work on the copy.

Alternatively, you can first design in Illustrator or another application and paste the results into Photoshop. This will not need to be rasterized.

2. Select and set Photoshop’s Dry Brush eraser.

Select the Eraser tool, then near the bottom of Photoshop’s long Brush list select the Dry Brush (#39) and set its Opacity to 75%. This is so you don’t erase through to China with your first click. Then on the Master Diameter slider specify a size; a good place to start is about half the height of your type size — for one-inch type at high-res, about 200 px, and for one-inch type at Web res, about 40 px.

Set the funny-looking Dry Brush about half the height of your type.

3. Wear away your image by click, click, clicking . . .

From here on requires your artistic eye. Activate the type layer, then begin wearing away the image by click, click, clicking with the Dry Brush Eraser. Key is to dab, not drag, which will smear things. Work sparingly; the more you click, the more you’ll wear away, and it takes only a click or two to start looking worn out. Don’t erase evenly, either; in real life some sections always wear down more than others.

• Erase sparingly
• Gradually build up worn areas
• Don’t drag the eraser

Different brush sizes and erasing styles will produce different looks. Remember, erase unevenly — a little here, a lot there. Need a model? Find a really worn-out dollar bill.

Use old colors. Colors fade and get dirty; they get lighter and grayer with age. To mimic this, fill your object with its bright, “new” color, then in the Hue/Saturation window (Image > Adjustments > Hue/Saturation) decrease the Saturation (making it grayer), and increase the Lightness.

Let the background through. As an image degrades, the background gradually becomes visible through it. You can duplicate this in two ways. One is to lower the Opacity of your image, which fades it realistically into the background; the other is to change its layer Mode to Multiply, which adds image and background values together. You can also do both. The results affect the color. Don’t have a background texture? Just fill the field with color and add some noise (Filter > Noise > Add noise).

Make old art from new photos. To turn new photos into old art, first reduce a photograph’s many colors to just a flat few in Photoshop’s Image > Adjustments > Posterize dialog (try 3 or 4 Levels), then lighten the Opacity, and erase as shown here. Note the worn-out streak.

Don't miss the next installment of this column. Get the free Graphics.com newsletter in your mailbox each week. Click here to subscribe.

This article is excerpted from Before & After, How to design cool stuff, Issue 36. Copyright ©2004, Before & After magazine, all rights reserved. Design more cool stuff! Visit Before & After magazine online at http://www.bamagazine.com/ to buy the current issue, subscribe, or order back issues, including the one containing this article. Get a free bonus issue when you subscribe in the Graphics.com Member Area.