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

2020-04-17 23:27:17

字體：大中小

來源：轉載

供稿：網友

首先，還是先通過一個非常簡單的案例，來介紹一下效果和外觀面板。如果要是看了先前的一系列教程，應該操作起來會非常順利。即 —— 畫一個圓角矩形。畫圓角矩形應該是一個挺常見的需求。雖然 AI 自帶有圓角矩形工具，不過一般來說，不建議直接用圓角矩形工具畫，更推薦先畫一個普通的矩形，然后添加一個圓角效果;同時，為了說明效果的作用，演示效果命令和外觀面板的使用，在這里，我們用這種方法做。
第一步依然是新建一個新文件，大小隨意。然后，在畫板上畫一個矩形，需要帶填充顏色和描邊顏色。顏色、大小、位置、描邊粗細同樣隨意，只要能與背景區分開，并且填充與描邊區分開就好，類似這樣的：
Illustrator詳細解析圖標的質感表現技巧,

選中這個矩形，查看「外觀」面板，可以看到，現在這個矩形有一個描邊和一個填色層：
Illustrator詳細解析圖標的質感表現技巧,

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

此時的外觀面板應該類似這樣：
Illustrator詳細解析圖標的質感表現技巧,

可以看到，相對于先前的「外觀」面板，應用了「圓角」效果后，「圓角」效果出現在了外觀面板里，后面以 “fx” 提示這是一個效果。
圖形畫好了，該說說一些關于效果和外觀面板的理論知識了。
AI 里的效果是什么?
如果您用過一些 3D 軟件，使用過里面的「修改器」功能的話，可能會比較容易理解。AI 里的效果大體上就是能夠無損改變矢量對象形狀、色彩、風格等的東西。
再詳細說明一下「無損」的概念。上面的案例里，加上了「圓角」效果后，圖形是「加了圓角效果的矩形」，即它實際上還是原來的那個矩形，只是加了「圓角」效果，而不是圓角矩形。如果在「外觀」面板里點擊已經添加的「圓角」效果，會發現現在「圓角」的半徑仍然是可以修改的;相對來說，如果上來就用圓角矩形畫，那么后期如果需要修改圓角大小的話，就很麻煩了。
如果不想要這個圓角，可以點擊「圓角」效果，將圓角半徑大小設為 0;或者點擊圓角外觀前面的眼睛圖標，令圓角效果不可見;還可以干脆將圓角外觀拖至面板上的垃圾桶圖標來刪除掉。刪除圓角效果，或關閉圓角效果的可見性后，會看到圖形又恢復到了未加圓角效果的狀態，即最初的矩形。
這些就是「無損編輯」特性。有了「效果」，會給 AI 文稿后期的修改、微調帶來了很大的便利。這樣，設計師在創作初期，不必過于擔心出錯，使后期修改特別麻煩了。覺得修改自己一年前用 AI 做的爛設計，要比重構自己一年前的爛代碼要有趣的多。
對于「外觀」面板，需要知道什么?
矢量對象的描邊、填充和可見性、可見度(「不透明度」這個翻譯太拗口了，下面均以「可見度」代替這個翻譯)，以及矢量對象添加的效果，均會出現在外觀面板上。如果希望修改上述這些圖形要素，在「外觀」面板上點擊相應的要素即可。就像上面修改圓角大小的辦法一樣。如果希望修改矢量對象的描邊，也類似，點擊「描邊」就可以了：
Illustrator詳細解析圖標的質感表現技巧,

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

效果可以應用于整個矢量對象，并且對于矢量對象的每個填充和描邊，可以單獨添加效果。比如，可以把上面的「圓角」效果從最頂層用鼠標拖入至描邊或填充里，可以單獨只為描邊或填充添加圓角效果：
Illustrator詳細解析圖標的質感表現技巧,

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

