扁平化讓我們拋棄了立體感，Google的material design又朝立體感做了一次小小的回歸。潮流千變?nèi)f化，不外乎都在味口的翻新，但新的立體感又有別樣的不同，擬物并不需要玩得太認真，傳遞出某種空間感，并不逼真，也一定能凹凸有致。這一次，我們來學(xué)習(xí)繪制一枚LOGO，這個LOGO的構(gòu)思是一個球體，拿出你的三維想象空間來，經(jīng)過細致刻畫就能產(chǎn)出立體感。早期的立體感有凸有凹，有紋理，有漸變，有投影，有高光……你可以在現(xiàn)實中找到的細節(jié)都有了，新的立體主義好像蛻變了一次，和現(xiàn)實保持距離，又不會脫離現(xiàn)實。

草圖構(gòu)思和臨摹

STEP 01

先在草圖上試著畫一個球體，這時你可以略敞開想象，盡量多一些曲線波浪感，有種蕩漾的動態(tài)美感。和太極類似，因此我把它起名叫“太極球”。

STEP 02

把你的草圖導(dǎo)入到AI中進行臨摹繪制。這一步主要是區(qū)別不同的層次，我們這里安排的每個部分的配色并不相同，因此在繪制時要多加留意。打開AI，新建文檔600px*600px，矢量文檔的大小其實并不十分重要，可以在小文檔中做好后再調(diào)大都可以，這樣會減輕電腦的負擔(dān)。

STEP 03

導(dǎo)入草圖，根據(jù)草圖的線條軌跡，利用鋼筆工具進行繪制。繪制的過程需要注意兩點，第一是線條的流暢度，第二是所繪制的路徑的層次。因此，線條的流暢度就需要合理安排每個錨點的位置和曲率，一般來說，比較平滑的地方，錨點分布較疏遠，相對彎曲的地方錨點就密集，曲率的曲柄長短也相應(yīng)有調(diào)整，前者的曲柄較長，后者較短。

你可以看到我的臨摹線條中有些并不按草圖來畫，這是由于為了讓邊緣更準(zhǔn)確，我決定全部畫好后再來裁掉超出的部分，由于形狀間有重疊的層次關(guān)系，這是在AI中繪制重疊部分常用的方法。

處理形狀細節(jié)

除非是用形狀工具畫出，否則用鋼筆工具多少都會有點手動的痕跡，這時細節(jié)的處理就顯得特別重要。
 

STEP 04

將不同的形狀分別先填充各種純色，加以區(qū)分，這一步并不是填色，只是利用顏色對這些形狀加以區(qū)分，以便更精準(zhǔn)地將邊緣處理得更為平滑流暢。

STEP 05

當(dāng)兩個閉合路徑有相交的部分，想要刪掉它們不相交的部分，只需要選擇這兩個路徑，運用形狀生成工具點擊這個不相交的部分，再點擊刪除鍵即可。

按照上兩個細節(jié)處理的步驟，耐心地將路徑邊緣處理得更為平滑流暢。

漸變配色

STEP 06

對球體的配色我們選擇的是漸變配色，漸變的顏色會讓整體效果顯得更立體，但是這里一定要控制的漸變里的色彩搭配。在這個案例中，我想用的漸變色并不一定要根據(jù)實際情況，而采用一種幻想式配色。按照真實的球體來說，它的表面漸變是具有一定規(guī)律的，但在此我想打破這個規(guī)律，變得較為夢幻的自由自在式。

顏色控制在三種顏色，紅、紫、綠，紫和綠的過渡會透出藍色，而紅和紫也會過渡出一種紫紅，這時，綠色是作為較明亮的部分呈現(xiàn)的，因此，綠色略微偏黃色可以用在迎著光源的部分。
 

STEP 07

配色調(diào)好后，可以將這一排矩形垂直放置于側(cè)邊，這樣你就能根據(jù)每個部分不同的需要利用吸管工具吸取不同的漸變色塊。

STEP 08

從第一塊形狀下手，運用吸管工具吸取你認為合適的漸變配色，然后運用漸變工具調(diào)整方向，漸變的角度等。這里需要注意的是，立體主義的第一步就是確定光源，在此我把光源定位于斜上方，因此那些在配色中你安排為較亮的部分就應(yīng)該迎向光源，相應(yīng)的，那些被遮擋的部分就要顯得更暗。

