oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

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


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.

Lighting example 1.

Lighting example 2.

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.

Examples of different lighting effects.

And then there was dark ...

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.

Example of shadow use.

Camera angles

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.

Camera view 1.

Camera view 2.

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.

Comparing the use of different angles.

Pages: 1, 2, 3, 4

Next Pagearrow