我們學(xué)習(xí)了如何使用 Adobe Illustrator 的多重填充和多重描邊功能制作一個(gè)簡(jiǎn)單的界面。這個(gè)界面背景是淺灰色，上面有一個(gè)綠色的按鈕：

現(xiàn)在，這個(gè)界面設(shè)計(jì)好了，問(wèn)題出來(lái)了，如何導(dǎo)出成 iOS 或 Web 前端工程師可以用的界面?一般來(lái)說(shuō)，切圖是設(shè)計(jì)師最痛恨的工作流程環(huán)節(jié)，因?yàn)橹皇前床烤桶嗟墓ぷ?，而且麻煩繁瑣，始終要小心謹(jǐn)慎地去做。不過(guò)，由于 AI 是基于矢量對(duì)象進(jìn)行創(chuàng)作的，切圖這個(gè)環(huán)節(jié)不算太麻煩。

在這一節(jié)教程里，就說(shuō)說(shuō) AI 基于矢量對(duì)象強(qiáng)大的切圖、導(dǎo)出功能。

1. 導(dǎo)出界面設(shè)計(jì)圖

如果要是想導(dǎo)出整個(gè)界面設(shè)計(jì)圖的話，那很好說(shuō)。AI 有兩個(gè)關(guān)于導(dǎo)出的命令，一個(gè)就叫「導(dǎo)出」，另一個(gè)叫「存儲(chǔ)為 Web 所用格式」。在這里要使用后者。因?yàn)橹挥小复鎯?chǔ)為 Web 所用格式」才能保證導(dǎo)出的文件是像素精確的。在執(zhí)行這個(gè)命令之前，確保設(shè)計(jì)圖上所希望顯示的東西都沒(méi)有被隱藏掉。然后執(zhí)行命令，格式選擇 PNG，點(diǎn)擊「存儲(chǔ)」按鈕就可以導(dǎo)出整個(gè)設(shè)計(jì)圖了。

一般來(lái)說(shuō)，做 UI 設(shè)計(jì)導(dǎo)出成品，格式除了 PNG 以外基本沒(méi)有其他的選擇。BMP 太大了，微軟自己都基本不用了。用 JPG 圖片的銳邊、線條等部分(學(xué)名稱之為圖像的高頻分量)會(huì)因?yàn)橛袚p壓縮而須掉。

只有 PNG 在保證文件大小不會(huì)太大的同時(shí)，仍然為無(wú)損格式，這一點(diǎn)對(duì) pixel-perfect 要求較高的 UI 設(shè)計(jì)是至關(guān)重要的。并且 PNG 還有一個(gè)好處：PNG 支持半透明。

所以說(shuō)，如果沒(méi)有特殊要求的話，導(dǎo)出應(yīng)一律為 PNG 格式。為 iOS 做設(shè)計(jì)的話，UI 資源，包括切圖、主屏幕圖標(biāo)、啟動(dòng)畫面等等應(yīng)全部使用 PNG 格式。

導(dǎo)出后查看圖像，可以看到圖像的大小就是我們預(yù)定的 320×480 像素大小，且按鈕做到了像素精確，邊緣沒(méi)有糊掉：

～～～

2. 導(dǎo)出每一個(gè) UI 元素

在正式聊這個(gè)話題之前，為方便說(shuō)明，我們?cè)俜派先ヒ粋€(gè)按鈕。選中按鈕，復(fù)制一下，新建一個(gè)新圖層，把這個(gè)按鈕粘貼到新圖層里去。再根據(jù)上一節(jié)課所學(xué)的辦法，把按鈕的底色改成灰色。改好后差不多應(yīng)該是這個(gè)樣子：

現(xiàn)在的任務(wù)是，分別導(dǎo)出兩個(gè)按鈕的切圖，供前端工程師使用。

