近两年，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」。清新设计+黑科技排版，独一无二的代码级公众号！

推荐阅读：