Microangelo: Icon Editor and Utilities
  Home  


Previous Page Next Page

Overview


This section will familiarize you with the latest style of Windows icon design in preparation for creating your own icons.
Figure 1. Icon samples

Icon Style Characteristics

  1. Color is rich and complementary to the Windows XP look.
  2. Angle and perspective provide a dynamic energy to the images.
  3. Edges and corners of elements are soft and slightly rounded.
  4. Light source is coming from the upper left-hand corner with additional ambient light illuminating other parts of the icon.
  5. The use of gradients provides dimension and gives the icon a richer look.
  6. A drop shadow provides contrast and dimension.
  7. Outlines provide definition.
  8. Everyday objects, such as computers and devices, have a more modern consumer look.

Icon Sizes


There are four sizes of Windows icons—48 × 48, 32 × 32, 24 × 24, and 16 × 16 pixels.

Microsoft recommends that your icon contains these three sizes:

  • 48 × 48 pixels
  • 32 X 32 pixels
  • 16 X 16 pixels
Figure 2. General icon sizes
Icons on the right side of the Start menu are displayed at the 24 × 24 pixels size. This is not a size that you need to provide.

Figure 3. The 24 × 24 size in the Start menu
If you are creating icons for a toolbar, the Windows standard sizes are 24 × 24 and 16 × 16 pixels.

Figure 4. The standard toolbar icon sizes

Icon Color Depth Support

Windows XP supports 32-bit icons, which are 24-bit images with an 8-bit alpha channel. This allows icons to display with smooth edges that appear to blend into any background.

Each Windows XP icon should contain these three color depths to support different monitor display settings:

  • 24-bit with 8-bit alpha (32-bit)
  • 8-bit (256 colors) with 1-bit transparency
  • 4-bit (16 colors) with 1-bit transparency
Figure 5. 32-bit, 8-bit, and 4-bit versions of the My Pictures icon

Color Palette


The following color table illustrates the primary colors used in Windows XP icons. These colors are provided in the first three rows of the mswinxp.pal palette file included with Microangelo.

Figure 6. Windows XP icon color palette

Angle and Grouping of Objects


This is the perspective grid that Windows XP style icons use:

Figure 7. Windows XP icon perspective
Not all objects work well at 16 × 16 at an angle. The following objects are usually shown in a straight-on manner:
  • Document icons
  • Icons that are symbols (such as warning or information icons)
  • Icons that are single objects (such as the magnifying glass)
Figure 8. Straight-on icon examples
(.Jpg Document, Search, and Favorites icons)
Create overlapping secondary objects at an angle unless it makes more sense, due to readability and integrity, that they are rendered straight on. Consider also how your icons may be viewed as a set to help determine how to group objects.

Figure 9. Overlapping examples
(Add or Remove Programs, Print Pictures, Recent Documents)

Drop Shadow


Windows XP icons use a drop shadow to provide definition and added dimension. This effect is easily added in Studio using the Tools -> Windows XP Effects menu. Select Drop Shadow to instantly create a drop shadow effect precisely to Microsoft's XP icon specifications.

Figure 10. Before and after a drop-shadow is added to an icon

Outlines


When illustrating XP-style icons, add an outline to the image to provide definition and ensure that the image works well on different background colors.
Previous Page Next Page