an All Creative World site
afterglow's picture
571 pencils

Queer Eye for the Toolbar Guy


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 32x32 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.

FiddlingFor 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 32x32 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.

www.afterglow.ie

Commenting on this Blog entry is closed.

Tigerstorm's picture
1009 pencils

I must say this is awsome work and a awsome article..
Give me more Afterglow.. I want more articles on icon design =)

Ivan's picture

Wow! That's an excellent tutorial. I have to try to do a makeover on TextWrangler.

Tigerstorm's picture
1009 pencils

Perhaps a toolbar menu later for CB Ivan, what do you say?

Julian's picture

I have to say, that was really interesting! Great article, cool techniques - I'll remember next time I am creating icons...

Bruno Figueiredo's picture

Great article. I just have one remark. I know you've made the sheet orange because that's the color associated with RSS. But when you add the red unsubscribe badge it looses readability. So, why not make only the headline of the sheet with a orange background and the rest white or light gray? That way all badges would stand out more.

Harry Jones's picture

Really great article Cian, and I love the way you use colour to differentiate the type of action each button deals with.

lrenhrda's picture
207 pencils

Great article! Icon and interface design has always been one of my interests and it's great to see it represented here on CB right next to print and web stuff! Bravo!

Enigma's picture
29 pencils

In cocoa, loading images is usually achieved through NSImage's +imageNamed: method. This doesn't care about the type. It can be .icns, .tif, .png, or pretty much any other format. So, icons you create do not have to necessarily be the same format as the ones you're replacing, just the same name before the extension.

If you want to make .icns files, you can use the free program IconComposer, which is included in Apple's Dev tools (on the OS X DVDs). It's a trade-off though. In return for storing multiple pre-scaled sizes of the icons, you lose the ability to have anything more than a 1-bit mask below the 128x128 icon size. Only that one can have an alpha channel in the .icns format.

Gary's picture

I like some of your design goals (and I always like to see more effort going into UIs) but, euwwwww, what a really unpleasant set of icons you've ended up with. Sorry - just a gut reaction, maybe they look better once in the tool area. My call would be to use the original set/style with just some minor UI focused modifications.

cosmicrob's picture
7 pencils

..although I think the original set of icons are more in keeping with the general OS X look. I like your ideas for 'post to weblog' and 'mark as read' better.

I think there might be some confusion for the user with the 'previous read' and 'subscribe' buttons because they are really meant to represent different types of content. Subscribing to a whole feed should look alot different then just moving to the next message.

my 2 cents.

Dulcepixels's picture

Thanks for sharing this thought. I agree with you... "Consistency of style across the icon set can be very important in reinforcing an applications purpose". This is something which I should try to achieve. Thanks for sharing.

DanDan's picture

This was a great tutorial. The icons look great. Can you make a PSD file available so we can player with you layer effects settings?

Thanks.

Rafi B.'s picture

take a look, looks somewhat the same
to the new Skype icon:
http://slideshowpro.net/

afterglow's picture
571 pencils
afar's picture
1 pencil

hi there,

by any chance, can you repost the doc? I'd love to see your sample icon with the layer styles!

thanks so much.

freeicons's picture
2 pencils

Nice icons,
Over 15,000 Free icons,Hope they are useful to someone
http://www.freeiconsweb.com

Creativebits is a blog about Creativity, Graphic Design, Adobe, Apple and other related subjects.

Do you need a great new logo?

Pick a pre-made design from a collection of 50,000+ logos that will be customized to your business name for free.