iOS 图标&启动图生成器（一）

级别： ★☆☆☆☆
标签：「iPhone app 图标」「图标生成」「启动图生成」「QiAppIconGenerator」
作者： Xs·H
审校： QiShare团队

---

一个完整的app都需要多种尺寸的图标和启动图。一般情况，设计师根据开发者提供的一套规则，设计出图标和启动图供开发人员使用。但最近我利用业余时间做了个app，不希望耽误设计师较多时间，就只要了最大尺寸的图标和启动图各一个。本想着找一下现成的工具，批量生成需要的的图片，但最后没有找到，只好使用Photoshop切出了不同尺寸的图片。这期间，设计师还换过一次图标和启动图，我就重复了切图工作，这花费了我大量的时间。于是事后，作者开发了一个mac app——图标&启动图生成器（简称生成器）以提高工作效率。作者用两篇文章分别介绍生成器的使用和实现细节。

本篇文章介绍生成器的功能和使用方式。

一、 生成器功能介绍

1. 根据原图一键生成整套规则的图片；
2. 支持选择所需要的平台规则；
3. 支持选择/输入图片导出路径；
4. 自动打开导出的图片文件夹。

二、 生成器支持的平台

截止本篇文章发布，生成器v0.3版本共支持12套平台规则。

1. iPhone AppIcons（iPhone app 图标规则）
2. iPhone LaunchImages Portrait（iPhone app 竖屏启动图规则）
3. iPhone LaunchImages Landscape（iPhone app 横屏启动图规则）
4. iPad AppIcons（iPad app 图标规则）
5. iPad LaunchImages Portrait（iPad app 竖屏启动图规则）
6. iPad LaunchImages Landscape（iPad app 横屏启动图规则）
7. Mac AppIcons（Mac app 图标规则）
8. Watch AppIcons（Apple Watch app 图标规则）
9. CarPlay AppIcons（CarPlay app 图标规则）
10. Android AppIcons（Android app 常用图标规则）
11. Android LaunchImages Portrait（Android app 常用竖屏启动图规则）
12. Android LaunchImages Landscape（Android app 常用横屏启动图规则）

三、 生成器界面介绍

在了解了生成器的基础功能后，来看看生成器的界面。如下图。

生成器的界面比较简洁，控件元素按照从上到下、从左到右的顺序分别为：

1. 图片框（承载源图片）
2. 平台选择器（供选择平台规则）
3. 路径按钮（供选择图片导出路径）
4. 路径文本框（显示选择的路径，支持直接输入路径）
5. 导出按钮（在目标路径中生成符合所选定的平台规则的图片，并打开路径文件夹）

四、 生成器使用步骤

生成器的使用步骤非常简单，这里以此生成器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（一）
奇舞周刊

转载于:https://juejin.im/post/5cb4555af265da038145cc4a