Microsoft Windows XP 引入了一种新的图标设计样式。在下面的文章中，我们将讨论设计和创建Windows XP 样式图标的具体步骤。

　　Windows XP 图标样式有趣、色彩丰富且充满活力，这是因为这些图标是32 位色的图标，边缘非常平滑。一般我们可以在矢量程序中绘制完每个图标后，再用 Adobe Photoshop 进行处理，使图像更加完美。

　　
图 1：图标示例

　　 一、图标设计概述

　　本节的目的是让您熟悉 Windows XP 的新样式，为创建图标做好准备。

　　
图 2：常规图标尺寸

　　“开始”菜单右侧的图标显示为 24 × 24 像素大小。该尺寸不需要由用户提供。

图 3：“开始”菜单中的 24 × 24 像素大小

　　对于正在创建的工具栏图标，Windows 标准尺寸为 24 × 24 和 16 × 16 像素。

图 4：标准工具栏图标尺寸

　　
图 5：32 位、8 位和 4 位的“图片收藏”图标

　　调色板

　　以下颜色是图标中使用的主要颜色：

图 6：Windows XP 图标调色板

　　对象的角度和分组

　　以下是 Windows XP 样式图标使用的透视网格：

图 7：Windows XP 图标透视

　　并不是所有对象使用 16 × 16 的图像都能获得较好效果。下面的对象通常以正面直观图像显示：

　　文档图标

　　符号图标（如警告或信息图标）

　　单一对象图标（如放大镜）

图 8：直观图标示例（.Jpg 文档、搜索和收藏夹图标）

　　除非创建重叠辅助对象可以更清楚地表达图标的含义，否则就可读性和完整性而言，还是应使用直观图像。还应考虑如何按组查看图标，以便确定如何将对象分组。

图 9：重叠示例（添加或删除程序、打印图片及最近的文档）

　　

图 10：为图标添加投影前后

　　
图 11：“图片收藏”图标初稿

　　设计图标时，请考虑以下因素：

　　使用已有概念以确保真实表达了用户的想法。
　　考虑图标在用户界面环境中以何种形式出现，以及如何作为图标集的一部分使用。
　　考虑图形的文化背景。避免在图标中使用字母、单词、手或脸。必须用图标表示人或用户时，请尽可能使其大众化。

　　如果图标中的图像由多个对象组成，应考虑如何使图像尺寸更小。建议在图标中使用的对象不超过三个。对于 16 × 16 的尺寸大小，还可考虑删除某些对象或简化图像使之更容易辨认。

　　
图 12：Windows XP 的公用图标

　　公用工具栏图标

图 13：Windows XP 的公用工具栏图标

　　步骤 2：绘制图像

　　若要绘制 Microsoft Windows XP 的样式图标，建议您使用矢量工具，如 Macromedia FreeHand 或 Adobe Illustrator。按图标设计概述中指定的操作使用调色板和样式特征。

　　使用 FreeHand 或 Illustrator 绘制图像。

　　分别创建三个尺寸的图像。因为稍后将为图像添加投影，所以创建的三个尺寸应为 46 × 46、30 × 30 及 14 × 14 像素。

　　复制矢量图，并将其粘贴到 Photoshop 中。

图 14：Paste（粘贴）对话框

　　注意：建议使用 Photoshop 作为图像创建工具，因为创建 .ico 文件所用的 Gif Movie Gear 可以直接导入 Photoshop 文件。在 Photoshop 中通过“RGB”模式创建的图像都具有 alpha通道。如果图像或图层具有透明度，对图标而言，使用通道将非常有意义。

　　
图 15：设置投影

　　若要合并投影和 24 位图像，请新建一个空层。在 Layers 菜单中，选择 Merge Visible 将三层合并在一起。

图 16：合并图层保留投影

　　新建三个 Photoshop 文件，每个文件的尺寸分别为 48 × 48、32 × 32 和 16 × 16 像素。复制并粘贴相应图像。如果图像投影被截断，应在FreeHand 中缩小图像尺寸，然后重新执行这些步骤。

　　将每个文件保存为 .psd 文件。不要将图像图层与背景图层合并在一起。最好在文件名中包含尺寸和色彩深度。

　　

图 17：清理 8 位色彩深度的图像

