像素艺术中的等距图形

2018-02-07 10:53:20 阅读 4056 本文来源:点融设计中心DDC
分享至:

1. 等距是什么?

等距视图是指,绘制物体时每一边的长度都按绘图比例缩放,而物体上所有平行线在绘制时仍保持平行的一种显示方法。

最早是出现在电脑应用程式的图像,以及早期的8位元电子游戏,近几年来的被广泛的使用在因特网、GUI(Graphic User Interface)以及行动游戏等等。


2. 等距视图游戏的历史

虽然计算机游戏的历史一直在20世纪70年代初期就看到了一些真正的3D游戏,但是第一个使用上述意义上的等距投影的不同视觉风格的视频游戏是20世纪80年代初的街机游戏。


1)20世纪80年代  

20180207103041739.jpg

高速公路遇袭(1985年)


等距视图是一种把2D游戏伪装为3D游戏的显示方法。使用这种方法的游戏有时候会被称作伪3D或2.5D

20180207103105298.jpg

蝙蝠侠(1986年)

执行等距视图的方法有很多,但为了简化,最有效最常用的一种——贴图法。从上面两张图可以看出,其上覆盖的菱形网格把地形划分贴图。

2)20世纪90年代  

20180207103118982.jpg

最终幻想III(1997)

20180207103217842.jpg

文明六世(2016)

在贴图法中,各个视觉元素都被切分为更小的部件,称为“贴图”,都是标准尺寸的。根据预先确定的平面数据——通常是2D数组,这些贴图被组织成游戏世界。

3)目前2000  

20180207104032586.jpg

Socioball(2015)  

20180207104045180.jpg

纪念碑谷 (2016)


3. 等距风格的图标、插画及应用范围

这种插画有一个专门的名字叫“isometric”。

应用范围很广,比如:icon、界面、启动页、插画、游戏、动画视频等等。

20180207104149803.jpg

图标

20180207104209461.jpg

字体

20180207104223434.jpg

插画

20180207104237376.jpg

海报

20180207104252187.jpg

启动页


4. 常用绘制软件

目前常用的软件有PS、AI、C4D。

现在网上有很多教程,比如:

http://www.ui.cn/detail/204993.html

http://www.zcool.com.cn/work/ZMTQ0MjkxMDg=.html


5. 干货来啦~

虽然PS/AI都能画出等距图标,但是现在有一个软件Affinity Designer 比它们画等距图更加轻松。 

20180207104356668.jpg

首先画等距我们需要画参考线,PS/AI都能画出来,但是方法还是稍稍显得复杂了一点,一些基本功不到位的同学会很头疼这个参考线的画法。Affinity Designer 的网格和轴管理器十分人性化的解决了这个问题。

不但对于新手来说是个不错的选择,而且它完美的融合了Adobe和sketch两个原本不相融的软件。

20180207104413863.jpg

网格类型选择等轴测,这样网格就会自动生成等距所需要的斜线。

并且它的网格还可以设置吸附功能,也就是画的每个元素都可以自动吸附在网格边缘。  

另外它还有一个十分便捷的功能,它的图形变形功能也十分强大。鼠标移动到矩形中间节点的会出现上下重叠的箭头(→),如下图:

20180207104529219.jpg

这样可以十分轻松的倾斜矩形到任意角度,并且还自动吸附到网格上了。  

拖拽矩形长宽的时候也是根据网格的路径来,不会影响矩形倾斜的角度。

20180207104545181.jpg

轻轻松松画一个小icon。

Affinity Designer这个软件目前只适用于苹果操作系统,在App Store商店里有售卖。


案例鉴赏:

↑软件:C4D、3D-MAX、Maya等大部分3D软件

↑绘图手法:插画


作者丨林泉

20180207105139624.gif

责任编辑:mr

认可我的创作,就鼓励一下吧

0人打赏
分享至:

拓展阅读

58:34
05:27:10
产品经理的5层修炼 课时最少实效最好的PM常备课

罗旭祥

资深产品经理   著《产品经理的五项修炼》

01:56:24
跨平台、跨设备的用户体验设计技巧

钟帆

微软   资深用户体验设计师

联系客服

故障反馈