iOS 圖標&啓動圖生成器（一）

級別： ★☆☆☆☆
標籤：「iPhone app 圖標」「圖標生成」「啓動圖生成」「QiAppIconGenerator」
做者： Xs·H
審校： QiShare團隊

---

一個完整的app都須要多種尺寸的圖標和啓動圖。通常狀況，設計師根據開發者提供的一套規則，設計出圖標和啓動圖供開發人員使用。但最近我利用業餘時間作了個app，不但願耽誤設計師較多時間，就只要了最大尺寸的圖標和啓動圖各一個。本想着找一下現成的工具，批量生成須要的的圖片，但最後沒有找到，只好使用Photoshop切出了不一樣尺寸的圖片。這期間，設計師還換過一次圖標和啓動圖，我就重複了切圖工做，這花費了我大量的時間。因而過後，做者開發了一個mac app——圖標&啓動圖生成器（簡稱生成器）以提升工做效率。做者用兩篇文章分別介紹生成器的使用和實現細節。

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

1、 生成器功能介紹

1. 根據原圖一鍵生成整套規則的圖片；
2. 支持選擇所須要的平臺規則；
3. 支持選擇/輸入圖片導出路徑；
4. 自動打開導出的圖片文件夾。

2、 生成器支持的平臺

截止本篇文章發佈，生成器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 經常使用橫屏啓動圖規則）

3、 生成器界面介紹

在瞭解了生成器的基礎功能後，來看看生成器的界面。以下圖。

生成器的界面比較簡潔，控件元素按照從上到下、從左到右的順序分別爲：

1. 圖片框（承載源圖片）
2. 平臺選擇器（供選擇平臺規則）
3. 路徑按鈕（供選擇圖片導出路徑）
4. 路徑文本框（顯示選擇的路徑，支持直接輸入路徑）
5. 導出按鈕（在目標路徑中生成符合所選定的平臺規則的圖片，並打開路徑文件夾）

4、 生成器使用步驟

生成器的使用步驟很是簡單，這裏以今生成器app的圖標生成過程爲例進行介紹。

1. 準備源圖片

今生成器是一個mac app，須要10種尺寸的圖標，以下圖。

其中，所須要的最大圖標的尺寸爲1024*1024。做者須要準備好這張最大尺寸的圖片，並拖拽到圖片框中做爲源圖片。

2. 選擇平臺規則

做者須要生成符合mac app圖標規則的全部圖標圖片，因此這裏選擇Mac AppIcons。

3. 選擇導出路徑

這時，點擊導出按鈕已經可以將源圖片切成所須要的一套圖片了。但在這以前，選擇一個合適的圖片導出路徑，會便於做者管理生成的圖片。另外，對文件路徑規則比較熟悉的同窗能夠直接輸入路徑。

4. 導出圖片

點擊導出按鈕能夠在目標路徑中生成符合所選定平臺規則的圖片，並打開這些圖片所在的文件夾以供使用。

按照以上4步，能夠快速獲得所須要的符合各類平臺規則圖標和啓動圖。下面是一個使用過程的動畫，供同窗們參考。

5、 獲取app資源

設計師同窗能夠 點擊這裏 獲取dmg資源； 開發者同窗能夠從 QiShare的Github中 獲取工程代碼。

---

小編微信：可加並拉入《QiShare技術交流羣》。

關注咱們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公衆號)

推薦文章：
算法小專欄：「D&C思想」與「快速排序」
算法小專欄：遞歸與尾遞歸
關於iOS 狀態欄、導航欄的幾處筆記
iOS 避免常見崩潰（二）
算法小專欄：選擇排序
iOS Runloop（一）
奇舞週刊