對于做設計而言，工具只是完成作品的手段。因此，其實對于做UI設計來說，到底是選擇PS還是AI還是別的這樣的問題并不重要的。只是對于我自己而言，做設計幾乎全部是用AI來做的，所以這一系列教程大多數是關于AI的。

我從2012年初開始嘗試使用AI來完成一些設計與創作，一直至今。個人感覺，AI雖然有不少難用的地方，但是非常適合用于UI設計。甚至在很多方面，用AI來代替PS做設計更加高效、方便。主要原因是：

AI的強項在于對矢量圖的處理。先哲有云：「如果希望在計算機里從無到有『生成』一張圖像，通常矢量圖創作軟件更適合一些，除了需要類似使用數位版手繪等那樣的特殊場合」。特別是在UI設計、Web設計領域，絕大多數時候并不需要結構和色彩非常復雜的圖形。大多就是需要矩形、橢圓、圓角矩形這些很簡單的幾何形狀。因此，在這一點上，PS等圖像處理軟件相對于AI來講，沒有太多的優勢。

在AI里，可以較為方便地完成從排版布局、繪制圖形、上色、切圖導出這樣的全部一套流程。意味著用AI做設計時，不必要中途換軟件環境。例如很多設計師用PS做設計時要開著一個AI，先用AI畫基本形，然后把AI里的圖形作為智能對象復制到PS里，然后用PS繼續創作。而用AI幾乎就可以完全避免這樣中途換軟件的情況。

AI提供的一系列功能極其適用于排版布局。比如在PS里，參考線只是橫著豎著的直線對吧;而在AI里，參考線可以是任何形狀。參考線不是無限長?沒問題!參考線是斜線?沒問題!畫個長方形甚至畫個圈當參考線用?也沒問題!

由于AI的創作主要是是基于矢量對象，所以在AI里，大多數操作都是可逆、可以在后期修改的。比如畫一個按鈕，可以很容易在后期調整按鈕圓角的半徑大小，同時保持按鈕的圖形樣式不變。畫一個六邊形同樣也可以加圓角，并在后期修改圓角大小。

AI里基于矢量對象的吸附、對齊功能相當好用，且在UI設計中相當常用。

由于AI有豐富的矢量效果(類似PS的濾鏡和圖層樣式)，因此AI退可做扁平，進可做擬物。

下面這兩張圖就是用AI繪制的，完全沒有用到除AI之外的其他軟件：

當然了，做扁平化設計AI就更不在話下了。

AI基于矢量對象的導出功能很好用，這一點將在后面的教程中講到。并且AI可以將圖稿導出為SVG格式的成品，很適合用在Web上。

AI做出來的東西可以導出到任意大尺寸，而不會有「虛邊」情況。這一點特別適合用于設計不同分辨率的圖標，以及做Retina適配。

AI對于RetinaMacBookPro的支持非常好。

對了，AI在CS5就可以做到將矢量圖形對齊到像素了，因此不用擔心導出出來的切圖里，直線沒有準確對上像素，因此帶來發虛的情況。

如果偶爾要排個版做個冊子的話，AI遠比PS適合。

還有很多一時想不出的優點……

因此，即使PS功能相當強大，并且網上有更多的學習資源以及素材資源，對于我來說，AI仍然是不可替代的。

接下來我將要寫的一些教程，內容主要是針對AI在UI設計中的一些進階使用技巧。

因此，這些教程可能更適合對于AI已經有一定了解的用戶來閱讀，可能對于AI的基本使用功能不會介紹太多。

一是因為大多數AI的基本功能在Adobe的官方文檔上都會有介紹：IllustratorHelp;

二是出于篇幅和個人時間、精力的限制;三是我相信，學習一個軟件、能力最好的辦法就是learnitthehardway，即在一定的壓力或困難下完成學習，比如在學習AI遇到類似某某某功能找不到這樣的困難時，自己通過搜索引擎或官方文檔或通過自己嘗試，找到解決方案，要比直接問別人效果要好得多。

AdobeIllustrator現在最高的版本是CC，即CreativeCloud。我將寫的一系列教程要求您用的AI最低版本為CS6，因為CS6的一些很基礎的功能在之前的版本里是沒有的。當然如果您用的是CC版本最好了。

使用AdobeIllustrator做UI設計(二)——多重填充與多重描邊

在這之前，說說計算機圖形(注意：非圖像)的一些基本知識。如果您用PS或AI比較多的話，可能會知道，計算機圖形的最基本要素有兩個：填充和描邊。填充和描邊可以是純色，也可以是紋理，還可以是漸變。總之，一個形狀確定了填充和描邊后，這個圖形的樣式就確定下來了。

自然，作為矢量圖繪制軟件，AI也可以處理圖形的填充和描邊。不過，AI有一個很強大的地方是——在AI里，一個圖形是可以有好幾個填充和好幾個描邊的。有人可能會問，這個特性有用嗎?實際上，這是一個相當實用且強大的功能。我們通過完成一個實例來看一下：使用AI繪制這樣一個知乎樣式的按鈕：

首先，在新建文檔之前，要確保AI使用的單位是像素，而不是英寸、點、厘米或別的。這一點很重要，關系到導出的切圖是否為pixel-perfect。在首選項里可以設置AI使用的單位是什么：

確保AI使用的單位是像素后，新建一個文檔，文檔的大小為320x480像素，顏色模式選為RGB，并確認「使新建對象與像素網格對齊」沒有被勾選上。如圖：