要這樣解讀：AI 拿到圖形后，首先給這個圖形用圓角效果修飾。然后在最上方，給圖形加一個 2px 粗的描邊;在描邊下方放上一個從上到下的漸變、50% 可見度的填色層;在漸變填色層下再放一個灰色的填色層;然后為整個圖形添加一個投影效果;最后，設定矢量對象整體的可見度為默認，即完全可見。
除了可以將效果應用于矢量對象外，還可以將效果應用于整個圖層。
這里再舉個例子說明一下：給整個圖層增加一個類似于一些 3D 軟件里的「鏡像」修改器的效果，讓畫面一側的矢量對象能夠實時對稱到另一邊去。依然由上面的例子繼續：
在「圖層」面板，點擊「圖層1」右側的那個圓圈圖示：
Illustrator詳細解析圖標的質感表現技巧,

點擊后，「外觀」面板會變成這個樣子，表示現在如果更改外觀，會應用到整個圖層，而非矢量對象上：
Illustrator詳細解析圖標的質感表現技巧,

接著，畫一個剛好完全覆蓋整個畫板的矩形，并去掉這個矩形的填充和描邊顏色：
Illustrator詳細解析圖標的質感表現技巧,

最后，點擊 “fx” 按鈕，添加一個「變換」效果，勾選「對稱 X」，并把「副本」一欄的值設置為 1。
Illustrator詳細解析圖標的質感表現技巧,

點擊「確定」后，畫板上的圖形就會出現在另一邊了，并與原圖形保持沿中軸對稱的關系：
Illustrator詳細解析圖標的質感表現技巧,

在這之后，如果對圖層做出改動，改動的結果會立即自動對稱到另一邊：
Illustrator詳細解析圖標的質感表現技巧,

「擴展外觀」命令
如果希望更進一步細調外觀所得到的圖形，可以使用菜單欄里的「擴展外觀」命令，將矢量對象的外觀「應用」，作用類似于一些 3D 軟件的「應用修改器」。再拿上面的例子舉例說明。
首先，撤銷掉剛才的圖層對稱效果，撤銷至畫板上只有這樣一個圖形：
Illustrator詳細解析圖標的質感表現技巧,

選中圖形，執行菜單命令「擴展外觀」，這個矢量對象會變成一系列圖形的編組：
Illustrator詳細解析圖標的質感表現技巧,

現在可以看到，矢量圖形的「圓角」外觀被應用到了圖形上，現在的圖形已經不是「加上了圓角外觀的矩形」，而是一個真正的「圓角矩形」了。右鍵點擊編組，執行「取消編組」命令，取消這個編組，看看里面有什么。
取消編組后，會得到兩個東西：原矢量對象下邊的陰影層，上面是另一個編組。把上面的編組挪開，會看得更清楚一些：
Illustrator詳細解析圖標的質感表現技巧,

然后，把左邊新出現的編組再取消編組，會發現這個編組實際上是由三個東西組成：一個描邊、一個灰色的填充層、一個半透明漸變填充層：
Illustrator詳細解析圖標的質感表現技巧,

這就是給對象執行「擴展外觀」命令得到的最終結果，對比還沒有執行「擴展外觀」命令時的「外觀」面板：
Illustrator詳細解析圖標的質感表現技巧,

