前言

扁平風(fēng)格的插畫(huà)可以是采用線來(lái)表現(xiàn)，這和大部分線性圖標(biāo)的制作方法類似，所不同的是，圖標(biāo)的規(guī)模明顯小一些，所要兼顧的圖形也要少得多。線是一種值得我們探索的圖形表現(xiàn)方式。無(wú)論是否將其進(jìn)行填色，我們都能被線條所牽引進(jìn)入到圖形本身，這給了我在設(shè)計(jì)產(chǎn)品海報(bào)時(shí)一些靈感。今天我們就和大家一起來(lái)制作這個(gè)由線條來(lái)作為主元素的圖形海報(bào)。

靈感來(lái)源

1、圖案的參考是來(lái)自 pinterest 上瀏覽到的線體插畫(huà)，基本是延續(xù)這個(gè)風(fēng)格，只是改變了線條表現(xiàn)方式，稍后我們?cè)谶^(guò)程中再重點(diǎn)提示。

2、整個(gè)海報(bào)的概念是起源我們?cè)谧?nbsp;pagepan 這個(gè)產(chǎn)品所產(chǎn)生的「積木」的聯(lián)想，這時(shí)選用了樂(lè)高積木來(lái)作為主要的創(chuàng)作重心。

學(xué)習(xí)建議

這篇文章適合那些已經(jīng)有軟件基礎(chǔ)想要進(jìn)階扁平線體插畫(huà)的小伙伴~

工具

Adobe Illustrator CC (2019)

我已經(jīng)習(xí)慣用AI來(lái)畫(huà)線條的圖案，其他軟件不熟悉也沒(méi)有深入了解。

最終效果

草圖過(guò)程

草圖是一個(gè)非常非常重要的過(guò)程，甚至它是后面所有工作的基礎(chǔ)。鑒于我們大部分人包括我自己都沒(méi)有好好對(duì)待過(guò)，所以這一次我們來(lái)彌補(bǔ)這一環(huán)節(jié)。草圖我畫(huà)了三次，每次都作部分優(yōu)化，最后成品如下。

毫不夸張，只有認(rèn)真對(duì)待草圖的創(chuàng)作過(guò)程，才是真正享受到設(shè)計(jì)的樂(lè)趣。

畫(huà)好草圖后，大家最好能從草圖進(jìn)入對(duì)圖案實(shí)現(xiàn)的分析。我們把實(shí)現(xiàn)整個(gè)圖案大致分為三個(gè)部分：

① 立體式的積木

② 設(shè)備部分

③ 背景裝飾

接下我們就分步驟來(lái)完成這些不同的圖形，要知道它是如何制作出來(lái)的。

生成立方體

這里積木的表現(xiàn)最重要的一個(gè)表現(xiàn)是：立體，并且是大家平時(shí)最常見(jiàn)的等距立體風(fēng)格。等距立體風(fēng)格，我們?cè)��?jīng)在用AI繪制3D等距立體夢(mèng)幻風(fēng)格插畫(huà)中講過(guò)其畫(huà)法以及在開(kāi)始繪制前的準(zhǔn)備工作，那么這篇文章里我們就省略分步驟的講解。

STEP 01

打開(kāi)AI，新建一個(gè)1200px*850px的文檔，然后再在這個(gè)新文檔中建立起等距立體風(fēng)格所需要準(zhǔn)備的參考線。有人問(wèn)參考線用處大不大？說(shuō)實(shí)話，因?yàn)锳I當(dāng)中有默認(rèn)的等距立體的3D轉(zhuǎn)換設(shè)置，因此基本不會(huì)差多少，主要是調(diào)整細(xì)節(jié)的時(shí)候用得上。

準(zhǔn)備好的參考線如下圖：

你可以按以下的提示操作，更詳細(xì)可以進(jìn)入用AI繪制3D等距立體夢(mèng)幻風(fēng)格插畫(huà)中查看。

1. 利用【矩形網(wǎng)格工具】，寬度/高度設(shè)置為1000，水平/垂直設(shè)置為：50

2. 選中網(wǎng)格，鼠標(biāo)右鍵，進(jìn)入【變換>縮放】，不等比的參數(shù)設(shè)置為，水平：100%，垂直：86.602%

3. 【變換>傾斜】，傾斜角度參數(shù)：30

4. 【變換>旋轉(zhuǎn)】，旋轉(zhuǎn)角度參數(shù)：-30

5. 【視圖>參考線>建立參考線】

STEP 02

要畫(huà)線體圖案，首先大家要把形體畫(huà)出來(lái)，形體是非線體的，這方便塑形，一旦形體外輪廓確定，就可以通過(guò)填充轉(zhuǎn)線條的方式做出線條圖案。

