新的立體感又有別樣的不同,擬物并不需要玩得太認真,傳遞出某種空間感,并不逼真,也一定能凹凸有致。版權(quán)申明:本教程為我的原創(chuàng)博文,文章出處請點擊此處。如有轉(zhuǎn)載需要請?zhí)崆芭c我聯(lián)系!謝謝!前言扁平化讓我們拋棄了立體
標志logo設(shè)計評估指數(shù):82
品牌vi設(shè)計評估指數(shù):77
新的立體感又有別樣的不同,擬物并不需要玩得太認真,傳遞出某種空間感,并不逼真,也一定能凹凸有致。
版權(quán)申明:本教程為我的原創(chuàng)博文,文章出處請點擊此處。如有轉(zhuǎn)載需要請?zhí)崆芭c我聯(lián)系!謝謝!
前言
扁平化讓我們拋棄了立體感,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)整,前者的曲柄較長,后者較短。
你可以看到我的臨摹線條中有些并不按草圖來畫,這是由于為了讓邊緣更準確,我決定全部畫好后再來裁掉超出的部分,由于形狀間有重疊的層次關(guān)系,這是在AI中繪制重疊部分常用的方法。
處理形狀細節(jié)
除非是用形狀工具畫出,否則用鋼筆工具多少都會有點手動的痕跡,這時細節(jié)的處理就顯得特別重要。
STEP 04
將不同的形狀分別先填充各種純色,加以區(qū)分,這一步并不是填色,只是利用顏色對這些形狀加以區(qū)分,以便更精準地將邊緣處理得更為平滑流暢。
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é)者對于漸變的角度很難理解,其實原理很好把握,貼近球體的邊緣由于是背后我們看不見的形狀的順延,因此嚴格上說這里不可能出現(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è)計,給人以一種翻新的立體感。