可以看到，「擴展外觀」命令所做的工作就是將矢量對象的每個效果都應用上，每個填色層和描邊都單獨拆出來。執行「擴展外觀」命令后，就可以由得到的結果來微調了。
不過同樣可以看到，執行「擴展外觀」命令后，矢量對象的效果就定下來了，不可以改動了。比如在我們這個例子中，執行「擴展外觀」命令以后，再想更改圓角的半徑和投影就十分困難了。
AI 里有些效果沒有啊怎么辦? AI 的矢量對象效果雖然強大并且方便，不過相對于 PS 這樣的圖像處理軟件來說，還是缺少了一些效果，比如 PS 里的「內陰影」圖形樣式在 AI 里就沒有類似的效果。怎么辦? AI 提供了導入 S
AI 里有些效果沒有啊怎么辦?
AI 的矢量對象效果雖然強大并且方便，不過相對于 PS 這樣的圖像處理軟件來說，還是缺少了一些效果，比如 PS 里的「內陰影」圖形樣式在 AI 里就沒有類似的效果。怎么辦?
AI 提供了導入 SVG 濾鏡的功能，通過這個功能，可以導入一些別人寫好的 SVG 濾鏡，來彌補 AI 自帶濾鏡的不足。除了用別人寫好的濾鏡以外，還可以自己寫濾鏡。例如，考慮寫一個給矢量對象加一個投影這樣的濾鏡，可以按照類似「取對象透明度 -› 將透明度轉化為灰度 -› 高斯模糊 -› 平移 -› 與源圖像拼合」這樣的思路寫。
1. 生活中常見材質和他們的特性
在說到材質前，首先要明白的是，為什么我們能夠看到東西。我們之所以能看到東西，是因為太陽、電燈這樣的光源所發射出來的光線，打到物體上，發生了類似反射、折射、散射這樣的光學現象后，最終到達我們眼睛里的視網膜，視網膜上的兩種視神經細胞受到光線的刺激后，產生紅綠藍三種彩色電信號(在光線較強時為主)和灰度電信號(在光線較弱時)由視神經傳達到大腦，產生視覺。所以說，產生視覺的兩大因素是光源和物體;沒有光源就沒有光線產生，沒有物體光就不會由于發生光學現象進入到我們的眼睛里。
生活中，我們能看到每個物體都帶有不同的材質。比如雖然都是白色，但白色的墻面和白色的洗衣機看起來卻不一樣。產生這種現象的原因是因為不同的物體，由于表面凹凸、紋理的細微不同和物質本身的物理光學特性不同，光線與之交互時所發生的光學現象不同，導致了我們看到的物體雖然可能都是一種顏色，但卻給人不同的材質感。
在本次教程中，我們先歸納總結材質的物理特性。日常生活中的材質多種多樣，不過根據我個人的經驗，絕大多數材質(不是全部)可以歸納為以下六種材質，或這六種材質之間的組合：
Illustrator詳細解析圖標的質感表現技巧,

以上的圖片就是六種不同材質的物體在不同環境下的表現(由計算機模擬生成)，下面逐一介紹這些材質的物理特性。從左到右，從前到后：
最前面的左數第一個物體的材質是生活中最常見到的材質。在生活中，絕大多數物體的表面在微觀上并不是十分光滑，或者表層物質有較強的散射特性，因此光線在打到這些物體的表面后，被反射、散射到了各個方向上，這種現象稱之為「漫反射」。原理大致如圖：
Illustrator詳細解析圖標的質感表現技巧,

