级别： ★☆☆☆☆
标签：「iPhone app 图标」「图标生成」「启动图生成」「QiAppIconGenerator」
作者： Xs·H
审校： QiShare团队
一个完整的app都需要多种尺寸的图标和启动图。一般情况，设计师根据开发者提供的一套规则，设计出图标和启动图供开发人员使用。但最近我利用业余时间做了个app，不希望耽误设计师较多时间，就只要了最大尺寸的图标和启动图各一个。本想着找一下现成的工具，批量生成需要的的图片，但最后没有找到，只好使用Photoshop切出了不同尺寸的图片。这期间，设计师还换过一次图标和启动图，我就重复了切图工作，这花费了我大量的时间。于是事后，作者开发了一个mac app——图标&启动图生成器（简称生成器）以提高工作效率。作者用两篇文章分别介绍生成器的使用和实现细节。
本篇文章介绍生成器的功能和使用方式。
一、 生成器功能介绍
- 根据原图一键生成整套规则的图片；
- 支持选择所需要的平台规则；
- 支持选择/输入图片导出路径；
- 自动打开导出的图片文件夹。
二、 生成器支持的平台
截止本篇文章发布，生成器v0.3版本共支持12套平台规则。
- iPhone AppIcons（iPhone app 图标规则）
- iPhone LaunchImages Portrait（iPhone app 竖屏启动图规则）
- iPhone LaunchImages Landscape（iPhone app 横屏启动图规则）
- iPad AppIcons（iPad app 图标规则）
- iPad LaunchImages Portrait（iPad app 竖屏启动图规则）
- iPad LaunchImages Landscape（iPad app 横屏启动图规则）
- Mac AppIcons（Mac app 图标规则）
- Watch AppIcons（Apple Watch app 图标规则）
- CarPlay AppIcons（CarPlay app 图标规则）
- Android AppIcons（Android app 常用图标规则）
- Android LaunchImages Portrait（Android app 常用竖屏启动图规则）
- Android LaunchImages Landscape（Android app 常用横屏启动图规则）
三、 生成器界面介绍
在了解了生成器的基础功能后，来看看生成器的界面。如下图。
生成器的界面比较简洁，控件元素按照从上到下、从左到右的顺序分别为：
- 图片框（承载源图片）
- 平台选择器（供选择平台规则）
- 路径按钮（供选择图片导出路径）
- 路径文本框（显示选择的路径，支持直接输入路径）
- 导出按钮（在目标路径中生成符合所选定的平台规则的图片，并打开路径文件夹）
四、 生成器使用步骤
生成器的使用步骤非常简单，这里以此生成器app的图标生成过程为例进行介绍。
1. 准备源图片
此生成器是一个mac app，需要10种尺寸的图标，如下图。
其中，所需要的最大图标的尺寸为1024*1024。作者需要准备好这张最大尺寸的图片，并拖拽到图片框中作为源图片。
2. 选择平台规则
作者需要生成符合mac app图标规则的所有图标图片，所以这里选择Mac AppIcons。
3. 选择导出路径
这时，点击导出按钮已经能够将源图片切成所需要的一套图片了。但在这之前，选择一个合适的图片导出路径，会便于作者管理生成的图片。另外，对文件路径规则比较熟悉的同学可以直接输入路径。
4. 导出图片
点击导出按钮可以在目标路径中生成符合所选定平台规则的图片，并打开这些图片所在的文件夹以供使用。
按照以上4步，可以快速得到所需要的符合各种平台规则图标和启动图。下面是一个使用过程的动画，供同学们参考。
五、 获取app资源
设计师同学可以 点击这里 获取dmg资源；
开发者同学可以从 QiShare的Github中 获取工程代码。
小编微信：可加并拉入《QiShare技术交流群》。
关注我们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)
推荐文章：
算法小专栏：“D&C思想”与“快速排序”
算法小专栏：递归与尾递归
关于iOS 状态栏、导航栏的几处笔记
iOS 避免常见崩溃（二）
算法小专栏：选择排序
iOS Runloop（一）
奇舞周刊
网友评论