Part One: The Indispensable Tool Trio
~ 26 May 2004 ~
“That Wicked Worn Look”
Alright peeps, it’s been two days since I announced the Wicked Worn Look series. Hopefully you’ve been biting your nails furiously in anticipation of discovering the three indispensable tools used in aging and weathering.
Time to reveal the trusted tool trio.
But before I do, let me reissue the warning: This isn’t rocket science. You won’t find any fancy tools here. It’s all about using basic tools in basic ways. Yet the results are often far from basic.
Enough explaining. Here’s the trio:
Yup. That’s it. And get this — all I use is a 1px–5px round brush, a 5px–13px round burn, and a 3px–9px round eraser. Nothing fancy.
You gotta start somewhere. I call that somewhere “foundation wear.” This is the first level of detail in creating worn styling. Often it’s enough to stop at just that, without bothering with some of the techniques you’ll learn about in the second and third parts of the series.
I follow a simple, three-step process: 1) create wear by randomly erasing the edges of the artwork, 2) reinforce the wear by darkening the erased areas with the burn tool, and 3) finish it off with brush strokes that add detail such as creases, folds, and spot marks.
This process was used on a mocked-up photo for a recent magazine ad. The diagram below shows the original sketch before and after wear. Again, no tricks here. Just simple, random wear was applied using the indispensable tool trio.
Hold On There, Tiger
Ready to give it a go? A few things to consider before starting:
- Start with the corners.
You’ll always find wear primarily on the corners of nearly any tangible object, regardless of the shape. Dull down sharp corners with the eraser and add discoloring with the burn tool.
- Don’t over do it.
Applied wear shouldn’t call attention to itself. The best wear is often that which isn’t readily noticed but rather contributes unassertively to the overall worn styling of a piece. Meaning, it just naturally fits in. Unless, of course, you want it to be noticed. (Example: Someday I’ll redo my Premium Linkage graphic, as certain parts beg for too much attention.)
- Choose a color palette judiciously.
For lack of a less cliché term, “retro” colors are often great for producing a worn piece. For some reason, the muted hues of retro will almost always lend a good start to your efforts. (Need help? Try these retro Photoshop swatches.)
- Be just as judicious with type.
Smart typography choices will go a long way for enhancing the overall look. It’s difficult to pull off worn styling when using something like Bank Gothic. Instead, go for classic typefaces, like Futura.
- Avoid pure black at all costs.
Avoid any use of pure black (#000) in your artwork. Remember that discoloring is a vital part of realistic weathering and aging. Black, as any color, becomes muted over time.
Open Source Download
This episode’s free download is the mocked-up photo from the magazine ad mentioned earlier. The original untouched sketch and final worn version are included. Zoom in to see some of the detailing. (I apologize in advance to those of you on modems. I feel your pain. Smaller downloads to possibly follow.)
Questions? Feedback? Fire away.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
Authentic Boredom is the platitudinous web home of Cameron Moll, freelance new media designer, author, and speaker. More…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Jobs home page reorg
- Coming soon: Mobile Web Design, the book
- Dyson ad: Text as more than just words
- Setting sail for Europe
- Review: Sumo Omni bean bag chair
- Dashboard widget for Authentic Jobs
- Limited-time offer: $99 listings
- Nine skills that separate good and great designers
- Fire sale
- Introducing AuthenticJobs.com
CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.
Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.