Creating a personalized XP icon_XP system basics

Creating a personalized XP icon

  
Microsoft Windows XP introduces a new icon design style. In the following article, we'll discuss the specific steps for designing and creating Windows XP style icons.

Windows XP icons are fun, colorful, and vibrant because they are 32-bit icons with very smooth edges. In general, we can draw each icon in the vector program and then use Adobe Photoshop to make the image more perfect.

Basic Process:

1. Use FreeHand or Illustrator
to draw a vector image of the icon.

2 Copy the vector and import it into Photoshop for further processing.

3. Create a .ico file with Gif MovIE Gear.

Figure 1: Icon example
First, the purpose of icon design overview


of this section is to familiarize you with the new Windows XP style icons do is create ready.

icon style properties


rich colors, complements the appearance of Windows XP.

Different angles and perspectives add dynamic energy to the image.

The corners of the elements are very soft and slightly rounded.

The light source is located in the upper left corner of the icon, and there are other parts of the icon that surround the light.

The gradient effect gives the icon a three-dimensional effect, which in turn makes the icon look fuller.

Projection makes the icon more contrast and three-dimensional.

Adding outlines makes the image sharper.

Daily objects such as computers and devices have a more modern personal look.




Windows icon size icon four dimensions: 48 × 48,32 × 32,24 × 24 and 16 × 16 pixels, is recommended the use of these standard sizes.
Figure 2: Regular Icon Size
The icon to the right of the Start menu is displayed as 24 × 24 pixels. This size does not need to be provided by the user.

Figure 3: "Start" menu in the 24 × 24 pixels in size
for toolbar icons are created, Windows standard size is 24 × 24 and 16 × 16 pixels.

Figure 4: Standard toolbar icon size

icon color depth support


Windows XP supports 32-bit icons. The 32-bit icon is a 24-bit image plus an 8-bit alpha channel. Make the icon edges very smooth and blend with the background.

Each Windows XP icon should contain the following three color depths to support different display settings:

24-bit image plus 8-bit alpha channel (32-bit)
< BR> 8-bit image (256 colors), together with a transparent color

. 4-bit image (16 colors), together with a transparent color

FIG 5:32, 8 and four of the "pictures" icon
palette


the following are the main colors used in the color of the icon:

Figure 6: Windows XP icon to call Swatches
angle of the object and the packet


following Windows XP is a perspective grid style icon used:

FIG. 7: Windows XP icon perspective

Not all objects get better results with 16 × 16 images. The following objects are usually displayed in frontal visual images:



Document Icons

Symbol Icons (such as Warning or Information Icons)

Single object icon (eg magnifying glass)
Figure 8: Intuitive icon example (.Jpg document, search and favorites icon)

Readability unless the overlapping helper object is used to more clearly express the meaning of the icon In terms of integrity, intuitive images should still be used. You should also consider how to view icons by group to determine how to group objects.
Figure 9: Overlapping examples (Add or Remove Programs, and print pictures Recent Documents)

projection


after using the projector, Windows XP icons will be more clear and more Three-dimensional. This effect can be achieved in Photoshop.

To add a projection to an image, double-click the layer of the image in Photoshop and select Drop Shadow. Then change Angle to 135, Distance to 2, and Size to 2. The projection is now 75% opaque black.

Figure 10: Adding longitudinal projection

icon is drawn contour


XP style icon, make it clearer to outline image, the image can be guaranteed It has a good effect on different background colors.

Second, create an icon of concrete steps


Step 1: conceptual design

new icon, it is recommended to use pen and paper to draw out the basic ideas .

The following is an example of the first draft of the Windows XP "Picture Collection" icon:
Figure 11: "Picture Collection" icon draft

When designing the icon, please consider the following factors:

Use There are concepts to ensure that the user's ideas are truly expressed.

Consider how the icon appears in the user interface environment and how it is used as part of the icon set.

Consider the cultural background of graphics. Avoid using letters, words, hands or faces in your icons. When you must use icons to represent people or users, please make them as popular as possible.

If the image in the icon consists of multiple objects, consider how to make the image smaller. It is recommended that no more than three objects be used in the icon. For size sizes of 16 × 16, you can also consider deleting some objects or simplifying the image to make it easier to read.

Note: When using the Windows logo in the icon, please observe the following rules:

To comply with the trademark and Windows brand rules, do not use the Windows logo in the icon other than the Windows Update icon.

The Windows logo can only be used in icons provided by the Microsoft® Windows® operating system.

The Microsoft Branding Group should review the use of the Windows logo in the icon.

Utilities icon


Figure 12: Windows XP utility icon

Utilities toolbar icons


Figure 13: Public Toolbar Icons for Windows XP

Step 2: Drawing Images

To draw style icons for Microsoft Windows XP, we recommend using vector tools such as Macromedia FreeHand or Adobe Illustrator
. Use the palette and style features as specified in the icon design overview.

Use FreeHand or Illustrator
to draw an image.

Create three sizes of images separately. Since the projection will be added to the image later, the three dimensions created should be 46 × 46, 30 × 30, and 14 × 14 pixels.

Copy the vector and paste it into Photoshop.

Figure 14: Paste dialog

Note: Photoshop is recommended as an image creation tool because the Gif MovIE Gear used to create .ico files can be imported directly into Photoshop files. Images created in Photoshop in "RGB" mode have an alpha channel. If the image or layer has transparency, it makes sense to use the channel for the icon.



Step 3: Create a 24-bit image

After pasting the vector file into Photoshop, the next step is to complete the 24-bit image.

After pasting three sizes of images into Photoshop, check the readability and resolution of the image, especially for 16 × 16 images. It may be necessary to make a pixel shift. If a 16 × 16 image cannot be clearly displayed, the image of that size should be simplified in FreeHand.

To add a projection to an image, double-click on the layer of the image and select Drop Shadow. Then change Angle to 135, Distance to 2, and Size to 2. At this point, the projection is 75% opaque black.



Fig. 15: Setting the projection

To merge the projection and 24-bit image, create a new empty layer. In the Layers menu, select Merge Visible to merge the three layers together.

Figure 16: Merge Layer Retain Projection

Create three new Photoshop files, each with dimensions of 48 × 48, 32 × 32, and 16 × 16 pixels. Copy and paste the image. If the image projection is truncated, you should reduce the image size in FreeHand and then re-execute these steps.

Save each file as a .psd file. Do not merge image layers with background layers. It is best to include the size and color depth in the file name.

Step 4: