创建2.5等距插图-简化版

了解如何在Sketch 中快速创建最具吸引力的等距插图。

 

如果您是设计师或插图设计师，那么你每隔一天可能或多或少都会绘制一次插图。插图有助于向新用户传达复杂的想法，功能或产品的优势等。

 

在现代产品设计中，我们有许多不同的插图风格，但它们仍然在向无限扩展。而等距插图是极简主义设计师最喜欢的风格之一。

 

通常，插图设计会遵循传统流程，包括绘制等距网格，然后其上开始创建绘制对象。下面将介绍一种不需要等距离辅助线，并且简单易上手的的方法来绘制2.5D等距插图。

 

1. 通过拆解发现规律

1.对等距离物体拆解成平面图。拆解后如下。

 

2.我们观察一下拆解后平面图，可以找到每个面的长、宽之间的规律:

tw =fw ,fh=sw ,th= hs

 

3.我们对等距离物体进行拆解，拆解后发现每个面的每个角都是120°。

2.如何运用规律进行绘制。

如果将平面的着顶部图形，旋转到-45°或+45°。再将高度设置为57.7350％，最终将得到等轴测投影的顶视图。我们可以将其进一步旋转到+60或-60度，以进行正视图或侧视图。

 

那究竟为啥要将高度设置为57.7350％？数学计算及推导原理可以阅读 Nitish Khagwal 的《Creating Isometric Illustrations — Made Simple with the Isometric Projection》这篇文章，这里就不做详细解说了。

 

3.验证这个方法及详细步骤分解

线上效果图  原作者：ChuYu   作品链接：dribbble.com/shots/4736754-tech-illustrator-isometricutm_source=Pinterest_Shot&utm_campaign=ZoraWang&utm_content=tech%20illustrator%20isometric&utm_medium=Social_Share

 

第一步：

在sketch里先绘制这个插图里带网格的底座, 底座是由一个正方形和一个网格纹理的正方形组成的。

 

第二步：

合并网格线。选中网格线的图层，然后执行图层-轮廓化. 再次选中网格线图层。执行图层-结合-联集。

第三步：

选中合并后的网格线及蓝色方框。然后执行上下左右居中对齐。得到一个带有网格纹理的正方形。

第四部

同时选中蓝色方形+网格纹理的方形，然后旋转45°。

 

第五步：

先选中网格纹理的方形，点击路径合并 。操作后的选态效果如图所示

 

第六步：

保持宽度不变，将高度值 X 57.73%. 就得到了插图中的底座。

 

第七步骤：

将蓝色方形+网格纹理的方形变成一个组，然后复制3个，依次上移动30px, 保持间距一致。最下面的透明度变为15%，倒数第二层透明度变为30%。现在底座就绘制好了。

 

第八步：

绘制会底座上层的黄色立方体。顶面的绘制请重复前面的1-7步，左侧面就是将顶部旋转60°，右侧面就是将顶部旋转-60°。这个黄色立方体的3个面就得到了。

 第九步：

将现在的绘制好的元素组合。

第十步

外部线框，选择形状中的多边形，绘制一个6边形。六边形的宽度和黄色立方体顶面的宽度一样，然后选择缩放，等比例放大110%。

 

第十一步

用直线将图中的这4个红点连接起来。

 

完成后的效果如图。其他图形绘制原理一样，这里就不细讲了。

 

最后上一个最终效果。

为了方便大家学习和练习，最终效果的sketch文件素材也毫无保留分享给你。

素材获取方式：关注"NG设计灵感"公众帐号，点个在看，后台回复“2.5D”即可获得