前言
扁平風(fēng)格的插畫可以是采用線來表現(xiàn)，這和大部分線性圖標(biāo)的制作方法類似，所不同的是，圖標(biāo)的規(guī)模明顯小一些，所要兼顧的圖形也要少得多。線是一種值得我們探索的圖形表現(xiàn)方式。無論是否將其進(jìn)行填色，我們都能被線條所牽引進(jìn)入到圖形本身，這給了我在設(shè)計產(chǎn)品海報時一些靈感。今天我們就和大家一起來制作這個由線條來作為主元素的圖形海報。
靈感來源
1、圖案的參考是來自 pinterest 上瀏覽到的線體插畫，基本是延續(xù)這個風(fēng)格，只是改變了線條表現(xiàn)方式，稍后我們在過程中再重點提示。
2、整個海報的概念是起源我們在做 pagepan 這個產(chǎn)品所產(chǎn)生的「積木」的聯(lián)想，這時選用了樂高積木來作為主要的創(chuàng)作重心。
學(xué)習(xí)建議
這篇文章適合那些已經(jīng)有軟件基礎(chǔ)想要進(jìn)階扁平線體插畫的小伙伴~
工具
Adobe Illustrator CC (2019)
我已經(jīng)習(xí)慣用AI來畫線條的圖案，其他軟件不熟悉也沒有深入了解。
草圖過程
草圖是一個非常非常重要的過程，甚至它是后面所有工作的基礎(chǔ)。鑒于我們大部分人包括我自己都沒有好好對待過，所以這一次我們來彌補(bǔ)這一環(huán)節(jié)。草圖我畫了三次，每次都作部分優(yōu)化，最后成品如下。
毫不夸張，只有認(rèn)真對待草圖的創(chuàng)作過程，才是真正享受到設(shè)計的樂趣。
畫好草圖后，大家最好能從草圖進(jìn)入對圖案實現(xiàn)的分析。我們把實現(xiàn)整個圖案大致分為三個部分：
① 立體式的積木
② 設(shè)備部分
③ 背景裝飾
接下我們就分步驟來完成這些不同的圖形，要知道它是如何制作出來的。
生成立方體
這里積木的表現(xiàn)最重要的一個表現(xiàn)是：立體，并且是大家平時最常見的等距立體風(fēng)格。等距立體風(fēng)格，我們曾經(jīng)在用AI繪制3D等距立體夢幻風(fēng)格插畫中講過其畫法以及在開始繪制前的準(zhǔn)備工作，那么這篇文章里我們就省略分步驟的講解。
STEP 01
打開AI，新建一個1200px*850px的文檔，然后再在這個新文檔中建立起等距立體風(fēng)格所需要準(zhǔn)備的參考線。有人問參考線用處大不大？說實話，因為AI當(dāng)中有默認(rèn)的等距立體的3D轉(zhuǎn)換設(shè)置，因此基本不會差多少，主要是調(diào)整細(xì)節(jié)的時候用得上。
準(zhǔn)備好的參考線如下圖：
你可以按以下的提示操作，更詳細(xì)可以進(jìn)入用AI繪制3D等距立體夢幻風(fēng)格插畫中查看。
- 利用【矩形網(wǎng)格工具】，寬度/高度設(shè)置為1000，水平/垂直設(shè)置為：50
- 選中網(wǎng)格，鼠標(biāo)右鍵，進(jìn)入【變換>縮放】，不等比的參數(shù)設(shè)置為，水平：100%，垂直：86.602%
- 【變換>傾斜】，傾斜角度參數(shù)：30
- 【變換>旋轉(zhuǎn)】，旋轉(zhuǎn)角度參數(shù)：-30
- 【視圖>參考線>建立參考線】
STEP 02
要畫線體圖案，首先大家要把形體畫出來，形體是非線體的，這方便塑形，一旦形體外輪廓確定，就可以通過填充轉(zhuǎn)線條的方式做出線條圖案。
以上的思路確定好后，我們就要開始繪制立方體。第一步，我們先畫出一個尺寸為160*68的矩形。矩形填充為灰色，關(guān)閉描邊。
對于這個尺寸我建議大家最好和我的設(shè)置相同，并且記錄一下，等下我會告訴大家為什么要這樣做。
然后選中這個矩形，進(jìn)入到【效果>3D>凸出與斜角】，將其轉(zhuǎn)為立方體。你需要改變這兩個參數(shù)設(shè)置：
- 位置：等角-右方
- 凸出厚度：68 （這個數(shù)值和你的矩形的高度一致）
位置一欄下拉選框里的「等角」開頭的選項，都是適用于等距立體風(fēng)格的。
STEP 03
接下復(fù)制上一步所做的立方體，雖說我們現(xiàn)在稱這個對象為立方體，其實它的本質(zhì)還是一個平面矩形（因為還沒擴(kuò)展對象），所以我們繼續(xù)改變這個平面矩形的尺寸，改變它的寬度，將其寬度從原來的160改變?yōu)?28。
這就是要求你要記住第一個矩形尺寸的原因，因為228是從160+68得到的。由于我們這里會畫出三個等高而不等長的矩形，但是我們希望它們表現(xiàn)是逐級等距增大，所以需要一個參數(shù)。有人問這里不需要這樣計算行不行？就是看著好看但不需要數(shù)學(xué)計算可不可以，我的答案是當(dāng)然可以，但是數(shù)字的確是一個便捷控制形體的工具。
當(dāng)你把尺寸改變后，整個立方體也就是延長了。用相同的方法，復(fù)制第三個，也是在228基礎(chǔ)上增加68，第三個矩形的寬度增加到296。于是我們得到想要的三個立方體如下：
STEP 04
將已有的立方體的位置進(jìn)行調(diào)整，這時需要打開參考線，輔助將其排列成一下的樣式：
STEP 05
用STEP 02-04 的方法來做出另外一邊的立方體，所不同的是另一邊的兩個立方體，它們的尺寸分別是：
68*68
160*68
而他們在轉(zhuǎn)變?yōu)榱⒎襟w時，進(jìn)入3D工具中，位置一欄設(shè)置為【等角>上方】。當(dāng)你繪制好兩個立方體，就可以將它們拼成下面的形狀。當(dāng)右邊的兩個立方體因為擋住視線很難對齊邊緣時，可以降低它們的透明度來查看是否對齊。
這時立方體的大形體基本完成，讓我們轉(zhuǎn)戰(zhàn)制作細(xì)部。
細(xì)部：按鈕和圓孔
所謂的細(xì)部其實也就是細(xì)節(jié)的部分，這部分在這里表現(xiàn)就是一些諸如按鈕、圓孔這樣的部分。
STEP 06
我們首先來制作圓孔，其實大家可以發(fā)現(xiàn)圓孔就是一個圓，只是這個圓看上去有透視之感（所以它不是一個正圓），但基本上它沒有凸出。那么大家可以如何做呢？
你也可以用到3D工具：首先繪制一個灰色的無描邊的正圓。然后進(jìn)入【3D>凸出與斜角】，設(shè)置可以如下所示：
位置：等角-上方 厚度：0
STEP 07
復(fù)制這個代表圓孔的圖案，然后放置在最上方的矩形上，這里需要參考線來輔助將其對齊。
STEP 08
用同樣的方式安排其他地方出現(xiàn)的圓孔，但是注意這里不同的位置。
STEP 09
接下繪制凸出的圓形按鈕，這時我不建議這里再使用3D工具來實現(xiàn)，畢竟其實凸出的按鈕利用兩個橢圓就能實現(xiàn)，如果采用3D工具繪制，最后轉(zhuǎn)平面時會遇到麻煩（會有非常多形狀會出現(xiàn)，而讓你很難整理）。但是為了保持整個圖形符合等距立體，我在這里利用參考線來做一個按鈕，大家可以參考我的做法。
就復(fù)制我們上一步所做出的圓孔，找到同樣方向的圓孔，然后利用參考線對齊再復(fù)制一個，讓它們的色彩有點差異。
看懂了嗎？雖然目前兩個橢圓之間有間隙，但是等到最后轉(zhuǎn)為線體時，彼此只需要兩個小線條就能連成一個立體凸出的按鈕。
轉(zhuǎn)為線體
一旦焦點積木的部分完成，我們就可以直接轉(zhuǎn)為線體，剩下的圖形都用線條來實現(xiàn)。所見即所得。
STEP 10
首先將所有的立體形狀都轉(zhuǎn)為平面，這個說法并不是指他們又回到之前的平面形狀，而是將立體以擴(kuò)展的方式轉(zhuǎn)化成可編輯的對象。
選中每個對象，然后進(jìn)入【對象>擴(kuò)展外觀】，然后將這些對象一一進(jìn)行取消編組的操作，有些形狀需要取消兩次，總之要達(dá)到你任意點擊某個形狀時，都能立刻看到它的填色。這是AI中一個形狀是否「健康」的指標(biāo)。
STEP 11
然后把每一個形狀填充關(guān)閉，開啟描邊。描邊的大小可以暫時設(shè)置為2，因為之后我們還會有變化。描邊色彩為 #0d6ffc
STEP 12
運(yùn)用【形狀生成器】工具，按住鍵盤上的ALT鍵，清除掉圖形中彼此遮擋的部分線條。這個可以參考我們的草圖。
然后把我們在STEP 09中提到的給按鈕增加線條的方式來完成立體形態(tài)。為了讓圖形表現(xiàn)更好，按鈕的形狀可以稍微調(diào)大。
繪制平面設(shè)備
這里大家會發(fā)現(xiàn)周邊的設(shè)備是平面的，在繪制上不比之前的立體圖案，因此相對難度降低了很多。所以基本這里就是按照草圖分步驟來畫出。
STEP 13
這里從圓孔處有線條延伸，這些線條既有裝飾作用，又有鏈接設(shè)備的作用。這里參考了其他的線體插畫的Idea，這是一個不錯的集中視線的做法。
我們首先來完成這部分的線條。用鋼筆工具來繪制，鋼筆工具在繪制直角的邊線時很有優(yōu)勢，畫好下圖左邊的樣式后，選中直角的部分，利用拖動的方式就能將直角變?yōu)閳A角。
STEP 14
補(bǔ)齊一些細(xì)節(jié)，比如連接設(shè)備的矩形接頭，包括積木頂部的圓孔的陰影描繪線條。
STEP 15
繼續(xù)繪制左上的兩部手機(jī)的造型。記得這時利用圓角矩形工具和線條工具進(jìn)行繪制。其實這個過程創(chuàng)作非常自由，你也可以安排其他的圖案，只要兼顧到整體的協(xié)調(diào)性即可，這是很多UI設(shè)計師常常畫的線稿圖，由于操作簡單，我們這里就不一一講解。
STEP 16
接下繪制右邊的平板的樣式，其中我用了一個統(tǒng)計圖表來作為圖案，文字采用了斷線的方式展示。
STEP 17
最后下方的筆記本電腦樣式，這里用了我們Pbuilder的界面。如果你是做其他的虛擬產(chǎn)品，這里就可以繪制這個產(chǎn)品的界面。
STEP 18
到這一步大家會發(fā)現(xiàn)我們用的是等線，所謂等線就是相同大小的線條，但是實際上在比較復(fù)雜、對象比較多的情況下需要將線條分出層次才能讓造型看起來更立體。所以，這里我們可以改變線條的大小，在物體的外邊框加粗，然后把一些更細(xì)節(jié)的線條調(diào)細(xì)。
于是，我們從之前只用2pt的線，變?yōu)槿N線條：1pt、2pt、3pt
3pt的線用來加粗對象的邊框輪廓，增加體積感?；蛘呤墙裹c區(qū)域。
2pt的線用來做普通的描繪。
1pt的線用在比較細(xì)節(jié)的小的部分。
完善背景細(xì)節(jié)
STEP 19
背景的細(xì)節(jié)是一些零散的圖案，大部分是圓形、三角等幾何形，相比而言，它們的繪制是最簡單的，因此我們也直接就給它安排好位置。
STEP 20
在草圖的部分，我們還準(zhǔn)備了三個正立方體，但在這里，我們不準(zhǔn)備采用3D工具來繪制。而是采用的是六邊形+線條的方式。
所以我們可以選擇繪制一個等邊的六邊形，然后旋轉(zhuǎn)30度，讓它的底部為其中一個角。然后按照下圖所示，制作一個立方體。這里我們用這個方式的原因，下一步我們會講到。
STEP 21
將上面繪制好的三個立方體，放置在相應(yīng)的位置。然后給整個圖形增加一個淺藍(lán)色的背景。在這里我們用到的配色是同色系的配色。
優(yōu)化細(xì)節(jié)
到這一步其實就完成了繪制，但是細(xì)節(jié)的部分還需要我們進(jìn)一步優(yōu)化。主要體現(xiàn)是在細(xì)節(jié)的位置，比如中間積木的線條交接的位置就不夠干凈，有很多不需要的小邊角，這在線條的狀態(tài)是沒辦法完善的，需要進(jìn)一步擴(kuò)展外觀之后才能修飾。
STEP 22
我們首先將整個線條圖案都進(jìn)行擴(kuò)展外觀，進(jìn)入【對象>擴(kuò)展外觀】，其他的部分基本都沒什么問題，就是用3D工具繪制的立體形狀細(xì)節(jié)需要優(yōu)化，這也是為什么我們最后增加三個小的立方體的時候用平面線條來解決。
當(dāng)然，中間的積木其實也可以用平面線條繪制，但是因為它的造型相對復(fù)雜，所以很難把握它的比例，我們才借助3D工具的這個能力。
大家可以看到這里有很多的不完美的接角：
STEP 23
經(jīng)過擴(kuò)展后，我們就可以利用直接選擇工具來調(diào)整這些邊角，這時大家要兼顧到整個線條的粗細(xì)，因為我們已經(jīng)不是按照線條的對象來編輯圖形了。
處理后的圖形已臻完美：
STEP 24
最后利用生成器工具將部分的塊面填充藍(lán)色調(diào)（#D7ECF9、#C7E8F9），增加的這兩個顏色略比主色深一點，以表現(xiàn)陰影的部分，或增加視覺重量的作用。更深的那個色調(diào)用在比較小的區(qū)域。
添加文字
文字的部分，我們采用了相同的線條描繪的方式來設(shè)計，然后增加文案。最后的效果如下：
最后：動手的力量
線條是扁平化風(fēng)格的一種，如果大家平時練習(xí)了圖標(biāo)的畫法（不是在需要用圖標(biāo)的時候拿現(xiàn)成的網(wǎng)上的資源），那么你對線條的掌控能力就能日益增進(jìn)。最好的學(xué)習(xí)就是自己動手做，因為有太多不可說的技巧，是必須自己體會過才理解的。
如果覺得這個教程比較復(fù)雜，那么你可以從一些基礎(chǔ)的幾何圖形、小物件開始練習(xí)，所以這是非常適合初學(xué)者夯實基礎(chǔ)的。如果覺得這個教程過于簡單，我也建議大家多嘗試一些新的畫法，比如可以把對象改為別的物體，自己創(chuàng)作不一樣的場景。也可以換成別的色彩，還可以增加紋理。把木紋、水紋等等增加到平面中，會出現(xiàn)非常特別的效果。
Via: ifeiwu
