前 言

一個(gè)完整的app都需要多種尺寸的圖標(biāo)和啟動(dòng)圖。一般情況下，設(shè)計(jì)師需要根據(jù)開發(fā)者提供的一套規(guī)則，設(shè)計(jì)出各種尺寸的圖標(biāo)和啟動(dòng)圖供開發(fā)人員使用。

但最近作者利用業(yè)余時(shí)間做了個(gè)app，因?yàn)椴幌Ｍ⒄`設(shè)計(jì)師較多時(shí)間，希望能自己來搞定各種尺寸的圖標(biāo)，就只跟設(shè)計(jì)師要了最大尺寸的圖標(biāo)和啟動(dòng)圖各一個(gè)。本想著找一下現(xiàn)成的工具，批量生成需要的的圖片，但最后沒有找到，只好自己使用Photoshop切出了不同尺寸的圖片。

這期間還換過一次圖標(biāo)和啟動(dòng)圖，作者就重復(fù)了切圖工作，這花費(fèi)了大量的時(shí)間。于是事后，作者開發(fā)了一個(gè)mac app——圖標(biāo)&啟動(dòng)圖生成器（簡稱生成器）以提高工作效率。作者用兩篇文章分別介紹生成器的使用和實(shí)現(xiàn)細(xì)節(jié)。

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

01 生成器功能介紹

根據(jù)原圖一鍵生成整套規(guī)則的圖片；

支持選擇所需要的平臺(tái)規(guī)則；

支持選擇/輸入圖片導(dǎo)出路徑；

自動(dòng)打開導(dǎo)出的圖片文件夾。

02 生成器支持的平臺(tái)

截止本篇文章發(fā)布，生成器v0.3版本共支持12套平臺(tái)規(guī)則。

• iPhone AppIcons（iPhone app 圖標(biāo)規(guī)則）

• iPhone LaunchImages Portrait（iPhone app 豎屏啟動(dòng)圖規(guī)則）

• iPhone LaunchImages Landscape（iPhone app 橫屏啟動(dòng)圖規(guī)則）

• iPad AppIcons（iPad app 圖標(biāo)規(guī)則）

• iPad LaunchImages Portrait（iPad app 豎屏啟動(dòng)圖規(guī)則）

• iPad LaunchImages Landscape（iPad app 橫屏啟動(dòng)圖規(guī)則）

• Mac AppIcons（Mac app 圖標(biāo)規(guī)則）

• Watch AppIcons（Apple Watch app 圖標(biāo)規(guī)則）

• CarPlay AppIcons（CarPlay app 圖標(biāo)規(guī)則）

• Android AppIcons（Android app 常用圖標(biāo)規(guī)則）

• Android LaunchImages Portrait（Android app 常用豎屏啟動(dòng)圖規(guī)則）

• Android LaunchImages Landscape（Android app 常用橫屏啟動(dòng)圖規(guī)則）

03 生成器界面介紹

在了解了生成器的基礎(chǔ)功能后，來看看生成器的界面。如下圖。

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

圖片框（承載源圖片）

平臺(tái)選擇器（供選擇平臺(tái)規(guī)則）

路徑按鈕（供選擇圖片導(dǎo)出路徑）

路徑文本框（顯示選擇的路徑，支持直接輸入路徑）

導(dǎo)出按鈕（在目標(biāo)路徑中生成符合所選定的平臺(tái)規(guī)則的圖片，并打開路徑文件夾）

04 生成器使用步驟

生成器的使用步驟非常簡單，這里以此生成器app的圖標(biāo)生成過程為例進(jìn)行介紹。

1、準(zhǔn)備源圖片

此生成器是一個(gè)mac app，需要10種尺寸的圖標(biāo)，如下圖。

其中，所需要的最大圖標(biāo)的尺寸為1024*1024。作者需要準(zhǔn)備好這張最大尺寸的圖片，并拖拽到圖片框中作為源圖片。

2 、選擇平臺(tái)規(guī)則

作者需要生成符合mac app圖標(biāo)規(guī)則的所有圖標(biāo)圖片，所以這里選擇Mac AppIcons。

3、選擇導(dǎo)出路徑

這時(shí)，點(diǎn)擊導(dǎo)出按鈕已經(jīng)能夠?qū)⒃磮D片切成所需要的一套圖片了。但在這之前，選擇一個(gè)合適的圖片導(dǎo)出路徑，會(huì)便于作者管理生成的圖片。另外，對(duì)文件路徑規(guī)則比較熟悉的同學(xué)可以直接輸入路徑。

4、導(dǎo)出圖片

點(diǎn)擊導(dǎo)出按鈕可以在目標(biāo)路徑中生成符合所選定平臺(tái)規(guī)則的圖片，并打開這些圖片所在的文件夾以供使用。

按照以上4步，可以快速得到所需要的符合各種平臺(tái)規(guī)則圖標(biāo)和啟動(dòng)圖。

05 獲取app資源

設(shè)計(jì)師同學(xué)可以獲取dmg資源：

https://www.jianshu.com/go-wild?ac=2&url=https%3A%2F%2Fapp-home.iot.360.cn%2Fdownload%2Fios_ipa%2Ficongenerator%2Ficongenerator.dmg

開發(fā)者同學(xué)可以從QiShare的Github中獲取工程代碼：

https://github.com/QiShare/QiAppIconGenerator

如有問題，歡迎留言反饋~

（360技術(shù)原創(chuàng)內(nèi)容，轉(zhuǎn)載請(qǐng)務(wù)必保留文末二維碼，謝謝~）

關(guān)于360技術(shù) 360技術(shù)是360技術(shù)團(tuán)隊(duì)打造的技術(shù)分享公眾號(hào)，每天推送技術(shù)干貨內(nèi)容
更多技術(shù)信息歡迎關(guān)注“360技術(shù)”微信公眾號(hào)

總結(jié)

以上是生活随笔為你收集整理的iOS图标启动图生成器（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。