by Alan Graham
06/22/2001
After attending the Apple Worldwide Developers Conference (WWDC) seminars on working with Aqua, the Aqua feedback forum (also known as "The Bloodbath"), and a seminar on creating Aqua icons, I had hoped that all my questions and concerns about Aqua would be put to rest. Ha! Shame on me. While some questions were answered, it also left the door open to new questions and a whole new slew of issues.
For this piece, I am going to elaborate on my previous article, Creating Photorealistic Icons for Mac OS X. I will also try to decipher, in more detail, the Apple Human Interface Guidelines on icons (specifically application icons), then address some of the issues I have with them. After that, I'll go into another tutorial where I'll show you some basics on how to work with 3D rendering and how to get the right look for your 3D icon.
I've touched on this subject before, but I want to clarify some of what Apple is looking for with icon Genres. One of the most important aspects of icons in Mac OS X is that Apple wants icons to be emotive. Icons should express an idea that communicates what the application does. For example, the Preview.app icon.
Here we have an icon in which pictures are arranged the way they would appear on a table or desk (or in my case, on the floor). The loupe in the icon helps to make it emotive by expressing this application is for viewing images. Remove the loupe and the icon says nothing. Remove the media, leave the loupe, and the same thing happens. You will also see that the media in the icon (the pictures) are arranged in a diamond or slanted pattern. According to Apple, the value this serves is only as an homage to the original diamond icon in the previous OS.
The perspective of the icon is intended to be "desk-like" and is positioned as if the camera is viewing the scene from an angle that would represent a person looking, as if standing or sitting at an elevated position. It is intended to be inviting and approachable, with vibrant colors. It includes a sample of the media it handles and a tool that expresses function. It tells a story.
|
Also in Designing for Aqua: An Interview with Ivor St. John Clarke About Aquafying Office X |
That sounds easy enough, right? Emotive icon, colorful, slanted, tells a story, yadda yadda. The point Apple is making is that any user, newbie or pro, would have little difficulty in predicting what this application will do once launched. I would beg to differ, however, that any user would know anything about what this application does. Unless you work in the prepress industry (or operate a pawn shop), I doubt that most people would recognize a loupe or even know what it does. For those of you wondering, a loupe (pronounced "loop") is a glorified magnifying glass.
I have a few issues with Aqua's Genres. I honestly don't think it works, and Apple is chasing its tail if they continue to pursue it. Here's why:
If you have an established brand, using an Apple icon instead of your brand is silly. Branding of icons is one of the greatest accidental marketing tools on the planet. You have an application that is instantly recognized by people everywhere, regardless of what language they speak. Do you want to alter your brand to reflect a Genre? Want to be just one of those word processing or imaging apps? Of course not, you want to stand out!
Apple suggests that you can place your icon's brand in the foreground instead of using a tool icon, and then placing a sample of the media that it handles in the background.
For example, placing images of photos for a photo-editing app. Okay, no problem, right? Wrong! Bear in mind that anything you place behind your branded icon means that in order to see that media image, you have to make room for it. This means that your branded icon must shrink so you can see what is behind it. Not a big deal at 128 x 128 pixels, but wait until the system shrinks the icon. Do you want to shrink your brand into an incomprehensible dot, or do you want it as large as possible? What seems like a lot of room to work with, becomes increasingly small as you add more items and then scale them.
|
|
|
Let's say you are a Photoshop pro. Odds are that you'll recognize the Photoshop icon anywhere, regardless of any media located behind it. I recognize Explorer, Photoshop, AIM, Word, Excel and so on, without the aid of any sample media in the icon.
If you are a newbie, you probably won't just walk up to a computer and need to find a imaging program like Photoshop. If you are a newbie and you install Photoshop or Excel, you can locate the application in the Applications Folder, where the icon will be accompanied by the word "Photoshop" or "Excel." Once you've launched the application, there is a great chance you will recognize the icon from its appearance in the dock from that moment on. The whole point of icons is that they are easy to memorize and recognize. A great icon needs very little help and doesn't require a Genre to associate it with a function.
To give Apple some credit, I believe that the Genre concept is an excellent idea in theory, just not in practice. In the real-world, outside of Apple and Apple's applications, it doesn't really work that well. I suggest that you do your best to locate a happy medium between following the genre guidelines and satisfying your personal preferences and needs. If you can't fit your icon/brand into the guidelines or you want to express only your brand, then ignore them. After all, they are guidelines, not laws of physics.
The fact is, the better your icon looks and the more unique it is in reflecting your brand, the more effective it will be, regardless of its Genre.
When working with photorealism, specifically 3D, there are a number of issues to consider. First of all you need an application that can not only create 3D modeling, but can also handle rendering (turning 3D models and textures into images). These programs use calculations to calculate light, space, and texture. Those mathematical calculations are developed by super-human government experiments who need a special apparatus to keep their enormous brains from tipping their heads over. Me, I just use a neck brace.
For my 3D work, I use Strata's, Strata 3D. What I like about the application is that you get all the 3D tools you need and an excellent rendering engine for a mere pittance of about $150. Why do I use a 3D application versus an illustration app? With a 3D program, I have a lot more control over every aspect of space, effects, and light.
For your icons, you can build your own models or you can purchase models that are already built and textured. This can save you a lot of development time. One example of a company that builds models is Zygote. If you want to take an existing image and give it new life in 3D, Adobe's Streamline app allows you to take any image and convert it to geometry. Then you can pull it into 3D and do practically anything with it. I highly recommend this application!
When working with 3D in relation to Aqua icons, regardless of the application you use, you have to consider a few issues: detail, scaling, camera angles, and lighting.
In a previous column, I showed how an icon with a busy texture or pattern will have great difficulty retaining that pattern when scaled down. I also pointed out that busy images don't really look good at any size. One of the hardest lessons to learn (much like when drinking Guinness) is knowing when to say when.
I am of the school of thought that less is always more. In 3D, detail is even more nefarious when images get small. Some details will disappear, while others bleed into noise. There is one exception to this simplicity rule. If the detail that is lost in scaling down doesn't change the meaning of the icon or distract from the image as a whole, then it is okay.
One of the more crucial aspects when working with 3D and photorealism in icons is scaling. When you develop an icon at 128 x 128 pixels, it is easy to think, "Wow, I've got all this room to work in." That's where you'll get hammered. Most users will never see your icon at its largest size. However, you can render your images at any size you like when working on them. I recommend a size larger than 128 x 128 pixels. This gives you room to do additional detail work on the image in other programs like Photoshop, without any loss of data.
Mistakes are harder to correct at smaller sizes and I prefer to work with plenty of space and then scale down. When working with a 3D model and certain textures, I also find it easier to work with an object that has a bit of scale to it so I can see what I am doing.
Don't concern yourself too much with how large the object is in this relative space. It doesn't have to be built to scale, since you can render the final image to any size. If you are new to 3D as a guideline, you could insert a simple rectangular box to represent the "desktop" on which your icon will be placed -- you'll see this "desk" metaphor later). This will help give you some reference for which camera angles and directional lighting to use.
One warning when working with any icon: It is my opinion that using any form of text as your icon is a bad idea. Text does a terrible job of translating across the system, especially in 3D. Once scaling down comes into the equation, all meaning is lost.
|
What Apple recommends is that the position of your lighting (the imaginary light souce striking your object) be up and to the left of the object(s) in the icon. In these two examples, you'll see a spotlight image which represents the light source. I also placed a desk to give you some reference to the space. Notice the direct line pointing to an area on the icon. See how this area is lighter that the surrounding area? That is an approximation of where Apple wants the light source to strike.
Now working with light presents a number of problems I would like to address. In 3D, lighting and how it relates to an object, has a lot of variables including distance from the object, color of the light, intensity of the light (which is also linked to distance), texture of the object, and so on.
Most 3D applications have several types of light settings. I'd like to discuss three: ambient light, point light, and spot light.
If you are looking for a very dramatic and specific lighting effect you can use a spot light to target one specific area and add color or effects. A point light, like a real light bulb, allows you to create a nice glowing localized light effect that you can position anywhere. Ambient light is the default light setting you will find in your 3D space. Many times ambient light is the only light setting you will need to deal with. However, below you can see that using a spotlight or changing a simple thing like the light's color, for example, can give you a very dramatic effect for your icon. Same texture, different lights.
One aspect of working in 3D is dealing with shadows. Though a 3D application is built so that you can replicate the real-world, you can also bend those rules. Depending on the object(s) I am working with, I will sometimes turn off the shadow effects so that I can fudge the shadows in another imaging application. This gives me a lot more flexibility when getting the exact look that I want.
At the WWDC, when I saw the guidelines for how icons should look in relation to spatial dimensions, it was like a seed in my tooth. For application icons, they have structured icons so that they fit into certain aspects of their Genres. Apple wants you to build an application icon to look as if it were sitting on a desk, and you were looking down at it from an angle. In the images below, you will see an example of how the "camera" would look when placed in the approximate location for rendering an icon. Notice that one of the lines points directly to the object. The other lines serve as a guide to show you the relative angle and area the lens will capture.
The reason Apple's guideline for the camera location bother me is when it comes to some images and objects, I think it's a matter of personal preference as to what looks best. Not all images and objects look good from this angle. I believe it really depends on your personal preferences and how they relate to your brand. In the icons below, I like both images for different reasons.
|
I went ahead and built two icons that would squeak by the Apple guidelines for application icons. I built one icon for a fictitious image-editing application called Paint. I created a second set called "JumpinJava" for a fictitious Java-based web application. For both applications I tried to balance what Apple wants with other elements of personal preference.
For the Paint application, I took a 3D model of a paintbrush, placed it in 3D space, rotated the camera angle to the proper location, and rendered the image (including an enabled alpha channel) with a shadow. I took an image of the Mona Lisa into Adobe LiveMotion and gave it certain elements of style so that it represented not only a famous painting, but also had a "framed" look. I then brought in the Paintbrush image to the same application and combined the two objects so that they conformed to the 128 x 128 pixel restrictions.
I tested the icon at smaller sizes until I felt comfortable with the quality. Does it pass the test? Well, it is emotive, so you know what the application does. It has a media sample behind the paintbrush, so it is easy to tell it is an imaging or painting application. It uses vibrant colors, has the proper camera perspective, and is all done in 32-bit color. It follows my own rules for not being too busy, and although I fudged a little by stylizing the shadows to my personal taste, it doesn't draw too much attention away from telling the story of what this icon represents.
For the JumpinJava application, I followed the same steps. To make the icon emotive I added the dark brown fluid to represent coffee/java. I also place a little bit of steam sitting just above the liquid (did this in Photoshop). The steam, while helping to communicate that this represents coffee, is a busy detail, but I made sure that it didn't distract from the image or add noise when scaled down. Also, when scaled, the loss of the steam won't change the meaning of the icon. Keep in mind that an empty coffee cup could represent anything or nothing. Also, the media behind the cup with the letters WWW and the planet Earth, just help to cement the meaning. At the smallest scale, the text vanishes, but once again, doesn't change the meaning of the icon. This is what Apple is referring to when calling for emotive icons.
So here you have two examples of emotive applications that conform to the icon Genres. The problem with these examples is that neither of these images reflects a brand. So I have successfully followed the Apple guidelines, but a lot is missing without a branded image. When it comes to building application icons for your program, remember that if Aqua is art, then it certainly is subjective. Follow your instincts!
In conclusion remember what Apple says:
Alan Graham is the creator of the Best of Blogs book series and is a frequent writer on the O'Reilly Network.
Read more Designing for Aqua columns.
Return to the Mac DevCenter.
Copyright © 2009 O'Reilly Media, Inc.