增加陰影層次

我的草圖里有些線條并沒有在臨摹中畫出來，其實這些是陰影的邊緣。在這一步，我們可以開始做一些路徑與路徑之間的重疊陰影關(guān)系，創(chuàng)造更豐富的視覺層次。
 

STEP 09

選擇上一層的形狀，進入【對象>路徑>偏移路徑】，在彈出的面板中設(shè)置位移為20px，這個參數(shù)可以根據(jù)實際需求進行調(diào)整。

STEP 10

調(diào)整上一步所位移的形狀，采用STEP 05的生成形狀工具來刪掉不必要的部分，再用鋼筆工具調(diào)整形狀的邊緣細節(jié)。調(diào)整好后將填色改為黑色，圖層混合模式改為“疊加”，透明度為20%。

采用同樣的方式，處理球體表面下方兩處的陰影部分。其他陰影的透明度根據(jù)現(xiàn)實環(huán)境稍微調(diào)整也是可以的。

STEP 11

再來看球體的內(nèi)部，內(nèi)部由于設(shè)計為鏤空，因此也具有一定的空間關(guān)系。新立體主義的方式就是創(chuàng)建陰影，但不較真。
 

這里的投影可以采用復(fù)制圖層的辦法來創(chuàng)建陰影，選擇兩個形狀復(fù)制粘貼，再點擊路徑查找器的“交集”后就能形成一個陰影。為了詳細說明，大家可以查看圖示中的方式。

將所有中間鏤空空間里你認為應(yīng)該添加陰影的部分都繪制完成，我在這里并不認為一定要按照3D的法則來做，大家可以自由隨意展開創(chuàng)作。

創(chuàng)建高光

高光也是立體感創(chuàng)作非常重要的一部分，高光有可能是光源的直接投射，也有可能是環(huán)境光的反射，這里首先要創(chuàng)建的是邊緣的高光，這是增加“厚度”的關(guān)鍵。
 

邊緣高光的建立也同樣采用偏移路徑的方法，只是這次由于是要針對邊緣做處理，因此需要多增加一個步驟。
 

STEP 12

同樣從第一個形狀入手，先復(fù)制這個形狀，然后將復(fù)制層運用偏移路徑，位移設(shè)置為-1px，選擇偏移后的路徑與原有的形狀，利用路徑查找器的“減去頂層”，產(chǎn)生出新的邊緣形狀，給這個形狀填充白色漸變（透明度從100%漸變過渡到0%），圖層混合模式改為柔光。

采用同樣的方法給其他的形狀給添加上這樣的邊緣高光。在填充白色漸變的時候，初學(xué)者對于漸變的角度很難理解，其實原理很好把握，貼近球體的邊緣由于是背后我們看不見的形狀的順延，因此嚴(yán)格上說這里不可能出現(xiàn)一種“厚度”，因此這里的白色高光就為不可見，也即白色填充的透明度為0。

STEP 13

再給整個球體增加一層大的高光，這時采用橢圓工具，畫上兩個白色的圓。然后對其運用【效果>模糊>高斯模糊】，模糊半徑為20px。
 

利用STEP 11里介紹的類似方法，我們要保留這兩個模糊后的高光，但又不想它溢出球體，因此我們只需要選擇球體里的最大面積的那塊形狀進行復(fù)制，然后和高光做一次交集，對嗎？
 

STEP 14

將這一步所添加的高光形狀的透明度降低至60%，圖層混合模式設(shè)置為柔光。此時的效果如下。

末尾細節(jié)

到了這一步整個球體就繪制完成了，這時我還可以給它增加一個投影，讓立體感更突出。繪制一個長形橢圓，橢圓填充一個徑向的黑色漸變（黑色從透明度100%過渡到0%）。給這個橢圓運用高斯模糊，模糊半徑為8,將透明度降至68%。

再給這個球體增加一個漸變背景，謝幕。

后記

抽象的太極球是比較容易繪制的，因為基本上你只需要掌握到簡單的層次關(guān)系，處理好平滑邊緣和陰影即可，所以，即使是具象到物，你也可以將其簡化成類似的球體進行操作，或者不一定是球體，整體形狀上符合流線型的造型風(fēng)格，都可以采用這個辦法。在設(shè)計海報、LOGO、icon時，作為焦點處的設(shè)計，給人以一種翻新的立體感。

Via: ifeiwu