今天我們就來了解等距立體風(fēng)格風(fēng)格,，并和大家一起動(dòng)手繪制一張等距立體風(fēng)格的插畫

前言

以前曾經(jīng)寫過一篇關(guān)于立體風(fēng)格的文章，那時(shí)剛接觸到這類風(fēng)格,，還沒有一個(gè)全面的總結(jié),。嚴(yán)格說，經(jīng)過一段時(shí)間了解,，現(xiàn)在比較正式的稱呼是“等距立體風(fēng)格”（isometric style),，今天我們就來了解這類風(fēng)格，并和大家一起動(dòng)手繪制一張等距立體風(fēng)格的插畫,。

靈感來源

建立輔助網(wǎng)格的方法是在YOUTUBE上刷到的,，覺得非常實(shí)用。插畫本身是來自自己的想像,。

提示：本文有8個(gè)小視頻,，有更為詳細(xì)的步驟詳細(xì)講解，高清無廣告,，有興趣的可進(jìn)入原文鏈接

一,、什么是等距立體風(fēng)格

等距立體風(fēng)格，在英文中被叫做isometric style,。這類風(fēng)格最早是在像素畫當(dāng)中運(yùn)用的,，由于像素畫的特點(diǎn)是由一個(gè)個(gè)方格（像素）構(gòu)成，因此利用這種“堆疊”的方式,，就像搭積木一樣的思維,，就能呈現(xiàn)各種場景。在很多懷舊版的小游戲中,，我們不難發(fā)現(xiàn)這類設(shè)計(jì)風(fēng)格,。

等距立體風(fēng)格幾乎可以構(gòu)建任何的場景和物象,，而且從立體繪圖的角度來說，它的繪制方式是非常簡單的,。

二,、改良的等距立體風(fēng)格

來到現(xiàn)在，早期的等距立體風(fēng)格已經(jīng)逐漸進(jìn)行了改良,。就像90年代流行的時(shí)尚，到現(xiàn)在又到了一個(gè)輪回,。但是顯然如今的這個(gè)風(fēng)格是更進(jìn)化了,。比如我們已經(jīng)看不到像素了，色彩上用上了漸變,，顯得更為細(xì)膩,。在《紀(jì)念碑谷》這款傳說“設(shè)計(jì)師必玩”的神級(jí)游戲，其場景的設(shè)計(jì)就是采用了這一設(shè)計(jì)風(fēng)格,，其效果非常驚艷,。

鑒于之前很多大神都已經(jīng)教過大家怎樣繪制紀(jì)念碑谷的場景，所以基本上這部分我們今天略過,。這篇文章的重點(diǎn)不是教給你最終的結(jié)果,，而是給你一個(gè)等距立體風(fēng)格的繪制框架，有了這個(gè)框架,，你可以繪制任意的造型,。

可能大家都覺得，這類插畫的確是不難,，尤其只是一個(gè)立方體,，在AI當(dāng)中就有3D工具一早為你準(zhǔn)備好了?？梢哉f,，剩下的工作只有填色。當(dāng)然,，這是在你繪制的場景比較簡單的時(shí)候,。例如，這些場景都是由大小不同的立方體組合而成,，其實(shí)也就是一個(gè)搭積木的過程,。但是，假如需要你加上人物呢,？或者需要有些不是標(biāo)準(zhǔn)形的造型呢,？

例如我設(shè)計(jì)的這張BANNER圖，就運(yùn)用了非標(biāo)準(zhǔn)形的人物,，這不是由標(biāo)準(zhǔn)的立方體簡單拼成的,。

三,、認(rèn)識(shí)三種形體

現(xiàn)在我們來整理一下，等距立體風(fēng)格繪制的“基本形”和“非基本形”,。眾所周知,，我們的世界都是由幾個(gè)基本的幾何形組成的：圓、矩形,、三角,。那么，其他的形,，都是這三個(gè)基本形的組合,、變形或者加減。

1,、基本形

基于這個(gè)理念,，所謂的“基本形”在立體風(fēng)格中，主要就是指：球體,、立方體,、椎體以及由于運(yùn)動(dòng)方式的不同出現(xiàn)的圓柱體和三面體。

圓形：球體（半圓的立體環(huán)繞）,、圓柱體（垂直方向的凸出結(jié)果）

矩形：立方體

