中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

第一步依然是新建一個(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)該類似這樣：

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

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

AI 里的效果是什么？

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

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

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

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

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

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

一個(gè)矢量對(duì)象可以不止有一個(gè)描邊和一個(gè)填充。同樣，也可以有不止一個(gè)效果。如上面的矩形，除了圓角效果外，還可以再加一個(gè)「投影」效果或別的：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AI 里有些效果沒(méi)有啊怎么辦？

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

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

下集預(yù)告

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

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

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

那么，我們下期再見(jiàn)～

原文地址：zhangboning.me

作者：張泊寧研究所

原文來(lái)自：優(yōu)設(shè)網(wǎng)

使用AI做UI設(shè)計(jì)系列教程系列

效果、外觀面板和質(zhì)感表現(xiàn)（中）

效果、外觀面板和質(zhì)感表現(xiàn)（下）