The Double-Drawn Method of Icon Design
In 2012, a design agency known as Softfacade posted a case study to the Web. Softfacade’s task was to redesign a logo mascot icon originally conceived by Russian studio Turbomilk. At the time of the case study, Softfacade was based entirely in St. Petersburg, so the redesign was Russian as well.
That case study is no longer available on the Softfacade site, and the agency’s focus seems to have shifted in the years since. It’s a shame, because it was one of the most professionally startling things I’d ever come across.
The approach involved creating the icon twice: once as a textured 3D model, and again as a stack of Photoshop shape layers. This seemed nuts — doing twice the work for the same result. Yet there are benefits. The freedom to scale up an icon indefinitely without rerendering is among them. But, more importantly, the Russian “double-drawn” method affords a much higher degree of control.
Let’s say you want to adjust a shadow’s intensity. In the 3D model, that would require some combination of moving lights, adding light, or excluding the shadow-casting object from the shadow calculation. These are all fine methods, but they’re fiddly; it’s hard to predict their effects until the scene is rerendered, and you’ll most likely need to readjust several times.
If that shadow is just a Photoshop shape layer, however, the adjustment is suddenly trivial. You can simply dial down the shadow’s opacity.
I’ve come around in the years since first encountering this approach and now embrace it. Here’s how I used the Russian method in designing an example app icon.
After we decided on our theme and I collected some reference photos, I sketched out a rough blueprint.
As I worked on constructing a 3D model, I was able to better see which parts were key to the object’s silhouette and which were extraneous. Several details were dropped in the process.
It’s not necessary to get the colors just right in the 3D render. Those are recreated in Photoshop. It is important to get the highlights, reflections, and shadows into a state we can use as an accurate reference.
The next step was the key to the process. I brought the render into Illustrator and reconstructed any important details with vectors. I chose to do this work at a 64-by-64-pixel resolution. That way, so long as I kept the edges of the vector shapes aligned with the pixel grid, my shapes would be pixel-aligned for any of the enlarged sizes required for the final icon.
Note that not only are the parts of the submersible recreated in vector form, but also highlights, reflections, and shadows. Anything that needs to be available in the final icon must be represented here.
The shapes were transferred into Photoshop as shape layers, then filled with flat colors or gradients. The original 3D render was used as a lighting reference, but liberties were taken in the name of harmonizing colors and improving contrast.
At this point, my working size was 256-pixels-square. Since my vector work was done at 64-by-64, I could trust that further progress would translate well when scaled up or down.
Shadow shapes were softened and effects were added to give a beveled appearance to the edges. The water caustics were a rendered effect and the only component pulled directly from the original 3D scene.
Before sizing the icon up or down, I spent some time grouping components into logical Smart Objects.
This allowed me to make slight pixel grid adjustments for any resolution where it seemed necessary.
Note that cast shadows are integrated into the objects upon which they were cast, not into the objects casting them.
Thanks to all this prep work, generating each required icon size was fairly easy. Of course, the 16-by-16 and 32-by-32 pixel sizes required special attention as usual.
This double-drawn method, strange as it seems at first, provides great results and makes for a much more flexible end product than other approaches I’ve tried. You may be thinking, as I did, that it all amounts to a tremendous duplication of effort. Perhaps that’s still true. But I’m convinced it’s a technique I’ll return to again soon.
For more insights on Web and mobile development and design, follow Black Pixel on Twitter.
