Mac OS X Leopard: Designer’s Guide to Icons

Advertisement

In 2000 Apple released the visual theme Aqua, a stunning leap forward in graphical user interface design. At the same time Apple published the Human Interface Guidelines (HIG), a tool for developers and designers that gives a detailed breakdown of the design philosophy behind Aqua. Apple recently updated their Human Interface Guidelines (HIG) to include the way the visual theme Aqua has evolved in Apple’s latest operating system, OS X 10.5 Leopard. This is the first update since 2006.

Let’s take a look at how this affects icon designers.

Aqua: Strive For Simplicity

“Gorgeous, artistic icons are an important part of the Mac OS user experience. Users expect beautiful icons that tell an application’s story in a clear and memorable way.”

To get really beautiful icons, Apple recommends that you let a professional designer create your icons. Despite all the eye candy and realism that is possible to apply to icons, less is more. Strive for a simple solution using one easily recognisable object. The basic shape or silhouette of your icon can help users to quickly identify it. If you aim for an international market, your symbols need to also be internationally recognizable providing Worldwide Compatibility1.

To increase usability and avoid confusing users as to what is part of the Aqua interface and what belongs to an application looking great in the Aqua interface, avoid using Aqua interface elements in your icons, don’t use replicas of Apple hardware products and don’t reuse Mac OS×system icons in your icons. It can be confusing to users to see the same symbol used to mean slightly different things in multiple locations.

Light Source and Perspective in Aqua

Address Book

Use a single light source with the light coming from above and slightly in front of the icon. This icon for Apple’s Address Book is a good example of the lighting in Mac OS X, Aqua.

Apple writes that “perspective and shadows are the most important components of making good icons“. The perspective for icons2 and the concept of icon genres and families3 remain the same in Leopard’s graphical user interface as in previous versions of Aqua.

Realism in Aqua

Pages

Aqua icons, such as this icon for Apple’s Pages, display a high level of realism and often show off glassy effects and transparency effects. This works best with concepts that can be described with a physical object. Icons that convey abstract concepts such as “music”, “checkout” or “download” are tricky to make photorealistic representations of.

For example, what would be a good way to symbolize the idea of music? A note? A photorealistic image of notes on paper? An instrument? Which instrument? And will using a harp or a sheet of classical music be too specific for anyone to feel that rap music or jazz could be represented by this imagery?

Not to mention how to make photorealistic representations of concepts like “Compute Value Added Tax” or “Restore Latest Backup”.

QuickTime Player

This application icon for Apple’s QuickTime Player has evolved over the years, with different variations whilst keeping its basic shape. It’s an example of an icon that Apple have chosen to make a symbolic icon for, rather than taking a photorealistic approach.

It is interesting to see how the icons in the iPhone and iPod interface have made a break from the photo-realism of Aqua and are designed more as symbols, which was the original idea behind the computer icon.

A handheld device is used in less than optimal conditions. There can be glaring light or low light, distractions, noise and so on. Using a more bold and simple visual theme makes a lot of sense for usability.

The icons in the iPhone and iPod interface display glossy effects and squares with rounded corners such as is commonly seen in the current “Web 2.0″ design.

The Dock in Leopard

desktop_dock20071016

If you think that users will want to display your icon in the Dock (and which developer doesn’t dream of that!), I suggest you give it a bare minimum of extra effects, as the Dock itself automatically adds several special effects including shadows as well as a reflection of the icon.

As far as I can tell there is no specific information on exactly what effects the Dock adds to icons in the latest version of Apple’s Human Interface Guidelines. I suggest simply adding a slight drop shadow of pure black to make the icon look at home in Aqua, both in the Dock and in other environments of the interface.

Leopard’s File Browser Cover Flow

You also need to be aware of how the Cover Flow view in Finder displays your application icon. In Cover Flow, icons are displayed against a black background, set on a highly reflective surface. Because of this, you may need to adjust the design of your icon.

If your icon includes a drop shadow, make sure the shadow is fully black. If your icon is very dark or has black edges, you can add a slight inner glow to make the icon stand out against the black background. This Spaces icon shown below, has a slight inner glow that makes it look at home in the Cover Flow environment.

