In the various niches of design, icon & interface design used to occupy a small and somewhat neglected part of the the overall field. However in the last few years, understanding of usability and graphic display options have improved to the point where an applications look and feel can be a selling point in itself. A well designed and clean interface implies a certain professionalism to a product, an impression that Apple uses to great effect.
In this article we’re going to answer a few questions about toolbar icon design in OS X and give an application toolbar a makeover. Only without the double entendres and salon visits.
What are toolbar icons?
These are the graphic resources used by any application to represent certain functions. For example a small graphic of a printer to symbolise the action of printing a document. On OS X they are typically 32×32 tiff or icns graphic files.
What are Apple’s guidelines on producing toolbar icons?
Apple’s Human Interace Guidelines states “…that they provide access to items as if they were sitting on a shelf in front of you. Toolbar icons emphasize their outline form, rather than subtler visual details” They should also “….harmonize together in their perspective, use of color, size, and visual weight.” Notice these are guidelines rather than cough…Mail 2.0..cough….rules…
How are they implemented?
If you view an application such as Sherlock, Safari or Mail, right click or control click on the application icon and choose Show Package Contents…Navigate to the Resources folder and you will usually see a collection of tiff and icns files that make up the graphic widgets and elements of the application.
How are they constructed?
That’s the easiest part of the whole equation. Anyone with Photoshop, Fireworks etc can produce tiffs and can therefore work with most toolbar icons. For ICNS files, normally an icon program such as Iconbuilder Pro is used to produce the icon file.
What are the main considerations for designing toolbar icons?
The urge to be clever and inventive in design is a natural one, but with toolbar and application icon design, you are taking people’s gut reaction into account. An icon needs clarity above all else. You have under a second to communicate a function no matter how complicated or esoteric.
Consistency of style across the icon set can be very important in reinforcing an applications purpose. Rather than talk more about this we’ll dive in and create some new icons for an unsuspecting app.
NetNewsWire Lite has been a constant presence in my dock and I’m sure I’m among the hordes awaiting the new 2.0 release of the best RSS newsreader on the market. One thing that I haven’t taken to as much is the new batch of icons being used in the beta version of 2.0. While utterly unfair to pick on a unfinished application’s design, I’m using it as an example as it stores it’s icons in the common tiff format and therefore relatively easy to change. Sorry Ranchero…..
Please remember that we are altering an application’s resource files, so if you are unhappy losing the original files, please back up your copy in a safe place.This article also assumes you’re relatively comfortable fiddling around with Resource folders.
Normally I take a look at the application, what it does, what is the dominant colour scheme and what style we would like to achieve. In this instance the the information feed feature of NetNewsWire is hard to miss. The orange of the numerous RSS syndication badges suggests itself as a possible main colour. Bringing a screenshot into Photoshop to play around with colours can help make some design decisions.
For this I’ve decided to go with a blue/orange scheme and a harder style than the present one. A sheet of headlines will be the main motif for the RSS functions.There are 100 different methods to fill that 32×32 space, but the way I find most effective is to use Photoshop’s Vector Shapes and Layer Styles settings. The main advantage to this method is the ability to scale any element without loss of quality. The Layer Styles can be copied across multiple shapes enabling a consistent look to all icons. Using Layer Sets for each icon keeps the average of 300 layers for an icon set relatively organised. The pen tool and the pathfinder options in Photoshop you can blend the paths of various paths together and use the layer styles to cover the new shape.
For viewing style consistency, keep the application screenshot onto which you can paste ideas as you go along. For this set I haven’t strayed too far away from the original graphics so that helps speed up the process. However with a combination of strokes, inner glows and gradient overlays, the icons now have a sharper look.
As certain icons perform different functions, it can be helpful to give the user a useful hint as to what the function is with colour.
• Green symbolises an action function such as adding or inserting.
• Red symbolises an interrupting action such as deleting or removing an object.
• Blue usually is used to suggest analysis of data or inspection of a property. However these guidelines can be and are broken on a regular basis. Once we are happy with the overall look of an icon set we can simply save as transparent tiffs with the original file names copied from the Resources folder. From there it is simply the a case of replacing the original files in the Resources folder with the new copies. Et voila….Your RSS reader should have a new look.
I’ve made the icons available for anyone using the beta at the moment who wished to replace the current set.
Replacement Icons (76kb Zip File)
Next Week: Application Icons and the Fabulous Five (Fingers) give Skype a complete makeover.