矢量插畫(huà)：通過(guò)攝影作品學(xué)習(xí)建筑的空間語(yǔ)言

前言

攝影作品一直以來(lái)都是插畫(huà)創(chuàng)作的好素材，通過(guò)一張攝影作品來(lái)創(chuàng)作插畫(huà)，不僅可以滿(mǎn)足我們對(duì)素材的自由創(chuàng)作程度，還能通過(guò)創(chuàng)作過(guò)程又一次學(xué)會(huì)攝影作品中傳達(dá)出的視覺(jué)技巧，比如通過(guò)描摹人像，你能學(xué)會(huì)人像的基本輪廓弧線和光影技巧，之前我曾經(jīng)寫(xiě)過(guò)《字母人像插畫(huà)組合視覺(jué)造型》，就是一次小小的嘗試。這一次，我又找到一張建筑的圖片，通過(guò)建筑的照片，學(xué)會(huì)空間的視覺(jué)表達(dá)語(yǔ)言，尤其是透視的運(yùn)用技巧，也算是另一種新的體驗(yàn)。

最后的效果如下，我個(gè)人認(rèn)為是很不錯(cuò)的一種學(xué)習(xí)方法。要學(xué)會(huì)自由創(chuàng)作，首先就是要積累足夠多的素材，把它們都印刻在心。這不是靠死記硬背，最有效的方法仍然是直接動(dòng)手實(shí)踐，在做的過(guò)程中去感受身邊你一直忽略的細(xì)節(jié)表現(xiàn)。

一、首先學(xué)會(huì)觀察作品

我們對(duì)靈感來(lái)源的要求不需要太高，基本能看清晰就行，這是我從花瓣上找到的一張靈感來(lái)源的圖片。

這張圖吸引我的主要是下面三條：

• 1、顏色：橙色和藍(lán)色的對(duì)比搭配，簡(jiǎn)練干凈（很容易在矢量繪制時(shí)實(shí)現(xiàn)）
• 2、構(gòu)圖：兩分的，斜向上的建筑體，本身的結(jié)構(gòu)比較容易繪制，如果是中世紀(jì)的教堂這樣的建筑，由于表面裝飾較多，繪制就會(huì)變得很復(fù)雜。
• 3、光影關(guān)系：陽(yáng)光里的建筑是能表現(xiàn)出非常強(qiáng)烈的立體感，尤其是光線照射的位置和陰影處的分界明顯，運(yùn)用形狀就能滿(mǎn)足這對(duì)關(guān)系的對(duì)比。

在開(kāi)始動(dòng)手繪制前，還是要高能提醒一下大家：畫(huà)照片不是要完全模擬照片里的實(shí)物，而是學(xué)會(huì)它傳遞出來(lái)的空間信息：透視、結(jié)構(gòu)、色彩、光影……等等。比如在這里，照片中的建筑體表面的紋理，我們?cè)谑噶孔鳟?huà)時(shí)可以不需要呈現(xiàn)。

有興趣可以看看我制作的這個(gè)視頻：

【視頻：什么樣的照片是插畫(huà)創(chuàng)作的優(yōu)質(zhì)來(lái)源？】

二、開(kāi)始畫(huà)出大體結(jié)構(gòu)

STEP 01

打開(kāi)AI，新建一個(gè)文檔，這個(gè)文檔的大小其實(shí)可以隨意，我喜歡以長(zhǎng)寬1600px開(kāi)始，如果畫(huà)板需要調(diào)整可以再次伸縮。

在正式開(kāi)始繪制前，首先確定要畫(huà)對(duì)象的透視參考線。由于建筑是基于立體空間的存在對(duì)象，因此透視的法則在繪制過(guò)程中需要全方位的考慮到。大家觀察靈感的原圖就會(huì)找到基于立體的三維軸線（在這里，我們用X,Y,Z軸來(lái)表達(dá)）。

只要找準(zhǔn)了三條軸線，畫(huà)面當(dāng)中的元素就可以經(jīng)由這三條軸線來(lái)進(jìn)行繪制。

STEP 02

