Hundreds of XP style icons that come with professional design for use in your applications. Each icon is available in four different sizes that includes 16x16, 24x24, 32x32, and 48x48. Each icon has been provided in two different color depths and three formats that include ICO, PNG, and GIF. Main features: professionally designed using Microsoft XP style icon creation guidelines. Hundreds of icons classified in to categories like navigation, Web, network, e-commerce, e-mail, and icon concepts. And also comes in different formats and color depths.
Windows User Experience Team Microsoft Corporation July 2001 Summary: This article discusses how to design and create colorful and dynamic icons for Windows XP using a vector program, such as FreeHand or Illustrator, and Photoshop. (19 printed pages) Contents 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. 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. Each icon is rendered in a vector program and then manipulated in Adobe Photoshop to create a beautiful image. These guidelines are geared towards designers. We recommend you work with a good graphic designer, especially one with experience in using vector or 3D programs, to create your images.
From Icongalore: Hundreds of XP style icons that come with professional design for use in your applications. Each icon is available in four different sizes that includes 16x16, 24x24, 32x32, and 48x48. Each icon has been provided in two different color depths and three formats that include ICO, PNG, and GIF. Hundrends of high quality XP Style Icons for use on websites and software applications. Available in many sizes and formats for different industries including hotel and travel, telecom, entertainment, medicine, education, banking and more.
Icon samples Icon Design Overview This section will familiarize you with the new Windows XP style in preparation for creating your icons. 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. Icon Sizes There are four sizes of Windows icons—48 × 48, 32 × 32, 24 × 24, and 16 × 16 pixels. We recommend that your icon contains these three sizes: • 48 × 48 pixels • 32 × 32 pixels • 16 × 16 pixels Figure 2. Phone Screenlock here.
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.
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. 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 These are the primary colors that are used in our icons: 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. Spywaredoctor there. 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. 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 added in Photoshop and is in these guidelines.
To add the drop shadow to your images, double-click on the image's layer in Photoshop and select Drop Shadow. Then change Angle to 135, Distance to 2, and Size to 2. The drop shadow is black at 75% opacity. 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. Step 1: Conceptualize When designing new icons, we recommend grabbing pen and paper and sketching your ideas out.
Here's an example of an initial sketch for the Windows XP My Pictures icon: Figure 11. Sketch of My Pictures icon Considerations when designing icons: • Use established concepts where possible to ensure consistency of meanings for the user.
• Consider how the icon will appear in the context of your user interface and how it might work as part of a set of icons. • Consider the cultural impact of your graphics.
Avoid using letters, words, hands, or faces in icons. When you must represent people or users, depict them as generically as possible. • If combining multiple objects into one image in an icon, consider how the image will scale to smaller sizes. We suggest that you use no more than three objects in an icon. For the 16 × 16 size, you can also consider removing objects or simplifying the image to improve recognition.