AddThis Social Bookmark Button

Listen Print Discuss
Mac OS X > Excerpts >

Introduction to 3D Rendering for Aqua Icons
Pages: 1, 2, 3, 4

Following orders

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.

Icon for a paint application.

Screen shot; click for full-size view.

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.

Icon for a Java application.

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!

Final reminders

In conclusion remember what Apple says:

  • Be careful of too much detail.
  • Test your images at different sizes to ensure they look good.
  • Try to follow the guidelines the best you can, but if you can't, use good judgment.
  • Remember that your application's icon is the first thing people see.
  • Hire a graphic design firm if you feel uncomfortable with this work.
  • When working in 3D, always wear your safety goggles.

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.