設(shè)計教程

城市元素的線條插畫設(shè)計技巧

3153

“沈陽啊沈陽我的故鄉(xiāng)，馬路上燈火輝煌，大街小巷是人來人往...”順叔借用一首70年代的歌曲作為本次文章的開頭，對于沈陽的喜歡，順叔只能用沈陽的一些熟悉的建筑場景繪制來表達(dá)對沈陽的熱愛。在表現(xiàn)中我們有多種方式，例如扁平的，炫酷的，線性的等等。這次順叔選擇了比較簡潔的線性插畫形式展示了幾組沈陽地標(biāo)，在這幾年里線性插畫比較火，在各個應(yīng)用中也會用到，比如線性圖標(biāo)，線性插畫，引導(dǎo)頁，提示頁等等場景下應(yīng)用。無論你是初學(xué)者還是沒有手繪基礎(chǔ)的，只要會AI軟件那么一步一步跟著學(xué)你也能學(xué)會線性插畫。這個線性插畫只是一個引導(dǎo)性的作用，至于設(shè)計個場景更大，或者更復(fù)雜的場景那么就需要自己加強的練習(xí)，師傅領(lǐng)進(jìn)門剩下靠個人了。所以希望本文章能幫助一些人，會者加強，不會者跟著練起來，本次是以沈陽地標(biāo)為主題，通過這個線性插畫的設(shè)計會有順序的和大家分享前期的想法以及制作過程，小伙伴們也可以根據(jù)自己熟悉的城市進(jìn)行線性插畫繪制。

首先給各位展示一下順叔設(shè)計繪制的熟悉城市

以上6個線性城市插畫是順叔做的案例算是展示完了，但這并沒有完事，以下順叔會根據(jù)案例講解一下在設(shè)計制作過程中的一些思考以及做法。希望能給一些人啟發(fā)。除了技法以外我覺得應(yīng)該就是思路。技法可以是背下來，但思路是靈活的。設(shè)計師就應(yīng)該有一個開放性，創(chuàng)意性的思路，為設(shè)計更好的服務(wù)。那么好~各位小伙伴不要著急，篇幅可能稍微長一些，每次順叔寫的文章都比較詳細(xì)，只希望大家能看懂，所以慢慢的往下看。這篇文章個人覺得比較適合初學(xué)者，如自覺得是大咖、大神、請繞道謝謝配合。想了解的學(xué)起來，做起來，COME ON！

1.線性設(shè)計應(yīng)用場景

在設(shè)計中表現(xiàn)形式比較多，寫實，線形，簡約，扁平化等等不同的表現(xiàn)應(yīng)用在不同的場景，根據(jù)設(shè)計頁面統(tǒng)一性而定，各有各的效果，適合才最重要?，F(xiàn)在大家對于審美，以及產(chǎn)品的用戶體驗和視覺體驗提高，對視覺上的效果也比較有要求，那么迎合用戶以及瀏覽者，也隨著設(shè)計流行的趨勢而進(jìn)行設(shè)計。簡約，大氣等詞是很多人掛在嘴邊的幾個詞，線性插畫就具有這樣簡約的氣質(zhì)，同樣受到用戶喜歡和設(shè)計師經(jīng)常運用在頁面中表現(xiàn)，那么簡約在UI設(shè)計中應(yīng)用的不只是頁面，圖標(biāo)，插畫，更多的是一種表現(xiàn)的形式。

寫實（1）和線性（2）風(fēng)格完全的兩個方向，同樣運用在各個設(shè)計場景中，但寫實的設(shè)計在設(shè)計運用中其實并沒有那么實用，也許是炫一下技，也許是要展示一下自己的能力。而線性設(shè)計在設(shè)計運用中常用的頻率會照比多一些。兩者都很好，只不過場景不同運用也就有所不同。還是那句話根據(jù)需求而定義用什么樣的風(fēng)格。但這篇文章側(cè)重講線性插畫，那么我們就以線性的多說一些。

這次文字講的小場景的線性插畫，下期的時候會講線性圖標(biāo)。那么線性插畫和線形圖標(biāo)在UI設(shè)計中鋪天蓋地的表現(xiàn)，也是UI設(shè)計師在步入設(shè)計行業(yè)必須要學(xué)習(xí)的。線形的表現(xiàn)千變?nèi)f化，可以應(yīng)用在各行各業(yè)，總結(jié)了幾個代表的線形的應(yīng)用場景：圖標(biāo)，圖形，線形LOGO海報，歡迎頁，缺省頁，提示頁，彈窗頁，步驟引導(dǎo)頁，內(nèi)容說明頁，空白頁，圖文配圖等等，其實是更好的表現(xiàn)趣味性，情感化，識別性。讓用戶更好的參與和應(yīng)用，同樣達(dá)到了體驗效果和視覺效果?？傊€形給設(shè)計帶來了更多靈感和表現(xiàn)，讓畫面具有極簡確有效果。

