ILLUSTRATOR做UI設(shè)計(jì)

1、ILLUSTRATOR做UI設(shè)計(jì)一、AI非常適合用于 UI 設(shè)計(jì),主要原因：1、AI 的強(qiáng)項(xiàng)在于對(duì)矢量圖的處理。計(jì)算機(jī)里從無(wú)到有生成一張圖像，通常矢量圖創(chuàng)作軟件更適合一些。特別是在 UI 設(shè)計(jì)、Web 設(shè)計(jì)領(lǐng)域，絕大多數(shù)時(shí)候并不需要結(jié)構(gòu)和色彩非常復(fù)雜的圖形。大多就是需要矩形、橢圓、圓角矩形這些很簡(jiǎn)單的幾何形狀。2、很多設(shè)計(jì)師用 PS 做設(shè)計(jì)時(shí)要開(kāi)著一個(gè) AI，先用 AI 畫(huà)基本形，然后把 AI 里的圖形作為智能對(duì)象復(fù)制到 PS 里，然后用 PS 繼續(xù)創(chuàng)作。在 AI 里，可以較為方便地完成從排版布局、繪制圖形、上色、切圖導(dǎo)出這樣的全部一套流程，不必要中途換軟件環(huán)境。3、AI 提供的一系列功能極其

2、適用于排版布局。在 PS 里，參考線只是橫著豎著的直線；而在 AI 里，參考線可以是任何形狀。4、由于 AI 的創(chuàng)作主要是是基于矢量對(duì)象，所以在 AI 里，大多數(shù)操作都是可逆、可以在后期修改的。比如畫(huà)一個(gè)按鈕，可以很容易在后期調(diào)整按鈕圓角的半徑大小，同時(shí)保持按鈕的圖形樣式不變。畫(huà)一個(gè)六邊形同樣也可以加圓角，并在后期修改圓角大小。5、AI 里基于矢量對(duì)象的吸附、對(duì)齊功能相當(dāng)好用，且在 UI 設(shè)計(jì)中相當(dāng)常用。6、AI 做出來(lái)的東西可以導(dǎo)出到任意大尺寸，而不會(huì)有虛邊情況。這一點(diǎn)特別適合用于設(shè)計(jì)不同分辨率的圖標(biāo)。7、AI 在 CS5 就可以做到將矢量圖形對(duì)齊到像素了，因此不用擔(dān)心導(dǎo)出出來(lái)的切圖里，直線

3、沒(méi)有準(zhǔn)確對(duì)上像素，因此帶來(lái)發(fā)虛的情況。8、AI 基于矢量對(duì)象的導(dǎo)出功能很好用，很適合用在 Web和UI 上。由于 AI 有豐富的矢量效果（類似 PS 的濾鏡和圖層樣式），因此 AI 退可做扁平，進(jìn)可做擬物。二、多重填充與多重描邊計(jì)算機(jī)圖形（注意：非圖像）的一些基本知識(shí)。計(jì)算機(jī)圖形的最基本要素有兩個(gè)：填充和描邊。填充和描邊可以是純色，也可以是紋理，還可以是漸變?？傊粋€(gè)形狀確定了填充和描邊后，這個(gè)圖形的樣式就確定下來(lái)了。自然，作為矢量圖繪制軟件，AI 也可以處理圖形的填充和描邊。不過(guò)，AI 有一個(gè)很強(qiáng)大的地方是在 AI 里，一個(gè)圖形是可以有好幾個(gè)填充和好幾個(gè)描邊的。實(shí)際上，這是一個(gè)相當(dāng)實(shí)用且強(qiáng)

4、大的功能。我們通過(guò)完成一個(gè)實(shí)例來(lái)看一下：使用 AI 繪制這樣一個(gè)知乎樣式的按鈕：首先，在新建文檔之前，要確保 AI 使用的單位是像素，而不是英寸、點(diǎn)、厘米或別的。這一點(diǎn)很重要，關(guān)系到導(dǎo)出的切圖是否為 pixel-perfect。在首選項(xiàng)里可以設(shè)置 AI 使用的單位是什么：確保 AI 使用的單位是像素后，新建一個(gè)文檔，文檔的大小為 320 x 480 像素，顏色模式選為 RGB，并確認(rèn)使新建對(duì)象與像素網(wǎng)格對(duì)齊沒(méi)有被勾選上。如圖：在這里要說(shuō)明一下，AI 在 CS5 開(kāi)始，支持將對(duì)象對(duì)齊到像素網(wǎng)格，這一點(diǎn)在 UI 設(shè)計(jì)中很重要。不過(guò)為什么在新建文檔時(shí)不把使新建對(duì)象與像素網(wǎng)格對(duì)齊選項(xiàng)勾上呢？我在多次創(chuàng)

