Role of shadow in icon design July 21st 2006

This article summarizes the advantages and disadvantages of a drop shadow effect in icon design. While shadow is often perceived as a nice-to-have effect, it is much more than that. Our brain is able to determine shape of an object from light and shadow; using shadows correctly can make icons easier to recognize and more pleasant to work with due to lower cognitive load.

Before reading this article, you should familiarize yourself with the technical aspect of Windows XP icons and Windows Vista icons.

Human perception of light and shadow

Human vision and shape-recognition are very sophisticated processes that are yet to be replicated in hardware. Lights and shadows belong to the most important information sources that help us guess the shapes of 3D objects around us from 2D images delivered by our eyes.

No lighting.	Without lighting, there is just a orange circle and blue polygon.
Lighting.	Simple lighting allows us to deduce the 3D shape of the displayed objects. Circle becomes sphere and polygon becomes a possible box.
With shadows.	Shadows help us determine the relative location of the 3D objects - the sphere and the box appear to be at approximately the same distance from us, because one of them is casting shadow on the other one. Their size is comparable, and they are laying on a plane. Shadow of the blue object indicates that it really is a box.

Other means of 3D shape perception

Lighting is only one of multiple factors in the shape perception equation. There are others, for example:

• Stereo-vision - each eye sees an object from different perspective and our brain is able to combines the images and determines approximate depth of objects. If an object or an observer is moving, the effect is similar.
• Contrast - distant objects are less contrast due to atmosphere (fog).

Shadow in icon design

Designing a 16x16 pixels image without knowing a background color is quite a challenge. Every bit that makes the job easier counts. Knowing when and how to apply shadow is one of the important bits.

Outline shadow

Imagine an object laying on a table (or hanging on a wall) and casting a shadow. The shadow is usually small and sharp if the object is thin and laying directly on the table, but it becomes softer and lighter if an object is taller or floating above the table.

If you decide to add shadow to your icons, you should use the same settings for all icons that are used together. Smaller icons should have smaller and sharper shadows than large icons.

Left: the shadow creates an illusion that a thin object is hanging on a wall.
Right: icon without shadow - not separated from background.

Icons with outlines emphasized by an appropriate drop shadow effect are easier to recognize, especially on backgrounds with brightness level similar to the brightness of the icon.

Internal shadow

Icons often consist of multiple parts. To emphasize the fact that one object lays above another object, why not apply the same drop shadow technique as described above?

Left: icon with internal shadow. Notice the dark outlines of the tree and the hill.
Right: icon without internal shadow. Looking a bit flat.

Reusing the same drop shadow settings on each layer gives the icon a layered look. The foreground objects appear to be closer to the observer. This effect can be supported by making the background layers less contrast than the foreground ones.

Projected shadow

If an object is standing instead of laying on a table, the shadow changes from a simple outline to a generic projected shape. Using these kinds of shadows can help to create an illusion that an object is standing on a floor, hanging from ceiling, etc.

Shadows help us determine the relation between the object and its neighborhood: magnifier is floating above surface; phone is laying on a surface; hourglass is standing on a surface and there is another surface behind it.

Note: various projected shadow effects should not be combined in one place. The above image clearly demonstrates, that using projected shadows inconsistently invokes a feeling of disorder (and it would grow stronger if the icons were closer to each other). Use projected shadows with caution.

Generic projected shadow is more variable than the classic shadow outline. The shape of the shadow depends on the relative position of light source and the object; in case of point light source, a realistic shadow would depend on the location of the icon on desktop.

Reflections

Just like shadows, reflections may help the shape-recognition process in our brains, but as with projected shadows, there are risks. Unlike shadows, reflected image depends heavily on the position of the observer. Look into a mirror, choose any point on the mirror and take a step left or right. The point on the mirror reflects a different object. This behavior of reflection is currently impossible to replicate with icons. In ideal case a reflection on an icon should be changing while the window with the icon is moving.

Side note: Microsoft recognizes the problems of global reflections in their Glass visual style in Windows Vista. When moving a window, the reflections on the window caption are changing depending on the window location. While the effect is not perfect, it is much better than if the reflection would be the same on all windows.

In order to help the recognition process, the reflecting objects must be simple and the reflecting surface must be big enough. If these requirements are not fulfilled, the reflection may actually make the icon harder to recognize. To stay on the safe side, it is recommended to avoid using reflection on small icons.

Conclusion

This article demonstrated the possible uses of drop shadow and similar effects during icon design. When using shadows and reflection effects, the common denominator is consistency. All icons that are displayed together should use the same shadows effect and the shadow effect should be in correlation the assumed light source. If all conditions are met, the result is a natural, non-obtrusive icon that is suitable for long-time usage.

Resources

RealWorld Icon Editor homepage.

Recent Comments