以上幾個頁總結(jié)的線性設(shè)計中都能用的頁，設(shè)計不局限，可以把更好的創(chuàng)作應(yīng)用到各個界面當(dāng)中，設(shè)計一定是變通的，能更好的運用技法才能做出更好的作品。

2.都用啥軟件

說了那么多廢話，不要閑太絮叨，那么在做線性設(shè)計時都用啥軟件？

完全的根據(jù)自身的習(xí)慣運用軟件上操作，不局限于用什么軟件，只要能熟練的進(jìn)行軟件操作和創(chuàng)意的結(jié)合最終結(jié)果才最重要。不在乎你用啥而在乎你能做出來啥。打開你的軟件，整理你的創(chuàng)意，有序的進(jìn)行設(shè)計，你一定可以的。

前期的一些了解基本也了解差不多了，那么在做城市線性設(shè)計的時候一些思考或者一些想法是怎么樣的呢，怎么能從無到有的一個過程，需要進(jìn)行哪些步驟，帶著這些問題說一下，在做的過程中我們需要做和思考。

1.找靈感

首先要在各種設(shè)計平臺，比如：dribbble、站酷、花瓣、UI中國等設(shè)計平臺多看看，找找靈感，學(xué)習(xí)別人都是怎么設(shè)計的，如何配色的，線條粗細(xì)，畫面感覺。在自己進(jìn)行設(shè)計的時候能更好的運用到設(shè)計中。

際AI操作步驟，前期的思考已經(jīng)完事，實際操作其實就很簡單了，大家要跟住了，開始嘍！

2.風(fēng)格定義

不要急于設(shè)計，考慮風(fēng)格是什么樣的，定義一個風(fēng)格方向，那么對于設(shè)計會提高效率，比如是線性的、線面結(jié)合的、多彩底色、斷線風(fēng)格，MBE風(fēng)格等等。做設(shè)計就是這樣先思考后操作，一般做設(shè)計的時候思考創(chuàng)意需要很長時間，但其實操作用不了多長時間。所以在前期的時候要思考透徹，全面一些、有計劃性的、流程性的設(shè)計?；菊w概括為：思考期、準(zhǔn)備期、操作期。

3.尋找適合的照片

在尋找參考的圖時也很重要，一定要選擇質(zhì)量好一些，清晰一些的，所以在這個過程中搜索技巧很重要。比如一個建筑物，最好是正面的，側(cè)面的，背面的各種角度的搜集一下。根據(jù)搜集來的圖片進(jìn)行研究和分析。了解整個建筑的結(jié)構(gòu)，需要用什么樣的基礎(chǔ)圖形去表達(dá)會更好一些，腦里一定有個概念。

4.草圖繪制，提取輪廓

根據(jù)找到的適合的圖片進(jìn)行繪制，重要一點最好是正面的照片，這樣做出來的插畫或圖標(biāo)至少一個水平線看上去比較均衡一些。下面是順叔根據(jù)圖片然后進(jìn)行的草圖繪制。

在這個節(jié)點其實是很重要的，要具備一定的造型能力和腦中構(gòu)建出完整圖形，首先要觀察照片，然后從照片中提取出輪廓。有一個草圖也是對之后在進(jìn)行細(xì)化時會有很大的輔助作用，可以在草紙上隨意的進(jìn)行描改。一直修改到滿意為止，記住一點首先要進(jìn)行加法，后進(jìn)行減法，意思就是在草圖階段可以先根據(jù)照片的結(jié)構(gòu)進(jìn)行全面的繪制，這就是加法，然后繪制差不多后進(jìn)行減法，保留一些主骨架線條，最終形成簡單輪廓，能盡量的進(jìn)行簡化，要注意的是減法的時候不要最終減的都自己都看出來這個建筑是什么。要具有一定的線條精準(zhǔn)度和圖形的概括能力。

5.AI繪制

把繪制好的圖拖拽到AI，根據(jù)草圖而進(jìn)行在AI中繪制，但也要有思考性的進(jìn)行，利用鋼筆和布爾運算而進(jìn)行繪制，鋼筆勾畫比較流暢的線條。在草圖過程中線條不是那么流暢，只要根據(jù)草圖邊緣進(jìn)行就可以了，一直到滿意為止。然后把之前設(shè)想的風(fēng)格結(jié)合進(jìn)來。

6.線條調(diào)整

做完單個建筑之后要進(jìn)行插畫或者圖標(biāo)的線條粗細(xì)，太過于粗會顯得憨，太細(xì)在插畫或者圖標(biāo)在縮小的時候出現(xiàn)線條不明顯，在線條調(diào)節(jié)中適當(dāng)最重要。

7.極簡設(shè)計

把單個建筑進(jìn)行場景設(shè)計，利用樹，云，路燈等元素進(jìn)行整個畫面的構(gòu)建，讓畫面更飽滿豐富，極簡設(shè)計并不代表簡就是簡單，在風(fēng)格統(tǒng)一性下要盡量的做到整體化。線條的粗細(xì)，元素的大小等等都需要進(jìn)行統(tǒng)一和對比，既有統(tǒng)一的線條，也有元素變化的大小，會給整個畫面一些活潑的生機，然后利用一些斷線讓線條以及畫面有呼吸感，要具有一定的統(tǒng)一性，也要有一些差異性。

