Windows Phone 7 应用程序图标制作指南.doc

前言应用程序的图标主要用来表达应用程序的用途，传达应用程序的意念，也是博取使用者的好感的第一道门面。一个良好的应用程序图标不但要能够成功吸引使用的目光，还要能够成为应用程序的最佳销售员，成功的把应用程序营销给用户。有意开发 Windows Phone 7 应用程序的企业或个人除了要用心设计功能优良的应用程序以外，也要努力为应用程序制作一个吸引人的图标，打点好应用程序的门面。有意发展 Windows Phone 7 应用程序的程序设计师可以参考本文的步骤为所开发好的 Windows Phone 7 应用程序制作专用的图标，供 Microsoft 在线软件商店及软件目录使用。请注意 Windows Phone 7 应用程序的图标必须符合 Windows Phone 7 Application Certification Requirements 文件内容的规范，Windows Phone 7 应用程序的图标有两种规范，一种是针对 Windows Phone 7 应用程序本身使用的图标的规范，另外一种是提供给 Microsoft 在线软件商店使用的应用程序图标的规范。Windows Phone 7 应用程序图标的规范请参考表1 的说明：表1：Windows Phone 7 应用程序图标的规范XAP 封包中的图示宽 x 高 (单位：像素)文件类型应用程序图标62 x 62PNG显示在 Windows Phone 7 桌面的并排图示173 x 173PNG 提供给 Microsoft 在线软件商店使用的应用程序图标规范可以参考表2 的说明：表2：提供给 Microsoft 在线软件商店使用的应用程序图标规范图示宽 x 高 (单位：像素)文件类型提供给 Microsoft 在线软件商店型录使用的 Windows Phone 7 应用程序小型图标99 x 99PNG提供给 Microsoft 在线软件商店型录使用的 Windows Phone 7 应用程序大型图标173 x 173PNG提供给 Microsoft 在线软件商店型录使用的 Windows 应用程序图标200 x 200PNG 程序设计师可以使用 Microsoft Expression Ultimate 4.0 版提供的 Microsoft Expression Design 4.0 为所开发的 Windows Phone 7 应用程序设计图示，您可以视需要点选以下的连结到 Microsoft 网站购买 Expression Studio 4 Ultimate 或下载 Expression Studio 4 Ultimate 的试用版，以便设计应用程序专用的图标： 为 Windows Phone 7 应用程序设计图示了解 Windows Phone 7 应用程序需要的图标规格之后，接下来我们就要利用 Microsoft Expression Design 4.0 版进行设计应用程序图标的工作。首先请启动 Microsoft Expression Design 4.0，并执行编辑 | 选项 | 一般功能，设定 Expression Design 4.0 的基本编辑特性。请点选左方窗口中的 一般 项目，于 消除矩形锯齿 下拉选项中选择：平滑，表示要以平滑的处理技术消除矩形锯齿的现象。设定好的画面如图1 所示：图1： 设定消除矩形锯齿的画面完成设定后请按下 确定 键关闭设定基本编辑特性的画面。设定妥基本编辑特性之后，我们就可以利用 Expression Design 4.0 设计 Windows Phone 7 应用程序的图标了。要使用 Expression Design 4 制作 Windows Phone 7 应用程序的图标，请选择 档案 | 开新档案 功能，执行建立新图标档案的工作，屏幕上就会出现如图2的画面，要求输入欲建立的图标档案的相关信息：图2：要求输入欲建立的图标档案相关信息的画面请于 名称 字段输入图示档案的名称，于 宽度 字段输入：1024，于 高度 字段输入：1024，输入完毕后请按下 确定 键，执行建立图示档案的动作。说明大小为 1024 x 1024 的图示档案超过我们需要的图示档案的实际大小，这是为了提供足够的图示设计空间所做的设定，我们所设计的图示的大小仍然必须符合表1 和表2 所列的图示规范。建立好图示档案之后，我们要为新建立的图示档案加入一个 矩形，做为图示的背景。请使用鼠标的左键点中 工具箱 窗口中的矩形图标，再从出现的菜单选择 矩形 功能，如图3 所示：图3：选择工具箱中的 矩形 功能的画面选妥 矩形 功能之后，请在编辑画面中画出一个矩形，大小不拘，画好之后请使用鼠标的左键点选画面右方的 属性 窗口中的色彩面板，为所绘制的矩形选择背景色彩。您可以先点选如图4 所示的色彩列，挑选背景色彩的色系：图4：色彩列再点选色彩列左方的色彩当做矩形的背景色彩，例如图5 所示即为选择绿色色调做为矩形的背景色彩的画面：图5：选择背景色彩的画面选妥背景色彩的矩形的画面如图6 所示：图6：选妥背景色彩的矩形的画面设定好矩形的背景色彩之后，接下来我们要调整矩形的大小，令其填满整个图示档案的大小。请按下键盘的 V 键切换至选取模式，再点选画面中的矩形。提示您也可以使用鼠标的左键点中左方 工具箱 窗口最上缘的键，切换至选取模式，再点选画面中的矩形亦可。选妥所绘制的矩形之后，您就可以利用 Expression Design 4.0 编辑窗口下方的设定列设定矩形的大小。图7 所示即为可以用来设定对象大小的 设定列：图7：可以用来设定对象大小的 设定列首先请点选 设定列 中的 取消连结宽度和高度滑杆 按钮 (图标为：)，让矩形的高度和宽度可以独立设定，不会为了维持一定的高宽比例而产生连动，然后将矩形的高度和宽度都设定成 1024，使其填满全部的编辑空间。要诀您可以利用编辑画面左下角的比例设定下拉选项 (图标为：)，调整编辑画面的显示比例，方便进行编辑的工作。设定妥矩形的大小之后请使用鼠标左键连按 Expression Design 4.0 右下方的 图层 窗口中名称为 图层1 的图层两下，将图层的名称更名为：Base Layer，然后点选图层右方的 切换锁定 钮 (图示为)，将编辑妥的图层锁定，防止被不慎修改，同时也可以避免图层的内容变成应用程序图标内容的一部分。图8 所示即为编辑好的 Base Layer 图层：图8：编辑好的 Base Layer 图层完成编辑 Base Layer 图层的工作之后，请使用鼠标的左键点选 图层 窗口左下角的 图层选项 按钮 (图标为)，从出现的菜单选择 新增图层 功能，为图标档案加入新的图层，并把新加入的图层命名成：Square Base。我们将要在名称为 Square Base 的图层上设计应用程序的图标。加入好新图层之后请于刚加入的图层的中央加入一个矩形，为矩形指定不同于背景色彩的色彩，再利用 设定列 将矩形的高度和宽度都设定为 600 像素。加好矩形后的编辑画面如图9 所示：图9：加好矩形后的编辑画面这个矩形就是设计应用程序图标的区域。首先请切换至选取状态，选择刚刚加入的矩形之后，再将右方的 属性 窗口中的 不透明度 字段的内容值设定为 0，将矩形设定成完全透明。接下来我们就要进行设计图示的工作了。首先请利用 图层 窗口再加入一个名称为 Windows Phone Icon 的图层，您可以在这个图层上绘制任意的图案，当做应用程序图标，或是视需要加入其他的图层，以便设计出想要的图示外观。特别注意在设计图示内容之前请特别注意先使用鼠标的左键点选 图层 窗口中名称为 Windows Phone Icon 的图层，确保所绘制的图示内容会出现在正确的图层上。请注意 图层 窗口中被点选的图层会有一圈淡蓝色的外框，做为识别之用，例如图10 所示的 图层 窗口中，Windows Phone Icon 就是目前被选中的图层：图10：除了要确定图示内容必须绘制在正确的图层以外，您还必须将图示的内容画在名称为 Square Base 的图层上的矩形的正中央。您可以在完成绘制应用程序图标的工作之后，使用鼠标的左键点选 图层 窗口中名称为 Square Base 的图层右方的三角箭头图示，展开图层的内容再选择其中的矩形，如图11 所示：图11：选择 Square Base 图层中的矩形点选 Square Base 图层中的矩形之后，您就可以在 Expression Design 4.0 的编辑画面中看到矩形的外框，请使用键盘上的箭头键移动矩形，直到图示的内容位于矩形的正中央。请注意我们要移动的是矩形，而不是图示的内容。图12 所示即为绘制妥的应用程序图标，其四周围的黑色边线即为 Square Base 图层中的矩形，图示的内容恰好在矩形的正中央。图12：绘制妥的应用程序图标完成设计应用程序图标的工作之后，我们必须使用 Expression Design 4.0 提供的 切片 功能将绘制妥的图示储存成符合 Windows Phone 7 应用程序图标规范以及 Microsoft 在线软件商店图示规范的图文件大小与图档类型。透过 切片 功能的帮助，我们可以将图示的某部分内容存成档案，并指定汇出的档案类别，而不是只能够将图示所有的内容储存成档案。首先请使用鼠标圈选欲储存成档案的图示内容，请注意您可以圈选部分图示内容，也可以圈选全部的图示内容，图13 所示即为圈选全部的图示内容的画面：图13：圈选全部的图示内容的画面完成圈选欲储存成档案的图示内容之后，请执行 对象 | 从选取建立切片 功能，或是直接按下 Ctrl+Shift+K 组合键，被圈选的内容上方就会罩上一层半透明的屏蔽，如图14 所示：图14：建立妥切片的图示画面完成图示切片之后，您可以在 图层 窗口中看到一个名称为 切片图层 的新图层，展开这个图层，可以看到一个名称为 切片1.png 的档案，如图15 所示：图15：检视切片图层内容的画面请使用鼠标的左键连按 图层 窗口中名称为 切片1.png 的档案两下，将文件名更名成：Marketplace_Desktop_200x200.png，并透过 属性 窗口显示的编辑切片属性的 高度 和 宽度 字段将所建立的切片的高度和宽度皆设定为 200px，如图16 所示：图16：设定切片属性的画面做好之后您就已经拥有大小为 200x200 像素，文件类型为 PNG，可以提供给 Marketplace 软件商店使用的桌上型应用程序的图标了。建立好第一个切片之后，请使用鼠标的左键点选 图层 窗口中名称为 切片图层 的图层右方的 切换可见度 按钮 (图标为)，将 切片图层 暂时隐藏起来，避免后续继续建立切片时选择到现有的切片的内容。请依据表3 的图标名称和图标大小将绘制妥的图示内容另外切割成四张不同的切片，做为 Windows Phone 7 应用程序的图标：表3：Windows Phone 7 应用程序需要的图标名称和规格范切片名称切片大小Marketplace_Device_173x173.png173 x 173Marketplace_Device_99x99.png99 x 99Application_TileImage_173x173.png173 x 173Application_IconImage_62x62.png62 x 62 注意每一次完成切片的动作之后，切片图层 会自动解除隐藏的状态，回复到可见的状态，您必须自行将 切片图层 再度隐藏，再切割下一张切片，以免选取到现有的切片的内容。切割妥应用程序需要的图标后，您可以从 图层 窗口看到一共五个切片档案，如图17 所示：图17：切割妥应用程序需要的图标后的图层窗口的内容切割好 Windows Phone 7 应用程序需要的所有图标之后，接下来我们就要将切片的成果导出成 PNG 类型的图示档案。您可以执行 档案 | 导出 功能，Expression Design 4.0 就会以预览的方式显示所有的切片内容供您检视，如图18 所示：图18：汇出并预览切片内容的画面您可以利用 浏览 键浏览到储存图示档案的文件夹，再按下 全部汇出 键，就能够将所有的切片档案成功地导出成图示档案，供 Windows Phone 7 应用程序本身和 Marketplace 软件商店使用。准备好 Windows Phone 7 应用程序专用的图标之后，您可以启动 Visual Studio 2010 Express for Window Phone 或 Expression Blend for Windows Phone Beta，开启 Window Phone 7 应用程序项目，然后执行 Project | Add Existing Item 功能，浏览并选择到利用 Expression Design 4.0 建立的图示档案，将以下两个图示档案加入到项目的根目录中：Application_IconImage_62x62.pngApplication_TileImage_173x173.png将上述两个图示档案加入到 Windows Phone 7 应用程序项目之后，请使用鼠标分别点选 Solution Explorer 窗口中的刚刚加入的两个图示档案，再到 属性 窗口将图标档案的 Build Action 属性的内容值设定成：Content，将 Copy to Output Directory 属性的内容值设定成：Copy if newer，设定好图标文件属性的属性窗口如图19 所示：图19：设定好图标文件属性的属性窗口设定好图标档案的属性之后，请使用鼠标的右键点中 Solu