先繪制出外邊框，邊框線的粗細(xì)為0.25pt即可。然后將我們?cè)谏弦徊街杏^察到的X,Y,Z軸用直線工具畫(huà)出來(lái)，然后將我們畫(huà)出的三條直線選中，單擊鼠標(biāo)右鍵，選擇【建立參考線】。這時(shí)的三條線就變?yōu)榱烁吡了{(lán)綠色。

在畫(huà)這三條線時(shí)，可以利用原有的圖片進(jìn)行參考，也可以直接徒手畫(huà)，不一定要完全匹配。另外，參考線是可以進(jìn)一步進(jìn)行編輯的，所以畫(huà)好后注意不要隨意更改它的方向，最好就是將其進(jìn)行鎖定，需要時(shí)再解鎖進(jìn)行調(diào)整。所以在這里我們將這個(gè)圖層進(jìn)行鎖定，接下就在新的圖層里開(kāi)始繪制。

STEP 03

開(kāi)始繪制建筑的大形輪廓，也是采用線框的方式進(jìn)行表現(xiàn)即可，先繪制輪廓，然后才進(jìn)行填色。線框的粗細(xì)保持0.25pt。

這時(shí)要靈活運(yùn)用的是透視參考線，根據(jù)照片中XYZ軸提供的方向參考，建立起透視原則。如果對(duì)空間透視法則不是太清晰的小伙伴，可以查看相關(guān)書(shū)籍，或者模擬著原照片提供的空間關(guān)系進(jìn)行臨摹。

三、給大形上色

這一次，我們可以首先就開(kāi)始進(jìn)入上色，確定好色彩的關(guān)系。

STEP 04

我給整個(gè)畫(huà)面定下的色彩基調(diào)是偏橙紅色的，和原片中的暖橙不太一樣。背景的藍(lán)色也需要仔細(xì)考究。這里的橙紅色系，我用了三個(gè)不同的顏色分別來(lái)表現(xiàn)淺色、中間色和深色。

四、細(xì)節(jié)的塑造

最重要的部分開(kāi)始了，我們接下就要進(jìn)行細(xì)節(jié)的繪制。細(xì)節(jié)我們從左往右開(kāi)始畫(huà)起。細(xì)節(jié)的用色相較于大形是比較豐富的，但是只要把握好基本的透視法則和配色原則，整個(gè)畫(huà)面的完成應(yīng)該是非常簡(jiǎn)單的。

STEP 05

首先我們來(lái)繪制最左邊建筑的窗戶(hù)，窗戶(hù)在這里表現(xiàn)出的并不是一個(gè)完整的矩形，而是光線照射過(guò)來(lái)出現(xiàn)的窗戶(hù)的陰影部分，也就是運(yùn)用暗色進(jìn)行描繪。繪制過(guò)程中需要參考線的全程輔助。

其中一個(gè)窗戶(hù)的畫(huà)法是從一個(gè)矩形開(kāi)始，然后再?gòu)?fù)制一個(gè)矩形，通過(guò)矩形間交疊的形狀獲取我們想要的最終形狀。然后將單個(gè)窗戶(hù)進(jìn)行復(fù)制，在參考線的幫助下排列在適合的位置。

STEP 06

然后補(bǔ)齊這部分的所有窗戶(hù)的細(xì)節(jié)部分，我們?cè)谏弦徊揭呀?jīng)制作了第一排窗戶(hù)，下面的也就通過(guò)復(fù)制完成簡(jiǎn)單的變形即可。

STEP 07

下一個(gè)細(xì)節(jié)，也是最左邊這棟建筑的下半部分，這是一個(gè)凸出的小屋檐，造型比較復(fù)雜，但是組成的元素都是很簡(jiǎn)單的。我們?cè)谶@里可以從屋檐開(kāi)始進(jìn)行繪制。注意下方的圖示中邊緣線的傾斜，在我們的這組造型中很多傾斜的平行四邊形都是從矩形得到的。

STEP 08

最后不要忘記給屋子添加投影，這個(gè)投影的部分采用漸變的填色，會(huì)更靠近寫(xiě)實(shí)的感覺(jué)。

目前已經(jīng)完成左邊第一個(gè)建筑的細(xì)節(jié)部分：

STEP 09

左邊開(kāi)始第二個(gè)建筑體，它的細(xì)節(jié)稍微簡(jiǎn)單一點(diǎn)，首先我們來(lái)處理上面的三個(gè)窗戶(hù)的細(xì)節(jié)。做法和之前做窗戶(hù)的手法一樣，只是這里保留了窗戶(hù)玻璃的部分。

畫(huà)好了以后將這個(gè)窗戶(hù)部分垂直排放三個(gè)在第二個(gè)建筑體上。