類似這樣的物體最典型的就是未拋光的石膏，紙張、墻面這些。觀察上面給出的四張材質對比圖片，可以看到這樣的材質有以下幾個視覺特性：
物體在單一平行光源照射下(典型的平行光源是日光)，物體顯出本身的顏色、圖案紋理。并在光源照射下，不同部分大致形成了亮面(直接受光源照射)、灰面(光源與表面有一些角度)、暗面(光源不能直接照射到)，之間過渡平滑、柔和。
物體的灰面、暗面稍受周圍物體反光以及環境光的影響。例如物體暗部靠近地面的部分可能會比周圍稍亮一些，就是因為物體接受到了地面的反光(學過素描的都知道這點吧 = =)?？词纠馁|圖的例子可能會留意到，物體也受天光等環境光的影響，所以看上去稍藍一些。如果仔細觀察生活中的一些露天物體，在晴好的天氣下，會發現物體的暗面、灰面或被陰影遮蔽的物體看上去會稍帶一些藍色，是因為反射了天光的緣故。
第一排左二就是常見的鏡面金屬材質了。由于這樣的材質，即使從微觀上看，表面依然比較光滑，并且幾乎沒有散射特征。光線打到這樣的表面上后，絕大多數會沿按入射方向法線對稱的角度反射出，因此看上去有這些視覺特征：
物體表面的顏色受周圍環境影響很大。由于發生鏡面反射，會在物體表面形成周圍環境的鏡像。如果表面不平整，鏡像會發生畸變變形。
物體表面在光線照射下，不會像漫反射表面物體那樣形成亮面、灰面、暗面。光源會經反射后，直接形成一個物體表面上的清晰虛像。
由于一些金屬對不同波長(頻率)的光線反射率不同，因此像銅、金、鋅等金屬會帶有顏色。例如由于金對波長短的光線(藍紫光部分)吸收較多，對波長較長的光線(紅黃光)反射較多，因此會帶有金黃色。
第一排第三個的材質也是生活中較為常見的，即「玻璃」材質?！覆ＡА共馁|不僅僅包含玻璃，還包括類似聚乙烯塑料、鉆石這樣的材質，甚至水也可以看作是「玻璃」材質，因此在這里「玻璃」材質打上了引號?！覆ＡА共馁|的特點可以歸納如下：
光線在打到「玻璃」材質表面時，大部分光線會進入表面內部，然后從另一面射出。所以「玻璃」材質是透明的，我們從這邊觀看可以透過玻璃材質看到另一邊的東西。
但由于現實生活中的「玻璃」不是完美的，并且由于全反射現象，總有一些光線打到「玻璃」表面后，沒有進入「玻璃」內部，被「玻璃」表面反射或發生全反射現象。并且，由于通?！覆ＡА贡砻孑^為光滑，「玻璃」表面的反射類似鏡面反射。因此，觀看「玻璃」材質物體時，除了能夠透過「玻璃」看到另一邊的物體外，還可以看到「玻璃」器物表面會略帶一些周圍環境的鏡像。并且與表面視角越大，「玻璃」上的鏡像就越醒目，這是由于視角越大，全反射現象越明顯。
光線在由一種透明介質進入另一種透明介質時，在界面處光線方向會發生偏折，形成折射現象。光線入射角越大，折射現象就越明顯。故觀看彎曲「玻璃」表面時會覺得穿過「玻璃」的像變形了。折射現象是全反射現象的原因。光的折射也會導致焦散現象。并且，由于「玻璃」對不同波長的光線折射率不同，光線穿過「玻璃」后也可能發生色散、色差現象。不同的透明物體有不同的折射率，折射率越大則折射現象越明顯。為什么大家普遍覺得鉆石比玻璃好看?原因是鉆石的折射率更大，因此看起來更晶瑩剔透(全反射現象更明顯)，并且對著光線看起來是五彩繽紛的(色散現象更明顯)。
后一排左一物體的材質，在很多白色家電上可以看到，類似的還有光滑的瓷磚、木地板等等，iPhone 4 的前、背面面板也類似這樣。這種材質很像漫反射物體表面材質，不過卻隱約能看到物體表面類似鏡面反射那樣，帶有環境鏡像。這通常是由于這樣的物體表面實際上有兩層，下面的那層材質特性類似于漫反射材質，在漫反射層上面有一個很薄的光滑、透明表層，可以令大部分光線透過這一層，照射到下面的漫反射層。不過透明層本身會將照射過來的少許光線反射回去。這樣的物體材質視覺特性看起來，兼備漫反射和鏡面反射的特性：
和漫反射材質類似，光線打到物體上時會使物體表面不同部位形成明暗對比，并略微受環境光的影響。
和鏡面反射材質類似，物體表面會隱約形成周圍環境的鏡像，并且這個像會由于物體表面不平坦而發生畸變。
后一排左二是粗糙金屬材質，類似于一些金屬欄桿把手，MacBook 鋁合金外殼這樣的。這樣的材質看起來既不像光滑金屬鏡面表面，又不像漫反射材質，有這些特點：
和漫反射物體材質在受光源照射后，形成柔和的明暗過渡不同的是，粗糙金屬材質在受光線照射后，會在對著光源處形成一個很亮的光斑，亮斑周圍部分的亮度迅速衰減。
亮斑大小取決于材質的粗糙程度，越粗糙亮斑越大，越細膩亮斑越小，完全光滑時表面即為鏡面反射材質，亮斑變為一個小而清晰的光源鏡像。
亮斑較容易在表面曲率變化較大的地方「囤積」。
物體材質相對于漫反射材質而言，受周圍環境影響更多一些。但不會像鏡面反射材質那樣，形成清晰的環境鏡像。
最后一個材質有些意思，因為光線打到這個材質上時，不會一下子全都反射出來，也不會一下子全進入物體內部，而是有一部分光線被表面反射出來，進入物體內部的光線則在物體內部傳播，但由于物體材質的微觀物理特性，傳播時發生了散射現象，被散射到各個方向。有的光線散射后繼續朝物體內部傳播，有的光線則在散射后角度發生很大的偏折，返回射出物體表面。這樣，使得一些光線雖然能夠透過物體，但物體看起來不像玻璃那樣晶瑩剔透，而是顯得里面是「混沌」的。這樣的物體非常多，生活中很多有機物都有類似這樣的光學特性，比如人的皮膚、蠟燭、大多數塑料、象牙、凝膠;另外，像瓷器、玉石這樣的無機物也有類似特征。
舉些例子說明一下，比如下圖的人手，可以看到背著光線觀察時會看到有光線穿透了人手內部，尤其是在手指縫這樣的邊緣處最明顯：
Illustrator詳細解析圖標的質感表現技巧,

