Sizing icons for weight and balance

The illustrator in me has always loved any project that includes creating icons. Icons are simply mini illustrations that ad a visual element to assist in explaining something functional, contextual or that will simply help a user understand how to engage. What ads to this challenge is the minimal space and square aspect ratio allocated towards telling this visual story.

Today, I needed to create some web clip icons for mobile folks viewing my sites on the Apple iPhone. Having created many successful and MANY more unsuccessful icons over the years, I have come to realize that it is not always the beauty of the initial drawing that will define its success. Often it is how the image fills the space that will determine how well it reads when reduced to the various sizes for implementation. (24×24’s are treated at the pixel level).

While the details and process of the drawing itself are a subject of another post – the best trick I use to insure good layout is to build within a box unit that is my finish size. This insures that that when I bring a vector graphic into photoshop, no quality is lost in transforming it up or down in size. Often I made this mistake when I first started creating icons as vector graphics assuming that because it was a vector, I did not need to be concerned with its size in the master file.

However, even more important, This allows you to see how your  image fills the space. A rule of thumb, I make sure that my image extends to at least 3 of the four sides. Doing this allows the image to occupy the entire drawing board and will carry a more balanced weight and will be consistent with other surrounding icons.