使用Ai做UI設計系列教程：效果、外觀面板和質感表現（上）

（題圖為我兩個月前的一個「飛機稿」，使用了「效果」等手段來表現質感）

@張泊寧研究所?：在前面的幾篇教程里說過，相對于像素圖編輯軟件來說，Adobe Illustrator 作為矢量圖編輯軟件，用作 UI 設計領域，有更多的優勢。最大的優勢，或許就是在于矢量圖編輯的「無損性」，就是說在 AI 里，用矢量工具畫東西不會像用 PS 的畫筆那樣會「污染」同一圖層的其他部分，而且矢量編輯操作大部分是可逆的。這樣，用 AI 這樣的矢量圖編輯軟件做東西，后期修改、調整比像素圖編輯軟件要方便的多。

對于 AI 來說，保證「無損性」編輯這個特性，很大程度上得益于 AI 自帶的矢量效果和像素圖效果。對于 AI 來說，矢量效果和像素圖效果（后文通稱「效果」），配合以前面曾經介紹過的多重描邊和多重填充（見《使用 Adobe Illustrator 做 UI 設計——多重填充與多重描邊》），幾乎可以說是殺手級的功能；是為什么 PS、Sketch 這些軟件均不能完全取代 AI 的重要因素。AI 的效果或許剛上手時比較難以掌握，不過上手之后會感覺其實挺好用也挺強大的。在前面的幾篇文章里，曾經用到了效果，本次教程就梳理、總結一下效果的使用，以及相關聯的外觀面板。

小課堂系列：
《使用 Adobe Illustrator 做 UI 設計——多重填充與多重描邊》
《小課堂第二彈！使用ILLUSTRATOR做UI設計系列教程》
《小課堂第三彈！使用ILLUSTRATOR做UI設計系列教程》
《小課堂第四彈：使用ILLUSTRATOR做UI設計系列教程》
《使用ILLUSTRATOR做UI設計系列教程：創建內陰影效果（5）》

首先，還是先通過一個非常簡單的案例，來介紹一下效果和外觀面板。如果要是看了先前的一系列教程，應該操作起來會非常順利。即 —— 畫一個圓角矩形。畫圓角矩形應該是一個挺常見的需求。雖然 AI 自帶有圓角矩形工具，不過一般來說，不建議直接用圓角矩形工具畫，更推薦先畫一個普通的矩形，然后添加一個圓角效果；同時，為了說明效果的作用，演示效果命令和外觀面板的使用，在這里，我們用這種方法做。

第一步依然是新建一個新文件，大小隨意。然后，在畫板上畫一個矩形，需要帶填充顏色和描邊顏色。顏色、大小、位置、描邊粗細同樣隨意，只要能與背景區分開，并且填充與描邊區分開就好，類似這樣的：

選中這個矩形，查看「外觀」面板，可以看到，現在這個矩形有一個描邊和一個填色層：

然后，給這個矩形加上一個「圓角」效果。添加這個效果有兩種辦法：第一種辦法是使用頂部應用程序菜單添加，第二種辦法是點擊「外觀」面板的 "fx" 按鈕添加，兩種辦法是等效的。添加效果時圓角半徑可隨意設定。總之，添加以后，圖形應該類似這樣：

此時的外觀面板應該類似這樣：

可以看到，相對于先前的「外觀」面板，應用了「圓角」效果后，「圓角」效果出現在了外觀面板里，后面以 "fx" 提示這是一個效果。

圖形畫好了，該說說一些關于效果和外觀面板的理論知識了。

AI 里的效果是什么？

如果您用過一些 3D 軟件，使用過里面的「修改器」功能的話，可能會比較容易理解。AI 里的效果大體上就是能夠無損改變矢量對象形狀、色彩、風格等的東西。

再詳細說明一下「無損」的概念。上面的案例里，加上了「圓角」效果后，圖形是「加了圓角效果的矩形」，即它實際上還是原來的那個矩形，只是加了「圓角」效果，而不是圓角矩形。如果在「外觀」面板里點擊已經添加的「圓角」效果，會發現現在「圓角」的半徑仍然是可以修改的；相對來說，如果上來就用圓角矩形畫，那么后期如果需要修改圓角大小的話，就很麻煩了。

如果不想要這個圓角，可以點擊「圓角」效果，將圓角半徑大小設為 0；或者點擊圓角外觀前面的眼睛圖標，令圓角效果不可見；還可以干脆將圓角外觀拖至面板上的垃圾桶圖標來刪除掉。刪除圓角效果，或關閉圓角效果的可見性后，會看到圖形又恢復到了未加圓角效果的狀態，即最初的矩形。

這些就是「無損編輯」特性。有了「效果」，會給 AI 文稿后期的修改、微調帶來了很大的便利。這樣，設計師在創作初期，不必過于擔心出錯，使后期修改特別麻煩了。覺得修改自己一年前用 AI 做的爛設計，要比重構自己一年前的爛代碼要有趣的多。

對于「外觀」面板，需要知道什么？

矢量對象的描邊、填充和可見性、可見度（「不透明度」這個翻譯太拗口了，下面均以「可見度」代替這個翻譯），以及矢量對象添加的效果，均會出現在外觀面板上。如果希望修改上述這些圖形要素，在「外觀」面板上點擊相應的要素即可。就像上面修改圓角大小的辦法一樣。如果希望修改矢量對象的描邊，也類似，點擊「描邊」就可以了：

一個矢量對象可以不止有一個描邊和一個填充，如前面一篇教程：《使用 Adobe Illustrator 做 UI 設計——多重填充與多重描邊》里所描述的那樣。同樣，也可以有不止一個效果。如上面的矩形，除了圓角效果外，還可以再加一個「投影」效果或別的：

