This latest series of icons really displays this approach. These are created in Adobe Illustrator as individual objects – then assembled as group to create a composition in Photoshop. A closer look at the individual elements shows that each is composed of very basic shapes. The colors and gradients used create the illusion of form and cast shadow, as well as direct and reflected light.

Example 1: The base of the iMac computer is a simple shape with a single linear gradient. Using multiple shades of silver to gray allow me to create the illusion of a cast shadow from the screen on to the base – Then moving downward, it transitions to a form shadow where the base moves from vertical to flat thus not being hit by the same light. It then gets lighter once again, as it leaves the shadow from the screen, and extends forward.

Example 2: In the case of the MacBook, a similar technique is used, but to create a different effect. In this case, the shape itself is again quite simple, and includes a linear gradient – However, my hope is to show the subtle curve where the front of the keyboard base wraps around to the side of the unit. In doing so, light creates a form shadow around edge as it moves from the front to the side. The shadow helps to show the transition – However, it is the reflected light on the outside of both sides that create this dimension on what is otherwise a flat shape. Further, these details ad to suggest the metallic surface.

A colleague recently suggested that I write a tutorial to showcase how I create these. I may try to in another post, but am not convinced that I could accurately describe a best practice to do so. Mostly because, I tend to “eyeball” a lot of things. However, I do think that applying some drawing principles of light can have a positive effect on the end result!

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.