　　新建三个 Photoshop 文件，每个文件的尺寸分别为：48 × 48、32 × 32 和 16 × 16 像素。复制并粘贴相应图像。

　　接下来需将图像的索引颜色更改为 256 色。8 位图标可以具有自定义的调色板。 在 48 × 48 图像中，使用独特的颜色 — 图像中未曾使用的颜色填充背景。通常使用品红色 (R255 G0 B255)。

　　转至 Image->Mode->Indexed Color，然后选择 Flatten Layers。

　　在 Palette 下拉菜单中，选择 Custom。在 Custom 对话框中，单击 OK。在 Indexed Color

　　对话框中单击 OK。

　　将文件保存为 .psd 文件。

　　使用同样的背景色和自定义调色板保存另外两种尺寸的文件。

　　将每个文件保存为 .psd 文件。

　　创建 4 位图像

　　若要使图标在较低的显示环境中具有较好的显示效果，请使用 16 色图标。

　　将 8 位图像的索引颜色改为 Windows 16 色调色板。

　　仅用 16 色调色板中的颜色清理图像。

　　在图像的底部和右侧边缘处使用黑色轮廓。

　　在图像的左侧和顶部边缘处使用深灰或其它深颜色。

　　使用同样的背景色保存三种尺寸。确保图像中未使用背景色，因为背景色将作为透明色。

图 18：4 位图标示例

　　
图 19：在 Gif Movie Gear 中设置 24 位图像

　　请确认设置如下所示：

　　图层为多帧动画
　　未混合：每层为一个帧
　　保持背景透明

　　每个24位图像的背景层都将显示为一个帧。选择帧，并按 Delete 键可删除这些空白帧。

　　现在，总共应有 9 个帧。图标应按颜色分辨率的递增顺序排序：前三个为 4 位（16 色），接下来的三个为 8 位（256 色），最后三个为 24 位颜色加上 8 位 alpha 通道（共 32 位）。

图 20：Gif Movie Gear 中帧的顺序

　　
图 21：使用透明工具

　　将打开一个对话框，其中显示您的图标。使用吸管工具单击图标的背景色。此颜色将更改为暗黄绿色（或在 GMG 中选作透明背景色的颜色）。

　　重复所有 4 位和 8 位帧。

　　若要保存图标，请选择 File->Save Ic width=120 border=1>

图 22：工具栏图标的方框示例

　　将每个图像按所需顺序置于方框中。确认图像间没有重叠。

图 23：将图标置于工具栏帧中

　　保存 Photoshop 文件。

　　接下来将在 Photoshop 中创建激活态图像。

　　复制 24 × 24 和 16 × 16 图层。重命名图层，将其标记为激活态版本。

　　对于每个激活态版本，选择图层并转至 Image->Adjust->Levels，然后将中间的箭头移到 0.75 处。单击 OK。

图 24：更改色阶创建“激活”态图像

　　创建激活态图像后，每个草图应有一个图层：分别是默认 24 × 24、激活 24 × 24、默认 16 × 16 以及激活 16 × 16。

　　接下来为每个草图单独创建文件。

　　一种方式是使用“裁切”工具将文件裁切到适合草图的尺寸，然后，保存该文件。对草图的度量必须从第一个方框的开始处直到最后一个方框的结尾处。

　　分别将每个草图保存为 24 位 .psd 文件。

图 25：Photoshop 中的 24 位工具栏草图

　　如果要将草图另存为 32 位图像，请将其拖动到 GMG 中。删除所有空白帧。转至 File->Export as->Filmstrip。在 Film Export 对话框中，确认已选中 BMP/DIB and 24-bit with Alpha。

　　 四、创建 AVI

　　Microsoft Windows XP 使用 8 位 AVI。创建 .avi 文件的过程与创建图标的过程相同 — 在 Photoshop 中准备图像，然后将其拖动到 GMG 中。请按以下指导创建8 位图标。

　　若要使用 GMG 保存 AVI，请转至 File->Export As->AVI file?。

　　创建 .avi 文件时，请考虑以下因素：

　　使用品红 (R255 G0 B255) 作为背景透明色。

　　在 Photoshop 中，重要的一点是不要出现杂散像素。请将填充能力设置为 0，并确认未选中取消锯齿。

欢迎您访问www.5ucms.org