STEP 10

第二個(gè)建筑體的前方還有一個(gè)小的突出的建筑體，它是附著在第二個(gè)建筑體前面的。這個(gè)建筑體的正前方我們已經(jīng)在做大形的時(shí)候把它畫(huà)出來(lái)了，這時(shí)只需要補(bǔ)全剩下的形狀細(xì)節(jié)就可以了。注意在每個(gè)方向上邊緣線要與畫(huà)面中同一個(gè)方向的邊緣線保持平行。

STEP 11

增加這個(gè)建筑體側(cè)面窗戶(hù)，這里的窗戶(hù)的畫(huà)法和之前的窗戶(hù)也有一些不同，因?yàn)樗鼈兊姆较虿灰粯樱枰膮⒖季€也不一樣。

STEP 12

窗戶(hù)完成后，還有窗臺(tái)的部分，窗臺(tái)是伸出來(lái)的，空間感稍微復(fù)雜一點(diǎn)。這里的確不是不可或缺的，但是為了讓細(xì)節(jié)豐富，我們把這個(gè)窗臺(tái)的部分也增加上去。

STEP 13

放置兩個(gè)窗戶(hù)在這個(gè)側(cè)面，然后為這個(gè)建筑體增加一個(gè)投影。投影的填色方式依然為漸變填色。投影上方的邊緣線可以不必和其他平面保持空間上的三維關(guān)系。

第二個(gè)建筑體的細(xì)節(jié)部分就繪制完成了。接下完成第三個(gè)建筑體的細(xì)節(jié)。

STEP 14

這個(gè)建筑體上的窗戶(hù)部分在整個(gè)畫(huà)面中都處于一個(gè)視覺(jué)焦點(diǎn)的位置，因此要注意這里的細(xì)節(jié)。

STEP 15

繼續(xù)增加向上的細(xì)節(jié)，利用相同的方式來(lái)繪制。運(yùn)用矩形的部分是窗戶(hù)的繪制，而其他的非幾何形的部分就采用鋼筆工具進(jìn)行繪制。

STEP 16

這個(gè)建筑體的右側(cè)也有很多細(xì)節(jié)，和之前所繪制細(xì)節(jié)的方法八九不離十，方法都是一樣的。

STEP 17

完善最右邊的細(xì)節(jié)，投影以及其他的墻體部分。

五、制作點(diǎn)睛之筆

STEP 18

為了讓焦點(diǎn)部分更為吸引人，我們可以給右邊的側(cè)面墻體增加一道陽(yáng)光。這里制作一個(gè)形狀在側(cè)面的墻體上，不要蓋住窗戶(hù)。也就是讓這個(gè)形狀保持在窗戶(hù)的下方，給它填充一個(gè)漸變色。漸變色兩端的顏色保持一致，只是其中一端的透明度為0。

最終效果

STEP 19

整理一下最后的細(xì)節(jié)，顏色、形狀等等，效果如下：

創(chuàng)作后記

這個(gè)練習(xí)是因?yàn)榭吹搅嗽O(shè)計(jì)師 Coen Pohl 的一組作品，就是運(yùn)用建筑照片來(lái)創(chuàng)作的建筑插畫(huà)作品，心里癢癢的，于是就筆開(kāi)始動(dòng)手。

這個(gè)過(guò)程非常愉快，因?yàn)槠鋵?shí)除了建筑本身的直接臨摹以外，還有自己發(fā)揮的余地，比如我自己加上去的陽(yáng)光，還有色彩方面的探索。原創(chuàng)本就是奔著好玩而去的，照片里的視覺(jué)信息其實(shí)很多，我們的外界其實(shí)有太多供我們學(xué)習(xí)之處。包括我們?cè)谶@個(gè)照片里看到的紋理，我這里都沒(méi)有再繼續(xù)去發(fā)揮。

建筑是我很喜歡的一種視覺(jué)形式，因?yàn)樽鳛橐曈X(jué)設(shè)計(jì)師而非建筑設(shè)計(jì)師的話，其實(shí)更多是在玩味視覺(jué)的的層面的樂(lè)趣，實(shí)用性并沒(méi)有考慮在內(nèi)，我們的角色給了我們自己最大化的輕松感。創(chuàng)作的過(guò)程始終要讓輕松自在來(lái)引導(dǎo)的。

原文地址：ifeiwu

作者：飛屋睿UIdesign