• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 关于像素艺术中的等距图形,这份总结超全面!

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

作者:点融设计中心DDC 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含2.5D,Affinity Designer,插画设计,等距图形,经验分享等相关知识,点融设计中心DDC希望在学习及工作中可以帮助到您

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

一. 等距是什么?

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

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

ddcqr

「简单实用的2.5D插画教程」

  • 《看着高大上的2.5D插画,轻松5步就可以做出来!》
  • 《实战案例!新功能引导页设计思路总结》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 关于像素艺术中的等距图形,这份总结超全面!
  • 实战案例!新功能引导页设计思路总结

相关文章

  • 2018-08-23你的设计有依据吗?详解用户体验设计中的规律与逻辑
  • 2017-08-06浅谈 div 与 table 如何取舍结合利用
  • 2018-08-23超长篇干货!如何从交互维度量化用户体验?
  • 2018-08-232018年,网页和APP中背景的8个主要设计趋势
  • 2017-08-06IE8兼容视图(IE7 mode)与独立IE7的区别详解
  • 2018-08-23如何简化操作流程?来看这篇超全面的总结!
  • 2018-08-23设计表单的时候,为什么悬浮式标签体验更好?
  • 2018-08-23不仅要考虑到一般情况,设计师还要为极端情况而设计
  • 2017-08-06对淘宝商城首页大图设计架构的分析与看法(图)
  • 2018-08-23老板让我点评这个UI设计,但我不知道从哪说起…

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 从这些基本的字体排版规则入手,搞定网页排版这件事
    • 让传达更有效!7个提升数据可视化的实用技巧
    • 三种方式实现元素水平居中显示与固定布局和流式布局概念理解
    • windows下NodeJS安装配置步骤
    • 网站设计中很重要的概念div+浮动剖析
    • Web前端开发中找错的基本思路
    • 上亿人使用的唱吧APP V8.6 改版设计过程揭秘
    • UX文案怎么写?来看看谷歌的方法总结
    • 学会这两招,快速提升设计师的作品集格调!(实例演示)
    • 关于Web前端神器 Sublime Text 2 的介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有