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.

Shadow outlines in RealWorld Icon Editor

Prepare your images using "Remove empty border" operation to maximize the covered surface. Shadows are automatically applied during the "Image to Icon" transformation. You may reconfigure shadow parameters if necessary.

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.

Internal shadows in RealWorld Icon Editor

Create a separate icon from each layer, then combine them using clipboard. You will probably need to adjust the size of source images manually, because the "Remove empty border" operation would not keep the relative size of layers. If you choose to lower the contrast of background layers, do it before converting them to icons.

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.

Projected shadows in RealWorld Icon Editor

Beside the classic method (e.g. letting 3D objects cast shadows on defined background), the application can create similar effect with much less effort. In the raster image or icon editor, switch to Projected Shadow drawing tool. Then drag with you mouse from a point where the object would touch ground upwards.

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.

Reflections in RealWorld Icon Editor

The Reflection item in material specification controls the color and strength of reflections. If it is non-zero, the surface will reflect all other surfaces (the reflections are not displayed in the editor due to speed constraints, but they will be in the final rendered image). Be sure to place the object that should be reflected to the scene.

Summary

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

Anonymous on September 30th 2006

different light sources reflect on windows and how they affect what i see?

Vlasta site administrator on September 30th 2006

I do not understand what is your question about. In general reflected light contributes to the entire scene and can indicate the properties of used materials.

sixλxis forum moderator on March 25th 2010

i believe hes talking about reflections and refractions of transparent surfaces.

Anonymous on September 29th 2010

YEAH IO AGREE WITH YOU

Anonymous

Signed comments carry more weight! Don't be a stranger - log-in or register. It only takes few seconds.