多起村干部被灭门案,需要反思了!

高铁打人者身份被曝光,人脉资源碾压普通人!却遇到了硬茬

OPPO芯片业务解散不一定是坏事

明确了!任期届满后,他不再寻求连任!

去泰国看了一场“成人秀”,画面尴尬到让人窒息.....

生成图片,分享到微信朋友圈

自由微信安卓APP发布,立即下载! | 提交文章网址
查看原文

用数学公式创建与设计2.5D轴测图

设计师都关注👉 UI范 2022-04-24


以下是正文:


等距插画是极简主义设计师们最喜欢的风格之一。



一般来说,插画师都会走传统的流程,包括画出一个等距网格,然后在网格上手动创建所有对象。


我们是具有艺术态度的技术人员,而不是一个痴迷于画布的艺术家。但是,我还是喜欢艺术,并从中获得灵感。所以,我选择了等距视图结合一些数学的方法来创建等距插画。


我们可以创建一组各自的等距部件,然后将它们组合起来,就可以创作出一幅等距插画。


我们需要了解正交视图和等距视图,才能在Figma或Sketch App等现代原型设计工具中快速创建等距对象。


三维物体可以用正视图或等距视图的方式在二维空间中直观地表现出来。



物体有俯视图、正视图和侧视图。根据观察者的视角,我们可以互换地确定俯视图、正视图和侧视图。



正视图和等距视图


在正视图中,一个物体是以平面的方式来表示的,每个平面之间的角度是90度。



在等距视图中,任意两个平面之间的夹角为120度,而第三个平面则为90度。我们可以在等距视图中看到物体的深度。



我们可以利用一些基本的数学和神奇的乘法器,在等距视图中轻松地画出任何形状,如立方体或圆柱体。



在等距视图中,我们至少需要3个不同的平面来绘制物体的俯视图、正视图和侧视图。



在上图中,俯视图是在XY平面上绘制的,正视图是在YZ平面上绘制的,侧视图是在XZ平面上绘制的。


我们已经擅长正视图和等距视图,接下来,我们要学习如何创建等距物体。



等距视图技术


如果我们将一个平视的正视图旋转到-45或+45度,并将其高度设置为57.7350%,我们将最终得到一个等距视图的俯视图。我们可以进一步将其旋转到+60或-60度,以获得正视图或侧视图。



数学—等距魔数57.7350%


【如果你赶时间,可以暂时跳过阅读这部分内容,将本文收藏起来以后再阅读】


我们可以在正视图和等距视图中找到三角形的高度,并进行百分比比较。


我们可以用相邻和对边长度相等的直角三角形。这样的三角形也有两个相等且相对的角为45°,使之和为180°。


让我们一步步来做。


让我们画一个相邻两边长度相等的直角三角形(20)。


直角三角形,相邻边和相对边相等


在下图中,我们需要找到x的值,这样我们就可以和等距视图的高度进行比较。我们还需要找到y的值,这样我们就可以计算出三角形在等距视图中的高度。


直角三角形的高度


在下图中,我们可以用Cos(θ)=b/h来求y的值,用Sin(θ)=p/h来求x的值,让我们来做一些快速的数学计算--。


使用三角函数查找X和Y



Cos(45°)=基点Y/斜边H。

基准Y=Cos(45°)*斜边H。

baseY = . 7071 * 20

因此,基数Y=14.1421


同样地:

Sin(45°)=垂直X/斜边H。

垂直X=Sin(45°)*斜边H。

垂直X = 0.7071 * 20

因此,垂直X=14.1421。


现在,让我们把三角形旋转到-45°。


旋转三角形为45°


我们知道,在等距视图中,两个平面之间的夹角是120°,所以我们重新画出PQ和RQ。


等轴测图中的三角形高度


现在我们可以利用Tan(θ)=p/b轻松地找到k的值。


我们开始吧


Tan(30°)=垂直K/基线Y。

