欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

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

发布时间:2018:02:09 17:08:01 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1081个文字,预计阅读时间3分钟
导语
什么是等距图形?等距图形的发展历史?如何快速做出等距图形?这篇总结全都有了!

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

  一. 等距是什么?

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

  最早是出现在电脑应用程式的图像,以及早期的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软件

  

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

 

  

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

 

  △ 绘图手法:插画

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:Banner设计宝典系列!玩转9种最常见的设计风格

下一篇:UI设计当中的3C要素:色彩,对比和内容

  • 18895 文章总数
  • 2309072访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信