最極端點的例子是氣凝膠，一種內部微觀結構呈泡沫狀，密度極低的固體。光線進入后會發生充分的散射：
Illustrator詳細解析圖標的質感表現技巧,

再同上面給出的材質案例，可以歸納這樣的材質的視覺特點：
背對光源觀看時，相對于漫反射材質來說，這樣的材質在光源照射下，明暗面過渡更加柔和，明暗對比更不顯著。并且物體邊角處較暗，是因為光線打在邊角處更容易穿透材質射出。
迎著光源觀看時，可看到邊角處更亮一些，原因同上，邊角處打過來的光線更容易透過物體，被后面的人看到。
物體內部對不同波長的光線散射、吸收能力不同。如人手內部的皮膚、肌肉組織會令紅色光線更容易透過，光線通過氣凝膠內部時則會發生瑞利散射顯現出藍光(天空是藍色的原因與之類似)。
這六種差不多就是生活中最常見的材質了。知道關于材質的基本知識后，下面，根據上面這些，簡單說一下用 AI 怎么表現這樣的材質。這里以最簡單的兩個材質——漫反射材質和粗糙金屬材質來說明：
Illustrator詳細解析圖標的質感表現技巧,

上面的是漫反射材質的球體，下面的是粗糙金屬材質的(是的，如果周圍沒有別的物體，背景不太亮，只有一個光源，看起來差不多就是這個樣子的)。
用 AI 畫出上面的漫反射材質球用了兩個矢量對象，一個矢量對象是球體本身，另一個矢量對象是陰影。球體本身就是一個簡單的正圓了，陰影是一個旋轉后的橢圓。
球體本身是這樣表現的：有兩個填充層，填充顏色均為徑向漸變。下面的一層表現主體的明暗效果，上面的一層表現被地面反射的光線略微照亮的效果：
Illustrator詳細解析圖標的質感表現技巧,

陰影依然是靠一個徑向漸變來實現的，并加了一個高斯模糊，來更準確模擬陰影的層次感：
Illustrator詳細解析圖標的質感表現技巧,

在這里要說一句，AI 中，使物體邊緣「模糊」的方法有兩個外觀效果：一個是羽化，一個是高斯模糊。如果要是希望模擬陰影效果的話，除非有特殊原因，應始終使用高斯模糊效果。因為高斯模糊效果要比羽化的那種線性過渡效果，模擬陰影來的更真實一些。
上面是漫反射材質的表現手法，再說一下粗糙金屬材質如何用 AI 表現，其實大同小異。不過，這回需要三個矢量對象，分別表現球體本身、高光「光斑」和陰影：
Illustrator詳細解析圖標的質感表現技巧,

高光光斑是一個純白色，旋轉后的橢圓，加了一個高斯模糊效果。陰影部分和漫反射材質球體的陰影一致。這些很簡單。球體部分和漫反射球體類似，依然是用兩個填色層來表示，一個填色層為球體的主體顏色，一個填色層模擬地面反光：
Illustrator詳細解析圖標的質感表現技巧,

