小課堂第二彈！使用ILLUSTRATOR做UI設(shè)計系列教程

@張泊寧研究所?：在上一課《使用 Adobe Illustrator 做 UI 設(shè)計——多重填充與多重描邊》里，我們學(xué)習(xí)了如何使用 Adobe Illustrator 的多重填充和多重描邊功能制作一個簡單的界面。這個界面背景是淺灰色，上面有一個綠色的按鈕：

現(xiàn)在，這個界面設(shè)計好了，問題出來了，如何導(dǎo)出成 iOS 或 Web 前端工程師可以用的界面？一般來說，切圖是設(shè)計師最痛恨的工作流程環(huán)節(jié)，因為只是按部就班的工作，而且麻煩繁瑣，始終要小心謹慎地去做。不過，由于 AI 是基于矢量對象進行創(chuàng)作的，切圖這個環(huán)節(jié)不算太麻煩。

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

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

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

一般來說，做 UI 設(shè)計導(dǎo)出成品，格式除了 PNG 以外基本沒有其他的選擇。BMP 太大了，微軟自己都基本不用了。用 JPG 圖片的銳邊、線條等部分（學(xué)名稱之為圖像的高頻分量）會因為有損壓縮而須掉。只有 PNG 在保證文件大小不會太大的同時，仍然為無損格式，這一點對 pixel-perfect 要求較高的 UI 設(shè)計是至關(guān)重要的。并且 PNG 還有一個好處：PNG 支持半透明。所以說，如果沒有特殊要求的話，導(dǎo)出應(yīng)一律為 PNG 格式。為 iOS 做設(shè)計的話，UI 資源，包括切圖、主屏幕圖標、啟動畫面等等應(yīng)全部使用 PNG 格式。

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

～～～

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

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

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

對此，有四種方法可以做到。第一種方法不必動用切圖工具。這樣做：首先，隱藏掉欲導(dǎo)出按鈕之外其他的任何圖層或矢量對象，確保畫板上只有欲導(dǎo)出按鈕是可見的。然后，依然使用「存儲為 Web 所用格式」，但是在彈出的選項對話框里，去掉「剪切到畫板」這個勾選。可以看到，「奇跡發(fā)生了」，AI 自動把導(dǎo)出文件的尺寸設(shè)置為了按鈕大小，一點不多也一點不少：

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

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

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

方法二和方法三、方法四要動用 AI 的切片工具。不過方法二所使用的切片方法輕松加愉快：

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

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

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

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

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

其實，還可以有更偷懶的辦法。有人會想，直接用快捷鍵不就省掉幾下點鼠標了嗎？可惜的是，AI 并沒有給這個極其實用的命令分配一個快捷鍵。但我們可以讓它有快捷鍵。方法是使用 AI 的動作功能，把這個命令單獨保存為一個動作，以后每次只要按下快捷鍵即可執(zhí)行了，進一步增加工作效率，減少痛苦：

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

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

3. 適配 Retina 屏幕

做 iOS UI 設(shè)計的人都知道，一般來說，要為 UI 準備兩套切圖資源。一套為普通分辨率的，適配于 iPhone 3GS，iPad 2 等老機子。另一套是 Retina 版，即切圖大小長寬分別為原來兩倍，使在同樣面積下的 UI 元素顯示更加精致，適配于 iPhone 4、iPad 3 等較新的機器。在 AI 里，如果為 Retina 屏幕做適配的話，也挺簡單的。導(dǎo)出時縮放設(shè)置為 200% 即可：

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

SVG 格式不同于 PNG 和 JPG 等格式。SVG 是基于 XML 的矢量圖形。優(yōu)勢是可以隨意縮放。因此，比較適合以此做 Retina Web 適配。AI 自然可以導(dǎo)出基于 SVG 的矢量格式。不過，我沒有找到比較簡單的切圖方法。所以，最好是將設(shè)計稿的每個圖形元素分別復(fù)制到新的文稿里保存。保存時，把按鈕移動到左上角，然后選擇「保存」/「另存為」/「存儲副本」，格式選擇 SVG 或 SVGZ （SVG 的壓縮版），即可。

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

就像上文說的，iOS 要做 Retina 屏幕適配。因此，要準備兩套切圖：普通版和 Retina 版。命名規(guī)則是： Retina 版的切圖名稱為「普通版名稱@2x.png」 這樣的格式。例如，一個普通版的切圖文件名字叫 greenButton.png，那么，Retina 版的切圖名稱應(yīng)為 greenButton@2x.png。iOS 工程師拿到切圖后，會直接用 “greenButton.png” 這個文件名來用，iOS 的 CocoaTouch UIKit 框架會聰明地根據(jù)不同的屏幕選擇相應(yīng)的文件。如果在 OS X 上做設(shè)計，可以用 Automator 來自動為切圖文件名加上 "@2x" 后綴，如圖：

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

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

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

這樣的代碼，按某一個像素線拉伸，或按設(shè)定邊帽拉伸，將這張圖拉伸到原先的寬度，而保留圓角不變。

使用 AI 很容易完成縮放按鈕寬度而保持圓角半徑不變（見上一篇文章）。最終縮放的寬度應(yīng)為「圓角尺寸 x 2 +1」像素，要額外留出 1 px 的寬度是為拉伸考慮。

由此可見，雖然說 AI 自帶的切圖工具還是趕不上類似 Slicy 這樣的神器，不過也不算太難用了，依然可以說很容易集成到工作流程里，增加工作效率。

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

原文地址：zhangboning.me
作者：@張泊寧研究所

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量63萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：