以上的思路確定好后，我們就要開(kāi)始繪制立方體。第一步，我們先畫(huà)出一個(gè)尺寸為160*68的矩形。矩形填充為灰色，關(guān)閉描邊。

對(duì)于這個(gè)尺寸我建議大家最好和我的設(shè)置相同，并且記錄一下，等下我會(huì)告訴大家為什么要這樣做。

然后選中這個(gè)矩形，進(jìn)入到【效果>3D>凸出與斜角】，將其轉(zhuǎn)為立方體。你需要改變這兩個(gè)參數(shù)設(shè)置：

• 位置：等角-右方

• 凸出厚度：68 （這個(gè)數(shù)值和你的矩形的高度一致）

位置一欄下拉選框里的「等角」開(kāi)頭的選項(xiàng)，都是適用于等距立體風(fēng)格的。

STEP 03

接下復(fù)制上一步所做的立方體，雖說(shuō)我們現(xiàn)在稱這個(gè)對(duì)象為立方體，其實(shí)它的本質(zhì)還是一個(gè)平面矩形（因?yàn)檫�沒(méi)擴(kuò)展對(duì)象），所以我們繼續(xù)改變這個(gè)平面矩形的尺寸，改變它的寬度，將其寬度從原來(lái)的160改變?yōu)?28。

這就是要求你要記住第一個(gè)矩形尺寸的原因，因?yàn)?28是從160+68得到的。由于我們這里會(huì)畫(huà)出三個(gè)等高而不等長(zhǎng)的矩形，但是我們希望它們表現(xiàn)是逐級(jí)等距增大，所以需要一個(gè)參數(shù)。有人問(wèn)這里不需要這樣計(jì)算行不行？就是看著好看但不需要數(shù)學(xué)計(jì)算可不可以，我的答案是當(dāng)然可以，但是數(shù)字的確是一個(gè)便捷控制形體的工具。

當(dāng)你把尺寸改變后，整個(gè)立方體也就是延長(zhǎng)了。用相同的方法，復(fù)制第三個(gè)，也是在228基礎(chǔ)上增加68，第三個(gè)矩形的寬度增加到296。于是我們得到想要的三個(gè)立方體如下：

STEP 04

將已有的立方體的位置進(jìn)行調(diào)整，這時(shí)需要打開(kāi)參考線，輔助將其排列成一下的樣式：

STEP 05

用STEP 02-04 的方法來(lái)做出另外一邊的立方體，所不同的是另一邊的兩個(gè)立方體，它們的尺寸分別是：

68*68

160*68

而他們?cè)谵D(zhuǎn)變?yōu)榱⒎襟w時(shí)，進(jìn)入3D工具中，位置一欄設(shè)置為【等角>上方】。當(dāng)你繪制好兩個(gè)立方體，就可以將它們拼成下面的形狀。當(dāng)右邊的兩個(gè)立方體因?yàn)閾踝∫暰�很難對(duì)齊邊緣時(shí)，可以降低它們的透明度來(lái)查看是否對(duì)齊。

這時(shí)立方體的大形體基本完成，讓我們轉(zhuǎn)戰(zhàn)制作細(xì)部。

細(xì)部：按鈕和圓孔

所謂的細(xì)部其實(shí)也就是細(xì)節(jié)的部分，這部分在這里表現(xiàn)就是一些諸如按鈕、圓孔這樣的部分。

STEP 06

我們首先來(lái)制作圓孔，其實(shí)大家可以發(fā)現(xiàn)圓孔就是一個(gè)圓，只是這個(gè)圓看上去有透視之感（所以它不是一個(gè)正圓），但基本上它沒(méi)有凸出。那么大家可以如何做呢？

你也可以用到3D工具：首先繪制一個(gè)灰色的無(wú)描邊的正圓。然后進(jìn)入【3D>凸出與斜角】，設(shè)置可以如下所示：

位置：等角-上方 厚度：0

STEP 07

復(fù)制這個(gè)代表圓孔的圖案，然后放置在最上方的矩形上，這里需要參考線來(lái)輔助將其對(duì)齊。

STEP 08

用同樣的方式安排其他地方出現(xiàn)的圓孔，但是注意這里不同的位置。

STEP 09

接下繪制凸出的圓形按鈕，這時(shí)我不建議這里再使用3D工具來(lái)實(shí)現(xiàn)，畢竟其實(shí)凸出的按鈕利用兩個(gè)橢圓就能實(shí)現(xiàn)，如果采用3D工具繪制，最后轉(zhuǎn)平面時(shí)會(huì)遇到麻煩（會(huì)有非常多形狀會(huì)出現(xiàn)，而讓你很難整理）。但是為了保持整個(gè)圖形符合等距立體，我在這里利用參考線來(lái)做一個(gè)按鈕，大家可以參考我的做法。

