（題圖為我兩個(gè)月前的一個(gè)「飛機(jī)稿」，使用了「效果」等手段來表現(xiàn)質(zhì)感）

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

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

小課堂系列：
《使用 Adobe Illustrator 做 UI 設(shè)計(jì)——多重填充與多重描邊》
《小課堂第二彈！使用ILLUSTRATOR做UI設(shè)計(jì)系列教程》
《小課堂第三彈！使用ILLUSTRATOR做UI設(shè)計(jì)系列教程》
《小課堂第四彈：使用ILLUSTRATOR做UI設(shè)計(jì)系列教程》
《使用ILLUSTRATOR做UI設(shè)計(jì)系列教程：創(chuàng)建內(nèi)陰影效果（5）》

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

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

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

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

此時(shí)的外觀面板應(yīng)該類似這樣：

可以看到，相對于先前的「外觀」面板，應(yīng)用了「圓角」效果后，「圓角」效果出現(xiàn)在了外觀面板里，后面以 "fx" 提示這是一個(gè)效果。

圖形畫好了，該說說一些關(guān)于效果和外觀面板的理論知識(shí)了。

AI 里的效果是什么？

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

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

如果不想要這個(gè)圓角，可以點(diǎn)擊「圓角」效果，將圓角半徑大小設(shè)為 0；或者點(diǎn)擊圓角外觀前面的眼睛圖標(biāo)，令圓角效果不可見；還可以干脆將圓角外觀拖至面板上的垃圾桶圖標(biāo)來刪除掉。刪除圓角效果，或關(guān)閉圓角效果的可見性后，會(huì)看到圖形又恢復(fù)到了未加圓角效果的狀態(tài)，即最初的矩形。

這些就是「無損編輯」特性。有了「效果」，會(huì)給 AI 文稿后期的修改、微調(diào)帶來了很大的便利。這樣，設(shè)計(jì)師在創(chuàng)作初期，不必過于擔(dān)心出錯(cuò)，使后期修改特別麻煩了。覺得修改自己一年前用 AI 做的爛設(shè)計(jì)，要比重構(gòu)自己一年前的爛代碼要有趣的多。

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

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

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

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

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

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

• 除了可以將效果應(yīng)用于矢量對象外，還可以將效果應(yīng)用于整個(gè)圖層。

這里再舉個(gè)例子說明一下：給整個(gè)圖層增加一個(gè)類似于一些 3D 軟件里的「鏡像」修改器的效果，讓畫面一側(cè)的矢量對象能夠?qū)崟r(shí)對稱到另一邊去。依然由上面的例子繼續(xù)：

在「圖層」面板，點(diǎn)擊「圖層1」右側(cè)的那個(gè)圓圈圖示：

點(diǎn)擊后，「外觀」面板會(huì)變成這個(gè)樣子，表示現(xiàn)在如果更改外觀，會(huì)應(yīng)用到整個(gè)圖層，而非矢量對象上：

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

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

點(diǎn)擊「確定」后，畫板上的圖形就會(huì)出現(xiàn)在另一邊了，并與原圖形保持沿中軸對稱的關(guān)系：

在這之后，如果對圖層做出改動(dòng)，改動(dòng)的結(jié)果會(huì)立即自動(dòng)對稱到另一邊：

「擴(kuò)展外觀」命令

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

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

選中圖形，執(zhí)行菜單命令「擴(kuò)展外觀」，這個(gè)矢量對象會(huì)變成一系列圖形的編組：

現(xiàn)在可以看到，矢量圖形的「圓角」外觀被應(yīng)用到了圖形上，現(xiàn)在的圖形已經(jīng)不是「加上了圓角外觀的矩形」，而是一個(gè)真正的「圓角矩形」了。右鍵點(diǎn)擊編組，執(zhí)行「取消編組」命令，取消這個(gè)編組，看看里面有什么。

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

然后，把左邊新出現(xiàn)的編組再取消編組，會(huì)發(fā)現(xiàn)這個(gè)編組實(shí)際上是由三個(gè)東西組成：一個(gè)描邊、一個(gè)灰色的填充層、一個(gè)半透明漸變填充層：

這就是給對象執(zhí)行「擴(kuò)展外觀」命令得到的最終結(jié)果，對比還沒有執(zhí)行「擴(kuò)展外觀」命令時(shí)的「外觀」面板：

可以看到，「擴(kuò)展外觀」命令所做的工作就是將矢量對象的每個(gè)效果都應(yīng)用上，每個(gè)填色層和描邊都單獨(dú)拆出來。執(zhí)行「擴(kuò)展外觀」命令后，就可以由得到的結(jié)果來微調(diào)了。

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

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

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

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

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

下集預(yù)告

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

在前言中，曾經(jīng)提到過，由于 AI 有豐富的效果工具，因此 AI 退可做扁平，進(jìn)可做擬物。那么，在下一期教程里，會(huì)詳細(xì)解析一個(gè)擬物化瀏覽器圖標(biāo)的質(zhì)感表現(xiàn)，是如何通過 AI 里的眾多效果和工具所表現(xiàn)出來的：

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

那么，我們下期再見～

原文地址：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"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量66萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：