Introduction
Microsoft® Windows® XP introduces a new icon design style. In the following guidelines, we will discuss the specific steps for designing and creating a Windows XP style icon.
Windows XP icon is interesting, colorful and full of vitality - this is because these icons are 32-bit icons and the edges are very smooth. After drawing each icon in the vector program, you can use Adobe Photoshop to make the image more perfect.
This guide is designed for designers. When you create an image, it is recommended that you work with high level graphic designers, especially graphic designers with rich vectors and 3D program.
Figure 1: icon example
Icon design overview
The purpose of this section is to make you familiar with the new style of Windows XP and prepare for creating icons.
Icon style characteristics
The color is rich and is supplemented to the look of Windows XP. Different angles and perspective characteristics add dynamic vitality to the image. The corner of the element is very soft and slightly smooth. The light source is located in the upper left corner of the icon, and there is a side of the object to illuminate the icon. The gradient effect makes the icon stereoscopic, which in turn makes the icon more full. Projection makes icons more contrast and three-dimensional. Adding a contour makes the image clearer. Daily objects (such as computers and equipment) have more modern personal appearance.
Icon size
The Windows icon has four dimensions - 48 × 48, 32 × 32, 24 × 24 and 16 × 16 pixels.
It is recommended to use the following three sizes:
48 × 48 pixels 32 × 32 pixels 16 × 16 pixels
Figure 2: Regular icon size
The icon on the right side of the "Start" menu is displayed as 24 × 24 pixel size. This dimension does not need to be provided by the user.
Figure 3: 24 × 24 pixel size in the "Start" menu
For toolbar icons that are being 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 8 ALPHA channels. The edges are very smooth and fused with the background.
Each Windows XP icon should contain the following three color depths to support different display settings:
24-bit images plus 8-bit Alpha channel (32-bit) 8-bit image (256 colors), plus 1-bit transparent color 4-bit image (16 colors), plus 1 transparent color
Figure 5:32, 8-bit and 4 "Picture Collection" icon
Palette
The following colors are the main colors used in the icon:
Figure 6: Windows XP icon palette
Object angle and packet
The following is a perspective grid for Windows XP style icons:
Figure 7: Windows XP Icon Perspective
Not all objects can achieve better results with 16 × 16 complex images. The following objects are usually displayed in an intuitive image:
Document icon symbol icon (such as warning or information icon) single object icon (such as magnifying glass)
Figure 8: Delphant icon example (.jpg document, search and favorites icon)
Unless you create overlapping assist objects, you should use intuitive images in terms of readability and integrity. Also consider how to view icons in groups to determine how to group objects.
Figure 9: Overlapping example (add or delete programs, print pictures, and recent documents)
projection
After using projection, the Windows XP icon will be clearer and more stereoscopic. This effect can be implemented in Photoshop, which will be described later in this guide.
To add a projection for an image, double-click the image of the image in Photoshop and select Drop Shadow. Then change Angle to 135, and Distance is changed to 2, and SIZE is changed to 2. At this time, it was projected to 75% opaque black. Figure 10: Before and after adding projection for icons
contour
When drawing an XP style icon, adding outlines to images makes it clearer, and ensures that images have better results on different background colors.
Step 1: Concept
When designing a new icon, it is recommended to draw the basic ideas with a paper pen.
The following is the first draft of the Windows XP "Photo Collection" icon:
Figure 11: "Picture Collection" icon first draft
When designing icons, consider the following factors:
Use the existing concept to ensure true expression of the user's ideas. Consider what forms in the user interface environment and how to use it as part of the icon set. Cultural background considering graphics. Avoid using letters, words, hands or faces in the icon. You must use the icon to represented a person or user, please use it as much as possible. If the image in the icon consists of multiple objects, it should be considered how to make the image size smaller. It is recommended that the objects used in the icon do not exceed three. For 16 × 16 size sizes, it is also possible to consider deleting certain objects or simplifying images making it easier to identify. Note: When using the Windows flag in the icon, please follow the following provisions:
In order to comply with the trademark and Windows brand rules, do not use the Windows flag in the icon in addition to the Update icon of Windows. The Windows logo can only be used in icons provided by the Microsoft® Windows® operating system. Microsoft brand groups should review the use of Windows logo in the icon.
Utility icon
Figure 12: Utility icon for Windows XP
Public toolbar icon
Figure 13: Utility toolbar icon for Windows XP
Step 2: Draw an image
To draw a style icon for Microsoft Windows XP, it is recommended that you use a vector tool such as Macromedia Freehand or Adobe Illustrator. Use the palette and style characteristics by the operation specified in the icon design overview.
Use freehand or illustrator to draw images. Create three dimensions of images. Since the projection will be added later, the three sizes created should be 46 × 46, 30 × 30 and 14 x 14 pixels. Copy vector and paste it into Photoshop. Figure 14: Paste dialog
Note: It is recommended to use Photoshop as an image creation tool because Gif Movie Gear used by Creating a .ico file can import Photoshop files directly. The images created by "RGB" mode in Photoshop have an Alpha channel. If the image or layer has transparency, the use channel will be very meaningful if the icon is used.
Step 3: Create a 24-bit image
After paste the vector file into Photoshop, the next step is to complete the 24-bit image.
After paste the three dimensions of images into Photoshop, check the readability and resolution of the image, especially 16 x 16-size images. Pixel can be required. If the 16 × 16 image cannot be clearly displayed, an image of the size should be simplified in Freehand. To add a projection for the image, double-click the image of the image and select Drop Shadow. Then change Angle to 135, and Distance is changed to 2, and SIZE is changed to 2. At this time, projections were 75% opaque black. Figure 15: Setting the projection To merge projections and 24-bit images, create a new empty layer. In the Layers menu, select Merge Visible to combine the three layers together. Figure 16: Merge layers Reserved Projection New Three Photoshop files, each file size is 48 × 48, 32 × 32 and 16 x 16 pixels, respectively. Copy and paste the corresponding image. If the image projection is truncated, the image size should be reduced in FreeHand and then re-execute these steps. Save each file as a .psd file. Do not combine the image layers with the background layer. It is best to include dimensions and color depths in the file name. Step 4: Create 8-bit and 4-digit images
Create 8-digit image
Since the 24-bit image has been completed (for synthesizing 32-bit icons), the next step is to create an 8-bit image. The 8-bit icon will be displayed at any color mode below 32 bits.
The 8-bit icon does not have 8 Alpha channels. Therefore, the edge cleaning should be performed on the 8-bit icon, otherwise there will be sawtooth.
In Photoshop, a 24-bit image layer is copied and the layer is renamed 8-bit image. The new empty layer is created and the layer is filled with dark (such as blue). The 8-bit image layer is combined with the new layer. Use a solid color cleaning edge to remove pixels that have been eliminated. A method for processing the edges is fixedly used in a certain approach, and the serration effect of the edge is fixed. Check the appearance effect of the image on a light (e.g., white) background. Figure 17: Clearing 8-bit color depth images New three Photoshop files, each file size is: 48 × 48, 32 × 32 and 16 x 16 pixels. Copy and paste the corresponding image. Next, you need to change the index color of the image to 256 colors. The 8-bit icon can have a custom palette.
In the 48 × 48 image, the color fill background that has not been used in the image is used in a unique color-image. Usually used red (R255 G0 B255). Go to Image-> Mode-> Indexed Color, then select Flatten Layers. In the Palette drop-down menu, select Custom. In the Custom dialog, click OK. Click OK in the Indexed Color dialog. Save the file as a .psd file. Use the same background color and custom palette to save the other two dimensions. Save each file as a .psd file.
Create 4 digits
To make the icon have a better display effect in a lower display environment, use a 16-color icon.
Change the index color of the 8-bit image to the Windows 16 color palette. Only the image is cleaned with the color of the 16-color palette. A black contour is used at the bottom of the image and the right side of the image. Dark gray or other deep colors are used at the left and top edges of the image. Save three dimensions using the same background colors. Make sure that the background color is not used in the image, because the background color will be used as transparent color. Figure 18: 4 bit icon
Step 5: Create a .ico file
All images are ready, you can compile them into a .ico file. To create a 32-bit icon, you need to use the GIF Movie Gear (GMG) tool. This tool is available at Gamani (English) website.
In the following steps, we will discuss the process of creating a typical .ico file (with three sizes and three color depths). There should be 9 documents - each color depth has three sizes: 48 × 48, 24-bit 32 × 32, 24-bit 16 × 16, 24 bits 48 × 48, 8 bits 32 × 32, 8 bits 16 × 16, 8 Bit 48 × 48, 4 bits 32 × 32, 4 bits 16 × 16, 4 bits open GIF MOVIE GEAR (GMG), dragging each image file into the window (or use file-> insert frames). Each image will become a frame. Drag 24-bit image (or a .psd file with layer) is dragged into the GMG, a dialog box will appear: Figure 19: Setting 24-bit images in GIF Movie Gear Please confirm that the settings are as follows:
The layer is a multi-frame animation without mixing: each layer holds a background transparent background layer of each 24-bit image will be displayed as a frame. Select the frame and press the DELETE button to delete these blank frames. Now there should be 9 frames. The icon should be sorted in the order of colors resolution: the top three are 4 digits (16 colors), the next three are 8 bits (256 colors), the last three are 24-bit colors plus 8 alpha channels (total 32-bit). Figure 20: Sequence of frames in GIF Movie Gear
Note: To check the properties of the image, move the mouse on the image. A toolpogram will be displayed in which resolution information of each image is included. The default settings include dimensions, transparency, and bit counts. able to pass
Edit->
Preferences->
Frame TIPS adds or deletes the displayed item.
For 8-bit and 4-digit images, the background should be transparent. GMG uses dark yellow to express "transparent" color. You can use the View-> Transparench AS menu item to set your own color (or still using the default background color). The selected color is only used to view the image effect and will not affect the image itself. To make 8 bits and 4 digits transparent:
Select a frame and click the PICK Transparency Color toolbar icon (straw). Figure 21: Using the Transparent Tool will open a dialog where your icon is displayed. Use the straw tool to click the background color of the icon. This color will be changed to dark yellow green (or selected as a color of a transparent background color) in GMG). Repeat all 4 bits and 8-bit frames. To save the icon, select File-> Save icon as ....
Create toolbar
Windows toolbar icon is not used outside the projection, the style used is the same as other icons. Since the toolbar icon is very small, it is recommended that you use a simple image. If you can clearly express the meaning of the icon in an intuitive manner, you don't have to use other complicated ways.
The Windows toolbar displays two icons: 24 × 24 and 16 × 16 pixels. Icon has two states - default and activation (mouse on the icon). For activation, we need to increase the saturation of the image slightly.
The creation process of the toolbar icon is in addition to the image is. BMP format, it is very similar to the creation of a non-toolbar icon - basically a row icon arranged in order.
After drawing the icons of various sizes in Freehand, copy them and paste them into Photoshop. The 24 × 24 image is placed on one layer, and the 16 × 16 image is placed on another layer. On each layer, draw a line in each dimension. One behavior 16 × 16 box, another line of 24 × 24 boxes. Figure 22: Square box examples of toolbar icons Put each image in a desired order. Confirm that there is no overlap between images. Figure 23: Place the icon in the toolbar file to save the Photoshop file. The active image will be created in Photoshop. Copy 24 × 24 and 16 × 16 layers. Rename the layer and mark it as an activation version. For each activation version, select the layer and go to Image-> Adjust-> levels, then move the middle arrow to 0.75. Click OK. Figure 24: Change the color order to create an "activation" image to create an active image, each sketch should have a layer: the default 24 × 24, activation 24 × 24, default 16 × 16, and activation 16 × 16. Next, create a file separately for each sketch.
One way is to use the "Cut" tool to cut the file to the size of the sketch, then save the file. The metrics of the sketch must be at the end of the first box until the end of the last box. Save each sketch as a 24-bit .psd file separately. Figure 25: 24-bit toolbar sketch in Photoshop If you want to save the sketch as a 32-bit image, drag it into the GMG. Delete all blank frames. Go to File-> Export as-> filmstrip. In the Film Export dialog box, confirm that BMP / DIB and 24-Bit with alpha have been selected.
Create AVI
Microsoft Windows XP uses 8-bit AVI. The process of creation .avi file is the same as the process of creating the icon - prepare the image in Photoshop and drag it into the GMG. Please create an 8-bit icon as follows.
To save AVI using GMG, go to file-> export as-> avi file?
When you create a .avi file, consider the following factors:
The use of red (R255 G0 B255) is used as a background transparent color. In Photoshop, it is important to have a pixel pixel. Set the fill capability to 0 and confirm unchecked tooth.
