五分钟教你快速掌握三维图标

我现在在Zeta工作,是一名产品设计师。 虽然我从未学过设计,还是工程师出身,毕业于印度一所不是很好的学校。但与外界贴在工程师身上的标签“单调、无聊”恰恰相反,我的专业实际上具有很高的创造性。

虽然我拥有不错的视觉审美(我的意思是,我知道什么样的T恤应该搭配什么样的鞋),但我更多是一位交互设计师,日常工作是:头脑风暴,确立产品特性,创建UI流程,分享用户行为等等。

在必要的时候我会做一些图,但是我还没有到达可以自信地仰起脖子说自己是一位插画师的等级。(我正在努力ing)

虽然,我掌握了大部分AI技巧,可以熟练使用AI,并能从容地画一些简单的功能图标。


【这些就是我说的简单功能类图标】

但是当涉及到“设计一个场景”或者“画一些美观的东西”时,我发现自己还是有很大的缺失。对于我来讲,很难辨别哪些元素是至关重要的,哪些是不必要的,甚至是多余的。

比如,当我画一个房子,画了很多版!

“我应该画一个窗户还是两个窗户?”

“我应该给门加分割元素吗?看上去会不会很乱?”

“我是不是应该加个烟囱让它看起来更像一栋房子?”

“我怎样去设计才能让这个房子看上去更像一家商店?”

这些答案不会主动地来找我。

这种情况在我去画更大、更细致的插图时更加严重。在某种程度上,我无法找到那种令人舒适的平衡感。


一、发现

经过一段时间的观察,我发现通过引入第三维度,我可以把那些我理想中的那些细节加入到这些简单的图标中,而且看起来一点都不复杂、凌乱。

在3D的插图中多出两个面,使它更接近现实中的物理对象的同时,还增加了视觉吸引力,效果相当棒!

当我们看现实中的物体时,大脑会基于不同距离和视角区感知它、扭曲它。(在不同距离、不同视角中,我们看到的物体呈现出来的形态是不同的。)我们模仿这种情况去做的图,被称为透视图。简单来讲,就是将物体远离视线的部分比照接近视线的部分按比例缩小。

2、等距插图

有另一种方法可以简化3D绘图,这种方法是我在工程学院学到的——等距。


【透视图vs等距图】

这种形式的插图提供了一个独特的视角,适合技术图纸。它唯一缺少的就是透视感,即,这个物体的每一个部分,无论是离视线近,还是远,尺寸不变。这种方法更加容易,而实践起来很实用。


【我在学校画的技术图】

三、趋势

最近,等距插图在数字产品上越来越常见了,因为他们简单、好看且真的很好用!当我第一次看到它们的时候,我无法相信它们竟然是用Ai——一款2D绘图软件画出来的。但是现在我学会了绘制它们的技巧,现在再看它们就是小菜一碟。

我自己画了了一些,它们不需要一双福尔摩斯的眼睛去分辨哪一个角度看上去会更加可口。


【2D图标vs等距图标】

四、技巧

这种技巧被称为SSR,只有实现涅槃才能掌握的超级难的技巧。

哈哈,开玩笑的。

SSR指的是——比例、斜切、旋转(Scale, Shear and Rotate)。对,就是这么简单。通过缩放、剪切、旋转正射投影(即投影平面切于地球面上一点,视点在无限远处,投影光线是互相平行的直线,并与投影平面相垂直。),我们可以模仿他们的等距对应形态。

假设我们现在需要把一个正方形制作成等距模式,我们需要这样做。

第一步:绘制正射投影

传统上,我们会称这些视图为俯视图、正视图、侧视图。但是在这篇教程里,我会把它们称为:俯视图(top view)、左视图(left view)和右视图(right view),以避免出现描述上的混乱。


【正射投影(这个设计的俯视图、左视图和右视图)】

第二步:应用SSR来修改这三个视图

我们从俯视图开始,把它从正射投影选出来:

1.(Scale)调整高度到86.602%(是的,它需要精确到86.602%,不能四舍五入到86%或者90%)。

2.(Shear)然后,将图形斜切+30°。

3.(Rotate)最后,把斜切后的图形旋转-30°。

【直角形俯视图的转化过程】

请保证你是严格按照以上比例数据来做图的,否则,最终做出来的图可能会出现偏差。

铛铛铛~我们的俯视图就做好啦~~

与俯视图相似的步骤,接下来做左视图和右视图:

左视图:

1.调整高度到86.602%(同样要确保这个数字);

2.斜切-30°;

3.旋转-30°。

右视图:

1.调整高度到86.602%(同样要确保这个数字);

2.斜切+30°;

3.旋转+30°。

总结一下,下面是转换数值的总表单。


第三步:把它们组合在一起

现在只剩最后一步,就是把所有的面组装在一起,完成!


现在你应该知道了,我们要做的就是把等边距图形的各个部分细致地调整即可


【等距耳机】

专业技巧1:

在Ai里,可以在Action中将“调整高度、斜切、旋转”绑定后一键设置。我可以写如何实现这种操作的教程,不过这就是另外一篇文章了。


【Ai中Actions的面板】

专业技巧2:

每一个等距图形的视角要是相同的,因为这样,才能将它们非常和谐地搭配组合在一起。举个例子,我可以轻易地将这个等距汉堡放在等距的笔记本电脑的右边,二者摆在等距桌子的上面,并且,它们看起来是如此搭配。


【这个汉堡看起来多棒!】

所以,你准备好了去唤醒沉睡在你身体里的插图天赋吗?通过引入第三维度,你可以打开曾经被束缚住的无限可能!

原文作者:Saptarshi Prakash

翻       译:蓝湖

注:本文系蓝湖原创翻译,转载请联系我们获取授权

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,923评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,154评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,775评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,960评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,976评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,972评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,893评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,709评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,159评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,400评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,552评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,265评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,876评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,528评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,701评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,552评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,451评论 2 352