球體主體顏色需要較漫反射材質球體的要更暗一些，并且明暗變化要更小;地面反光要較漫反射球體材質更亮一些。
上一個教程里，介紹了生活中常見的幾種材質的光學特性，并舉了兩個例子，介紹了如何用 AI 表現這樣的材質。本次教程將要用一個實例，介紹一個圖標的質感表現，是如何使用 AI 里面的效果等手法來表現的。嗯對了，用來作為「模特」的圖標就是這個，一個瀏覽器圖標：
Illustrator詳細解析圖標的質感表現技巧,

不過，在具體討論這個圖標是如何表現之前，還是先說說關于圖標的一些基本知識吧。首先，大家都可以看出來，這個圖標是一個「擬物化」，或者可以稱作「風格化」的圖標。這種風格的圖標使用了類似陰影、漸變、高斯模糊、羽化等手段，來表現材質、光照、層次感等，使圖標看上去比較像現實世界中存在的一個物體那樣。通過真實世界中對應的隱喻，來讓用戶明白這個圖標背后 App 的作用，并喚起用戶的情感。
當然了，與此像對應的，就是「扁平化」風格的圖標了?！副馄交癸L格的圖標，抽離掉了光影、材質，只使用簡單的圖形、色彩來表現?！笖M物化」與「扁平化」風格的對比，大概就是下面的樣子：
Illustrator詳細解析圖標的質感表現技巧,

大家應該都知道了，從 2012 年起，「擬物化」?；庶h與「扁平化」革命軍開始爆發流血沖突。特別是在 2012 年 WWDC 后，由于 iOS 6 仍舊使用傳統的「擬物化」風格，造成「扁平化」革命軍的不滿，令流血沖突更是升級成為了全面戰爭。戰爭大概持續了一年，隨著于 2013 年 WWDC 發布的 iOS 7 系統內置的圖標全面改為「扁平化」風格。這場戰爭以「扁平化」革命軍勝利，「擬物化」?；庶h的敗走而終結。
為什么會形成「擬物化」?；庶h和「扁平化」革命軍兩派，并且爆發戰爭呢?在前些日子有不少討論了，每個設計師都有自己的說法。對此，我個人的觀點嘛，舉個例子來說吧：以前，人們都過得很困苦，很多人平時連饅頭、面條、米飯都舍不得吃，一般吃飯就吃窩頭、棒渣粥，就著點兒咸菜，像餃子這種「美食」更是一年才舍得吃一頓。改革開放后，大家都過上好日子了，就算是頓頓吃餃子也吃得起。于是很多人經常吃大魚大肉，哪個肉放的多、油放的多、鹽放的多就吃啥。結果是「三高」啊，心血管疾病的病患數量急劇升高。再后來，很多人又開始回歸粗糧、蔬菜等食品了，盡管大魚大肉地吃他們也絕對負擔得起。
也就是說，雖然現在很多人喜歡吃粗糧，不過跟以前那會兒是有本質的區別的。區別就是，現在我們可以選擇吃精糧還是吃粗糧，以前沒有這種選擇。GUI 的演化也是如此。
從前在 Apple II 和 IBM PC 那個時代啊，不僅電腦屏幕小，分辨率還都很低，而且色彩表現能力極為有限。比如曾經很流行的，曾用于 Windows 1.x、2.x 系列的 CGA 標準，一般分辨率只是 320×200，只有 16 種顏色可以顯示。在這樣的情況下，GUI 的表現受到了極大的限制，舉幾個古時候的 GUI 作為例子：
Illustrator詳細解析圖標的質感表現技巧,

這是 Visual Basic DOS 版(嗯，VB 這貨還有 DOS 版)的界面創建器，工作在 DOS 的字符模式下。注意看，這個界面的一切元素，都是基于類似制表符、空格、小數點這樣的字符來實現的。當時很多基于 DOS 帶 GUI 的程序，比如晚期 DOS 里內置的http://edit.com 文本編輯器，都是通過類似這樣的，基于字符顯示模式來表現 GUI。VB for DOS 可以說是這這種基于字符 GUI 的極致了，僅用字符就實現了窗體和幾乎所有常用的控件，甚至實現了窗體的陰影效果?，F在這種字符 GUI 在某些場合、領域依然存在，普通人比較容易接觸到的就是 PC 機的 BIOS 界面，還有 Linux/Unix 里的一些程序至今依然使用這樣的字符 UI。
Illustrator詳細解析圖標的質感表現技巧,

