首先給大家介紹一位來自塞爾維亞插畫家 Alex Krugli。他擅長通過豐富的圖形組合和絢麗的色彩表達，來使原本簡單的畫面內容變得層次豐富，百分百吸引你的眼球。
*圖片來自插畫師 Alex Krugli，僅供賞析
分析Alex Krugli的畫風特點
我真是一個善于總結的好學生，下面開始畫起來吧~
本次的主題我想以建筑為主元素，構建一個室外場景畫面，首先我們可以去百度或者花瓣搜索些漂亮的房子照片，找找靈感，關鍵詞可以是歐式建筑，復古小房子等。
搜索建筑素材圖片時，需要注意兩點：
1、幾何感強
2、設計感強的建筑做參考
這里我找到了兩張建筑圖片，將其中一張作為主元素建筑，另一張作為遠景建筑群，然后可以再去找找場景相關的素材，如：車輛、郵筒、植物等，同樣也是靠百度啦~
圖片來源網絡，僅供賞析
在 Alex Krugli 的插畫作品中，非常注重畫面層次的劃分，我們可以先分析一張他的作品。
從顏色分區可以看出畫面分了四個層次，圖中的紅色區域是畫面的前景，藍色是中前景，綠色是中后景，紫色是遠景。
那如何把畫面安排的有序且豐富呢？
1. 劃分建筑層次，由近及遠。如圖，建筑可以有單體和建筑群兩種形式，相互穿插，區別各個層次建筑的大小寬窄高低，中景建筑一般占比最大，比較密集，前景建筑起遮擋作用，背景建筑概括，占比較小。
2. 拉開建筑大小等級，近大遠小。（如下圖中近似造型的建筑在畫面中大小變化）
3. 豐富建筑剪影形，高矮、粗細、方圓相互結合。
4. 近景的造型更復雜，背景簡化處理。
通過分析確定了我的構圖方向，利用搜集的素材，我們可以大致的擺放一下位置，將畫面分四個層次，藍色區域的中景建筑是這次畫面的主體元素，紅色前景區域起到遮擋作用，綠色中后景區域豐富了畫面的層次，紫色遠景作為背景襯托前面的元素。
- 主體建筑物的繪制
1. 抓住照片中建筑物最有特點的幾個地方
2. 根據構圖調整建筑的長寬比例，用幾何形體概括外形，扁平處理，不做透視的變化。注意：對參考照片做一些主觀的調整，不要完全一樣哦~
- 遠景建筑群的繪制
1. 概括建筑群中的幾種建筑形態
2. 將幾種建筑形重新組合，做高低大小的演變，形成新的建筑群，添加植物、臺階等元素豐富層次變化，并添加建筑內部的細節。
-
其他元素的繪制
1. 汽車的繪制：
② 用幾何圖形進行概括和演變，車輛主要用到的幾何形是半圓角矩形和圓形。
2. 郵筒的繪制：同樣也是對照片進行幾何圖形的概括，主要用到了半圓形、矩形以及圓形。
然后我們將二者和小植物做組合搭配，形成畫面的前景，元素組合的形式可以避免元素的單一，并且更有層次。
3. 植物：植物同樣可以從照片中提取幾何形，再進行演變，這里我通過照片提取了圓角矩形，三角形，圓形，再通過組合疊加的形式，演變成新的幾何形。植物在畫面中可以作為前景，或者穿插聯系其他單體，也可以作為點綴元素重復出現。
4. 人物：人物在畫面中也是起到點綴的作用，面積不大，不需要五官的刻畫，畫出基本動態即可。
① 從照片中提取動態。
線稿的繪制是在 illustrator 中完成，在草圖的基礎上添加物體內部細節并對整個畫面做最后的調整。
1. 建筑的屋頂造型用三角形、梯形、半圓做了統一的規范。
2. 在草圖的基礎上，用AI把線稿畫出來。
最后再檢查一下畫面的疏密關系，線稿就完成了。
1. 梳理黑白關系
因為畫面的層次比較多，我們可以先確定下畫面的黑白關系，場景設定是夜晚的場景，整體氛圍可以是暗色調，中景區域的顏色亮暗對比較強，是重點突出的地方，背景統一在暗調里，不做太強烈的亮暗對比，起襯托作用，前景壓暗，穩定畫面效果。
2. 配色：配色我選擇藍紫色調為畫面的主色，輔助色選取主色的鄰近色（綠色）來豐富顏色，互補色（深紅色）來增強畫面沖擊力，用純度高的橙色與紅色作為畫面的點綴色，使整體配色既和諧統一，又豐富多彩。
為了避免配色雜亂，可以將畫面分塊，大致安排下畫面顏色的占比，主色大概占到畫面的 65%，鄰近色 15%，互補色 15%，點綴色 5%。
結合之前的黑白關系，我們就可以完成色稿了，注意冷暖的變化也可以體現畫面的層次感，背景偏冷，過渡到前景，逐漸變暖，我們以植物的顏色變化為例。
最后整體觀察，注意顏色在畫面中要分布均衡，相互呼應。不要一種顏色只出現在一處（如下圖的紅色運用），飽和度高一點的點綴色，可以起到點亮畫面的作用。
-
建筑的刻畫
2. 加陰影：在房檐下方繪制陰影，陰影的添加可以豐富畫面層次，增加體積感。
3. 加裝飾：創建一些小的裝飾圖形作為花紋填補在塊面中，點面結合，使畫面裝飾細節更為豐富與細致。注意裝飾圖形的安排要有疏密變化，亮面圖形的顏色可以用物體暗面的顏色，暗面圖形的顏色可以用物體亮面的顏色，既不破壞整體色調，又使畫面更加豐富。
同理，遠景建筑也用同樣的步驟刻畫。
1. 加明暗：遠景的建筑塊面顏色對比可以減弱，相對更加統一。
只需將墻體做一個亮暗的區分，窗戶這些小的塊面就不用再做區分了。
2. 加陰影：在建筑交接處添加陰影，豐富層次。
3. 加裝飾：添加裝飾元素，種類可以不用很多，統一一些。
- 汽車刻畫
1. 加明暗：物體進行明暗的塊面區分。
● 人物刻畫
- 植物的刻畫
1. 圓角矩形樹的刻畫：首先對同組樹叢做顏色區分。
- 遠景的處理
遠景對整個畫面起襯托作用，先將背景做圖形的分割，在與建筑交接處做重色的襯托，在圖形上延用了 Z 形元素，與屋頂相呼應，再依次加入月亮星星云彩、小樹、小鳥、圖形裝飾等元素，點，線，面相結合，在統一中富有變化。
再這樣那樣之后，我們的畫面就完成了，啦啦啦~撒花~
1. 畫面構圖的層次安排
2. 照片元素的特征提取，幾何圖形概括及組合
3. 色調的統一和變化
4. 裝飾元素的添加
那么今天的教程到這里也就結束了，你學廢了嗎？喜歡記得點個贊哦，我們下次再見。
原文地址：胡曉波工作室（公眾號）
作者：藍貴蓮
轉載請注明：學UI網》設計師看了都會收藏的色塊矢量插畫教程來了！【零基礎】
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司