isometric 2.5d风格插画绘画步骤

作者网址：Nitish Khagwal

原文地址：Creating Isometric Illustrations—Made Simple with the Geometric Technique

译者：mantfly

简介：isometric 等距风格，也称2.5D风格。本文用一系列图例教初学者如何画出等距插图。AI可以用3d效果画出2.5d风格，但是线的粗细会在空间受影响。下面这种方法适用于ps、ai（sketch单轴缩放没有百分比）。

---

作者画的等距风插画  for uvdesk app

插画师都用传统的网格线，先画等距参考线再徒手画物体。

传统的等距网格线

本文适合给有一定ps基础的新手插画师/设计师。如果你想知道读了这十分钟的文章之后能够获得什么画图技能，可以看看这个合集→ Isometric Space 。

几何技巧

平面是二维的延伸面。

等距风格插画由3个几何平面构成。

XY面——物体位于X和Y平面。物体的形状在XY平面变化，而深度、高度和距离在z平面变化。

XY Surface in 3D Geometry

YZ平面——物体位于YZ平面。物体形状在YZ平面变化，而深度、高度和距离在X平面变化。

YZ Surface in 3D Geometry

ZX平面——物体位于ZX平面。物体形状在Z和X平面变化，而深度、高度和距离在Y平面变化。

ZX Surface in 3D Geometry

在XY表面画等距物体的步骤

打开PS创建新文档。

用矩形工具（U）画一个边长约为400px 的正方形。

用指针（V）选中正方形，高度设置为90%。

用指针选择正方形，将水平倾斜角度设置为-30度。

旋转30度，图形就放置于XY平面上了。

再看下连在一起的效果。

现在，通过用“Alt”+“向下箭头”键复制相同的形状几次（≈75+），可以在Z平面中挤出正方形的深度。结果将如下所示 -

现在可以使用剪切遮罩再添加不同颜色到场景中，最终的输出如下-

现在在XZ平面画等距物体。创建一个新的ps文档，画一个边长400px的正方形。

将正方形旋转-45度。

高度设置为56%。

旋转60度。

用“Alt”+“向上箭头”和“Alt”+“向右箭头”键复制相同的正方形（≈75+），可以在Y平面中挤出正方形的深度。结果将如下所示 -。

汇集这些步骤。

你现在可以用遮罩工具架不同颜色到场景中，现在可以输出如下的图。

YZ平面，同上。

旋转45度。

高度改为56%。

旋转角度-60度。

复制。

汇集这些步骤。

上色。