5、作過(guò)程中發(fā)現(xiàn)，將對(duì)象一開(kāi)始就對(duì)齊到像素網(wǎng)格，帶來(lái)的麻煩遠(yuǎn)比帶來(lái)的便利要多。并且，對(duì)齊到像素網(wǎng)格可以在后期時(shí)來(lái)做。因此，在這里先不要勾上。一般來(lái)說(shuō)，做 UI 設(shè)計(jì)、海報(bào)設(shè)計(jì)什么的，如果不是特殊的需要，最好不要使用純黑、純白、純紅（#FF0000)這樣的顏色。一是因?yàn)榧兒谂c純白這樣的顏色之間造成的對(duì)比讓人感覺(jué)很不舒服，二是自然界幾乎沒(méi)有看上去純黑和純白的物體，不符合人們的生活經(jīng)驗(yàn)。因此，我們給背景加上一個(gè)淺灰的顏色。即看上去和白色差不多，但又不是純白，而是稍微偏暗一些的顏色。在默認(rèn)圖層里新建一個(gè)矩形，覆蓋整個(gè)畫(huà)板，填充顏色設(shè)置為 #E6E6E6，去掉描邊，將默認(rèn)圖層名稱改為 Backgound，并

6、鎖定這個(gè)圖層，防止以后誤操作。做好之后，看上去應(yīng)該是這樣:然后，開(kāi)始畫(huà)按鈕了。我們希望在畫(huà)面的正中位置附近畫(huà)一個(gè)大小為 72×32 像素的圓角按鈕。所以，新建一個(gè)圖層，命名為”Button”。再新建一個(gè)矩形，然后把矩形的大小設(shè)置為 72x31。之所以將矩形的寬度設(shè)置為 31 而非 32，是因?yàn)榻酉聛?lái)要給矩形畫(huà)一個(gè)凹陷效果，這個(gè)要額外占用一個(gè)像素的高度，故設(shè)置為 31 而非 32 像素高。由于人眼有視錯(cuò)覺(jué)，如果把按鈕畫(huà)在畫(huà)板的正中心的話，人眼看上去感覺(jué)是在正中心偏下一些。因此，為平衡人眼的視錯(cuò)覺(jué)，按鈕的位置要稍微高出正中心一些。把矩形按鈕的正中心設(shè)置為 （160，209.5 ）處。將縱

7、座標(biāo)設(shè)置為一個(gè)小數(shù)的原因是，這樣可以做到像素對(duì)齊。當(dāng)然，如果用對(duì)齊到像素網(wǎng)格功能也可以做到。這兩步完成后，矩形應(yīng)該是這個(gè)位置（為方便查看位置，我把矩形換了一個(gè)填充顏色）：接著，給矩形做圓角效果。選中矩形，然后使用效果-風(fēng)格化-圓角這個(gè)命令，給矩形加上一個(gè) 5 像素大小的圓角效果。加上后效果如圖：現(xiàn)在在外觀面板里，可以看到圓角這個(gè)效果已經(jīng)添加進(jìn)去了。在接下來(lái)的步驟中，要始終保持圓角在最上方：再給按鈕換一個(gè)底色，顏色是 #8CE01E。接下來(lái)，要進(jìn)入重頭戲了。點(diǎn)擊外觀面板下的添加新填色按鈕（即 “fx” 按鈕左邊的那個(gè)），再新建一個(gè)填色層，顏色為純白到純黑的漸變，方向是從上到下，透明度為 20%，

8、混合模式為明度。完成后畫(huà)板和外觀面板看起來(lái)應(yīng)該類似這樣：這樣，可以看到，通過(guò)一個(gè)底色填色層，和一個(gè)明暗漸變填色層，我們成功地做出了色彩明暗漸變效果。這，就是多重填充的應(yīng)用之一。另外再解釋一下，混合模式選擇明度的意思是，取下層對(duì)象的色相和飽和度，取上層對(duì)象的明度（亮度）作為最終顏色輸出。因此，這樣可以做出一個(gè)顏色只在明度上的漸變，而不會(huì)影響色相和飽和度。給矩形的描邊設(shè)置為一個(gè)像素，顏色為 #7F7F7F 描邊。這樣，按鈕的基本描邊就做出來(lái)了。不過(guò)卻有一個(gè)問(wèn)題：打開(kāi)像素預(yù)覽，會(huì)發(fā)現(xiàn)描邊是虛的：出現(xiàn)這個(gè)情況的原因是描邊沒(méi)有對(duì)齊到像素網(wǎng)格，而是被夾在兩條像素的正中。并且，這個(gè)圖形加上描邊后，大小超出了

