等距图解——二维图形呈现三维——增加了应用程序和网页图形的深度和重点, 改善用户体验和用户粘性. 例如，等距 点图标, 哪些往往比界面图标更大，可以用来强调微观复制和呼吁行动. 其他等距图像，如 信息图, 图, 产品效果图, 当用户需要详细的产品信息或流程鸟瞰图时，提供清晰的信息. 例如，汽车制造商的网站可能会显示一个 爆炸等距渲染 以展示其零件的精密工程, 或者一家房地产公司可能会提供一个等距图来突出潜在购房者的重要里程碑.

等距插图可能是棘手的和时间密集的生产. 然而, 我花了几年时间为客户制作等距矢量插图，并发现了一种更快的制作方法. 在这个等距插图教程 UI设计人员，我解释如何使用 Adobe Illustrator的3D旋转效果创建等距物体在六个简单的步骤.

如何在Adobe Illustrator中创建等距插图

在Adobe Illustrator中，您可以使用该工具的3D效果快速创建等距插图. 在本教程中，我们将制作一个简单的等距图 画一个瓶子 和标签使用旋转效果, 但这些见解也适用于Illustrator的其他3D效果，如挤出和斜面.

第一步:画出瓶子和液体

创建一个新的adobe插画家文档，并在文档中添加一个瓶子的图像参考. 画出瓶子和里面液体的轮廓. 把瓶子和液体分成两半. 瓶子轮廓的笔画厚度将决定玻璃的厚度.

专家提示: 复制并粘贴到画板外部作为备份.

步骤2:应用旋转效果

顾名思义，旋转效果是旋转的 的路径 在其全局y轴(旋转轴)的圆形方向上创建一个3D对象. 在Adobe Illustrator中，旋转轴的位置是垂直固定的. (这就是为什么我们画出瓶子的轮廓并把它分成两半.)

专家提示: 不要使用渐变作为瓶子轮廓或液体物体的填充色. 您将有机会添加渐变, 突出了, 和其他视觉效果在教程的最后.

To find the Revolve effect, go to Effect > 3D and Materials > 3D (Classics) > Revolve (Classic). 在对话框窗口的顶部，您将看到一个标记为Position的字段. 选择左等距. 在“旋转”下，调整以下旋转和表面阴影选项:

• 角度:这定义了围绕物体轴的旋转程度. 如果设置为180°，瓶子将垂直分成两半. 将角度设置为360°，以创建一个完整的瓶子.
• 偏移量:控制与对象垂直轴的偏移距离. 输入0.
• 表面:设置物体的材质和光照属性. 选择无阴影.

你创造了一个等长的液体瓶. 现在是时候添加标签了.

专家提示: 此时，您可能想要应用“扩展外观”效果, 但在我们创建标签之前不要这样做.

步骤3:准备瓶子标签

使用瓶子来定义标签尺寸. 在下面的示例图像中, 车身标签的高度是明显的, 但颈部标签的高度不清楚，因为表面不平行于轴. 一个大概的高度就足够了. 标签长度使用 圆周长公式2πr.

当您对标签设计满意时，将两个标签都转换为符号. The Symbols panel is found under Window > Symbols. 将标签设计单独拖放到面板中以创建符号.

专家提示: Adobe Illustrator和Sketch中的符号工作原理类似.

第四步:把标签贴在瓶子上

只要瓶子还没出现 矢量化 使用扩展外观效果，它是完全可编辑的. Select the bottle and then navigate to Window > Appearance > 3D Revolve.

要将标签设计映射到瓶子上，请单击 地图艺术 选项，在3D旋转面板的左下方. 这将允许您选择和调整瓶子的符号. 确保将符号匹配到正确的表面. 点击 按比例调整，标签将映射到瓶子上.

按照同样的步骤做颈部标签.

第五步:清理文件

现在是申请的时候了 贝塞尔曲线-用于计算机图形学，以产生在所有尺度上看起来光滑的连续曲线-到你的瓶子. Select Object > Expand Appearance.

展开对象的外观将创建小元素的分组集合，这些小元素将提供 三维物体的错觉. 将这些元素与Pathfinder或Shape Builder工具结合使用以保持整洁.

连接对象将创建不需要的 锚点. Reduce them by selecting Object > Path > Simplify. 如果您经常使用Illustrator，请下载 VectorScribe插件 并使用它 删除锚点工具 为了完善这一步.

第六步:用颜色和渐变来完善你的插图

一旦你创建了你的等距图，你可能想要添加 颜色和渐变 让瓶子活过来. 添加反射, 突出了, 和阴影(组织在单独的层)为现实的外观, 或者使用笔画和简化的调色板来获得更多的图形氛围. 如果你不确定从哪里开始, 使用Illustrator的调色板生成器探索不同的颜色组合. 有了坚实的等距插图基础，设计的可能性是无止境的.

UI设计中的等距图解

现在你有一个快速和简单的方法来创建等距插图, 看看Toptal其他三位设计师的例子，让你的创意源源不断.

数码会议小册子

Štefan剥č 是Adobe股票市场的模板设计器. 这个例子是他用简单笔画创建的数字会议宣传册模板, 形状, 文本框, 和单色渐变. 来创作这些图画, Štefan使用In设计的旋转+/-30°和倾斜+/-30°效果来实现等距扭曲.

数码办公室指南

还要他是这家 使用等距插图为Teal Space创建了一个数字办公空间指南. 她之所以选择这种技术，是因为它在建筑图纸中很流行，而且她觉得等长图像的三维性质可以帮助她的效效图在Teal Space的网站上脱颖而出, 哪个主要采用平面设计元素.

Instagram运动

为庆祝阿曼建国50周年， 瓦法”Babsail 被委托为Asyad Group创建一个独特的Instagram活动, 中东的一家物流公司. Wafa使用等距插图技术和夸张的比例关系设计了一幅地图，显示了该公司对阿曼海港的广泛影响.

使用等距插图将您的UI设计带入生活

等距插图帮助设计师带来深度, 维, 他们的UI设计项目的个性. 传统上, 创建等距插图是一项耗时的任务, 但这不是必须的. 不管你是在绘制地图, 产品呈现, 或信息, 等距绘图是增加丰富度和透视图的好方法 网页和移动插图.

通过遵循本教程中概述的快速简便的方法, 您可以在任何时间创建惊人的等距艺术品.

本文最近进行了全面更新，以纳入最新和最准确的信息. 下面的评论可能早于这些更改.