iconblackedge

emailicon

Avoid giving important parts of your icon high alpha levels (that is, a lot of transparency), especially in the lower half of the icon. As areas with too much alpha can get clipped by Cover Flow. This icon for Apple’s Mail has a cancellation mark with high alpha levels and as we can see Cover Flow has clipped part of the postmark as shown below.

iconalphaclipped

Personally, I think that icons set on an angle look awkward in Cover Flow, since Cover Flow tilts the icons it gets to be a bit too much. A straight-on view, such as the perspective for the Spaces icon is best for icons when displayed in Cover Flow.

Icon Sizes in Leopard

OS X 10.5 Leopard introduces a new larger size for icons, 512×512 pixels. A professionally created icon for Leopard should include the following sizes:

  • 512×512 pixel image (for Finder icons in Mac OS X v10.5 and later)
  • 128×128 pixel image (for Finder icons in all versions of Mac OS X)
  • 32×32 pixel image (hint for Finder icons)
  • 16×16 pixel image (hint for Finder icons)
  • A mask that defines the image’s edges so that the operating system can determine which regions are clickable

Icons that display in the Finder are viewed at different sizes: they can be magnified in the Dock, they can be previewed at full size, and users can specify a preferred size. For the best-looking icons at all sizes, you should provide custom images (“hints”) at 32×32 pixels and 16×16 pixels. Although the Dock doesn’t use hints (it uses a sophisticated algorithm on the 128×128 pixel version), hints are important for preserving crucial details in Finder icons.

Always start with the largest icon and downscale that to the smaller sizes. The largest version of your icon should have the richest texture, more details and greater realism. The smaller sizes will in some cases need some retouching to have the same high quality as the original large sized design.

iconhighquality512

This mockup of the Front Row application icon illustrates that simply enlarging a small icon will not provide the sharpness and detail required in the large version of the icon.

Scaling Your Art Work So That The Smaller Versions Become Crisp and Clear

contentfooter_develop20071009

Setting up a grid and “using snap to grid” will help you keep each of the smaller icon versions crisp and reduce the amount of retouching and sharpening you need to do when you resize the art work.

Apple suggests that you set up the canvas for your master file to 1024×1024 pixels. In your image-editing application, set up an 8-pixel grid as you create the master file. This means that each block in the grid measures 8×8 pixels and represents one pixel in the 128×128 pixel icon.

Turn on “snap to grid” to reduce the half pixels and blurry details that can result when you scale it down. Although using an 8-pixel grid works well when you create 512×512 pixel icons, you may prefer the increased precision you get when you use a 2-pixel grid to create the master image.

If you aren’t satisfied with the results when you scale down your art work to the 32×32 pixel and 16 ×16 pixel sizes, you can redraw the image at these sizes instead. However, setting up the proper grid can still help reduce extra work if you decide to redraw the smaller versions. For example, using a 32-pixel grid with a 1024×1024 pixel master file works well for creating the 32×32 pixel size, and a 64-pixel grid works well for creating the 16×16 pixel size.

In general I think keeping the icons as simple as possible is a good idea, as both the Dock and the Cover Flow in Aqua Leopard add a lot of effects.

References

↑ Back to topShare on Twitter

