Familiarize Yourself With These Basic Concepts in Icon Designing
Windows XP icons are designed to blend seamlessly with the dynamic look and energetic feel of the operating system's interface. In order to achieve the correct tone, color composition, and dimensionality required of XP icons, designers must take into account a number of standard features and graphic elements. XP icons are not flat, one dimensional images but rather make use of bright colors, specific angles and perspectives, rounded corners and edges, and drop shadows to make the icons "pop" on the screen. Other things to remember when conceptualizing a set of XP icons include:
- the use of established concepts to represent functions
- avoiding the use of letters, words, or faces
- employing groupings of no more than 3 objects
- featuring light sources from the upper left
- using additional ambient light for emphasis
- applying gradients
- making use of outlines
- striving for an overall a modern "consumer" look
Getting Started
Typically icon designers will start with a large scale version of their concept in an external vector or bitmap drawing program that supports Alpha Channel or 32 BBP Smooth Transparency. Such programs include:
- Macromedia® Freehand®
- Adobe® Photoshop®
- Jasc® Paint Shop Pro®
The recommended creation tool is Photoshop because images created in the program's "RGB" mode have an attached alpha channel.
Sizes and Color Depth
The standard XP icon sizes are:
The XP system supports 24-bit images with an 8-bit alpha channel. This new Alpha Channel, also known as 32 BBP Smooth Transparency, allows for the creation of beautifully crisp, smooth edges.
Designers should also include icons that are 8-bit (256) colors with 1-bit transparency as well as 4-bit (16 colors) with 1-bit transparency.
Color Palette
The Windows XP color palette includes the following RGB codes:
R153 G102 B0
R204 B153 B0
R255 G204 B0
R255 G255 B0
R255 G255 B153
R255 G219 B157
R255 G204 B102
R255 G153 B51
R255 G121 B75
R255 G51 B0
R153 G0 B0
R51 G51 B102
R0 G51 B153
R0 G102 B204
R0 G131 B215
R0 G153 B255
R62 G154 B222
R153 G204 B255
R180 G226 B255
R222 G255 B255
R255 G204 B255
R204 6204 B255
R153 G153 B255
R102 F102 B204
R153 G153 B204
R102 G102 B153
R0 G102 B0
R0 G153 B0
R102 G204 B51
R153 G255 B102
R204 G255 B204
Angles and Perspective
Although some icons are shown angled to the right those for documents and those that use single objects or symbols tend to be oriented straight on. It is common for overlapping secondary objects in an icon to be angled.
Drop Shadows and Outlines
Both drop shadows and outlines are used with XP icons to add dimensionality and definition. Toolbar icons do not employ a drop shadow and are normally sized as either 24 x 24 or 16 x 16 with a straight on orientation.
A Review of the Process
While every artist employs their own system of work flow, you should begin by sketching out your primary ideas for an icon and its family of associated icons. Concentrate on creating a congruity of ideas, angles, and colors across the icon set.
Use a vector tool such as Macromedia Freehand or Adobe Illustrator to draw your basic image.
When you are satisfied with your image, you are ready to copy and paste it into Photoshop.
Open Photoshop and begin with a canvas equal to the size of the icon you are creating, for instance 48 x 48.
Copy the image from your drawing program and paste it into Photoshop where it will produce a new layer.
Turn off the visibility of your background layer.
Add the drop shadow to your image by double clicking the image's layer and selecting Drop Shadow.
Your settings should be:
Blend Mode: Multiply
Opacity: 75%
Angle: 135 degrees
Distance: 2
Spread: 0
Size: 2
Create a new blank layer and then merge the visible layers.
Save your file as a PSD.
Follow this same set of steps for each of the required sizes for your icon. (Generally 48 x 48, 32 x 32, and 16 x 16.)
Return to your vector program to adjust your drawing as necessary if the icon's drop shadows are cropped as the image decreases in size.
When you have your initial images you will need to convert the color depth (Indexed Color, Flatten Layers) for each one so that it may be used with lower resolution displays. Create both 8-bit (256 color) and 4-bit (16 color) versions of the icons in each size and give them names you will recognize. Since these icons will not have the alpha channel, merge the images against a dark colored background (something the icon itself does not use) and clean up the edges as required.
When you are finished you should have
nine files.
Creating the ICO File
Although there are many tools for the creation of .ico files, for the purposes of this discussion we will refer to Gif Movie Gear (GMG) by Gamani.
Open the GMG program and drag each of the nine files into the main window.
When you bring in your 24-bit images (or any .psd file with layers) GMG will prompt you with a dialog box.
The settings should match the following:
- Layers as multiple frames in animation
- No blending: each layer is a frame
- Keep background transparency
The background of the 24-bit images will appear as a blank frame. Select the blank frames and remove them with the Delete key.
For the 8-bit and 4-bit versions select a frame and click Pick Transparency Color (the eye-dropper) icon on the toolbar.
In the dialog box that opens click the background color of the icon.
Repeat for all 4-bit and 8-bit frames.
To save the icon file click File, Save As, Windows Icon.
Using Your XP Icons
Whether you choose to install your icon set on your computer as part of the navigational interface or to use your creations as part of the menu structure of a website, the distinctive XP "look" and "feel" will lend a polished quality to any environment. Windows XP, more than any other operating system, has maximized the potential of the icon as a graphical shorthand to enhance the operational quality of user interfaces. Unlike previous icon generations, XP icons have become part of the standard computer "language" and have influenced the design of countless software packages and Internet sites.
Related Articles
Everything You Wanted to Know About Icons and Icon Designing
Using Alpha Channel to Blend Image on a Background Smoothly
