3D
Picture of Mike Rundle I'm Mike Rundle, a designer & developer living in Raleigh, NC.
Read more...

Beautiful Fad: The Blueprint Look

Posted at 10:47PM on a Monday in December — 3 Comments

A design fad that's been around for awhile now is the "blueprint" look: people drawing architectural blueprints/sketches either as a background to their roughed-out icon, or integrating a blueprint into the icon/design itself. What does the blueprint represent?

  • Unfinished, in flux
  • Creativity, making something brand new

When should you use the blueprint look in your icon?

What you use to represent metaphors in your icon design is completely up to you, however it's clear that most icons that incorporate a blueprint are indicating that "this application is used to build stuff" whatever that "stuff" may be. For Apple's suite of developer tools it means building other applications or widgets. For your blueprint icon it could represent building anything you'd like, but something that a user can actually build within the application.

Here are a few full-size icons that use the architectural sketching metaphor, oh, and can't forget about MacThemes' website!

CSSEdit

Xcode

Xcode project

Quartz Composer

Architect

Interface Builder

Jar Bundler

Categories: Icons

No Pings

Ping URL: http://flyosity.com/cgi-bin/mt/mt-tb.cgi/6

3 Comments

Alex | January 12, 2009 10:46 PM | Reply

I've always liked the way Mac icons look, and I've been wondering lately how are they created? They have a particular look that is not found on PC icons. You can easily tell them apart at one glance.

I've been scouring the net looking for tutorials on how to give an icon that look, but have found myself unsuccesful. I liked your tutorial for the globe, it was very educational. However I want to learn to create other things such as the icons featured on this post.

Is it just atention to detail. or is there some secret method to go about making them? I mean look at that hammer, it's beautiful! You think you can help me here? I could also use the actual PSD or AI files of actual icons. I'd be very much obliged to you for any help provided.

Oh, and can I bother you with one last thing? I would also like to know how that color trail coming from the magic wand in the Quartz Composer icon was made. I want to use something similar for the creation of a logo for a charity. Thank you, and God bless.

Mike replied to Alex | January 15, 2009 1:55 PM | Reply

Alex, sorry to tell you but there's no quick "secret method" to making icons look beautiful and photorealistic, it simply takes a lot of hard work sweating every single detail. Real objects don't look flat and fake, they have tons of subtle shadows and highlights that help make them look realistic, so emulating those subtle details is the key to making high-quality icons.

Regarding the color trail coming from the magic wand, it can be done in a number of ways, one of which is doing a color gradient in the shape of a wheel and adjusting the blending modes. Or you could give it a shot using a big fluffy brush and painting one color at a time to blend them. There are a few ways to do it, and I actually recreated that exact icon while I was trying to build my skills up, so just give different techniques a shot and see how they look. Like I said, there's no secret key to creating a Mac-like icon, it just happens to take a ton of work and a ton of patience.

Michael | March 27, 2009 12:48 PM | Reply

If there is a "secret" it's learning how to use Photoshop as a drawing tool. Great icons come down to great drawing - and as powerful as PS is, there's no filter or tool that will do any drawing for you.

That said, it can be a huge help to get a peek at the techniques other people use because there are so many ways to do things in Photoshop -and the "best" way is not always apparent. The learning curve is much steeper than pencil and paper and getting a kick in the right direction with step-by-step tutorials (thank you Mike for the great globe tutorial) is great.

You might want to check out Bert Monroy's show on Rev3 called Pixel Perfect (http://revision3.com/pixelperfect/). He does some great tutorials covering basic drawing techniques in PS. In the end Bert's advice is the same as Mike's -play around and see what works. PS is a tool and the only way to master it is to use it...a lot.

Leave A Comment