提问 发文

2.5D图形设计经验谈

微微菌

| 2024-07-12 16:38 131 0 0

2.5D简介

什么是2.5D?

2.5D是一种介于2D与3D之间的设计方法,又被称为等角视图或者是伪3D,也叫做isometric,特点是没有透视与灭点,所有在现实中是平行线的在2.5D中依然可以显示出平行关系。早先常用于工业制图,后来被广泛应用于游戏设计、插画设计、文字设计与图标设计中。

一些典型的应用:

2.5D与2D和3D的区别是什么?

与2D图标相比,2.5D能完全展示出一个物体3个轴向上的表面,使其在人眼中有一种立体的错觉,可以体现出纵深感与立体感;与3D相比,2.5D没有透视关系,换言之,一个2.5D的物体在现实中是不可能存在的,他只是对3D物体的一种艺术化展现形式。

为什么要用2.5D的形式来展示图标?

从效果上来看,2.5D形式具有平面图形所不具有的立体感与纵深感,方便去表现一些复杂的、三维化的场景;同时,它又可以像平面图形一样用Ps、Ai等平面软件来绘制而不必使用3D建模,可以节约设计师的时间与精力;另外,2.5D图形不用考虑透视关系,对设计新手来说也更容易掌握、更容易统一设计风格。

3D与2.5D的视觉差异:

2.5D图标的画法

Ai的3D效果

这个是最简单的一种绘制方法,Ai提供了几个小工具可以傻瓜化输出2.5D图形:

我们要做的就是用好“凸出与斜角”、“绕转”、“旋转”这三个功能,下面以画一个2.5D的立方体举例:

凸出与斜角

首先我们用矩形工具画一个正方形:


选中正方形之后点击“凸出与斜角”选项,出现设置弹窗,在上方的“位置”中选择“等角-左方”(因为我们用正方体举例,所以选其他几个等角方向也可以),勾选下方的“预览”,你会发现正方形变成了一个菱形,这就是2.5D立方体的左面了:


然后我们根据自己希望的立方体厚度,在“凸出厚度”中输入相应的数值(后面的“端点”相当于给不给立方体加盖),这样一个2.5D的立方体就画好了,你也可以在“更多选项”中调节立方体的光照方向:



绕转
“绕转”这个功能类似于三维软件中的旋转成型工具,可以用一根线条沿一个轴线旋转一周生成一个“立体”图形。
首先绘制一条曲线:



选中曲线后点击“绕转”选项,出现设置弹窗,同样选择“等角-左方”,勾选预览,就会发现图形已经出来了:



下面还有“角度”与“位移”两个设置项,“角度”默认是旋转一周即360°,你也可以输入其他数值不把图形完全封闭;“位移”设置的是旋转轴距离剖面线的位置,类似于设置物体的“胖瘦”。



旋转
这一项的功能与“凸出与斜角”基本类似,就不赘述了。
扩展外观
用上述方法生成的2.5D图形是一个整体,如果要对他进行下一步操作就要用选中以后选择“对象”-“扩展外观”把图形解开,然后再解除编组就可以单独对某一面进行编辑了。
辅助线画法
这种方法比较传统,但在大场景中辅助线有助于对齐不同的元素组件,让画面看上去规整一些。依旧是用立方体举例:
平铺辅助线
这一步很简单,先平铺一组等距平行的平行线,再旋转60°和120°即可。


绘制图形
接下来就是用钢笔工具沿着辅助线去勾出立方体的三个面就好了。


其他图形
其他图形基本上也是依葫芦画瓢,比如三角形可以通过把正方形删掉一个角来生成:



圆形则需要通过“效果”-“风格化”-“圆角”来实现(不能直接拖图形上的圆角,不然会直接变成一个正圆):



其他更复杂的图形都可以通过以上两种方法结合来生成。
其他软件推荐
除了可以用Ai来画2.5D图之外,其他还有很多软件也可以用,下面介绍2个不太常见的软件:
Affinity Designer


这是一款类似Ai的矢量设计软件,它的好处在于可以直接生成带有吸附功能的斜辅助线,而且还能沿着2.5D的方向缩放图形,可以减少很多工作量。
Magicavoxel


这其实是一款像素风的建模软件,也可以调整成2.5D模式,用来画2.5D的像素风格设计就很合适,类似于“我的世界”。
2.5D在大屏中的应用
2.5D图形在大屏中一般作为主视觉呈现,通过大量2.5D图标的组合很容易成为视觉的焦点,再辅以图表用作解释补充,就可以很好地讲清楚一个场景或一套流程。如果有需要也可以在上面添加描述或弹窗等交互性内容,更进一步则可以通过数据控制图形的结构、颜色等实时展示当前流程的运行状态,帮助筛选出错的步骤。
设想了一些常用的使用场景:工业企业工艺流程展示、某一产业的全景式展示、某一手续或项目实施步骤展示、与地图结合展示图上的元素等等。更多的使用场景也可以在工作中去寻找。
以下是一些搜集到的参考大屏设计:



收藏 0
分享
分享方式
微信

评论

游客

全部 0条评论

10603

文章

10.5W+

人气

19

粉丝

1

关注

官方媒体

轻松设计高效搭建,减少3倍设计改稿与开发运维工作量

开始免费试用 预约演示

扫一扫关注公众号 扫一扫联系客服

©Copyrights 2016-2022 杭州易知微科技有限公司 浙ICP备2021017017号-3 浙公网安备33011002011932号

互联网信息服务业务 合字B2-20220090

400-8505-905 复制
免费试用
微信社区
易知微-数据可视化
微信扫一扫入群