Kate England is based in Sweden and earns money with designing desktop art. She is passionate about making your digital environment personal and productive. She designs unique desktops with exclusive designer icons and desktop pictures. An ongoing digital romance from Marmalade Moon.

  1. 1

    This is great! Also good to see the guidelines specified by apple, wish i could design icons like that though.

    good post.

    0
  2. 2

    People need more than computers, design and fonts. People need God. So seek God while you`re still alive, afterwards it will be too late. Now is the day to repent and follow Jesus.

    -16
    • 3

      lol u need god man cause to stupid to handle your live and be a good man on your own lol

      -1
  3. 4

    @LE: how appropriate… you advice us to follow your religious icon in an article about icons… it’s almost on-topic!

    2
  4. 5

    God is bad, please follow, red and black horny icons.

    B Elzybub.

    -3
  5. 6

    very nice info…

    0
  6. 7

    Very cool article :D thanks again Smashing Magazine ;)

    0
  7. 8

    It really feels like this was a blatant advertisement for Apple, rather than an unbiased article. Some helpful guidelines, but just a little too much in your face Apple propaganda for my taste.

    1
  8. 9

    Very informative, thanks.

    0
  9. 10

    what have you done in your life that you need to force religion upon others? Doesn’t feel so good to force someone else to do good instead of doing it yourself!

    -1
  10. 11

    Jesus (the son of mary) Peace and blessings be upon him was a Prophet of God Almighty, the one absolute true God, The computer can be used for many beneficial things, it’s the purpose not the object. God gave Human being’s the intellect and capability to create computer’s, let’s use them for positive purposes.

    And forcing religion is not permissible, At least in my Case, I’m a muslim, and it’s prohibited to force religion upon any human being.

    Thank You….and I LOVE THIS WEBSITE!!!!!!!!!!!! SMASHING MAGAZINE…the official spot.

    -4
  11. 12

    WTF?

    -3
  12. 13

    Since I’m a Protestant, I don’t believe in icons. Kate England, please replace “icon” in your article with “little picture”.

    or

    I’d follow Jesus, but I don’t know where to click. Please provide an appropriate icon.

    2
  13. 14

    This is a great article! I’ve been thinking about getting into icon design for a while and this seems to be a very informative place to start.

    @Johan: How can you call this propaganda? The title is “Mac OS X Leopard: Designer’s Guide to Icons” Of course it’s about Apple, it’s supposed to be!

    Also, what’s up with the religious spam?

    5
  14. 15

    God is Leopard?, or is an ICON?, God is made in 512x512px?, or just 16x16px?, do God have Alpha?

    Great questions of the mankind…

    Great Article!,
    Cheerz!

    -1
  15. 16

    @Jonah

    Hilarious.

    Point out the Apple advertisement or propaganda that you found in this article, because I may be overlooking it. But then, I’m not particularly insecure and over-analytical about computer branding and targeted content. It reads to me like a straight-forward and informative article on Mac Aqua icons, but maybe I missed the snarky “Get a Mac” ad that you saw embedded in the middle of it.

    0
  16. 17

    Does anybody else think it’s crazy that OS X uses 512×512 icons? Doesn’t it stop being an ICON at that size?

    It just seems like a crazy way to spend your RAM.

    0
    • 18

      512px is used because of the new retina display. Screen resolution changes more often than OS designs so they’re future-proofing the design readability :)

      1
  17. 19

    What a pity that one has to bring religion into making good user interfaces for Mac Applications!!!

    It shows how dried up the religions spring out deserts are!!!

    0
  18. 20

    God is an icon, life it’s a photoshop canvas… hahaha

    0
  19. 21

    I think it would be great using Leopard. My friend tried using Leopard on Intel based PC and it works. Just a pity for me coz I’d tried using Leopard on AMD based system but it won’t work smoothly. Best regard..

    Fachia

    0
  20. 22

    There was a women who originated these design principles at Apple. Specifically the realism and perspective. Does anybody know her name? I cannot recall it, at the moment.

    0
  21. 23

    Please don’t preach.

    0
  22. 24

    The Fachia: Leopard on Intel Based PC’s? How come?

    0
  23. 25

    Stunning icons and informative advice.

    0
  24. 26

    @Tony

    Do you mean Susan Kare?

    http://www.kare.com/

    0
  25. 27

    Where is esteem toward each other?

    0
  26. 28

    I got 16 gigs of ram, let me at those big freaking icons.

    Oh yeah, please keep your religious crap out of here…

    0
  27. 29

    stick to topic i say.

    and for the record, god is sooo not real!

    0
  28. 30

    Windows Vista: Designer’s Guide to Icons

    Rule #1: Keep Them Small
    Since every last megabyte of RAM is usually being used when running Vista, it’s good practice to keep icon sizes to a minimum to avoid using up unneeded system resources (which are better used up by the Vista kernel for security reasons).

    Rule #2: Don’t Use Blue
    Since everything else in Vista seems to lean towards the blue end up the spectrum, using the color blue in your icons might infringe on Microsoft’s copyright policy.

    NEXT!!!

    0
  29. 31

    The icons of apple system i like every day on my mac :)

    0
  30. 32

    What about the icon for Automator?

    0
  31. 33

    pple pls dont use this site for something that shouldnt be put here in vein and 4 just to say sumthing if ur really a Christ or jesus loving den you should have know that u should not use his name on vein….. ok
    just reminding no hard feeling ok

    0
  32. 34

    Geat!

    0
  33. 35
  34. 36

    If you believe in Religion, there’s a hell. Don’t believe in a Religion, there is no hell.

    On-topic: Awesome post. once again.

    0
  35. 37

    great stuff

    0
  36. 38

    Andrew Philosophe

    May 16, 2008 5:08 am

    God needs You to be His willing coadjutor in His continuing creating; so beat this dull shit and start to make some useful for other human being, for Christ sake! People works here.

    0
  37. 39

    Will you people please leave me out of this!

    Thank you.

    1
  38. 40

    No DAD! I don’t wanna!

    0
  39. 41

    Interesting to read the all so negative response to one little blurb regarding God. One little blurb. How in the world is that forcing religion on anyone? Read it, get over it or even consider it. If you want to believe that your destiny is to end up as only worm food, so be it. I am sure that all you who are so cool and mocking have never placed yourselves in harms way; would never consider serving your country, help your fellow man or any other thing except work for your own self-serving needs. The poster was either a troll or truly enacting the Great Commission out of love.
    As for me, I really don’t care what you think or say. I have been to test depth in a submarine and played chicken with the Russians. I know where I am with my walk.
    Yep, I came here to read about icons for sure, but some of your responses kinda concerned me.
    Laugh, mock, spew heresy, but in the end, we will all find out when we pass on. Just remember you may be wrong. . . . and therefore it will be your choice to end up in the smoking or non-smoking sections.
    Nuff said.

    0
  40. 42

    Susan Kare looks like she designed the original old school mac stuff. does anyone have a name or agency name for those who designed the new apple icons? it could be these guys http://www.duarte.com but you’d think they would put apples icons in their portfolio…

    0
  41. 43

    When I used my PPC Laptop a few years ago I was given a few assignments to create some icons… So I used Photoshop and IconBuilder to create my icons.. At that time I created 128×128 icons with open/drop states.. And they all worked… (on a 10.4 osx)….

    Well I haven’t created any icons since then until now, when I had a new assignment to create fresh new set of icons for a business… I created the icons like I normally do and when I saved them with the Open/Drop States they don’t work nor can I see them when I open the file with preview.. The normal states are visible, just not the open/drop states…

    To make sure it’s not the IconBuilder plugin that was giving me the issue I opened my old icons that I created with Open/Drop states that I know worked 2 years ago. They are no longer displaying the open/drop states in preview…

    So my question is: Did Apple stop supporting Open/Drop states of icons or is there a bug that’s prohibiting me from viewing them? Is there a command line code that I can enable Open/Drop states or something? Is Snow Leopard supporting Open/Drop states? And if Open/Drop states are no longer supported, my question is why was it disabled?

    I currently use a OSX 10.5.8 iMac (intel)… See my issue is that OSX 10.5.8 on a iMac (intel) is not viewing open/drop states of icons… We use to be able to embed the open/drop states into the icons document, and we still can.. but OSX 10.5.8 is ignoring the open/drop states… it won’t even reveal them in preview when you open them up..

    I even tested my old icons that use to have open/drop states and they no longer have them applied to the folders I created with them… So my only assumption is that apple has a bug in OSX 10.5.8 or that the operating system is now just are ignoring the open/drop states that are embedded into the icon files….

    I don’t know if it’s a Intel thing, or a OSX 10.5.8 thing, or a bug, but what ever it is I was hoping someone from apple will explain why I can’t see them…

    @@@ Also take note the only icons that have a open/drop state on my mac is the generic folder… ONLY the generic folder, and that’s do to the fact the system uses 2 separate icons for that! I know This cause when I use Candybar it has 2 different icons to replace for the generic folder@@@

    0

↑ Back to top