級別： ★☆☆☆☆
標籤：「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（一）
奇舞週刊