對(duì)此，有四種方法可以做到。第一種方法不必動(dòng)用切圖工具。這樣做：首先，隱藏掉欲導(dǎo)出按鈕之外其他的任何圖層或矢量對(duì)象，確保畫板上只有欲導(dǎo)出按鈕是可見(jiàn)的。

然后，依然使用「存儲(chǔ)為 Web 所用格式」，但是在彈出的選項(xiàng)對(duì)話框里，去掉「剪切到畫板」這個(gè)勾選。可以看到，「奇跡發(fā)生了」，AI 自動(dòng)把導(dǎo)出文件的尺寸設(shè)置為了按鈕大小，一點(diǎn)不多也一點(diǎn)不少：

點(diǎn)擊「存儲(chǔ)」導(dǎo)出，查看之，可以看到導(dǎo)出的大小確實(shí)就是我們想要的，圓角邊緣是半透明的，凹陷什么的也在，并且是像素精確的：

導(dǎo)出灰色的按鈕也同理，隱藏掉除灰色按鈕之外的所有東西，然后使用「存儲(chǔ)為 Web 所用格式」命令就可以了，這里就不再多寫了。

不過(guò)，顯而易見(jiàn)的是，這種方法有一個(gè)缺點(diǎn)。如果要是做一個(gè)類似登錄界面那樣比較簡(jiǎn)單的界面還好，但如果要是做一個(gè)復(fù)雜的界面，那么要一直反復(fù)隱藏顯示圖層、對(duì)象什么的，特別麻煩。因此，祭出方法二，也是 AI 切圖導(dǎo)出的終極大招。

方法二和方法三、方法四要?jiǎng)佑?AI 的切片工具。不過(guò)方法二所使用的切片方法輕松加愉快：

首先，還是要把背景隱藏掉，因?yàn)橐_保背景是透明的。然后，選中一個(gè)按鈕，執(zhí)行菜單命令：「對(duì)象」-›「切片」-›「用所選對(duì)象切片」。這個(gè)按鈕就被切好了：

可以看到，我們根本沒(méi)有做拉線、畫框、對(duì)齊這些繁瑣的步驟，僅僅花不到十秒，點(diǎn)擊幾下鼠標(biāo)，AI 就基于按鈕的外觀自動(dòng)為我們切好了。這種方法特別適合于每個(gè) UI 元素沒(méi)有堆疊這樣的情形。對(duì)于灰色的按鈕同理，再點(diǎn)擊幾下鼠標(biāo)，又切好了一個(gè)：

導(dǎo)出時(shí)，依然要使用「存儲(chǔ)為 Web 所用格式」這個(gè)命令，然后按 Shift 選中兩個(gè)按鈕切片，導(dǎo)出選項(xiàng)選擇「選中的切片」，如圖：

這樣，就可以干干凈凈地導(dǎo)出所有圖稿中的 UI 切片了：

可以看到，這種方法導(dǎo)出效率極高。不過(guò)，如果要是矢量對(duì)象很多的話，可能每次要點(diǎn)擊幾下還是有些繁瑣。

其實(shí)，還可以有更偷懶的辦法。有人會(huì)想，直接用快捷鍵不就省掉幾下點(diǎn)鼠標(biāo)了嗎?可惜的是，AI 并沒(méi)有給這個(gè)極其實(shí)用的命令分配一個(gè)快捷鍵。但我們可以讓它有快捷鍵。

方法是使用 AI 的動(dòng)作功能，把這個(gè)命令單獨(dú)保存為一個(gè)動(dòng)作，以后每次只要按下快捷鍵即可執(zhí)行了，進(jìn)一步增加工作效率，減少痛苦：

如何創(chuàng)建和使用動(dòng)作呢?這個(gè)，留作家庭作業(yè)吧。提示，請(qǐng)參看 AI 的官方幫助文檔：Illustrator Help

