资源的创建

界面原型已经设计完成了。不过离最后交付给开发人员开发还差一步：产品中使用的图片还没有准备好呢？

设计师除了产品原型还要交付哪些资源呢？开发者最关心的资源就是应用中会使用到的各种图标资源和配色方案。

在天气预报应用当中，我们已经确定好了界面的主要颜色，

现在就剩下各种图标了。这些图标包括了，

1. 系统图标：显示更多信息时使用到的，

   

2. 天气图标：包括使用到的小图标，

   

   使用到的大图标，

   

3. 应用图标：应用的主图标，放在启动界面使用的图标，

   

图标的尺寸

不同使用场景的图标，尺寸是不同，前面的章节中我们已经讲述了系统图标 应用图标的标准尺寸。

根据屏幕像素密度的不同，需要设计对应大小的图标。这样一来，就能够确保在特定类型的密度屏幕上，图标能够显示的清晰。

安卓使用dpi为160的数值作为一个基准－－baseline。

为了达到最优秀的显示效果，我们最理想的情况下是为每个不同的屏幕类型设计对应的图标。不过实际情况中却并不一定需要对应每个尺寸，因为

1. 如果涉及的图标很多，各种类型的图标都做全部的配套设计一定会增加应用的体积；

2. 假如缺少某个屏幕类型（例如mdpi）的图标a时，系统会去寻找a对应的高分辨率图标A，把A转化成合适的尺寸（a与A都是同一个图标的不同尺寸版本，a尺寸小，A尺寸大）。这里唯一的代价是：在使用图标时，系统需要自动做额外的尺寸转化；

系统图标

系统图标的大小是24dp*24dp，对于mdpi的屏幕，我们就需要截取24px*24px大小的图标。

Sketch导出

如果使用Sketch开发出了静态原型，那么从里面抓取系统图标就非常的方便了，

1. 点击工具栏上的insert -> S（或者按快捷键S），

   

2. 用小刀在要截取图标的位置切片，并将切出的片子，重新命名成ic_wind_level,

   

   可以看到右上方的尺寸栏显示的是24/*24的大小，设置区域下方的截取效果图也呈现了出来。

接下来就是导出图片了，

1. 选中ic_wind_level，点击Export旁的按钮，以此添加1x 2x 3x 1.5x 4x，给要导出的图片设置导出后的放大倍率。1x表示1:1导出，2x表示放大2倍导出，

   

   导出的格式都设置成PNG格式的图片。这种图片是安卓系统标准支持的图片格式，能够携带透明的信息。

2. 不要勾选背景颜色，让整个图片除了图案以外，都呈透明的状态；选择Export ic_wind_level，

   

导出结果如下，

其他图标的导出和产生这个图标的方式类似。

第三方工具导出

如果不使用Sketch也可以通过其他工具生成图标。例如Android Studio Asset的Generic icons功能。

1. 通过IMAGE方式，将事先准备好的风力.svg矢量图，加载到工具当中；
2. Size选择20dp，Padding选择2dp，这样最后的图标就是24pd*24dp的了；
3. Color选择成黑色，透明度为54%；
4. 点击DOWNLOAD .ZIP;

下载解压后，得到了对应的图标资源，

其他图标的产生和产生这个图标的方式类似。

天气图标

天气图标的导出与系统图标的导出几乎完全一样，只是尺寸和颜色稍有不同。

在导出的时候要注意天气图标有两种不同的大小，一种使用到Weather details上面，显示大的天气图标；另一种使用到forcast当中，显示小的天气图标。

两种图标都可以通过Sketch切图得到，也可以通过Android Asset Studio来生成。

应用图标

应用图标也可以通过Sketch创建，不过我这里就简化了这方面的设计，直接使用Android Asset Studio的Launcher icons，创建应用图标，

1. 通过IMAGE方式，将事先准备好的应用启动图标.svg矢量图，加载到工具当中；
2. Padding选择45%，调整到合适的比例就行；
3. Color选择成白色，透明度为100%；
4. Shape选择成SQUARE正方形；
5. Background选择成Primary Color-#3F51B5
6. 点击DOWNLOAD .ZIP;

下载解压后，得到了对应的图标资源，

至此，图片资源的导出就完成了。