Please, sweat the small stuff
~ 07 February 2005 ~
This is one of those “allow me to vent” write-ups that I hope isn’t too harsh but ultimately does the greater design community a favor.
Some of you are likely already practicing what I’ll preach, but I see it missed frequently enough that it’s in need of a gentle reprimand.
It involves two things: 1) images that are transformed to a size, say, 75% or smaller from the original size, and 2) the Unsharp Mask filter. Now, I’m speaking in Photoshop terms on that second one, so those of you who speak Fireworks will have to translate for the rest of us.
Here’s the setting: You receive a large image from a client, probably a 300 dpi shot of their building. You’re asked to post it to the site somewhere. So off you go to Photoshop. Image > Image Size or Command-T and you resize with smaller dimensions. A little color/level/contrast adjustment likely follows (or precedes).
Some of us stop there and post to the site. But the savvy designer makes one more adjustment before saving for the web. He or she uses the Unsharp Mask filter.
Here’s a sample shot, with the original resized photo at left, and the same resized photo with Unsharp Mask at right:
Notice the difference? Look at the detail in the lines of the building at upper left. Check the trees. See how everything is just a bit crisper?
You lose some clarity in the original image when you resize to a smaller state, and the Unsharp Mask helps restore some of that clarity. The name is a bit deceiving at first, because the “Unsharp” Mask actually “sharpens” the picture.
And it’s a snap to use. Just click Filter > Sharpen > Unsharp Mask… and choose a percentage value for the amount.
I generally choose a range between 35% and 50%, and I rarely choose a value over 75%. After all, a value of 100% is essential the same as Filter > Sharpen > Sharpen. I recommend you avoid going that far unless necessary, as you may over-sharpen and begin producing shadow lines of sorts.
Here’s another example:
Again, it’s tough to spot the difference at first, but look at the eyes and the hair at top and you’ll notice a subtle difference.
Here’s one last example that perhaps best demonstrates the need for the Unsharp Mask:
The amount of detail in the leaves makes for a perfect setting to use the filter. The difference between the two should be quite obvious in this last example.
End of class. Thanks for coming.
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.