近兩年，2.5D立體插畫極度火爆，常出現於商場海報、APP開屏、網站Banner、專題頁等。不得不說，在視覺傳達方面，立體插畫得天獨厚。立體視覺的呈現讓畫面特別有層次感，印象深刻。下面粗淺的寫一下入門教程，供參考。

一、建立正確的參考線

1. 新建畫布，畫一根豎直線，按住alt鍵平移複製。一直按Ctrl+D重複上一步操作，直到豎線鋪滿整個畫布。

2.全選豎線，右鍵-變換-旋轉60度-複製。Ctrl+D重複上一步操作。我們就得到如下的參考網格，將其鎖定。

二、繪製立方體

立方體是2.5D立體插畫最基本的立體圖形，基於立方體的三個面，可以衍生出其他立體圖形。

1. 用鋼筆工具，沿著參考線，繪製立方體的三個面。注意線條要和參考線對齊。

2. 根據光源位置，給立方體的三個面添加顏色。顏色的選擇多是不同明度的同類色。

如上是基於參考線繪製立方體，除此之外，還可以通過3D效果繪製立方體。

①繪製正方形；

②效果-3D-凸出和斜角。參數設定為-45° 35° -30°。

因為當前是一個正方形的3D效果，而非矢量圖形，所以我們需要把效果轉化成對象。

③對象-擴展外觀。效果矢量化後，我們就可以對立方體的三個面進行處理。

同理，可以針對圓形、三角形等設置3D效果，轉化成對象後，均能生成矢量圖形。

這種方法比較快捷，但是在複雜圖形和場景下，角度比較難把握，所以我們仍以參考線繪製為主。

3. 立方體組合。

對立方體進行複製、調整寬高、排列組合。

4. 增加投影，讓效果更加真實。

投影的繪製不建議使用顏色漸變，因為ai裏的顏色漸變效果會比較臟。推薦在投影上添加透明度漸變，整體效果乾凈自然。

三、繪製其他立體圖形

1. 三角錐

①基於參考線繪製：鋼筆工具繪製底面和兩個側面；

②基於立方體改制：去掉立方體頂面，將左右側面變成等邊三角形，直接選擇工具選中頂部錨點，向上拉伸↓

2. 圓柱

①繪製圓柱頂面：選擇立方體頂面，效果-風格化-圓角；

②繪製圓柱底面：原位複製圓柱頂面並垂直移動；

③繪製圓柱側面：鋼筆工具勾勒矩形後，合併路徑，調整圖層順序。

3. 圓錐

取圓柱頂面/底面，於參考線內繪製圓錐側面。

4. 立體圖形組合

調整三角錐和立方體的大小，組合成樹木，並通過複製排列組合成森林。

四、場景組合

所有的素材繪製好後，需要有規律的擺放。常用的方法是網格分割法——用網格或者類網格元素（比如道路）來做畫面分割。

五、設計參考

2.5D立體插畫 | 螢火城堡?

mp.weixin.qq.com論養豬，我們是認真的。?

mp.weixin.qq.com

六、小練習

根據如上教程，繪製2019立體數字，添加小山、綠樹、雲彩等元素↓同時，也可以嘗試添加SVG動態效果。

詳細教程歡迎關注公眾號：「yiwebsite」。清新設計+黑科技排版，獨一無二的代碼級公眾號！

推薦閱讀：