起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)使用AI做UI設(shè)計(jì)系列教程：效果、外觀面板和質(zhì)感表現(xiàn)（中）
嗯，又到了教程時(shí)間了。本次教程繼續(xù)進(jìn)行關(guān)于使用 Illustrator 做質(zhì)感表現(xiàn)的一些知識(shí)。在上一篇教程《使用 Adobe Illustrator 做 UI 設(shè)計(jì)——效果、外觀面板和質(zhì)感表現(xiàn)（上）》里， 曾提到說(shuō)后面的教程要剖析一個(gè)瀏覽器圖標(biāo)的質(zhì)感表現(xiàn)是怎樣做到的。不過(guò)，知其然不如知其所以然。不僅希望讓大家知道，如何用 AI 來(lái)表現(xiàn)質(zhì)感，更希望讓大家知道為什么要這樣做。所以，這一回的內(nèi)容主要是介紹質(zhì)感表現(xiàn)的一些基礎(chǔ)知識(shí)，了解一些生活中常見(jiàn)物體所用的材質(zhì)特性。關(guān)于 AI 本身功能的介紹就相對(duì)于前幾篇少一些，主要以知識(shí)介紹為主，所以這應(yīng)該是一篇比較輕松的教程。如果用過(guò)一些三維設(shè)計(jì)軟件的話，下面的內(nèi)容應(yīng)該比較容易理 解。
好了，不多說(shuō)了，開(kāi)始正文。
1. 生活中常見(jiàn)材質(zhì)和他們的特性
在說(shuō)到材質(zhì)前，首先要明白的是，為什么我們能夠看到東西。我們之所以能看到東西，是因?yàn)樘?yáng)、電燈這樣的光源所發(fā)射出來(lái)的光線，打到物體上，發(fā)生了 類似反射、折射、散射這樣的光學(xué)現(xiàn)象后，最終到達(dá)我們眼睛里的視網(wǎng)膜，視網(wǎng)膜上的兩種視神經(jīng)細(xì)胞受到光線的刺激后，產(chǎn)生紅綠藍(lán)三種彩色電信號(hào)（在光線較強(qiáng) 時(shí)為主）和灰度電信號(hào)（在光線較弱時(shí)）由視神經(jīng)傳達(dá)到大腦，產(chǎn)生視覺(jué)。所以說(shuō)，產(chǎn)生視覺(jué)的兩大因素是光源和物體；沒(méi)有光源就沒(méi)有光線產(chǎn)生，沒(méi)有物體光就不 會(huì)由于發(fā)生光學(xué)現(xiàn)象進(jìn)入到我們的眼睛里。
生活中，我們能看到每個(gè)物體都帶有不同的材質(zhì)。比如雖然都是白色，但白色的墻面和白色的洗衣機(jī)看起來(lái)卻不一樣。產(chǎn)生這種現(xiàn)象的原因是因?yàn)椴煌奈?體，由于表面凹凸、紋理的細(xì)微不同和物質(zhì)本身的物理光學(xué)特性不同，光線與之交互時(shí)所發(fā)生的光學(xué)現(xiàn)象不同，導(dǎo)致了我們看到的物體雖然可能都是一種顏色，但卻 給人不同的材質(zhì)感。
在本次教程中，我們先歸納總結(jié)材質(zhì)的物理特性。日常生活中的材質(zhì)多種多樣，不過(guò)根據(jù)我個(gè)人的經(jīng)驗(yàn)，絕大多數(shù)材質(zhì)（不是全部）可以歸納為以下六種材質(zhì)，或這六種材質(zhì)之間的組合：
以上的圖片就是六種不同材質(zhì)的物體在不同環(huán)境下的表現(xiàn)（由計(jì)算機(jī)模擬生成），下面逐一介紹這些材質(zhì)的物理特性。從左到右，從前到后：
最前面的左數(shù)第一個(gè)物體的材質(zhì)是生活中最常見(jiàn)到的材質(zhì)。在生活中，絕大多數(shù)物體的表面在微觀上并不是十分光滑，或者表層物質(zhì)有較強(qiáng)的散射特性，因此光線在打到這些物體的表面后，被反射、散射到了各個(gè)方向上，這種現(xiàn)象稱之為「漫反射」。原理大致如圖：
類似這樣的物體最典型的就是未拋光的石膏，紙張、墻面這些。觀察上面給出的四張材質(zhì)對(duì)比圖片，可以看到這樣的材質(zhì)有以下幾個(gè)視覺(jué)特性：
- 物體在單一平行光源照射下（典型的平行光源是日光），物體顯出本身的顏色、圖案紋理。并在光源照射下，不同部分大致形成了亮面（直接受光源照射）、灰面（光源與表面有一些角度）、暗面（光源不能直接照射到），之間過(guò)渡平滑、柔和。
- 物體的灰面、暗面稍受周圍物體反光以及環(huán)境光的影響。例如物體暗部靠近地面的部分可能會(huì)比周圍稍亮一些，就是因?yàn)槲矬w接受到了地面的反光（學(xué)過(guò)素 描的都知道這點(diǎn)吧 = =)?？词纠馁|(zhì)圖的例子可能會(huì)留意到，物體也受天光等環(huán)境光的影響，所以看上去稍藍(lán)一些。如果仔細(xì)觀察生活中的一些露天物體，在晴好的天氣下，會(huì)發(fā)現(xiàn)物 體的暗面、灰面或被陰影遮蔽的物體看上去會(huì)稍帶一些藍(lán)色，是因?yàn)榉瓷淞颂旃獾木壒省?/li>
第一排左二就是常見(jiàn)的鏡面金屬材質(zhì)了。由于這樣的材質(zhì)，即使從微觀上看，表面依然比較光滑，并且?guī)缀鯖](méi)有散射特征。光線打到這樣的表面上后，絕大多數(shù)會(huì)沿按入射方向法線對(duì)稱的角度反射出，因此看上去有這些視覺(jué)特征：
- 物體表面的顏色受周圍環(huán)境影響很大。由于發(fā)生鏡面反射，會(huì)在物體表面形成周圍環(huán)境的鏡像。如果表面不平整，鏡像會(huì)發(fā)生畸變變形。
- 物體表面在光線照射下，不會(huì)像漫反射表面物體那樣形成亮面、灰面、暗面。光源會(huì)經(jīng)反射后，直接形成一個(gè)物體表面上的清晰虛像。
- 由于一些金屬對(duì)不同波長(zhǎng)（頻率）的光線反射率不同，因此像銅、金、鋅等金屬會(huì)帶有顏色。例如由于金對(duì)波長(zhǎng)短的光線（藍(lán)紫光部分）吸收較多，對(duì)波長(zhǎng)較長(zhǎng)的光線（紅黃光）反射較多，因此會(huì)帶有金黃色。
第一排第三個(gè)的材質(zhì)也是生活中較為常見(jiàn)的，即「玻璃」材質(zhì)?！覆ＡА共馁|(zhì)不僅僅包含玻璃，還包括類似聚乙烯塑料、鉆石這樣的材質(zhì)，甚至水也可以看作是「玻璃」材質(zhì)，因此在這里「玻璃」材質(zhì)打上了引號(hào)。「玻璃」材質(zhì)的特點(diǎn)可以歸納如下：
- 光線在打到「玻璃」材質(zhì)表面時(shí)，大部分光線會(huì)進(jìn)入表面內(nèi)部，然后從另一面射出。所以「玻璃」材質(zhì)是透明的，我們從這邊觀看可以透過(guò)玻璃材質(zhì)看到另一邊的東西。
- 但由于現(xiàn)實(shí)生活中的「玻璃」不是完美的，并且由于全反射現(xiàn)象，總有一些光線打到「玻璃」表面后，沒(méi)有進(jìn)入「玻璃」內(nèi)部，被「玻璃」表面反射或發(fā)生 全反射現(xiàn)象。并且，由于通?！覆ＡА贡砻孑^為光滑，「玻璃」表面的反射類似鏡面反射。因此，觀看「玻璃」材質(zhì)物體時(shí)，除了能夠透過(guò)「玻璃」看到另一邊的物 體外，還可以看到「玻璃」器物表面會(huì)略帶一些周圍環(huán)境的鏡像。并且與表面視角越大，「玻璃」上的鏡像就越醒目，這是由于視角越大，全反射現(xiàn)象越明顯。
- 光線在由一種透明介質(zhì)進(jìn)入另一種透明介質(zhì)時(shí)，在界面處光線方向會(huì)發(fā)生偏折，形成折射現(xiàn)象。光線入射角越大，折射現(xiàn)象就越明顯。故觀看彎曲「玻璃」 表面時(shí)會(huì)覺(jué)得穿過(guò)「玻璃」的像變形了。折射現(xiàn)象是全反射現(xiàn)象的原因。光的折射也會(huì)導(dǎo)致焦散現(xiàn)象。并且，由于「玻璃」對(duì)不同波長(zhǎng)的光線折射率不同，光線穿過(guò) 「玻璃」后也可能發(fā)生色散、色差現(xiàn)象。不同的透明物體有不同的折射率，折射率越大則折射現(xiàn)象越明顯。為什么大家普遍覺(jué)得鉆石比玻璃好看？原因是鉆石的折射 率更大，因此看起來(lái)更晶瑩剔透（全反射現(xiàn)象更明顯），并且對(duì)著光線看起來(lái)是五彩繽紛的（色散現(xiàn)象更明顯）。
后一排左一物體的材質(zhì)，在很多白色家電上可以看到，類似的還有光滑的瓷磚、木地板等等，iPhone 4 的前、背面面板也類似這樣。這種材質(zhì)很像漫反射物體表面材質(zhì)，不過(guò)卻隱約能看到物體表面類似鏡面反射那樣，帶有環(huán)境鏡像。這通常是由于這樣的物體表面實(shí)際 上有兩層，下面的那層材質(zhì)特性類似于漫反射材質(zhì)，在漫反射層上面有一個(gè)很薄的光滑、透明表層，可以令大部分光線透過(guò)這一層，照射到下面的漫反射層。不過(guò)透 明層本身會(huì)將照射過(guò)來(lái)的少許光線反射回去。這樣的物體材質(zhì)視覺(jué)特性看起來(lái)，兼?zhèn)渎瓷浜顽R面反射的特性：
- 和漫反射材質(zhì)類似，光線打到物體上時(shí)會(huì)使物體表面不同部位形成明暗對(duì)比，并略微受環(huán)境光的影響。
- 和鏡面反射材質(zhì)類似，物體表面會(huì)隱約形成周圍環(huán)境的鏡像，并且這個(gè)像會(huì)由于物體表面不平坦而發(fā)生畸變。
后一排左二是粗糙金屬材質(zhì)，類似于一些金屬欄桿把手，MacBook 鋁合金外殼這樣的。這樣的材質(zhì)看起來(lái)既不像光滑金屬鏡面表面，又不像漫反射材質(zhì)，有這些特點(diǎn)：
- 和漫反射物體材質(zhì)在受光源照射后，形成柔和的明暗過(guò)渡不同的是，粗糙金屬材質(zhì)在受光線照射后，會(huì)在對(duì)著光源處形成一個(gè)很亮的光斑，亮斑周圍部分的亮度迅速衰減。
- 亮斑大小取決于材質(zhì)的粗糙程度，越粗糙亮斑越大，越細(xì)膩亮斑越小，完全光滑時(shí)表面即為鏡面反射材質(zhì)，亮斑變?yōu)橐粋€(gè)小而清晰的光源鏡像。
- 亮斑較容易在表面曲率變化較大的地方「囤積」。
- 物體材質(zhì)相對(duì)于漫反射材質(zhì)而言，受周圍環(huán)境影響更多一些。但不會(huì)像鏡面反射材質(zhì)那樣，形成清晰的環(huán)境鏡像。
最后一個(gè)材質(zhì)有些意思，因?yàn)楣饩€打到這個(gè)材質(zhì)上時(shí)，不會(huì)一下子全都反射出來(lái)，也不會(huì)一下子全進(jìn)入物體內(nèi)部，而是有一部分光線被表面反射出來(lái)，進(jìn)入物 體內(nèi)部的光線則在物體內(nèi)部傳播，但由于物體材質(zhì)的微觀物理特性，傳播時(shí)發(fā)生了散射現(xiàn)象，被散射到各個(gè)方向。有的光線散射后繼續(xù)朝物體內(nèi)部傳播，有的光線則 在散射后角度發(fā)生很大的偏折，返回射出物體表面。這樣，使得一些光線雖然能夠透過(guò)物體，但物體看起來(lái)不像玻璃那樣晶瑩剔透，而是顯得里面是「混沌」的。這 樣的物體非常多，生活中很多有機(jī)物都有類似這樣的光學(xué)特性，比如人的皮膚、蠟燭、大多數(shù)塑料、象牙、凝膠；另外，像瓷器、玉石這樣的無(wú)機(jī)物也有類似特征。
舉些例子說(shuō)明一下，比如下圖的人手，可以看到背著光線觀察時(shí)會(huì)看到有光線穿透了人手內(nèi)部，尤其是在手指縫這樣的邊緣處最明顯：
最極端點(diǎn)的例子是氣凝膠，一種內(nèi)部微觀結(jié)構(gòu)呈泡沫狀，密度極低的固體。光線進(jìn)入后會(huì)發(fā)生充分的散射：
再同上面給出的材質(zhì)案例，可以歸納這樣的材質(zhì)的視覺(jué)特點(diǎn)：
- 背對(duì)光源觀看時(shí)，相對(duì)于漫反射材質(zhì)來(lái)說(shuō)，這樣的材質(zhì)在光源照射下，明暗面過(guò)渡更加柔和，明暗對(duì)比更不顯著。并且物體邊角處較暗，是因?yàn)楣饩€打在邊角處更容易穿透材質(zhì)射出。
- 迎著光源觀看時(shí)，可看到邊角處更亮一些，原因同上，邊角處打過(guò)來(lái)的光線更容易透過(guò)物體，被后面的人看到。
- 物體內(nèi)部對(duì)不同波長(zhǎng)的光線散射、吸收能力不同。如人手內(nèi)部的皮膚、肌肉組織會(huì)令紅色光線更容易透過(guò)，光線通過(guò)氣凝膠內(nèi)部時(shí)則會(huì)發(fā)生瑞利散射顯現(xiàn)出藍(lán)光（天空是藍(lán)色的原因與之類似）。
這六種差不多就是生活中最常見(jiàn)的材質(zhì)了。知道關(guān)于材質(zhì)的基本知識(shí)后，下面，根據(jù)上面這些，簡(jiǎn)單說(shuō)一下用 AI 怎么表現(xiàn)這樣的材質(zhì)。這里以最簡(jiǎn)單的兩個(gè)材質(zhì)——漫反射材質(zhì)和粗糙金屬材質(zhì)來(lái)說(shuō)明：
上面的是漫反射材質(zhì)的球體，下面的是粗糙金屬材質(zhì)的（是的，如果周圍沒(méi)有別的物體，背景不太亮，只有一個(gè)光源，看起來(lái)差不多就是這個(gè)樣子的）。
用 AI 畫出上面的漫反射材質(zhì)球用了兩個(gè)矢量對(duì)象，一個(gè)矢量對(duì)象是球體本身，另一個(gè)矢量對(duì)象是陰影。球體本身就是一個(gè)簡(jiǎn)單的正圓了，陰影是一個(gè)旋轉(zhuǎn)后的橢圓。
球體本身是這樣表現(xiàn)的：有兩個(gè)填充層，填充顏色均為徑向漸變。下面的一層表現(xiàn)主體的明暗效果，上面的一層表現(xiàn)被地面反射的光線略微照亮的效果：
陰影依然是靠一個(gè)徑向漸變來(lái)實(shí)現(xiàn)的，并加了一個(gè)高斯模糊，來(lái)更準(zhǔn)確模擬陰影的層次感：
在這里要說(shuō)一句，AI 中，使物體邊緣「模糊」的方法有兩個(gè)外觀效果：一個(gè)是羽化，一個(gè)是高斯模糊。如果要是希望模擬陰影效果的話，除非有特殊原因，應(yīng)始終使用高斯模糊效果。因?yàn)楦咚鼓：Ч扔鸹哪欠N線性過(guò)渡效果，模擬陰影來(lái)的更真實(shí)一些。
上面是漫反射材質(zhì)的表現(xiàn)手法，再說(shuō)一下粗糙金屬材質(zhì)如何用 AI 表現(xiàn)，其實(shí)大同小異。不過(guò)，這回需要三個(gè)矢量對(duì)象，分別表現(xiàn)球體本身、高光「光斑」和陰影：
高光光斑是一個(gè)純白色，旋轉(zhuǎn)后的橢圓，加了一個(gè)高斯模糊效果。陰影部分和漫反射材質(zhì)球體的陰影一致。這些很簡(jiǎn)單。球體部分和漫反射球體類似，依然是用兩個(gè)填色層來(lái)表示，一個(gè)填色層為球體的主體顏色，一個(gè)填色層模擬地面反光：
球體主體顏色需要較漫反射材質(zhì)球體的要更暗一些，并且明暗變化要更小；地面反光要較漫反射球體材質(zhì)更亮一些。
以上就是不同材質(zhì)的特性和用 AI 來(lái)表現(xiàn)材質(zhì)的基礎(chǔ)知識(shí)。用今天的內(nèi)容差不多就這些了，希望大家學(xué)習(xí)愉快～
原文地址：zhangboning.me
作者：@張泊寧研究所
原文來(lái)自：優(yōu)設(shè)網(wǎng)
使用AI做UI設(shè)計(jì)系列教程系列
- 目前還沒(méi)評(píng)論，等你發(fā)揮！