就復(fù)制我們上一步所做出的圓孔，找到同樣方向的圓孔，然后利用參考線對(duì)齊再?gòu)?fù)制一個(gè)，讓它們的色彩有點(diǎn)差異。

看懂了嗎？雖然目前兩個(gè)橢圓之間有間隙，但是等到最后轉(zhuǎn)為線體時(shí)，彼此只需要兩個(gè)小線條就能連成一個(gè)立體凸出的按鈕。

轉(zhuǎn)為線體

一旦焦點(diǎn)積木的部分完成，我們就可以直接轉(zhuǎn)為線體，剩下的圖形都用線條來(lái)實(shí)現(xiàn)。所見(jiàn)即所得。

STEP 10

首先將所有的立體形狀都轉(zhuǎn)為平面，這個(gè)說(shuō)法并不是指他們又回到之前的平面形狀，而是將立體以擴(kuò)展的方式轉(zhuǎn)化成可編輯的對(duì)象。

選中每個(gè)對(duì)象，然后進(jìn)入【對(duì)象>擴(kuò)展外觀】，然后將這些對(duì)象一一進(jìn)行取消編組的操作，有些形狀需要取消兩次，總之要達(dá)到你任意點(diǎn)擊某個(gè)形狀時(shí)，都能立刻看到它的填色。這是AI中一個(gè)形狀是否「健康」的指標(biāo)。

STEP 11

然后把每一個(gè)形狀填充關(guān)閉，開(kāi)啟描邊。描邊的大小可以暫時(shí)設(shè)置為2，因?yàn)橹�后我們還會(huì)有變化。描邊色彩為 #0d6ffc

STEP 12

運(yùn)用【形狀生成器】工具，按住鍵盤上的ALT鍵，清除掉圖形中彼此遮擋的部分線條。這個(gè)可以參考我們的草圖。

然后把我們?cè)赟TEP 09中提到的給按鈕增加線條的方式來(lái)完成立體形態(tài)。為了讓圖形表現(xiàn)更好，按鈕的形狀可以稍微調(diào)大。

繪制平面設(shè)備

這里大家會(huì)發(fā)現(xiàn)周邊的設(shè)備是平面的，在繪制上不比之前的立體圖案，因此相對(duì)難度降低了很多。所以基本這里就是按照草圖分步驟來(lái)畫(huà)出。

STEP 13

這里從圓孔處有線條延伸，這些線條既有裝飾作用，又有鏈接設(shè)備的作用。這里參考了其他的線體插畫(huà)的Idea，這是一個(gè)不錯(cuò)的集中視線的做法。

我們首先來(lái)完成這部分的線條。用鋼筆工具來(lái)繪制，鋼筆工具在繪制直角的邊線時(shí)很有優(yōu)勢(shì)，畫(huà)好下圖左邊的樣式后，選中直角的部分，利用拖動(dòng)的方式就能將直角變?yōu)閳A角。

STEP 14

補(bǔ)齊一些細(xì)節(jié)，比如連接設(shè)備的矩形接頭，包括積木頂部的圓孔的陰影描繪線條。

STEP 15

繼續(xù)繪制左上的兩部手機(jī)的造型。記得這時(shí)利用圓角矩形工具和線條工具進(jìn)行繪制。其實(shí)這個(gè)過(guò)程創(chuàng)作非常自由，你也可以安排其他的圖案，只要兼顧到整體的協(xié)調(diào)性即可，這是很多UI設(shè)計(jì)師常常畫(huà)的線稿圖，由于操作簡(jiǎn)單，我們這里就不一一講解。

STEP 16

接下繪制右邊的平板的樣式，其中我用了一個(gè)統(tǒng)計(jì)圖表來(lái)作為圖案，文字采用了斷線的方式展示。

STEP 17

最后下方的筆記本電腦樣式，這里用了我們Pbuilder的界面。如果你是做其他的虛擬產(chǎn)品，這里就可以繪制這個(gè)產(chǎn)品的界面。

STEP 18

到這一步大家會(huì)發(fā)現(xiàn)我們用的是等線，所謂等線就是相同大小的線條，但是實(shí)際上在比較復(fù)雜、對(duì)象比較多的情況下需要將線條分出層次才能讓造型看起來(lái)更立體。所以，這里我們可以改變線條的大小，在物體的外邊框加粗，然后把一些更細(xì)節(jié)的線條調(diào)細(xì)。