9、預(yù)定的 72×32 大小。解決這個(gè)問(wèn)題的辦法是，將描邊對(duì)齊方式設(shè)置為使描邊內(nèi)側(cè)對(duì)齊。設(shè)置好后，描邊就清晰了?，F(xiàn)在的圖形和外觀面板看上去應(yīng)該是這樣：接下來(lái)，再新建一個(gè)描邊，顏色設(shè)置為純白，依然是內(nèi)側(cè)對(duì)齊，透明度為 50%。并在外觀面板里，把這個(gè)描邊置于灰色描邊的下方，如圖：到這一步時(shí)，按鈕看上去沒(méi)有什么變化。不過(guò)接下來(lái)，就是見(jiàn)證奇跡的時(shí)刻了。給半透明白色描邊加上一個(gè)變換效果，移動(dòng)參數(shù)設(shè)置為 1 像素：這一步后，按鈕就畫(huà)好了，有高光，且模擬了下凹效果：此時(shí)的外觀面板應(yīng)如圖所示：按鈕畫(huà)好了，接下來(lái)，說(shuō)說(shuō)這樣做有什么好處。首先，這個(gè)按鈕本身只用了一個(gè)圖層，并且只是一個(gè)矢量對(duì)象，保持了文件的整

10、潔。不信，可以看看圖層面板，只有按鈕和背景兩個(gè)圖層。到此為止，按鈕的大小正好是預(yù)定的 72×32 像素大小，且是像素精確的：然后，如果我不滿意按鈕的大小的話，我可以隨意調(diào)整，而不用擔(dān)心漸變和圓角大小什么的也跟著變動(dòng)。如圖，雖然按鈕大小變大了，但邊緣依舊是 1 像素粗細(xì)，且圓角依然是 5 像素大小，漸變也沒(méi)變：要是不滿意圓角的大小的話，也可以隨意調(diào)整，不必?fù)?dān)心其他的也跟著變：把按鈕換個(gè)顏色？簡(jiǎn)單，把最下面的填色層換一個(gè)顏色就可以了，其他的都不用改，漸變什么的依然在：三、圖片輸出現(xiàn)在，這個(gè)界面設(shè)計(jì)好了，問(wèn)題出來(lái)了，如何導(dǎo)出成 iOS 或 Web 前端工程師可以用的界面？在這一節(jié)教程里，就

11、說(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壓縮而須掉。只

12、有 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)畫(huà)面等等應(yīng)全部使用 PNG 格式。導(dǎo)出后查看圖像，可以看到圖像的大小就是我們預(yù)定的 320×480 像素大小，且按鈕做到了像素精確，邊緣沒(méi)有糊掉：2. 導(dǎo)出每一個(gè) UI 元素在正式聊這個(gè)話題之前，為方便說(shuō)明，我們?cè)俜派先ヒ粋€(gè)按鈕。選中按鈕，復(fù)制一下，新建一個(gè)新圖層，把這個(gè)按鈕粘貼到新圖層里

13、去。再根據(jù)上一節(jié)課所學(xué)的辦法，把按鈕的底色改成灰色。改好后差不多應(yīng)該是這個(gè)樣子：現(xiàn)在的任務(wù)是，分別導(dǎo)出兩個(gè)按鈕的切圖，供前端工程師使用。對(duì)此，主要有以下幾種方法:1方法一，不必動(dòng)用切圖工具。這樣做：首先，隱藏掉欲導(dǎo)出按鈕之外其他的任何圖層或矢量對(duì)象，確保畫(huà)板上只有欲導(dǎo)出按鈕是可見(jiàn)的。然后，依然使用存儲(chǔ)為 Web 所用格式，但是在彈出的選項(xiàng)對(duì)話框里，去掉剪切到畫(huà)板這個(gè)勾選?？梢钥吹?，奇跡發(fā)生了，AI 自動(dòng)把導(dǎo)出文件的尺寸設(shè)置為了按鈕大小，一點(diǎn)不多也一點(diǎn)不少：點(diǎn)擊存儲(chǔ)導(dǎo)出，查看之，可以看到導(dǎo)出的大小確實(shí)就是我們想要的，圓角邊緣是半透明的，凹陷什么的也在，并且是像素精確的：導(dǎo)出灰色的按鈕也同理，隱藏

14、掉除灰色按鈕之外的所有東西，然后使用存儲(chǔ)為 Web 所用格式命令就可以了。不過(guò)，顯而易見(jiàn)的是，這種方法有一個(gè)缺點(diǎn)。如果要是做一個(gè)類似登錄界面那樣比較簡(jiǎn)單的界面還好，但如果要是做一個(gè)復(fù)雜的界面，那么要一直反復(fù)隱藏顯示圖層、對(duì)象什么的，特別麻煩。2方法二，也是 AI 切圖導(dǎo)出的終極大招。首先，還是要把背景隱藏掉，因?yàn)橐_保背景是透明的。然后，選中一個(gè)按鈕，執(zhí)行菜單命令：對(duì)象-切片-用所選對(duì)象切片。這個(gè)按鈕就被切好了：可以看到，我們根本沒(méi)有做拉線、畫(huà)框、對(duì)齊這些繁瑣的步驟，僅僅花不到十秒，點(diǎn)擊幾下鼠標(biāo)，AI 就基于按鈕的外觀自動(dòng)為我們切好了。這種方法特別適合于每個(gè) UI 元素沒(méi)有堆疊這樣的情形。對(duì)于

15、灰色的按鈕同理，再點(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)作呢？方法同PS。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)單的