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!

The design which included a new logo, is intended on creating a bridge between mediums. This is to reflect Scott’s combination of old and new within his own process. He hand draws all images, then paints using watercolor to provide a base. Then he finalizes these by pumping up the saturation as well as a continuation of brush work in photoshop

That said, I wanted to create a look that has an aged feel to reflect the roots of his process. As a base – his logo displays his drawing style – and the rest of the site uses warm but faded tones and backgrounds to continue this more traditional feel. The gallery uses Lightbox 2 by Lokesh Dhakar – However I tweaked the NEXT | PREV function a bit so that it is a consitent fixture rather then the result of a hover.

The site is still new and will no doubt continue to be tweaked, but I am quite pleased with this initial launch as it seems to have a very fitting feel to both Scott and his work. ( And ultimately, that is the goal of any project! )

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.