總結(jié)

以上是一些前期的思考和大致的過程，有一個邏輯的方向會給設(shè)計時順暢很多，切記設(shè)計師不要拿到原型或者需求就要進(jìn)行設(shè)計，一些經(jīng)驗的設(shè)計師都會全面的進(jìn)行思考在進(jìn)行設(shè)計。養(yǎng)成一種良好的設(shè)計習(xí)慣，其實做設(shè)計不難，除了一些理論就是實戰(zhàn)的結(jié)合。往往要把一些設(shè)計結(jié)合與現(xiàn)實生活中，就會更有趣一些，比如這個線性建筑插畫，我的理解其實好比速寫一樣，相信從事設(shè)計的很多人都學(xué)過美術(shù)，那么美術(shù)基礎(chǔ)中有素描、速寫，素描可以進(jìn)行一些刻畫，但速寫線條勾勒出一種神韻，可能需要幾筆幾個線條就畫出建筑或者人物，那么這幾條線一定是經(jīng)過了圖形的篩選和圖形的概括而總結(jié)出的主要骨線，線條的精準(zhǔn)性，線性圖標(biāo)或者插畫也一個道理在對于照片提取精準(zhǔn)輪廓進(jìn)行減法。把一些主要的線條進(jìn)行組合。

物體中都是有基礎(chǔ)圖形，圓，正方形，三角形而組成，根據(jù)基本圖形而演變刻畫。最終達(dá)到想要的圖形。

說的有點多，不知大家會不會理解我說的意思。聽懂與否大家自己去悟吧，如果實在不解的可與我聯(lián)系，那么下面順叔就拿出其中一張線性建筑進(jìn)行實際AI操作步驟，前期的思考已經(jīng)完事，實際操作其實就很簡單了，大家要跟住了，開始嘍！

1.首先打開ai軟件，快捷鍵ctrl+n 新建文件寬度900，高度900，更多設(shè)置顏色模式rgb 72px 創(chuàng)建。

2.根據(jù)照片進(jìn)行簡化，提取線條精髓，圖形上的概念能力，進(jìn)行草圖。因為觀察這個圖基本都是方塊、矩形、圓形和線，所以就不需要用鋼筆工具，直接用矩形工具和圓形工具，線即可，還是比較簡單的呀！

3.根據(jù)草圖大致分為三個部分第一部分頂部樓體，中間樓體，和下方樓體。

中間樓體

a.首先畫中間樓體矩形工具（M）首先繪制一個樓中心長方形尺寸130*38，描邊2pt 顏色先隨便給一個這里是#333333 命名為樓中心；

b.矩形工具（M）繪制一個長方形尺寸38*10的小方塊，命名為樓中心-方選擇樓中心方塊，同時選擇樓中心-方繪制的圖，點擊居中對齊，居上對齊；

c.繪制樓中心的窗戶，可以作為簡化，矩形工具，4*4的正方形，填充顏色#333333，不要給描邊；

d.最終樓中心和4*4的方塊進(jìn)行整合，4*4作為樓中心的玻璃，首先復(fù)制出一個4*4方塊，快捷操作方式按住ait鍵拖動方塊，就復(fù)制出另一個方塊。兩個放方塊之間距離為2px，然后ctrl+d進(jìn)行一樣的距離復(fù)制15塊方塊即可。然后ctr+G合組，然后復(fù)制出四個橫列。第一排橫裂中間有方塊遮擋，所以第一個橫切中間去掉7個4*4方塊即可，那么樓中心元素完了。

頂樓部分

a.首先觀察樓體部分有兩個邊和一個圓形組成，那么我們只要做出一個邊，另一個只要水平復(fù)制出，即是完美的對稱，首先怎么進(jìn)行，矩形工具建立一個30*110的矩形線框，線條要和樓中心線條粗細(xì)一致，調(diào)取變換屬性，選中30*110矩形線框然后進(jìn)行傾斜-20即可。

b.左側(cè)邊已經(jīng)完事，但還需要有一些玻璃但樣式，簡化統(tǒng)一風(fēng)格，但還需要有一些變化，那么首先矩形工具畫一個2*4的矩形，和上面樓體中心窗戶一樣做法，快捷操作方式按住ait鍵拖動方塊，就復(fù)制出另一個矩形。一排一共三個。中間距離為5px，這個距離一定要掌握好，不然在往下進(jìn)行橫裂復(fù)制很容易玻璃就超出左邊樓體，然后選中三個方塊ctrl+g合組，命名為合組1，復(fù)制出一個橫切，放在第二排，往里縮進(jìn)幾個像素，然后ctrl+d，復(fù)制出11個橫切。以至于放到最合適的地方簡單的進(jìn)行調(diào)整。