BS Icon Maker

Tutorial » Create a Windows® XP Icon

Note: This article is based on a Windows® XP technical article named "Creating Windows® XP Icons", Click here to read the original article.

» Introduction
» Icon Style Characteristics
» Icon Color and Size
» Drop Shadow

Introduction

Microsoft® Windows® XP introduces a new style in icon design. The following guidelines walk you through the steps of designing and creating Windows XP-style icons.

win xp icon samples

Figure 1. Windows XP icon samples

The Windows XP icon style is all about fun, color, and energy—and, as there are now 32-bit versions of the icons, smooth edges.

These guidelines are geared towards designers. We recommend you work with a good graphic designer to create your images.

Windows® XP Icon Style Characteristics

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

Windows® XP Icon Color and Size

There are four sizes of Windows® XP icons—48 × 48, 32 × 32, 24 × 24, and 16 × 16 pixels. Windows® XP recommends that your icon contains these three sizes:

48 × 48 pixels
32 × 32 pixels
16 × 16 pixels

Figure 2. General icon sizes

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 3. 32-bit, 8-bit, and 4-bit versions of the My Pictures icon

These are the primary colors that are used in Windows® XP icons:

Figure 4. Windows XP icon color palette

Drop Shadow

Windows XP icons use a drop shadow to provide definition and added dimension. Adding a drop shadow effect is very simple using BS Icon Maker: once the icon is created, just simply choose Effect/Shadow.