Online Book Reader

Home Category

Rockstar Icon Designer - Kate McInnes [48]

By Root 403 0
which has a highly realistic style.

Since the release of Mac OS X, Apple has used a visual theme called Aqua for its interface guidelines. Based on the concept of a hyper realistic icon style and “lickable” interface elements (yes I said "lickable" - Steve jobs wanted users to feel like they wanted to lick the object), the main aesthetic of the Aqua theme has remained relatively unchanged in the past 10 years. The Human Interface Guidelines, including a comprehensive style guide for Mac OS icons, can be found in the online developer library.

The size of the Aqua icons have an impressive scale range starting at 16px up to 1024px. Like the 256px Windows icons, the 512px and 1024px icons are rarely used with current computers. The large scale icons are intended to be graphical assets for the next generation of iMacs that may include high resolution retina display monitors. Including the large scale icons will insure that programs made for current Macintosh products won't need to be redesigned for new devices.

The 256px to 1024px icons are made from Jpeg 2000, which is a file format with similar properties to the PNG format used by Microsoft. Jpeg 2000 supports transparency and compresses files into a lossless format. The main difference between PNG and Jpeg 2000 is the level of compression achieved with files containing large areas of flat color. Because icons are highly unlikely to have these attributes, Jpeg 2000 performs just as well as PNG for icon compression. An icon editor such as IconWorkshop and Microangelo will allow you to include Jpeg 2000 as part of the .icn file, but older editors may not include this function. To export Jpeg 2000 from a program such as Adobe Photoshop, you will need to install a custom plug-in that's available for free from Adobe.

Technical Breakdown

If you're familiar with the Mac OS X Human Interface Guidelines, you will find a few updates with the release of OS X Lion. Most notably the new 1024px maximum icon size for high resolution devices. Essentially this is an icon that is larger than most designers could ever have imagined just a few years ago. The inclusion of this size is to future proof Lion and new Macintosh computers which will have super high resolution retina displays.

Another change you will find is the new monochrome Sidebar and Toolbar button icons. For those who are not familiar with the Macintosh interface, the sidebar icons are found in the Finder window, and in programs such as Mail and iTunes. The change has brought the Macintosh OS closer to the visual style of the iPhone and iPad iOS, this is generally seen as a step backwards in usability as the absence of color makes it harder for icons to be recognized, so this is where it becomes extremely important to design sidebar icons with instantly recognized silhouettes.

When rendering icons for the sidebar you should use various opacities of black rather than black with shades of grey. This is because the effects applied to the sidebar icons use the icon's alpha channel to apply visual effects such as embossing and rollover states. If your design doesn't look good in an inverse state (which is the rollover state) then you will need to supply a second version of the design, with the elements that need to change transparency for this purpose.

When rendering icons for the sidebar you should use various opacities of black rather than black with shades of grey.

Regardless of these two changes, the technical specifications are almost identical to earlier versions of Mac OS.

Sizes: 19px for Toolbar Button icons, 16, 24 and 32px for Regular Toolbar icons and 16, 18 and 32px for Sidebar icons.

.ICNS files are required to have 16, 32, 128, 256, 512 and 1024px in 32, 8 and 4-bit color depths.

Colors Used: Vibrant tones for application icons, more subtle hues and chrome effects for utilities and hardware icons. While the choice of color is left to the designer's discretion, a few harmonious colors are ideal. Bright highly contrasting colors or a use of many different colors is likely to result in an icon that doesn't

Return Main Page Previous Page Next Page

®Online Book Reader