莫b

這次帶給大家的是如何輕松幾步搞定熟悉城市線性插畫,只做原創精品設計文章,好案例配好文章,好啦!搬起你們的小板凳,馬上開講了!!!

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

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

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

 

1.線性設計應用場景

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

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

這次文字講的小場景的線性插畫,下期的時候會講線性圖標。那么線性插畫和線形圖標在UI設計中鋪天蓋地的表現,也是UI設計師在步入設計行業必須要學習的。線形的表現千變萬化,可以應用在各行各業,總結了幾個代表的線形的應用場景:圖標,圖形,線形LOGO海報,歡迎頁,缺省頁,提示頁,彈窗頁,步驟引導頁,內容說明頁,空白頁,圖文配圖等等,其實是更好的表現趣味性,情感化,識別性。讓用戶更好的參與和應用,同樣達到了體驗效果和視覺效果。總之線形給設計帶來了更多靈感和表現,讓畫面具有極簡確有效果。

以上幾個頁總結的線性設計中都能用的頁,設計不局限,可以把更好的創作應用到各個界面當中,設計一定是變通的,能更好的運用技法才能做出更好的作品。

 

2.都用啥軟件

說了那么多廢話,不要閑太絮叨,那么在做線性設計時都用啥軟件?

完全的根據自身的習慣運用軟件上操作,不局限于用什么軟件,只要能熟練的進行軟件操作和創意的結合最終結果才最重要。不在乎你用啥而在乎你能做出來啥。打開你的軟件,整理你的創意,有序的進行設計,你一定可以的。

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

 

1.找靈感

首先要在各種設計平臺,比如:dribbble、站酷、花瓣、UI中國等設計平臺多看看,找找靈感,學習別人都是怎么設計的,如何配色的,線條粗細,畫面感覺。在自己進行設計的時候能更好的運用到設計中。

 

2.風格定義

不要急于設計,考慮風格是什么樣的,定義一個風格方向,那么對于設計會提高效率,比如是線性的、線面結合的、多彩底色、斷線風格,MBE風格等等。做設計就是這樣先思考 后操作,一般做設計的時候思考創意需要很長時間,但其實操作用不了多長時間。所以在前期的時候要思考透徹,全面一些、有計劃性的、流程性的設計。基本整體概括為:思考期、準備期、操作期。

 

3.尋找適合的照片

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

 

4.草圖繪制,提取輪廓

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

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

 

5.AI繪制

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

 

6.線條調整

做完單個建筑之后要進行插畫或者圖標的線條粗細,太過于粗會顯得憨,太細在插畫或者圖標在縮小的時候出現線條不明顯,在線條調節中適當最重要。

 

7.極簡設計

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

 

總結

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

物體中都是有基礎圖形,圓,正方形,三角形而組成,根據基本圖形而演變刻畫。最終達到想要的圖形。

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

1.首先打開ai軟件,快捷鍵ctrl+n 新建文件寬度900,高度900,更多設置顏色模式rgb ?72px 創建。

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

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

 

中間樓體

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

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

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

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

 

頂樓部分

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

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

c.左側既然完事了,那么右側就好辦了,只要進行水平復制就變成右側方向。很簡單很快捷。把左側合組,然后選中左側,右鍵單擊,變換-對稱-水平選擇復制按鈕,然后就鏡像過來了,左側和右側調整一下距離即可。

d.矩形工具-橢圓工具畫一個60*60的圓描邊粗細顏色都一樣,填充一下白色,然后放入左右邊樓體中心,稍微居上點,放到合適位置。

e.然后用直線工具畫一條線,復制出一個線進行ctrl+d復制出七條線,然后合組,當有時候看線條居上了。有些亂,選中線進行右鍵單擊排列-置于底部,然后調整線的頂頭尺寸到最終效果。

 

下方樓體

下方樓體和中心樓體做法完全一樣的,所以這塊就不重復的說了,大家有興趣的話可以自己在進行制作,同樣也是先做完一邊,另一邊鏡像就完事,中間用矩形工具畫個門,很簡單。

 

上中下樓梯組合

把設計繪制好的上中下進行一個組合。

畫到這基本就結束了,剩下的基本也很好操作,大家可以根據自己的能力進行場景的設計。設計不局限于一種固定的方式。把一些方式方法教給大家就是希望大家可以舉一反三的進行操作。希望能幫助到一些小伙伴。更多的是思考。

 

原文鏈接:順叔聊設計(公眾號)

作者:?張增順

轉載請注明:學UI網 » 輕松幾步搞定熟悉城市線性插畫

登錄收藏
 
你可能喜歡的:
用PS打磨質感水晶風格圖標用PS打磨質感水晶風格圖標
矢量線條插畫之彩繪多肉矢量線條插畫之彩繪多肉
奈斯虎插畫延展設計奈斯虎插畫延展設計
為你總結五種繪制噪點插畫的方法【干貨】為你總結五種繪制噪點插畫的方法【干貨】
5分鐘學會輕質感3D圖標5分鐘學會輕質感3D圖標
繪制一枚多肉植物扁平風線體插畫繪制一枚多肉植物扁平風線體插畫
矢量插畫:通過攝影作品學習建筑的空間語言矢量插畫:通過攝影作品學習建筑的空間語言
字母人像插畫組合視覺造型字母人像插畫組合視覺造型
佳作賞析:孫青Cynthia_Sun-doodle風一周插畫作品佳作賞析:孫青Cynthia_Sun-doodle風一周插畫作品
深度剖析吉祥物制作深度剖析吉祥物制作
?
江苏11选五今天开结果查询