方法三比較類似，按畫板上的參考線來(lái)生成切片。這個(gè)和方法二比較類似，且不是很常用，先不介紹了。方法四就是手工拽線、畫框、對(duì)齊，就像傳統(tǒng)的切圖方式那樣。有了前面這三種方法，這種方法幾乎很少用到了，因此也不介紹了。

3. 適配 Retina 屏幕

做 iOS UI 設(shè)計(jì)的人都知道，一般來(lái)說(shuō)，要為 UI 準(zhǔn)備兩套切圖資源。一套為普通分辨率的，適配于 iPhone 3GS，iPad 2 等老機(jī)子。另一套是 Retina 版，即切圖大小長(zhǎng)寬分別為原來(lái)兩倍，使在同樣面積下的 UI 元素顯示更加精致，適配于 iPhone 4、iPad 3 等較新的機(jī)器。

在 AI 里，如果為 Retina 屏幕做適配的話，也挺簡(jiǎn)單的。導(dǎo)出時(shí)縮放設(shè)置為 200% 即可：

4. 導(dǎo)出為 SVG 格式文件

SVG 格式不同于 PNG 和 JPG 等格式。SVG 是基于 XML 的矢量圖形。優(yōu)勢(shì)是可以隨意縮放。因此，比較適合以此做 Retina Web 適配。AI 自然可以導(dǎo)出基于 SVG 的矢量格式。不過(guò)，我沒(méi)有找到比較簡(jiǎn)單的切圖方法。

所以，最好是將設(shè)計(jì)稿的每個(gè)圖形元素分別復(fù)制到新的文稿里保存。保存時(shí)，把按鈕移動(dòng)到左上角，然后選擇「保存」/「另存為」/「存儲(chǔ)副本」，格式選擇 SVG 或 SVGZ (SVG 的壓縮版)，即可。

5. iOS 切圖導(dǎo)出須知

就像上文說(shuō)的，iOS 要做 Retina 屏幕適配。因此，要準(zhǔn)備兩套切圖：普通版和 Retina 版。命名規(guī)則是： Retina 版的切圖名稱為「普通版名稱@2x.png」 這樣的格式。

例如，一個(gè)普通版的切圖文件名字叫 greenButton.png，那么，Retina 版的切圖名稱應(yīng)為 greenButton@2x.png。iOS 工程師拿到切圖后，會(huì)直接用 “greenButton.png” 這個(gè)文件名來(lái)用，iOS 的 CocoaTouch UIKit 框架會(huì)聰明地根據(jù)不同的屏幕選擇相應(yīng)的文件。如果在 OS X 上做設(shè)計(jì)，可以用 Automator 來(lái)自動(dòng)為切圖文件名加上 “@2x” 后綴，如圖：

在 Windows 下，把這段代碼存為一個(gè) .bat 格式文件，每次切完圖后，復(fù)制一份放到 Retina 切圖目錄里執(zhí)行一次，可達(dá)到同 OS X 的 Automator 相同的效果：

@echo off

ren *.png *@2x.png

另外，為減少 App 尺寸，做類似按鈕、文本框等切圖圖片時(shí)，建議將切圖按這樣的方式縮放(不太好說(shuō)明，直接上圖)：

iOS 工程師拿到這樣的圖后，會(huì)使用類似

- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight

或

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode

這樣的代碼，按某一個(gè)像素線拉伸，或按設(shè)定邊帽拉伸，將這張圖拉伸到原先的寬度，而保留圓角不變。使用 AI 很容易完成縮放按鈕寬度而保持圓角半徑不變(見(jiàn)上一篇文章)。最終縮放的寬度應(yīng)為「圓角尺寸 x 2 +1」像素，要額外留出 1 px 的寬度是為拉伸考慮。由此可見(jiàn)，雖然說(shuō) AI 自帶的切圖工具還是趕不上類似 Slicy 這樣的神器，不過(guò)也不算太難用了，依然可以說(shuō)很容易集成到工作流程里，增加工作效率。

下課了，希望大家學(xué)習(xí)愉快。