效果可以應用于整個矢量對象，并且對于矢量對象的每個填充和描邊，可以單獨添加效果。比如，可以把上面的「圓角」效果從最頂層用鼠標拖入至描邊或填充里，可以單獨只為描邊或填充添加圓角效果：

「外觀」面板的描邊、填充、效果、透明度是有堆疊順序的，不同的堆疊順序得到的結果可能會不一樣。堆疊順序規則是：對于填充和描邊，在「外觀」面板里，位于上面的蓋住位于下面的；對于效果，是從上往下執行；整個矢量對象的透明度永遠位于最下方。如這個加入投影、圓角矩形，兩個填色層的矢量對象：

要這樣解讀：AI 拿到圖形后，首先給這個圖形用圓角效果修飾。然后在最上方，給圖形加一個 2px 粗的描邊；在描邊下方放上一個從上到下的漸變、50% 可見度的填色層；在漸變填色層下再放一個灰色的填色層；然后為整個圖形添加一個投影效果；最后，設定矢量對象整體的可見度為默認，即完全可見。

• 除了可以將效果應用于矢量對象外，還可以將效果應用于整個圖層。

這里再舉個例子說明一下：給整個圖層增加一個類似于一些 3D 軟件里的「鏡像」修改器的效果，讓畫面一側的矢量對象能夠實時對稱到另一邊去。依然由上面的例子繼續：

在「圖層」面板，點擊「圖層1」右側的那個圓圈圖示：

點擊后，「外觀」面板會變成這個樣子，表示現在如果更改外觀，會應用到整個圖層，而非矢量對象上：

接著，畫一個剛好完全覆蓋整個畫板的矩形，并去掉這個矩形的填充和描邊顏色：

最后，點擊 "fx" 按鈕，添加一個「變換」效果，勾選「對稱 X」，并把「副本」一欄的值設置為 1。

點擊「確定」后，畫板上的圖形就會出現在另一邊了，并與原圖形保持沿中軸對稱的關系：

在這之后，如果對圖層做出改動，改動的結果會立即自動對稱到另一邊：

「擴展外觀」命令

如果希望更進一步細調外觀所得到的圖形，可以使用菜單欄里的「擴展外觀」命令，將矢量對象的外觀「應用」，作用類似于一些 3D 軟件的「應用修改器」。再拿上面的例子舉例說明。

首先，撤銷掉剛才的圖層對稱效果，撤銷至畫板上只有這樣一個圖形：

選中圖形，執行菜單命令「擴展外觀」，這個矢量對象會變成一系列圖形的編組：

現在可以看到，矢量圖形的「圓角」外觀被應用到了圖形上，現在的圖形已經不是「加上了圓角外觀的矩形」，而是一個真正的「圓角矩形」了。右鍵點擊編組，執行「取消編組」命令，取消這個編組，看看里面有什么。

取消編組后，會得到兩個東西：原矢量對象下邊的陰影層，上面是另一個編組。把上面的編組挪開，會看得更清楚一些：

然后，把左邊新出現的編組再取消編組，會發現這個編組實際上是由三個東西組成：一個描邊、一個灰色的填充層、一個半透明漸變填充層：

這就是給對象執行「擴展外觀」命令得到的最終結果，對比還沒有執行「擴展外觀」命令時的「外觀」面板：

可以看到，「擴展外觀」命令所做的工作就是將矢量對象的每個效果都應用上，每個填色層和描邊都單獨拆出來。執行「擴展外觀」命令后，就可以由得到的結果來微調了。

不過同樣可以看到，執行「擴展外觀」命令后，矢量對象的效果就定下來了，不可以改動了。比如在我們這個例子中，執行「擴展外觀」命令以后，再想更改圓角的半徑和投影就十分困難了。

AI 里有些效果沒有啊怎么辦？

AI 的矢量對象效果雖然強大并且方便，不過相對于 PS 這樣的圖像處理軟件來說，還是缺少了一些效果，比如 PS 里的「內陰影」圖形樣式在 AI 里就沒有類似的效果。怎么辦？

AI 提供了導入 SVG 濾鏡的功能，通過這個功能，可以導入一些別人寫好的 SVG 濾鏡，來彌補 AI 自帶濾鏡的不足。除了用別人寫好的濾鏡以外，還可以自己寫濾鏡。例如，考慮寫一個給矢量對象加一個投影這樣的濾鏡，可以按照類似「取對象透明度 -? 將透明度轉化為灰度 -? 高斯模糊 -? 平移 -? 與源圖像拼合」這樣的思路寫。

AI 里 SVG 濾鏡的介紹，以及使用方法，還有如何自己寫 SVG 濾鏡，上一篇教程主要講的就是這個，可以參看一下：《使用ILLUSTRATOR做UI設計系列教程：創建內陰影效果（5）》

下集預告

本來，是想把下一期教程的內容寫成一篇教程里的，然而寫到這里，感覺篇幅已經太長了，并且感覺這一期的內容可能對于沒有接觸過的人來說，比較難「消化」。因此不得不將教程拆為上下兩期。這期教程講述了 AI 里矢量效果的基本知識，下一期的內容就是這些效果的綜合運用。

在前言中，曾經提到過，由于 AI 有豐富的效果工具，因此 AI 退可做扁平，進可做擬物。那么，在下一期教程里，會詳細解析一個擬物化瀏覽器圖標的質感表現，是如何通過 AI 里的眾多效果和工具所表現出來的：

這期沒有作業，有興趣的話，可以想想上面的圖標是怎樣做成的。如果對于本期教程有什么問題或建議，可以在評論區提出，或者發至這個郵箱：

那么，我們下期再見～

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

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量66萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：