Illustrator詳細解析圖標的質感表現技巧

UI設計教程   /  UI圖標教程     

uimaker
UI設計師 / 江蘇 南京

來源:網絡   作者:佚名

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

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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

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

AI 里的效果是什么?

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

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

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

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

對于「外觀」面板,需要知道什么?

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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

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

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

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

「擴展外觀」命令

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

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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


Illustrator詳細解析圖標的質感表現技巧,PS教程,思緣教程網

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

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

 收藏
macd股票技术论