Matt Gemmell

TOLL is available now!

An action-thriller novel — book 2 in the KESTREL series.

★★★★★ — Amazon

Icon Resource Review

development & general 5 min read

Following up on my earlier post, I’ve had a chance to go through the Icon Resource icon design tutorial videos in detail, and thought I’d post a few thoughts.

First, some basic information. Icon Resource is a set of videos by Sebastiaan de With giving tutorials on icon design using Photoshop, aimed primarily at those with little or no icon design experience who want to create icons for Mac OS X. I’m thus definitely in the target market.

The complete pack of videos costs € 95 and the movies are provided in both high-definition Quicktime and also iPhone-ready format, so you can watch them either at your desktop computer or on the go. Photoshop source files are also provided for the tutorials so you can go in and inspect the specifics of the icons you see being created in the videos.

The Icon Resource site shows a list of all the videos included, and also offers a sample video you can watch before deciding whether or not to purchase access to the rest. Paying the fee gets you a login to the secure portion of the site, where you can download the videos and related materials at your leisure.

The video pack as a whole is split into two sections: a relatively brief set of Theory videos - covering the history of icons, what they are and how they’ve evolved over time, and some standards and guidelines to be aware of - and the longer Techniques section, in which Sebastiaan guides you through the creation of an application icon from start to finish, using Photoshop CS3.

The Theory videos take the form of running slideshows with continuous voiceover, beautifully presented (presumably with the able assistance of Keynote for the many tasteful transitions). These were interesting, particularly the visual timeline of the evolution of icon design and Sebastiaan’s view on how icons can be subdivided into functional categories.

The Standards and Guidelines movie, particularly, is where we begin to get into the nuts and bolts of observing how distinct classes of icon are subtly different from each other, and use unifying visual cues and “unwritten rules” to be consistent. We also learn the standard rotational offset of application icons on OS X (it’s 9° counterclockwise, incidentally). Mention of the Mac OS X Human Interface Guidelines is also made, and a set of relevant links are provided for further reading in that area.

Then we move onto the Theory section. This section alone must run to around 2.5 hours of video instruction (rough estimate on my part), and begins with a gentle introduction and advice on how to think about the problem of creating an icon to represent a certain concept. This part was very useful to me as I tend to be very literal in expressing ideas (which probably goes with the territory for a software developer), so it was interesting to think in a more abstract way, and use word associations and metaphor to develop a visual way to concisely demonstrate the functionality of an application.

The tutorials move on to the basic principles of what Sebastiaan calls Software Illustration, and describes how his approach is based on fundamentally 2-dimensional illustration using Photoshop, rather than the use of 3D rendering software. I found this encouraging, because a big part of my trepidation about icon design was due to today’s ever-larger icons requiring near-photorealistic images, and I have very little experience with 3D software. The Icon Resource videos aim to demonstrate that it’s possible to go very far in icon design without necessarily having to fire up modelling and rendering software.

A large part of the focus of the techniques in the videos is centered around Photoshop’s Shape Layers. I use these semi-regularly in my own work, but I learned several things within the first 10 minutes of video that I’ll find constantly useful, including managing multiple shapes within a single layer. The videos move on towards what becomes a recurring theme: the use of blending modes and gradient overlays to create realistic shading and a sense of depth and three-dimensionality in what moments before were simple two-dimensional shapes. This technique is refined and expanded throughout many of the later videos.

I was then guided through how to create the correct perspective and apparent light-source in icons, and how to fix common mistakes and enhance realism of shadows and highlights. It’s actually quite stunning to see how little time and effort is needed to create very realistic effects when you know what you’re doing (and indeed have had enough practice). Of course, shading and perspective alone aren’t enough for realism, so Sebastiaan then discusses and demonstrates the creation and application of textures (for the wood grain of a pencil and for the bristles of a paintbrush) using only standard built-in Photoshop filters, with impressive results.

With the “tool” elements of the icon done, we move on to a detailed treatment of the classic document icon complete with page-curl, which is created from scratch as you watch. By this point, the viewer is more familiar with some of the techniques shown, and I found myself starting to anticipate the general means to achieve certain shadow and highlight effects - I genuinely felt that I was learning, even though in that instance I wasn’t following along with my own copy of Photoshop. The videos go into some detail about shadows, including the use of multiple overlaid shadows to more faithfully represent how objects cast shadows in the real world, and Sebastiaan constantly advises using real objects as a periodic point of reference.

After several test compositions of all the icon elements created so far, and corresponding tweaks and improvements, we move onto the art of resizing and retouching icons for all the various sizes they might be shown at on Mac OS X, including the very small sizes sometimes seen in the Finder or toolbars or document titlebars or such. This was a part I was tempted to skip over, foreseeing a lot of backtracking and painstaking recreation, but again I was impressed at how quickly a retouch could be done to rework a 128x128 pixels or larger icon for 32x32 and 16x16 pixel sizes (the originals worked with in the videos are very much larger, at 4096x4096).

Lastly, we cover creating actual icon files and images for use in applications and on the web, with mention of both Icon Composer (part of the OS X Developer Tools) and also IconFactory’s excellent IconBuilder. Finally we receive an encouraging send-off, with a quick display of high-speed showmanship of how to use the included sample files to create a convincing blueprints-style document icon.

The sample files include all the major stages of the creation of the final icon plus various extras, including all the composition and shadow tests shown in the videos, and will be extremely useful for following along and also for reference later in your own work.

Sebastiaan’s speaking style is unhurried and easy to follow, and the video and sound quality are excellent. I genuinely feel like I learned a lot about what was previously something of a black art to me, and I couldn’t help but come away feeling enthusiastic about the prospect of creating some of my own icons for future software projects - or just for fun.

Given the quality and quantity of material on offer, including fully layered original Photoshop PSD files for each major stage, the € 95 price tag seems like the bargain of the century. If you have any interest at all in learning more about icon design and even trying your hand at making your own icons, I can wholeheartedly recommend Icon Resource.