使用AI做UI設(shè)計系列教程:效果、外觀面板和質(zhì)感表現(xiàn)(中)

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