這個是我自己截取的 Windows 2.03 的截圖，工作在 DOS 的圖形模式下，VGA 屏幕(640×480，16 色)?？梢钥吹綀D標都是簡單的黑白圖形，窗體、控件也是標準的「扁平化」風格。因為當年流行的屏幕表現力通常很差，并且電腦帶不起來高分辨率、色彩豐富的界面，只能表現成這個樣子。
然后，隨著顯示器和電腦硬件的進步，VGA、SVGA 等高級一些的顯示標準開始普及起來。于是流行的 GUI 開始變成了這樣的風格：
Illustrator詳細解析圖標的質感表現技巧,

這兩個都是 Windows 3.2 系統界面。可以看到，GUI 開始使用高光和陰影來表現控件的立體感，并且圖標也開始帶有色彩，試圖呈現現實世界中的物件。
Illustrator詳細解析圖標的質感表現技巧,

這張截圖，從外到內為 Windows Vista、XP、3.2. 可以看到，隨著顯示設備的進步和計算機性能的提高，Windows 的 UI 經歷了怎樣的一套演化流程。
移動設備也不利外，早期像 Newtown PDA 這樣的設備只能顯示黑白畫面。演化到 Windows Mobile 時代后，流行的顯示屏最開始是 240×320, 256 色，后來演變到 640×480 , 65536 色這樣的。再然后是 iPhone 的 320×480，32 位真彩色。與此同時，GUI 也正像從前在電腦上發生過的那樣，從黑白線條風格，逐漸變成了彩色像素小圖標，然后是 iPhone OS 的水晶質感圖標、「立體」控件。最終，「擬物化」風格在搭載 Retina 顯示屏的 iPhone 4 上市后達到了頂峰，因為 Retina 顯示屏清晰銳利的屏幕，非常適合表現材質質感。
不過，當「擬物化」風格大行其道后，種種弊端開始顯現出來。比如，不是每個 App 都有對應在現實世界中的隱喻。而且，「擬物化」風格容易讓人把注意力從內容本身轉移到界面上。還有，過度的「擬物化」風格圖標的堆積容易給人以不一致感。因此，爆發了上面所說的，「擬物化」?；庶h和「扁平化」革命軍的沖突，最終「扁平化」獲勝，開始流行起來。
可能有人會問，既然現在是「扁平化」的天下了，那為什么還要用「擬物化」風格的圖標舉例講述呢?答：這一期講的就是如何用 AI 表現質感和光影啊。再說了，現在「擬物化」風格也沒有完全消亡，不信看看 iOS 7 內置的備忘錄應用。
然后再說說如何做出一個好的「擬物化」風格圖標。根據個人經驗，做好「擬物化」風格的圖標，主要依靠幾點：注重細節; 保證圖標的辨識度; 控制細節的數量; 前兩點都好理解，著重說一下第三點。做「擬物化」風格的圖
然后再說說如何做出一個好的「擬物化」風格圖標。根據個人經驗，做好「擬物化」風格的圖標，主要依靠幾點：
注重細節;
保證圖標的辨識度;
控制細節的數量;
前兩點都好理解，著重說一下第三點。做「擬物化」風格的圖標，堆砌大量的細節不是一個明智的做法。因為，除非做 OS X App 那樣的圖標，絕大多數系統應用程序的圖標分辨率都比較低的，例如 iPhone iOS 7 圖標分辨率是 120×120，在這樣的分辨率下顯然不適合堆砌細節。并且，堆砌細節容易給人造成認知上的困難，并很容易造成混亂、不一致感。再有，堆砌細節還很容易降低圖標的辨識度。因此，雖然基于矢量的 Adobe Illustator 很適合用可無限縮放的矢量圖形堆砌細節，不過不建議這樣做。
好了，現在可以開始進入正題——解析上面的那個圖標是如何表現的了。這個瀏覽器的圖標，放在了一個類似 App Launcher 的展示界面里：
Illustrator詳細解析圖標的質感表現技巧,

