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

感謝作者的無私分享，AI精品教程：
利用ILLUSTRATOR設計時尚漂亮的LOGO
巧用ILLUSTRATOR的涂抹打造文字草圖特效
手把手教你用ILLUSTRATOR創(chuàng)建精細的信封

使用Adobe Illustrator 做UI設計教程（一）

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

• AI 的強項在于對矢量圖的處理。先哲有云：「如果希望在計算機里從無到有『生成』一張圖像，通常矢量圖創(chuàng)作軟件更適合一些，除了需要類似使用數(shù)位版手繪等那樣的特殊場合」。特別是在 UI 設計、Web 設計領域，絕大多數(shù)時候并不需要結構和色彩非常復雜的圖形。大多就是需要矩形、橢圓、圓角矩形這些很簡單的幾何形狀。因此，在這一點上，PS 等圖像處理軟件相對于 AI 來講，沒有太多的優(yōu)勢。
• 在 AI 里，可以較為方便地完成從排版布局、繪制圖形、上色、切圖導出這樣的全部一套流程。意味著用 AI 做設計時，不必要中途換軟件環(huán)境。例如很多設計師用 PS 做設計時要開著一個 AI，先用 AI 畫基本形，然后把 AI 里的圖形作為智能對象復制到 PS 里，然后用 PS 繼續(xù)創(chuàng)作。而用 AI 幾乎就可以完全避免這樣中途換軟件的情況。
• AI 提供的一系列功能極其適用于排版布局。比如在 PS 里，參考線只是橫著豎著的直線對吧；而在 AI 里，參考線可以是任何形狀。參考線不是無限長？沒問題！參考線是斜線？沒問題！畫個長方形甚至畫個圈當參考線用？也沒問題！
• 由于 AI 的創(chuàng)作主要是是基于矢量對象，所以在 AI 里，大多數(shù)操作都是可逆、可以在后期修改的。比如畫一個按鈕，可以很容易在后期調整按鈕圓角的半徑大小，同時保持按鈕的圖形樣式不變。畫一個六邊形同樣也可以加圓角，并在后期修改圓角大小。
• AI 里基于矢量對象的吸附、對齊功能相當好用，且在 UI 設計中相當常用。
• 由于 AI 有豐富的矢量效果（類似 PS 的濾鏡和圖層樣式），因此 AI 退可做扁平，進可做擬物。下面這兩張圖就是用 AI 繪制的，完全沒有用到除 AI 之外的其他軟件：

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

• AI 基于矢量對象的導出功能很好用，這一點將在后面的教程中講到。并且 AI 可以將圖稿導出為 SVG 格式的成品，很適合用在 Web 上。
• AI 做出來的東西可以導出到任意大尺寸，而不會有「虛邊」情況。這一點特別適合用于設計不同分辨率的圖標，以及做 Retina 適配。
• AI 對于 Retina MacBook Pro 的支持非常好。
• 對了，AI 在 CS5 就可以做到將矢量圖形對齊到像素了，因此不用擔心導出出來的切圖里，直線沒有準確對上像素，因此帶來發(fā)虛的情況。
• 如果偶爾要排個版做個冊子的話，AI 遠比 PS 適合。
• 還有很多一時想不出的優(yōu)點……

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

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

因此，這些教程可能更適合對于 AI 已經(jīng)有一定了解的用戶來閱讀，可能對于 AI 的基本使用功能不會介紹太多。一是因為大多數(shù) AI 的基本功能在 Adobe 的官方文檔上都會有介紹：Illustrator Help?；二是出于篇幅和個人時間、精力的限制；三是我相信，學習一個軟件、能力最好的辦法就是 learn it the hard way，即在一定的壓力或困難下完成學習，比如在學習 AI 遇到類似某某某功能找不到這樣的困難時，自己通過搜索引擎或官方文檔或通過自己嘗試，找到解決方案，要比直接問別人效果要好得多。

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

使用 Adobe Illustrator 做 UI 設計（二）—— 多重填充與多重描邊

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

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

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

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

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

一般來說，做 UI 設計、海報設計什么的，如果不是特殊的需要，最好不要使用純黑、純白、純紅（#FF0000)這樣的顏色。一是因為純黑與純白這樣的顏色之間造成的對比讓人感覺很不舒服，二是自然界幾乎沒有看上去純黑和純白的物體，不符合人們的生活經(jīng)驗。因此，我們給背景加上一個淺灰的顏色。即看上去和白色差不多，但又不是純白，而是稍微偏暗一些的顏色。在默認圖層里新建一個矩形，覆蓋整個畫板，填充顏色設置為 #E6E6E6，去掉描邊，將默認圖層名稱改為 Backgound，并鎖定這個圖層，防止以后誤操作。做好之后，看上去應該是這樣:

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

由于人眼有視錯覺，如果把按鈕畫在畫板的正中心的話，人眼看上去感覺是在正中心偏下一些。因此，為平衡人眼的視錯覺，按鈕的位置要稍微高出正中心一些。把矩形按鈕的正中心設置為 （160，209.5 ）處。將縱座標設置為一個小數(shù)的原因是，這樣可以做到像素對齊。當然，如果用對齊到像素網(wǎng)格功能也可以做到。這兩步完成后，矩形應該是這個位置（為方便查看位置，我把矩形換了一個填充顏色）：

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

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

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

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

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

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

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

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

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

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

-

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

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

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

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

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

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

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

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

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

課后作業(yè)：

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

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

下課了，希望大家學習愉快。

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