perpendicularK=Tan(30°)*baseY(我们上面计算baseY=14.1421)

垂直K = . 5773 * 14.1421。

因此,垂直K=8.1642。


现在,让我们计算一下正交视图中垂直X和等距视图中垂直K的百分比。


让我们再来算一算


垂直X*n/100=垂直K。

n=8.1642*100/14.1421

所以,n=57.73%


我想现在在等距视图中制作物体时,非常自信地使用这个值是很有意义的。


教程:制作等距物体


让我们快速打开Figma或Sketch App来绘制我们的第一个等距对象。我们要创建一个立方体。我们先做一个正交视图,之后将其变成等距视图。



如何绘制正交视图?


在Figma或Sketch App中,使用 "矩形 "工具(R)绘制三个形状;分别为顶视图、正视图和侧视图。


简化一下,在正视图中制作俯视图、正视图和侧视图的矩形时,我们应该注意——。


正视图的宽度等于俯视图的宽度。

侧视图的高度等于顶视图的高度。

侧视图的宽度等于前视图的高度。


如何绘制等距视图?


我们先从俯视图开始。


第一步:绘制顶视图


从正交视图中选择顶视图形状。


将形状旋转到45°。


扁平化形状的绝对边界宽度和高度。


在Figma中,进入 "对象"→"扁平化选区 "或使用 "Cmd "+"E "键盘快捷键。在Sketch App中,进入 "图层"→"组合"→"扁平化 "或使用 "Cmd "+"8 "键盘快捷键。


将形状的高度乘以0.5773。


我们创造了顶视图。



第二步:绘制正面图


从正交视图中选择前视图形状。


将形状旋转到-45°。


扁平化形状的绝对边界宽度和高度。


将形状的高度乘以0.5773。


将形状旋转到60°。


我们创造了前视图。


第三步:绘制侧视图


从正交视图中选择侧视图形状。


将形状旋转到-45°。


扁平化形状的绝对边界宽度和高度。


将形状的高度乘以0.5773。


将形状旋转到-60°。


我们创造了侧视图。


现在,让我们把俯视图、正视图、侧视图拉近,形成一个立方体。



让我们尝试用同样的技术制作一个等距圆柱体。


首先,我们需要为圆柱体绘制正视图。在Figma或Sketch App中,使用 "矩形"(R)和" 椭圆"(O)工具,用于绘制顶部和正面视图的形状。



简单来说,在正交视图中制作椭圆和长方体的俯视图和正视图时,俯视图的宽度应该等于正视图的宽度。


对于顶视图,我们需要用0.5773乘以椭圆形的高度,非常类似,就像我们上面做的那样,同时创建立方体的顶视图。


复制顶视图椭圆为底视图。


让我们把顶部、正面(从正视图)和底部的视图拉近。是不是很简单?这就是我们如何在等距视图中创建一个圆柱体。


是的,就是这样!你是一个等距线大师。现在,你需要一点点的练习,揭开快速绘制等距插图的新境界。



在创作令人眼花缭乱的等距视图插画时,使用等距视图技术有无限可能。我相信你现在可以用等距视图画出所有可能的原始形状。


希望本文能帮助你快速绘制等距插画。


本期分享结果,感谢你的阅读,欢迎添加我微信

421978184

围观我的设计朋友圈,每天分享设计最新资讯与灵感等等...

共同进步,一起加油!


-------------------------------------------

精选推荐
2020双十一/京东/天猫/淘宝/规范与LOGO源文件
2020 版支付宝小程序设计规范指南!
精心挑选的iPhone12样机,全都汇总打包给你
公交通小程序——视觉设计与总结复盘!
提升UI细节和体验的10个常用技法!
UX中视觉设计的5条重要原则
手机端的主按钮应该放在那里?
如何报告表格中的错误:10个设计准则
人人都谈极简设计风格,到底怎么样才算?
-------------------------------------------

文章有问题?点此查看未经处理的缓存