在上一課《IllustratorUI設計教程：解析多重填充與多重描邊》里，我們學習了如何使用 Adobe Illustrator 的多重填充和多重描邊功能制作一個簡單的界面。這個界面背景是淺灰色，上面有一個綠色的按鈕：
現(xiàn)在，這個界面設計好了，問題出來了，如何導出成 iOS 或 Web 前端工程師可以用的界面?一般來說，切圖是設計師最痛恨的工作流程環(huán)節(jié)，因為只是按部就班的工作，而且麻煩繁瑣，始終要小心謹慎地去做。不過，由于 AI 是基于矢量對象進行創(chuàng)作的，切圖這個環(huán)節(jié)不算太麻煩。
在這一節(jié)教程里，就說說 AI 基于矢量對象強大的切圖、導出功能。
1. 導出界面設計圖
如果要是想導出整個界面設計圖的話，那很好說。AI 有兩個關于導出的命令，一個就叫「導出」，另一個叫「存儲為 Web 所用格式」。在這里要使用后者。因為只有「存儲為 Web 所用格式」才能保證導出的文件是像素精確的。在執(zhí)行這個命令之前，確保設計圖上所希望顯示的東西都沒有被隱藏掉。然后執(zhí)行命令，格式選擇 PNG，點擊「存儲」按鈕就可以導出整個設計圖了。
一般來說，做 UI 設計導出成品，格式除了 PNG 以外基本沒有其他的選擇。BMP 太大了，微軟自己都基本不用了。用 JPG 圖片的銳邊、線條等部分(學名稱之為圖像的高頻分量)會因為有損壓縮而須掉。只有 PNG 在保證文件大小不會太大的同時，仍然為無損格式，這一點對 pixel-perfect 要求較高的 UI 設計是至關重要的。并且 PNG 還有一個好處：PNG 支持半透明。所以說，如果沒有特殊要求的話，導出應一律為 PNG 格式。為 iOS 做設計的話，UI 資源，包括切圖、主屏幕圖標、啟動畫面等等應全部使用 PNG 格式。
導出后查看圖像，可以看到圖像的大小就是我們預定的 320×480 像素大小，且按鈕做到了像素精確，邊緣沒有糊掉：
～～～
2. 導出每一個 UI 元素
在正式聊這個話題之前，為方便說明，我們再放上去一個按鈕。選中按鈕，復制一下，新建一個新圖層，把這個按鈕粘貼到新圖層里去。再根據(jù)上一節(jié)課所學的辦法，把按鈕的底色改成灰色。改好后差不多應該是這個樣子：
現(xiàn)在的任務是，分別導出兩個按鈕的切圖，供前端工程師使用。
對此，有四種方法可以做到。第一種方法不必動用切圖工具。這樣做：首先，隱藏掉欲導出按鈕之外其他的任何圖層或矢量對象，確保畫板上只有欲導出按鈕是可見的。然后，依然使用「存儲為 Web 所用格式」，但是在彈出的選項對話框里，去掉「剪切到畫板」這個勾選。可以看到，「奇跡發(fā)生了」，AI 自動把導出文件的尺寸設置為了按鈕大小，一點不多也一點不少：
點擊「存儲」導出，查看之，可以看到導出的大小確實就是我們想要的，圓角邊緣是半透明的，凹陷什么的也在，并且是像素精確的：
導出灰色的按鈕也同理，隱藏掉除灰色按鈕之外的所有東西，然后使用「存儲為 Web 所用格式」命令就可以了，這里就不再多寫了。
不過，顯而易見的是，這種方法有一個缺點。如果要是做一個類似登錄界面那樣比較簡單的界面還好，但如果要是做一個復雜的界面，那么要一直反復隱藏顯示圖層、對象什么的，特別麻煩。因此，祭出方法二，也是 AI 切圖導出的終極大招。
方法二和方法三、方法四要動用 AI 的切片工具。不過方法二所使用的切片方法輕松加愉快：
首先，還是要把背景隱藏掉，因為要確保背景是透明的。然后，選中一個按鈕，執(zhí)行菜單命令：「對象」-?「切片」-?「用所選對象切片」。這個按鈕就被切好了：
可以看到，我們根本沒有做拉線、畫框、對齊這些繁瑣的步驟，僅僅花不到十秒，點擊幾下鼠標，AI 就基于按鈕的外觀自動為我們切好了。這種方法特別適合于每個 UI 元素沒有堆疊這樣的情形。對于灰色的按鈕同理，再點擊幾下鼠標，又切好了一個：
導出時，依然要使用「存儲為 Web 所用格式」這個命令，然后按 Shift 選中兩個按鈕切片，導出選項選擇「選中的切片」，如圖：
這樣，就可以干干凈凈地導出所有圖稿中的 UI 切片了：
可以看到，這種方法導出效率極高。不過，如果要是矢量對象很多的話，可能每次要點擊幾下還是有些繁瑣。
其實，還可以有更偷懶的辦法。有人會想，直接用快捷鍵不就省掉幾下點鼠標了嗎?可惜的是，AI 并沒有給這個極其實用的命令分配一個快捷鍵。但我們可以讓它有快捷鍵。方法是使用 AI 的動作功能，把這個命令單獨保存為一個動作，以后每次只要按下快捷鍵即可執(zhí)行了，進一步增加工作效率，減少痛苦：
如何創(chuàng)建和使用動作呢?這個，留作家庭作業(yè)吧。提示，請參看 AI 的官方幫助文檔：Illustrator Help
方法三比較類似，按畫板上的參考線來生成切片。這個和方法二比較類似，且不是很常用，先不介紹了。方法四就是手工拽線、畫框、對齊，就像傳統(tǒng)的切圖方式那樣。有了前面這三種方法，這種方法幾乎很少用到了，因此也不介紹了。
3. 適配 Retina 屏幕
做 iOS UI 設計的人都知道，一般來說，要為 UI 準備兩套切圖資源。一套為普通分辨率的，適配于 iPhone 3GS，iPad 2 等老機子。另一套是 Retina 版，即切圖大小長寬分別為原來兩倍，使在同樣面積下的 UI 元素顯示更加精致，適配于 iPhone 4、iPad 3 等較新的機器。在 AI 里，如果為 Retina 屏幕做適配的話，也挺簡單的。導出時縮放設置為 200% 即可：
4. 導出為 SVG 格式文件
SVG 格式不同于 PNG 和 JPG 等格式。SVG 是基于 XML 的矢量圖形。優(yōu)勢是可以隨意縮放。因此，比較適合以此做 Retina Web 適配。AI 自然可以導出基于 SVG 的矢量格式。不過，我沒有找到比較簡單的切圖方法。所以，最好是將設計稿的每個圖形元素分別復制到新的文稿里保存。保存時，把按鈕移動到左上角，然后選擇「保存」/「另存為」/「存儲副本」，格式選擇 SVG 或 SVGZ (SVG 的壓縮版)，即可。
5. iOS 切圖導出須知
就像上文說的，iOS 要做 Retina 屏幕適配。因此，要準備兩套切圖：普通版和 Retina 版。命名規(guī)則是： Retina 版的切圖名稱為「普通版名稱@2x.png」 這樣的格式。例如，一個普通版的切圖文件名字叫 greenButton.png，那么，Retina 版的切圖名稱應為 [email protected]。iOS 工程師拿到切圖后，會直接用 "greenButton.png" 這個文件名來用，iOS 的 CocoaTouch UIKit 框架會聰明地根據(jù)不同的屏幕選擇相應的文件。如果在 OS X 上做設計，可以用 Automator 來自動為切圖文件名加上 "@2x" 后綴，如圖：
在 Windows 下，把這段代碼存為一個 .bat 格式文件，每次切完圖后，復制一份放到 Retina 切圖目錄里執(zhí)行一次，可達到同 OS X 的 Automator 相同的效果：
@echo off
ren *.png *@2x.png
另外，為減少 App 尺寸，做類似按鈕、文本框等切圖圖片時，建議將切圖按這樣的方式縮放(不太好說明，直接上圖)：
iOS 工程師拿到這樣的圖后，會使用類似
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight
或
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
這樣的代碼，按某一個像素線拉伸，或按設定邊帽拉伸，將這張圖拉伸到原先的寬度，而保留圓角不變。使用 AI 很容易完成縮放按鈕寬度而保持圓角半徑不變(見上一篇文章)。最終縮放的寬度應為「圓角尺寸 x 2 +1」像素，要額外留出 1 px 的寬度是為拉伸考慮。由此可見，雖然說 AI 自帶的切圖工具還是趕不上類似 Slicy 這樣的神器，不過也不算太難用了，依然可以說很容易集成到工作流程里，增加工作效率。