展示界面是單獨的一個 AI 文件，里面以外部文件鏈接的形式，嵌入了幾個圖標。AI 嵌入外部文件很簡單，只要把外部文件直接拖拽進去就可以了。外部文件發生改動，更新后，AI 會自動更新，非常方便。并且外部文件拖拽進去后，可以像在 AI 里創建的矢量圖形一樣加上效果。比如，這個展示界面上，所有的圖標都加了一個陰影效果。由于這套圖標的光源方向是從上到下，因此陰影方向也是豎直向下。陰影不要弄得過重，淡淡的一層就很好：
Illustrator詳細解析圖標的質感表現技巧,

加入陰影效果，使得這套圖標看起來更符合人們的視覺經驗，并能更好地將圖標層與背景層區分開來。
每個圖標都是一個單獨的文件。這個瀏覽器圖標也不例外，文件整體是這樣的：
Illustrator詳細解析圖標的質感表現技巧,

這個圖標文件由四個圖層組成，分別是「基座」、內容層、「蓋子」、參考線：
Illustrator詳細解析圖標的質感表現技巧,

那么，就一層一層來說吧。
最下面的一層也是最復雜的一層，是這個圖標的「基座」，由兩個矢量對象組成：
Illustrator詳細解析圖標的質感表現技巧,

灰白色的底層很簡單，沒有描邊，只有一個填色層，方向是從上到下，模擬光源自頂向下照射。
灰框藍色的基座就比較復雜了，這個矢量對象的外觀面板嘛……是這個樣子：
Illustrator詳細解析圖標的質感表現技巧,

一共有兩個描邊層，六個填色層。
似乎的確有些復雜，那么稍做簡化一下吧。在「外觀」面板里，只保留兩個描邊和藍色填色層的可見性。這樣，可以清楚地看到這個矢量圖形主體元素：
Illustrator詳細解析圖標的質感表現技巧,

兩個描邊的作用，是用來表現銀色邊框。兩個邊框均為沿圖形內側對齊，上面的是 2px 寬度，下面的是 3px 寬度，用不同的灰度來表現邊框的立體感。邊框的材質假定是一種稍微粗糙一些的金屬，有一個自頂向下照射的光源和環境光。在上一個教程里，介紹了金屬材質的光學特性。金屬材質在單一光源照射下，會有一個特別亮的高光區，并且高光區在邊緣處亮度會很快地衰減。因此，在這里同理，為模擬這樣的金屬材質，描邊的漸變應該做類似這樣的設置：
Illustrator詳細解析圖標的質感表現技巧,

在邊框下面的是藍色漸變的填色層，填色層一共有四個效果：
Illustrator詳細解析圖標的質感表現技巧,

首先是一個「位移路徑」效果(實際上個人覺得譯為「偏移路徑」更好，英文原文是 Offset Path)。這個效果的作用是，讓矢量圖形收縮/擴張指定像素的大小。在這里，將「位移」數值設定為 “-1″，即向內收縮 1px 大小。為什么要這樣做?如果不這樣做的話，那么在邊框的邊緣處，藍色底座會被隱約看到，特別是在圖像縮小查看時：
Illustrator詳細解析圖標的質感表現技巧,

產生這種情況的原因是 AI 默認是以消鋸齒的方式填充顏色。在執行消鋸齒操作時，圖形邊緣的像素會被設置為半透明。所以在邊框處的藍色「細線」，實際上是邊框邊緣的半透明像素疊加到藍色基座的半透明像素上，因此看上去是暗藍色。所以，首先要給圖形加上一個「位移路徑」效果，避免邊緣出現藍色的「細線」。
接下來是一個「內發光」效果，給圓形底座的邊緣加上陰影效果，增加真實感：
Illustrator詳細解析圖標的質感表現技巧,