于是，我們從之前只用2pt的線，變?yōu)槿�種線條：1pt、2pt、3pt

3pt的線用來(lái)加粗對(duì)象的邊框輪廓，增加體積感�；蛘呤墙裹c(diǎn)區(qū)域。

2pt的線用來(lái)做普通的描繪。

1pt的線用在比較細(xì)節(jié)的小的部分。

完善背景細(xì)節(jié)

STEP 19

背景的細(xì)節(jié)是一些零散的圖案，大部分是圓形、三角等幾何形，相比而言，它們的繪制是最簡(jiǎn)單的，因此我們也直接就給它安排好位置。

STEP 20

在草圖的部分，我們還準(zhǔn)備了三個(gè)正立方體，但在這里，我們不準(zhǔn)備采用3D工具來(lái)繪制。而是采用的是六邊形+線條的方式。

所以我們可以選擇繪制一個(gè)等邊的六邊形，然后旋轉(zhuǎn)30度，讓它的底部為其中一個(gè)角。然后按照下圖所示，制作一個(gè)立方體。這里我們用這個(gè)方式的原因，下一步我們會(huì)講到。

STEP 21

將上面繪制好的三個(gè)立方體，放置在相應(yīng)的位置。然后給整個(gè)圖形增加一個(gè)淺藍(lán)色的背景。在這里我們用到的配色是同色系的配色。

優(yōu)化細(xì)節(jié)

到這一步其實(shí)就完成了繪制，但是細(xì)節(jié)的部分還需要我們進(jìn)一步優(yōu)化。主要體現(xiàn)是在細(xì)節(jié)的位置，比如中間積木的線條交接的位置就不夠干凈，有很多不需要的小邊角，這在線條的狀態(tài)是沒(méi)辦法完善的，需要進(jìn)一步擴(kuò)展外觀之后才能修飾。

STEP 22

我們首先將整個(gè)線條圖案都進(jìn)行擴(kuò)展外觀，進(jìn)入【對(duì)象>擴(kuò)展外觀】，其他的部分基本都沒(méi)什么問(wèn)題，就是用3D工具繪制的立體形狀細(xì)節(jié)需要優(yōu)化，這也是為什么我們最后增加三個(gè)小的立方體的時(shí)候用平面線條來(lái)解決。

當(dāng)然，中間的積木其實(shí)也可以用平面線條繪制，但是因?yàn)樗�的造型相�?duì)復(fù)雜，所以很難把握它的比例，我們才借助3D工具的這個(gè)能力。

大家可以看到這里有很多的不完美的接角：

STEP 23

經(jīng)過(guò)擴(kuò)展后，我們就可以利用直接選擇工具來(lái)調(diào)整這些邊角，這時(shí)大家要兼顧到整個(gè)線條的粗細(xì)，因?yàn)槲覀円呀?jīng)不是按照線條的對(duì)象來(lái)編輯圖形了。

處理后的圖形已臻完美：

STEP 24

最后利用生成器工具將部分的塊面填充藍(lán)色調(diào)（#D7ECF9、#C7E8F9），增加的這兩個(gè)顏色略比主色深一點(diǎn)，以表現(xiàn)陰影的部分，或增加視覺(jué)重量的作用。更深的那個(gè)色調(diào)用在比較小的區(qū)域。

添加文字

文字的部分，我們采用了相同的線條描繪的方式來(lái)設(shè)計(jì)，然后增加文案。最后的效果如下：

最后：動(dòng)手的力量

線條是扁平化風(fēng)格的一種，如果大家平時(shí)練習(xí)了圖標(biāo)的畫(huà)法（不是在需要用圖標(biāo)的時(shí)候拿現(xiàn)成的網(wǎng)上的資源），那么你對(duì)線條的掌控能力就能日益增進(jìn)。最好的學(xué)習(xí)就是自己動(dòng)手做，因?yàn)橛刑�多不可說(shuō)的技巧，是必須自己體會(huì)過(guò)才理解的。

如果覺(jué)得這個(gè)教程比較復(fù)雜，那么你可以從一些基礎(chǔ)的幾何圖形、小物件開(kāi)始練習(xí)，所以這是非常適合初學(xué)者夯實(shí)基礎(chǔ)的。如果覺(jué)得這個(gè)教程過(guò)于簡(jiǎn)單，我也建議大家多嘗試一些新的畫(huà)法，比如可以把對(duì)象改為別的物體，自己創(chuàng)作不一樣的場(chǎng)景。也可以換成別的色彩，還可以增加紋理。把木紋、水紋等等增加到平面中，會(huì)出現(xiàn)非常特別的效果。