三角：椎體,、三面體

這幾個(gè)基本型是可以直接得到的，通過AI工具中的3D工具,，就可以由平面的基礎(chǔ)形,，直接將其轉(zhuǎn)換為立體的基礎(chǔ)造型。在插畫中,，我們就用這些基礎(chǔ)型的來建立模型,，可以說非常方便。

2,、非基本形——字體造型

字體也是可以直接轉(zhuǎn)換成3D的,，無論是中文還是英文，無疑都可以做出比基礎(chǔ)形要復(fù)雜的視覺效果,。結(jié)合基本形,，就能構(gòu)建非常豐富的場景。

3,、非基本形——靈活物體

這里的靈活物體就是指：人物,、動(dòng)物等相對(duì)比較活躍的角色對(duì)象。在插畫中,，通常人物會(huì)扮演比較重要的角色,。人物的繪制分兩種，一種是完全按照幾何形的進(jìn)行組合,，沒錯(cuò),，人的形狀也是由幾何基本形組成,，這是一個(gè)基本的思路。比如紀(jì)念碑谷中的人物造型就相對(duì)很簡單,。

還有一種方法就是可以畫得比較靈活,，也就是無需從幾何形開始。直接繪制的前提是,，需要用到一個(gè)輔助的框架,，而我們今天就教給大家如何制作這個(gè)輔助框架，并且提供一個(gè)輔助的工具給大家下載（見附件壓縮包）,。這是一個(gè)像素比較高的等距立體的輔助線（圖片）,，可以將其直接加入進(jìn)你的項(xiàng)目里。

或者你可以直接到我的百度網(wǎng)盤下載：

鏈接：https://pan.baidu.com/s/11ckP7OGi67CFEoHir1PXxg

密碼：zbnk

四,、在AI中創(chuàng)建輔助線

STEP 01

現(xiàn)在我們來學(xué)會(huì)如何在AI中創(chuàng)建輔助線,，這一步是繪制工作的開始,。打開AI,，在新建一個(gè)1200*850px的文檔，然后點(diǎn)擊左邊工具欄中的“直線段工具”,，會(huì)有一個(gè)下拉菜單,，在菜單中選中【矩形網(wǎng)格工具】。

選中矩形網(wǎng)格工具的情況下,，鼠標(biāo)在畫板空白處雙擊,，彈出一個(gè)矩形網(wǎng)格工具選項(xiàng)設(shè)置面板。其中高度和寬度分別設(shè)置為1000px,，水平/垂直分隔線的參數(shù)設(shè)置為50,。這就建立起了我們的矩形網(wǎng)格。

STEP 02

選中這個(gè)矩形網(wǎng)格,，點(diǎn)擊右鍵,，進(jìn)入【變換>縮放】。在彈出的參數(shù)面板中,，選擇“不等比”的選項(xiàng),，并且將垂直這一欄中的參數(shù)改為86.602。這個(gè)數(shù)值是經(jīng)過幾何形嚴(yán)格計(jì)算的,，盡量不要任意調(diào)整它,。

STEP 03

然后再次進(jìn)入【變換>傾斜】，在傾斜的角度參數(shù)中,，設(shè)置為30°,。

STEP 04

進(jìn)入【變換>旋轉(zhuǎn)】，在旋轉(zhuǎn)的角度中設(shè)置為-30°,。到這一步,，這個(gè)矩形網(wǎng)格的變換就完成了,。

STEP 05

選中這個(gè)矩形網(wǎng)格，進(jìn)入【視圖>參考線>建立參考線】,，這樣參考線保持不可編輯的狀態(tài),，就讓接下的繪制過程有章可尋。

五,、建立基礎(chǔ)形——構(gòu)建場景

STEP 06

給這個(gè)場景造物,，最重要的是把握好需要哪些基礎(chǔ)形。我在此之前就畫好了草圖,，由于是隨便畫畫,，圖比較粗糙，目的是找到最基本需要的形體,。

STEP 07

立方體的做法很簡單,，先繪制一個(gè)矩形，這個(gè)矩形可以填充灰色,。此時(shí)是構(gòu)形階段,，不需要考慮色彩。

選中矩形進(jìn)入到【效果>3D>凸出和斜角】,，在彈出的3D工具面板中,，將位置設(shè)置為【等角-上方】，然后將厚度設(shè)置到600以上,，以確保立方體的高度可以超過畫面底部,。

