前言
扁平化讓我們拋棄了立體感，Google的material design又朝立體感做了一次小小的回歸。潮流千變?nèi)f化，不外乎都在味口的翻新，但新的立體感又有別樣的不同，擬物并不需要玩得太認(rèn)真，傳遞出某種空間感，并不逼真，也一定能凹凸有致。這一次，我們來(lái)學(xué)習(xí)繪制一枚LOGO，這個(gè)LOGO的構(gòu)思是一個(gè)球體，拿出你的三維想象空間來(lái)，經(jīng)過(guò)細(xì)致刻畫(huà)就能產(chǎn)出立體感。早期的立體感有凸有凹，有紋理，有漸變，有投影，有高光……你可以在現(xiàn)實(shí)中找到的細(xì)節(jié)都有了，新的立體主義好像蛻變了一次，和現(xiàn)實(shí)保持距離，又不會(huì)脫離現(xiàn)實(shí)。
草圖構(gòu)思和臨摹
STEP 01
先在草圖上試著畫(huà)一個(gè)球體，這時(shí)你可以略敞開(kāi)想象，盡量多一些曲線(xiàn)波浪感，有種蕩漾的動(dòng)態(tài)美感。和太極類(lèi)似，因此我把它起名叫“太極球”。
STEP 02
把你的草圖導(dǎo)入到AI中進(jìn)行臨摹繪制。這一步主要是區(qū)別不同的層次，我們這里安排的每個(gè)部分的配色并不相同，因此在繪制時(shí)要多加留意。打開(kāi)AI，新建文檔600px*600px，矢量文檔的大小其實(shí)并不十分重要，可以在小文檔中做好后再調(diào)大都可以，這樣會(huì)減輕電腦的負(fù)擔(dān)。
STEP 03
導(dǎo)入草圖，根據(jù)草圖的線(xiàn)條軌跡，利用鋼筆工具進(jìn)行繪制。繪制的過(guò)程需要注意兩點(diǎn)，第一是線(xiàn)條的流暢度，第二是所繪制的路徑的層次。因此，線(xiàn)條的流暢度就需要合理安排每個(gè)錨點(diǎn)的位置和曲率，一般來(lái)說(shuō)，比較平滑的地方，錨點(diǎn)分布較疏遠(yuǎn)，相對(duì)彎曲的地方錨點(diǎn)就密集，曲率的曲柄長(zhǎng)短也相應(yīng)有調(diào)整，前者的曲柄較長(zhǎng)，后者較短。
你可以看到我的臨摹線(xiàn)條中有些并不按草圖來(lái)畫(huà)，這是由于為了讓邊緣更準(zhǔn)確，我決定全部畫(huà)好后再來(lái)裁掉超出的部分，由于形狀間有重疊的層次關(guān)系，這是在AI中繪制重疊部分常用的方法。
處理形狀細(xì)節(jié)
除非是用形狀工具畫(huà)出，否則用鋼筆工具多少都會(huì)有點(diǎn)手動(dòng)的痕跡，這時(shí)細(xì)節(jié)的處理就顯得特別重要。
STEP 04
將不同的形狀分別先填充各種純色，加以區(qū)分，這一步并不是填色，只是利用顏色對(duì)這些形狀加以區(qū)分，以便更精準(zhǔn)地將邊緣處理得更為平滑流暢。
STEP 05
當(dāng)兩個(gè)閉合路徑有相交的部分，想要?jiǎng)h掉它們不相交的部分，只需要選擇這兩個(gè)路徑，運(yùn)用形狀生成工具點(diǎn)擊這個(gè)不相交的部分，再點(diǎn)擊刪除鍵即可。
按照上兩個(gè)細(xì)節(jié)處理的步驟，耐心地將路徑邊緣處理得更為平滑流暢。
漸變配色
STEP 06
對(duì)球體的配色我們選擇的是漸變配色，漸變的顏色會(huì)讓整體效果顯得更立體，但是這里一定要控制的漸變里的色彩搭配。在這個(gè)案例中，我想用的漸變色并不一定要根據(jù)實(shí)際情況，而采用一種幻想式配色。按照真實(shí)的球體來(lái)說(shuō)，它的表面漸變是具有一定規(guī)律的，但在此我想打破這個(gè)規(guī)律，變得較為夢(mèng)幻的自由自在式。
顏色控制在三種顏色，紅、紫、綠，紫和綠的過(guò)渡會(huì)透出藍(lán)色，而紅和紫也會(huì)過(guò)渡出一種紫紅，這時(shí)，綠色是作為較明亮的部分呈現(xiàn)的，因此，綠色略微偏黃色可以用在迎著光源的部分。
STEP 07
配色調(diào)好后，可以將這一排矩形垂直放置于側(cè)邊，這樣你就能根據(jù)每個(gè)部分不同的需要利用吸管工具吸取不同的漸變色塊。
STEP 08
從第一塊形狀下手，運(yùn)用吸管工具吸取你認(rèn)為合適的漸變配色，然后運(yùn)用漸變工具調(diào)整方向，漸變的角度等。這里需要注意的是，立體主義的第一步就是確定光源，在此我把光源定位于斜上方，因此那些在配色中你安排為較亮的部分就應(yīng)該迎向光源，相應(yīng)的，那些被遮擋的部分就要顯得更暗。
增加陰影層次
我的草圖里有些線(xiàn)條并沒(méi)有在臨摹中畫(huà)出來(lái)，其實(shí)這些是陰影的邊緣。在這一步，我們可以開(kāi)始做一些路徑與路徑之間的重疊陰影關(guān)系，創(chuàng)造更豐富的視覺(jué)層次。
STEP 09
選擇上一層的形狀，進(jìn)入【對(duì)象>路徑>偏移路徑】，在彈出的面板中設(shè)置位移為20px，這個(gè)參數(shù)可以根據(jù)實(shí)際需求進(jìn)行調(diào)整。
STEP 10
調(diào)整上一步所位移的形狀，采用STEP 05的生成形狀工具來(lái)刪掉不必要的部分，再用鋼筆工具調(diào)整形狀的邊緣細(xì)節(jié)。調(diào)整好后將填色改為黑色，圖層混合模式改為“疊加”，透明度為20%。
采用同樣的方式，處理球體表面下方兩處的陰影部分。其他陰影的透明度根據(jù)現(xiàn)實(shí)環(huán)境稍微調(diào)整也是可以的。
STEP 11
再來(lái)看球體的內(nèi)部，內(nèi)部由于設(shè)計(jì)為鏤空，因此也具有一定的空間關(guān)系。新立體主義的方式就是創(chuàng)建陰影，但不較真。
這里的投影可以采用復(fù)制圖層的辦法來(lái)創(chuàng)建陰影，選擇兩個(gè)形狀復(fù)制粘貼，再點(diǎn)擊路徑查找器的“交集”后就能形成一個(gè)陰影。為了詳細(xì)說(shuō)明，大家可以查看圖示中的方式。
將所有中間鏤空空間里你認(rèn)為應(yīng)該添加陰影的部分都繪制完成，我在這里并不認(rèn)為一定要按照3D的法則來(lái)做，大家可以自由隨意展開(kāi)創(chuàng)作。
創(chuàng)建高光
高光也是立體感創(chuàng)作非常重要的一部分，高光有可能是光源的直接投射，也有可能是環(huán)境光的反射，這里首先要?jiǎng)?chuàng)建的是邊緣的高光，這是增加“厚度”的關(guān)鍵。
邊緣高光的建立也同樣采用偏移路徑的方法，只是這次由于是要針對(duì)邊緣做處理，因此需要多增加一個(gè)步驟。
STEP 12
同樣從第一個(gè)形狀入手，先復(fù)制這個(gè)形狀，然后將復(fù)制層運(yùn)用偏移路徑，位移設(shè)置為-1px，選擇偏移后的路徑與原有的形狀，利用路徑查找器的“減去頂層”，產(chǎn)生出新的邊緣形狀，給這個(gè)形狀填充白色漸變（透明度從100%漸變過(guò)渡到0%），圖層混合模式改為柔光。
采用同樣的方法給其他的形狀給添加上這樣的邊緣高光。在填充白色漸變的時(shí)候，初學(xué)者對(duì)于漸變的角度很難理解，其實(shí)原理很好把握，貼近球體的邊緣由于是背后我們看不見(jiàn)的形狀的順延，因此嚴(yán)格上說(shuō)這里不可能出現(xiàn)一種“厚度”，因此這里的白色高光就為不可見(jiàn)，也即白色填充的透明度為0。
STEP 13
再給整個(gè)球體增加一層大的高光，這時(shí)采用橢圓工具，畫(huà)上兩個(gè)白色的圓。然后對(duì)其運(yùn)用【效果>模糊>高斯模糊】，模糊半徑為20px。
利用STEP 11里介紹的類(lèi)似方法，我們要保留這兩個(gè)模糊后的高光，但又不想它溢出球體，因此我們只需要選擇球體里的最大面積的那塊形狀進(jìn)行復(fù)制，然后和高光做一次交集，對(duì)嗎？
STEP 14
將這一步所添加的高光形狀的透明度降低至60%，圖層混合模式設(shè)置為柔光。此時(shí)的效果如下。
末尾細(xì)節(jié)
到了這一步整個(gè)球體就繪制完成了，這時(shí)我還可以給它增加一個(gè)投影，讓立體感更突出。繪制一個(gè)長(zhǎng)形橢圓，橢圓填充一個(gè)徑向的黑色漸變（黑色從透明度100%過(guò)渡到0%）。給這個(gè)橢圓運(yùn)用高斯模糊，模糊半徑為8,將透明度降至68%。
再給這個(gè)球體增加一個(gè)漸變背景，謝幕。
后記
抽象的太極球是比較容易繪制的，因?yàn)榛旧夏阒恍枰莆盏胶?jiǎn)單的層次關(guān)系，處理好平滑邊緣和陰影即可，所以，即使是具象到物，你也可以將其簡(jiǎn)化成類(lèi)似的球體進(jìn)行操作，或者不一定是球體，整體形狀上符合流線(xiàn)型的造型風(fēng)格，都可以采用這個(gè)辦法。在設(shè)計(jì)海報(bào)、LOGO、icon時(shí)，作為焦點(diǎn)處的設(shè)計(jì)，給人以一種翻新的立體感。
Via: ifeiwu
