Buy my Books!


The Sketchnote Workbook is a fully-illustrated book and video, showing how to use sketchnotes in new ways, along with advanced tips and techniques.
Learn about and buy the book →
Download a FREE chapter →
Watch a FREE video sample →


The Sketchnote Handbook is a fully-illustrated book and video, designed to teach regular people how to create sketchnotes.
Learn about and buy the book →
Download a FREE chapter →

Mike Rohde (Color - Square)

ROHDESIGN is the website of designer Mike Rohde, who writes on design, sketching, drawing, sketchnotes, technology, travel, cycling, books & coffee.
Read more about Mike →

SIGN UP! Get the Rohdesign Newsletter.

« Embrace the Creative Process | Main | BarCamp Madison 2007 + Followup »
Wednesday
Mar142007

HoudahGeo Icon Design

houdahgeo-icon.pngJust this week I've completed the application icon for one of my MakaluMedia clients, Pierre Bernard of Houdah Software, on his latest beta application HoudahGeo. In June 2006, I designed the icon for Pierre's first OS X application, HoudahSpot.

HoudahGeo allows you to geocode photos with latitude, longitude and altitude information. Take your photos, "pin" their locations on the earth, then export information to EXIF tags or Google Earth KML files, letting you can see the images in Google Earth.

Sketches
Pierre and I started working with pencil sketches, using a globe with photos stuck to the surface, and a satellite in orbit around it, as you can see below:

houdahgeo-sketches.jpg

1. In my first sketches, I focused on a single satellite, beaming information to/from photos on the surface of the globe. At this stage I hadn't worked out continents or exact placement of the photos, but knew I liked this general idea.

2. Here I played around with the idea of both a satellite and a camera orbiting the earth, and had by this round, started exploring continents and image locations a bit more. In the end, we discussed the camera+satellite option and felt the camera was redundant and not necessary to get the message across.

Production Icons
Next I went to production, using Fireworks to create the vector-based artwork. After a rough first draft, Pierre had an idea to try a pushpin in place of a satellite, though in the end, we felt the satellite just worked better.

With each successive revision, the earth was refined, satellite tweaked, highlights, glows and adjustments made. Here I've placed the first 4 revisions together to give you an idea how the process generally works:

houdahgeo-icons.jpg

The final adjustments and tweaks happened on icon v5, including a size up of the earth about 5-6%, lightening of the satellite's pulse glow and a few adjustments to photo locations on the earth itself.

Fireworks as Tool of Choice
The construction if icons using vectors in Fireworks, greatly assists in these kind of subtle tweaks. Because all of the elements are created as vector items, they can be easily sized up and down with no degradation of image quality, or moved around without worrying about re-applying masks or filters.

For comparison purposes, here is the final, winning HoudahGeo icon v5:

houdahgeo-icon.png

Thanks Pierre for choosing to work with me and MakaluMedia on your latest Mac application! I had a great time working with you on another fun icon project. :-)

Reader Comments (10)

Beautiful stuff, Mike, a real work of art.
March 14, 2007 | Unregistered CommenterJeremy Wagstaff
Thanks for the great work Mike!
March 14, 2007 | Unregistered CommenterPierre Bernard
Great work and happy to know that you use Fireworks!
March 15, 2007 | Unregistered CommenterAllan Reyes
Amazing stuff, Mike. I got a quesiton for you:

Do you have a template for the shape of the land masses? Or did you create those yourself? I end up staying away from globe type designs becuase I can never nail the right shape and proportions of the America, Europe, Africa, etc.
March 15, 2007 | Unregistered CommenterKris Gosser
Jeremy, Pierre and Allan, thanks for your kind words!

Allan, I really love Fireworks � as a long-time Adobe Illustrator user, its vector oriented approach suits my workstyle quite nicely.

Kris, I happened to draw the continents, based on a real photo I found as a reference. I wasn't worried about perfectly capturing every crinkly detail, so the continents aren't 100% GPS accurate, but are close enough for use on an application icon. :-)
March 15, 2007 | Unregistered CommenterMike Rohde
Very beautiful icon! I will have to look at Fireworks, and perhaps do some of my future projects there. I presently use CorelDRAW in all of my projects.
March 20, 2007 | Unregistered CommenterRev Cruz
Rev � thanks! Do check out Fireworks. If you are into vector drawing it's a natural transition � since you're into CorelDraw, it might be a nice fit for you. Read this article as well:

http://www.pixelyzed.com/pixelforge/whychoosefireworks/
March 20, 2007 | Unregistered CommenterMike Rohde
Good job!
March 22, 2007 | Unregistered Commenterilker
Mike, great work! Congrats! What soft did you use? I presume that Adobe Illustrator... at least, this would be my option. :)
Thanks Iker and Respiro!

I used Fireworks for this one and for all of my icons � gives me lots of options and works very much like Illustrator (which I love for logo design).
March 22, 2007 | Unregistered CommenterMike Rohde

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
All HTML will be escaped. Hyperlinks will be created for URLs automatically.