在這里要說明一下，AI在CS5開始，支持將對象對齊到像素網格，這一點在UI設計中很重要。不過為什么在新建文檔時不把「使新建對象與像素網格對齊」選項勾上呢?我在多次創作過程中發現，將對象一開始就對齊到像素網格，帶來的麻煩遠比帶來的便利要多。并且，對齊到像素網格可以在后期時來做。因此，在這里先不要勾上。

一般來說，做UI設計、海報設計什么的，如果不是特殊的需要，最好不要使用純黑、純白、純紅(#FF0000)這樣的顏色。一是因為純黑與純白這樣的顏色之間造成的對比讓人感覺很不舒服，二是自然界幾乎沒有看上去純黑和純白的物體，不符合人們的生活經驗。

因此，我們給背景加上一個淺灰的顏色。即看上去和白色差不多，但又不是純白，而是稍微偏暗一些的顏色。在默認圖層里新建一個矩形，覆蓋整個畫板，填充顏色設置為#E6E6E6，去掉描邊，將默認圖層名稱改為Backgound，并鎖定這個圖層，防止以后誤操作。做好之后，看上去應該是這樣:

然后，開始畫按鈕了。我們希望在畫面的正中位置附近畫一個大小為72×32像素的圓角按鈕。所以，新建一個圖層，命名為”Button”。再新建一個矩形，然后把矩形的大小設置為72x31。之所以將矩形的寬度設置為31而非32，是因為接下來要給矩形畫一個凹陷效果，這個要額外占用一個像素的高度，故設置為31而非32像素高。

由于人眼有視錯覺，如果把按鈕畫在畫板的正中心的話，人眼看上去感覺是在正中心偏下一些。因此，為平衡人眼的視錯覺，按鈕的位置要稍微高出正中心一些。

把矩形按鈕的正中心設置為(160，209.5)處。將縱座標設置為一個小數的原因是，這樣可以做到像素對齊。當然，如果用對齊到像素網格功能也可以做到。這兩步完成后，矩形應該是這個位置(為方便查看位置，我把矩形換了一個填充顏色)：

接著，給矩形做圓角效果。選中矩形，然后使用「效果」-›「風格化」-›「圓角…」這個命令，給矩形加上一個5像素大小的圓角效果。加上后效果如圖：

現在在「外觀」面板里，可以看到「圓角」這個效果已經添加進去了。在接下來的步驟中，要始終保持「圓角」在最上方：

再給按鈕換一個底色，顏色是#8CE01E。接下來，要進入重頭戲了。點擊「外觀」面板下的「添加新填色」按鈕(即“fx”按鈕左邊的那個)，再新建一個填色層，顏色為純白到純黑的漸變，方向是從上到下，透明度為20%，混合模式為「明度」。完成后畫板和外觀面板看起來應該類似這樣：

這樣，可以看到，通過一個底色填色層，和一個明暗漸變填色層，我們成功地做出了色彩明暗漸變效果。這，就是多重填充的應用之一。另外再解釋一下，混合模式選擇「明度」的意思是，取下層對象的色相和飽和度，取上層對象的明度(亮度)作為最終顏色輸出。因此，這樣可以做出一個顏色只在明度上的漸變，而不會影響色相和飽和度。

給矩形的描邊設置為一個像素，顏色為#7F7F7F描邊。這樣，按鈕的基本描邊就做出來了。不過卻有一個問題：打開像素預覽，會發現描邊是虛的：

出現這個情況的原因是描邊沒有對齊到像素網格，而是被夾在兩條像素的正中。并且，這個圖形加上描邊后，大小超出了預定的72×32大小。解決這個問題的辦法是，將描邊對齊方式設置為「使描邊內側對齊」。設置好后，描邊就清晰了。現在的圖形和外觀面板看上去應該是這樣：

接下來，再新建一個描邊，顏色設置為純白，依然是內側對齊，透明度為50%。并在外觀面板里，把這個描邊置于灰色描邊的下方，如圖：

到這一步時，按鈕看上去沒有什么變化。不過接下來，就是見證奇跡的時刻了。給半透明白色描邊加上一個「變換」效果，「移動」參數設置為1像素：

這一步后，按鈕就畫好了，有高光，且模擬了下凹效果：

此時的外觀面板應如圖所示：

-

按鈕畫好了，接下來，說說這樣做有什么好處。

首先，這個按鈕本身只用了一個圖層，并且只是一個矢量對象，保持了文件的整潔。不信，可以看看「圖層」面板，只有按鈕和背景兩個圖層。

到此為止，按鈕的大小正好是預定的72×32像素大小，且是像素精確的：

然后，如果我不滿意按鈕的大小的話，我可以隨意調整，而不用擔心漸變和圓角大小什么的也跟著變動。如圖，雖然按鈕大小變大了，但邊緣依舊是1像素粗細，且圓角依然是5像素大小，漸變也沒變：

要是不滿意圓角的大小的話，也可以隨意調整，不必擔心其他的也跟著變：

把按鈕換個顏色?簡單，把最下面的填色層換一個顏色就可以了，其他的都不用改，漸變什么的依然在：

導出時，可以很方便地，嚴格按照按鈕大小來建立切片，切出來的大小不多不少正好是72×32像素大小。

為iPhone4這樣的Retina屏做設計?好說，導出時設置按200%比例導出就可以了。

有好幾個按鈕?也好說，可以用一種方法，讓所有的按鈕都做成這樣。更棒的是，修改一個按鈕的樣式后，可以讓其他按鈕的樣式也跟著變。這個方法留作課后探究題來研究吧。XD

課后作業：

1.根據本課所學到的知識，做出如圖所示的文字效果：

2.說說用這種方法做文字效果有什么好處。