赞助商
立即赞助

关于像素艺术中的等距图形,这份总结超全面!

UI设计3年前 (2021)更新 流光
2.9K 0 0

什么是等距图形?等距图形的发展历史?如何快速做出等距图形?这篇总结全都有了!

一. 等距是什么?

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

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

二. 等距视图游戏的历史

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

1. 20世纪80年代

关于像素艺术中的等距图形,这份总结超全面!

△ 高速公路遇袭(1985年)

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

关于像素艺术中的等距图形,这份总结超全面!

△ 蝙蝠侠(1986年)

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

2. 20世纪90年代

关于像素艺术中的等距图形,这份总结超全面!

△ 最终幻想III(1997)

关于像素艺术中的等距图形,这份总结超全面!

△ 文明六世(2016)

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

3. 目前2000

关于像素艺术中的等距图形,这份总结超全面!

△ SOCIOBALL(2015)

关于像素艺术中的等距图形,这份总结超全面!

△ 纪念碑谷 (2016)

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

这种插画有一个专门的名字叫「isometric」。应用范围很广,比如:icon、界面、启动页、插画、游戏、动画视频等等。

关于像素艺术中的等距图形,这份总结超全面!

△ 图标

关于像素艺术中的等距图形,这份总结超全面!

△ 字体

关于像素艺术中的等距图形,这份总结超全面!

△ 插画

关于像素艺术中的等距图形,这份总结超全面!

△ 海报

关于像素艺术中的等距图形,这份总结超全面!

△ 启动页

四. 常用绘制软件

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

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

  • 《用illustrator制作Isometric风格的宝塔》
  • 《isometric立体图形绘制分享 》

五. 干货

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

关于像素艺术中的等距图形,这份总结超全面!

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

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

关于像素艺术中的等距图形,这份总结超全面!

关于像素艺术中的等距图形,这份总结超全面!

关于像素艺术中的等距图形,这份总结超全面!

类择轴测,距需。

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

关于像素艺术中的等距图形,这份总结超全面!

关于像素艺术中的等距图形,这份总结超全面!

另它捷功,它图形变形功。鼠标移矩形节叠箭(→),图:

关于像素艺术中的等距图形,这份总结超全面!

轻倾矩形任,并吸。

关于像素艺术中的等距图形,这份总结超全面!

拖拽矩形宽根据径,响矩形倾。

关于像素艺术中的等距图形,这份总结超全面!

轻轻画icon。

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

案例鉴赏:

关于像素艺术中的等距图形,这份总结超全面!

关于像素艺术中的等距图形,这份总结超全面!

△ 软件:C4D、3D-MAX、MAYA等大部分3D软件

关于像素艺术中的等距图形,这份总结超全面!

关于像素艺术中的等距图形,这份总结超全面!

△ 绘图法:插画

欢迎关注点融设计中心DDC微信公众号:「ID:DR_DDC」

关于像素艺术中的等距图形,这份总结超全面!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

Echo :本文将以酷狗K歌ios版(虚构)为载体举例说明,什么样的原型图才能算得上专业而细致?希望各位可以很清晰的感知这套方...
原型设计
对于设计师而言,平面设计是最基础的技能之一。而海报和宣传单的设计,也几乎是每一个设计师的必修课。如今网页上的 Banner,...
海报设计
王镇雷:这几天帮朋友看作品集,很高兴地看到大家在阐述设计思路时把竞品分析纳入进来,竞品分析是设计师或产品经理在工作前...
产品分析
你有没有尝试过各种各样的能够影响用户行文的设计策略和设计方法?无论是指向性明确的配色方案,还是 A/B 测试,抑或是在着陆...
Adam Fard
当我们讨论色彩的时候,聊的更多的是色彩的搭配。虽然有些设计师认为有些色彩是一些纯粹的美学上的选择,但是实际上,色彩对...
经验分享
@糖糖糖就是糖 :这篇文章给大家分享一下在画好线稿的重要性,并总结了一些常见问题。选择合适的构图,画好线稿是一张画的开...
手绘
网易UEDC – 仉长娟 :从事 B 端产品交互设计工作的半年时间里,有幸接触了面向开发和运维人员的 B 端业务类列表交互设计工作...
Web设计
今天我们来聊一聊特斯拉最新的车型 Model 3的中控大屏,这是一块具有标志性意义的中控设计。Model 3 的HMI堪称是对汽车行业的...
交互设计