教你如何画圈圈——标识设计中辅佐参考线入门

很多小同伴们为了提升设计作品的逼格,在设计展现图上打上各种圈圈,让复杂的图形,看起来高端上层次。 有的时分,屌丝与高富帅,仅一圈之遥。 还有一种普遍的景象,一个规范简约的logo降生之初,总会被内行人轻视讪笑吐

很多小同伴们为了提升设计作品的逼格,在设计展现图上打上各种圈圈,让复杂的图形,看起来高端上层次。
有的时分,屌丝与高富帅,仅一“圈”之遥。
p1
还有一种普遍的景象,一个规范简约的logo降生之初,总会被内行人轻视讪笑吐槽,当设计师发布了线框图(手稿之后),又会被一边倒的人评价仔细,专业。锤子的logo发布之初亦是如此。
p2

为何辅佐线能提升作品层次?

其实这些线线圈圈都是设计的手任务业时代玩剩下的东西,计算机设计时代,无需用笔、圆规、尺,工业及立体师设计用CAD轻松处理。大多互联网设计师非工业\立体设计半路出家,在平常的业务中,也简直很少能接触到。但仍有人迷恋他,无外乎几个缘由:
1.使设计成品无数理根据,设计元素之间都不是各自独立存在的,一定有某种视觉上的关联、透视、对齐,哪怕最终后果是紊乱无序的。
2.有标准性的数据便于扩展,兼容到各个场景的使用,或许对其他隶属产品及使用制定规则及指点。
3.显得专业、牛逼。

其实第三点才是大局部人的初衷,包括小编。我们任务中经常遇到需求方或内行对一些简约的设计五体投地,不尊重你的休息效果。一张有精细数字计算的线稿草图便成了过(装)搞(B)利器。之前提到的锤子logo就是个很好的例子。

标识制图办法

或许说是图标制图,一个原理。立体及工业设计范畴里很根底的东西。罕见的有两种:
1.坐标制图法
p3
画很多方格子,界定出标志在每个格子里的图形的样子,依此为规范样本。大多使用在VI设计、工业,官方的十字绣,还有唐卡的绘制。

2.几何制图法
p4
经过不同的圆相切,取得标志的各处曲线、弧度和转机数据,并证明这些数据的必要性和合感性。比方苹果logo,缺口、叶子、上端凹陷和下端凹进,相应圆形直径是分歧的。

黄金联系

重点来了,根据参考线作图的目的就是为了做出极具美感便于使用的图标。黄金联系比正是做参考线的根据之一。但一定切记,参考线仅是参考,被神化的“黄金联系”也是一样,就是可以方便设计师较为容易的找到成熟适宜的比例,虽不一定合适一切的Logo设计,但的确它十分通用。任何事物的美感都没有相对的,切莫科学于此。
p5

黄金联系为什么美:

在视觉上,黄金联系实质上带来的是调和——类似、反复、联络,以及变化——运动、生机。
我们观看图像的时分,眼睛和心闭塞过将视觉单元整合为一个交融的全体,来组织视觉差别。心灵天性的试图发明次序以摆脱混乱,以存储信息。艺术组织有七个准绳——调和、变化、均衡、比例、主导倾向、运动和繁复。艺术的组织进程就是经过类似将统一方面关联在一同,最初是需求成为一个一致。以线条为例,当一个艺术家运用线条使作品成为全体的时分,艺术家会经过长度、宽度、特征等一种或全部的关联性来发明最终的调和体。比例虽然是独自列出的一个准绳,但我们可以看到黄金联系同时拥有两个特性:调和、变化。

在摄影构图中,经常用到的构图规律 “三分法”。即是用到了黄金联系,下图中的四条线就叫黄金联系线,四条线的四个交点就叫黄金联系点。在拍摄时,把画面的主体放在黄金联系点或是黄金联系线上,这样更契合人的审美习气,以到达突出主体并让画面更协调的目的。
在AV封面中,三分法也用得尤其多。例如题图,主体人物在右侧三分线上,而胸部和膝盖都大致在三分点上。这样就能表现女优秀好的身体比例,并凸显其“重要部位”。
p6
下图,抠菊花的外型也如此完满地契合了斐波纳契黄金螺旋这一奥秘的美的规律,专业,严密,浑然天成。
p7
虽然看似调侃,但是专业的摄影师有丰厚的经历,更懂得掌握构图比例,哪怕是几秒的抓拍。

关于黄金联系的原理和计算办法,在此小编就不过多论述,网上关于黄金联系的文章漫山遍野,可以so一下,是360的so.com哦!(俨然看到了小编溜须拍马奉承嘴脸)

理论为王,苹果的LOGO是如何圈出来的

小编依照网上的CAD的绘制办法,重新用PS绘制,由于苹果官方的logo的弧度不是完全依照黄金比例做的(据作者称是有意而为之,概况:
http://www.quora.com/Apple-company/Does-the-Apple-logo-really-adhere-to-the-golden-ratio/answer/David-Cole#

第一步.首先是做好黄金比例的圆,假如你是完满主义者中的偏执狂,想要失掉一个比0.618更准确的数字,那么可以依照如下办法找到黄金联系点。

p8
当然,这个精度的偏向在以像素ps里,完全可以疏忽不计。所以在这里引荐用工具来计算。
此网站有关于黄金比的详细引见及计算工具:
http://www.mathsisfun.com/numbers/golden-ratio.html
p9
由上数据,画出一个边长为500px *309px的矩形(尽量用途径来画,ps cc里随意画一外形,在属性面板里输出数值)在矩形中画一内切圆1,选中后设置参考线,再画与圆1和矩形相切的圆2,以此类推。关于参考线引荐下图中的插件:GuideGuide 做页面的时分,小编无时不刻不在用它,基本停不上去。点击检查引见
p10
第二步.以圆6为中心,选中后应用Guide设置参考线。将圆1拖入,与圆6为同心圆(可以ctrl+t,将中心点对准参考线接壤)
注:由于我们要画带参考线的展现图,所以把每个圆置于独自图层,以便外形图层和参考线图层区分。
p11
第三步.
p12
第四步.
p13
第五步
p14
心急的话,我们可以在此步后,就可以把苹果的外形图层画出来了。由于我要画牛逼闪闪的参考线,所以先不焦急,一口吻把参考线绘制完。

第六步
p15

好吧,画到这里小编本人曾经混乱了..由于我们要保存线框图,但是实践绘制中是不需求分这么多层的,完全在一个图层里经过途径外形组合来完成,即是如下操作:
p16
如下操作只给图示,不做文字阐明
p17

p18
上面画上叶子,办法与上同理,不做描绘。
p19
logo是和苹果的官方logo有差别的,详细差异请看本文第四张图,但是办法都一样。有兴味同窗可以试试官方的画法。
在此把本附带线稿的源文件分享给大家。
→→猛戳下载←←

本文算是初级教程,意在协助些小设计理解绘制办法,提升本人作品的逼格。但作为一名设计师,一定要踏踏实实,切不可借此忽悠。如有纰漏缺乏,希望巨匠们要口下留情,作为一个顺序员转销售转动画最初转到做设计,人艰不拆,就不要在意这些细节了!

搜集了些db大湿们的“手稿”供大家欣赏原图下载也在上边的云盘链接里。
p20
p21

作者微博:http://weibo.com/317828111

最新案例