STEP 08

做好的立方體放在合適的位置上，注意這時(shí)不要擴(kuò)展,，依然可以改變立方體在寬度和長度的值,，高度已由3D工具面板中的厚度進(jìn)行了設(shè)置，所以不能更改,。（注意下圖中的黑色邊框?yàn)楫嫲宓倪吘壩恢茫?/p>

STEP 09

再增加其他的形體,，這里的一片薄薄的呈現(xiàn)立體效果的矩形，也是采用3D工具實(shí)現(xiàn),，只是在STEP 07的操作基礎(chǔ)上,，將厚度的值設(shè)置為0.

六、可以在這一步開始填色

填色可以在所有細(xì)節(jié)都完成后再開始,，但是在此處也可以就從這一步開始,。因?yàn)椋A(chǔ)形的色彩就能定下最基本的配色,，接下的細(xì)節(jié),，也就是在這基礎(chǔ)上的增加調(diào)整。

STEP 10

這里我準(zhǔn)備采用漸變色來進(jìn)行填色,，首先建立起三個(gè)漸變填色色板,。這里我用矩形來建立色板,。

然后一一對(duì)基礎(chǔ)形進(jìn)行【擴(kuò)展外觀】并且【取消編組】，以便于進(jìn)行填色,。

開始填色時(shí),，要不時(shí)調(diào)整漸變的方向，考慮整體的效果,。

七,、增加細(xì)節(jié)的豐富性

STEP 11

增加細(xì)節(jié)從右至左，其中右邊的部分,，可以在原有的形狀進(jìn)行復(fù)制,，并重新組合。

改變某些形狀的透明度和混合模式,。

STEP 12

在給建筑體增加“窗戶”的時(shí)候,，注意要利用到參考線。

利用到形狀生成工具,、3D工具增加新的形狀,，豐富原有建筑體的細(xì)節(jié)。

八,、繪制人物角色

人物繪制和普通的平面差別不大,。不需要刻意表現(xiàn)陰影高光,，由于人物非常小,，所以只保留最基本的形狀即可。

需要注意的是下面幾點(diǎn)(視頻中會(huì)具體的講解):

1,、表現(xiàn)人體的基本形要把握

2,、四肢可以用鋼筆工具來表現(xiàn)

3、人物的色彩可以是平涂

4,、從立體的角度來看,，人物的上半部分會(huì)稍微大一點(diǎn)

STEP 12

繪制出第一個(gè)人物，其中注意的是人物的方向,，和立體造型應(yīng)該有的特征,。

STEP 13

其余的人物繪制，根據(jù)他們的動(dòng)作不同來安排形狀,。但是基本的規(guī)則是相同的,。

九、光影的細(xì)節(jié)調(diào)整

光影細(xì)節(jié)的完善,，可以充分自由的發(fā)揮,。

STEP 14

給人物、建筑增加光感,，運(yùn)用外發(fā)光和投影來突出焦點(diǎn)所在,，并增加細(xì)節(jié),。

要注意的是：

1、光感的效果要盡量改變透明度,、混合模式來實(shí)現(xiàn)

2,、焦點(diǎn)的部分的細(xì)節(jié)要比其他部分的細(xì)節(jié)更深入

3、AI中的色彩,、尺寸都可以在做好之后再調(diào)整

4,、跟隨自己的感覺走

結(jié)尾：WOW~終于做完了長篇

這篇文章比較長，文字當(dāng)中,，特別是繪制的過程部分,，我都在視頻里講到了。文字就省略了,。繪制插畫基本上就是一磚一瓦的過程,，還好我比較享受這個(gè)過程。所以花了兩天時(shí)間來做了視頻,，把整個(gè)過程錄制了下來,，并且一路解說。

每次做一篇文章,，要準(zhǔn)備的東西都不簡單,，這是我第一次準(zhǔn)備一篇這么長的操作類文章，以后,，我想每篇操作類的文章,，我都會(huì)盡量全面一點(diǎn)。蜻蜓點(diǎn)水的閱讀方式雖然輕松,，但是也相比吸收率很小,。我希望能在每一次交流，都能比較深入的去了解一種風(fēng)格,。

這是我學(xué)習(xí)的過程,，同樣也希望能和你一路同行。