如何运用高格调的黄金比例?

0.618,这是被公认为最具有审美意义的数字,是一种数学上的比例关系,具有严格的比例性、艺术性、和谐性,蕴藏着丰富的美学价值。在设计中依然运用广泛,无论是标志设计、版式设计还是工艺比例造型,下面我们就通过案例详细了解一下~

@喪心病狂十六夜貓 :有好多同学觉得黄金比例有点虚,其实可能是没遇到一篇足够简单实用的教程,比如今天这篇,案例超级丰富,讲解逐步深入,不会突然懵住,而且从网页/摄影构图/LOGO到封面设计等都有相关的教程,小白花五分钟看完也能明白个大概了,来收。

从埃及彩绘的大金字塔、蒙娜丽莎,到推特和百事可乐的LOGO,他们的共同点究竟是啥?

答案非常简单,当然是在设计中利用了黄金比例(英: Golden Ratio)啦。

黄金比例是数学上的一个比例。在自然界和设计中,你所看见的美景有很多都用到了黄金比例。那么,在实际操作中用上他吧。通过运用黄金比例,来改良、提高你的设计。

详细从以下开始。

黄金比例是什么?

黄金比例(英: Golden Ratio)是,将一条线分割为a,b两条线,这时,总长度a+b与长度较长的a之比等于a与长度较短的b之比。 这时他们的值刚好为1.618。

用公式来表示的话未免太抽象了。在设计中可以利用黄金比例进行调和或者进行完美的分割。通过在设计中结合黄金比例,可以很轻松的将美的感觉表现出来。

黄金比例这种美丽的比例,已经被应用了很多个世纪了。从吉萨的大金字塔到希腊的帕特农神庙,西斯廷教堂内创作「创造亚当(Creation of Adam)」的米开朗基罗和画出「蒙娜丽莎」的达尔文,到现在的推特和百事的LOGO都有他的身影。甚至从我们的脸到身体的各个部位,都可以通过这一数学的比例来表现出来

实际上,我们的大脑,也比较喜欢利用了黄金比例的物体或者图像,是真正的潜意识的选择。通过利用黄金比例在设计中进行一些微调,可以给你的大脑带来一些强烈的冲击。

黄金比例,也可以应用到图形当中。首先我们来准备一个正方形,然后将他的一边增长为另一边的1.618倍,这样就制作了一个美丽均等的黄金长方形了。

将正方形和长方形并排放在一起,就可以将黄金比例直观的表现出来了。

上面的这个案例,由于最右边的长方形适用了黄金比例,左边的正方形将会不断变小。

上面的这个例子中正方形的每个角都被使用了,通过绘制拱形的平滑曲线,螺旋状的线(斐波那契数列)被描绘出来了。这组数列,从0开始,后面的数是前面两个数的和,像0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144这样连续不断下去。

这样美丽的螺旋设计,在向日葵的花,贝壳,台风,蕨草等自然界中是很常见的。无疑也是非常有吸引力的。

我们继续进行下一个步骤,让我们在每一个正方形中都画上一个圆。因为利用了1:1.618这样一个黄金比例,你可以绘制得到每一个平衡的圆。

那么利用黄金比例来绘制正方形,长方形和圆形的方法都学会了吗?有效的去利用这些技术,让我们的设计变得更加有魅力吧!

基础知识讲完了,那么实例从以下开始。

在设计中利用黄金比例的五个要点

黄金比例的基础知识在上文中已经全部教给大家了,实际去利用黄金比例,如何通过黄金比例来改善设计的五个要点,请让我一一道来。

特别是黄金比例,不管是布局、空间留白、内容、摄影还是标志设计,可以适用于任何构图之中。

01.布局:在尺寸上运用黄金比例

在决定布局的大小的时候,试着以黄金比例为方针设计吧。让我们试着用最简单的方法,也就是1:1.618这个比例来决定布局的尺寸吧。

举个例子,考虑到一般的网页是960px,按照1:1.618这个比例来计算的话,那么高度就可以设置为594px。

同时在布局上也可以利用黄金比例,将其分为两个部分。通过这种方法,可以将两个美丽的景色完美的调和在一起。

二列式的布局,和网页有着很好的相容性,也是常见的网页设计布局方法。下面的这个设计案例,利用好看的黄金比例,我们可以由此建立一个整洁有序的网站,同时还能提高网页的清洁度和易读性。通过这种无意识的排列,将这种层次感传递给用户。

Photography

02.留白的空间:利用黄金比例去配置

不管在什么样的设计中,确保留白的空间都是十分重要的。通过使用这种方法,可以分辨出设计的好坏。确定留白的空间是需要时间的,但是我们可以通过利用黄金比例来代替他,将各种各样的正方形作为设计零件来设置。

有吸引力的设计和较为直观的位置,通过使用黄金比例进行微调,在视觉上就会有很大的改观。

当几种设计要素并列的场合,通过结合下面的几组黄金比例,将设计中的统一感的魅力给表现出来。

下面的这个设计案例,是用来做艺术节宣传的传单,从LOGO到图案,都利用了黄金比例来进行配置。看起来很棒不是么?标志周围的留白得到了保证,通过黄金比例,LOGO的大小和位置都很直观的看到,并确定下来。

再下面这个设计案例,由三个设计要素组成(小的老鹰,文字,大的老鹰),他们所配置的场所,都可以通过黄金比例来确定下来。

然后在小的老鹰上加上黄金比例,一个漂亮的外观就设计完成了。

03.内容:设法利用上黄金比例的螺旋线

可以由黄金比例的螺旋线,来决定整个页面的内容应该怎么来布局。我们的眼睛,在他最细的部分可以看到他的细节,而螺旋线最密集的部分,视线往往会更加集中。因此,我们可以将焦点放在螺旋线的中心。

让我们再来看看技巧1中的这个案例。你可以看到,他将小LOGO全部都放在了螺旋线的中心。通过利用黄金比例,可以自然的将用户的注意吸引过去。

下面的这个设计案例,虽然将很多内容混合在了一起,但通过使用黄金比例和黄金螺旋,我们可以很轻松的将信息整理出来。首先将用户的目光集中在“Bonjour My Nameis Tim”,然后将视线集中在左边的侧边栏上,也很好的保证了留白的空间。

下面这个设计案例,通过螺旋线的不断延伸,字符的大小也一点点的变小,设计也变得越来越密集。

Behance

在另一个设计案例中,利用黄金比例和黄金螺旋,确定了内容和布局。通过将不同大小的正方形作为设计要素来配置,将视线进行诱导,将设计的故事性很好的演绎了出来。

04.摄影图片:利用三分法

图像的构图(英:Composition)可以将重要的情报传递出来,也是创造出美丽的设计的一个重要的方法。在摄影图片上利用黄金比例,是可以帮助我们引导视线的重要的设计要素。利用黄金比例,可以将图像划分为横竖三个部分。

此时,画面的的比率就可以利用黄金分割法来设置为1:0.618:1,。在线交汇的地方将设计要素配置上去,将视线集中起来,表现出充满魅力的构图。

利用黄金比例,还有另一种摄影照片的构图技巧可以利用,也就是三分割法(英:Rule of Thirds)。将摄影图片按照1:1:1均等的方法划分出来,所有的空间都是相同的大小。最重要的设计要素可以配置在中央的长方形的四个角周围。

下面的这个设计案例,就是利用了黄金比例,来确定了留白的位置。女性模特的鼻子和额头,和水平线的顶部对齐,眼睛和鼻子的位置是沿着中心垂直的线来对齐配置的。

下面的这个设计案例也是利用了三分割法(英: Rule of Thirds)。这里,几乎空白的中央的长方形,设计成了集中注意力的焦点。女性模特的眼睛,配置在长方形的角的附近,通过这样的设计将魅力展现给用户。

下面的另一种设计案例也是利用了黄金比例,他将女性模特的眼睛放在了中心,从中心开始一点点向外配置,垂直的线和女性模特的脸呈一条直线,让人可以看出他的布局是十分整齐的。

然后从整体的设计来看,他利用了黄金比例和黄金螺旋线。他还沿着螺旋线来进行设计,随着螺旋线的不断集中,将详细的信息也列举到了出来。

05.LOGO的设计:利用黄金比例中的

利用黄金比例,可以按照一定的比例均得的得到正方形和长方形,同时也能获得均等的圆圈。利用正方形画出一个个相连接的圆,其中的任何一个都是遵循了1:1.618这个比例的。

利用黄金比例画的圆,也就是「黄金圆(英: GoldenCircles)」不仅可以表现出美丽的视觉感、统一感,同样也能应用于LOGO设计之中。让我们一起来看看Pepsi和Twitter的LOGO设计吧。

Pepsi的LOGO设计,利用了黄金比例,将两个独特的圆圈配置在了一起。不管是两个圆圈相结合,还是LOGO中间的白色部分,都利用了黄金比例来进行配置。

Twitter的LOGO设计则是运用了几何学(英: Geometry,利用多个圆圈配置在一起而构成的。相比起通过并列的配置黄金比例的元素,虽然看起来不是很准确,但是为了让平衡和设计调整的更加和谐,在他的表面也使用了一个黄金圆。

你可以利用各种各样的设计要素来灵活的使用黄金比例(英: Golden Ratio)。可能仅仅只是几个微小的调整,就能让你的设计从一个「不错的设计(Good Design)」变成「特别」

photoshopvip

文章来源:优设

作者:TREND

译者:@喪心病狂十六夜貓

(0)

相关推荐

  • 美图秀秀揭秘长腿秘诀:黄金比例秀出来

    女孩子如果能拥有一双修长美腿,总是能吸引众多关注的目光。为此,很多MM希望自己的腿能再长一点,使身材看上去更完美些。今天小编带来一个简单有效的长腿秘诀,那就是用“美图秀秀”软件对照片进行一些小改动,速 ...

  • 华为手机如何在相机中显示黄金比例参考线

    现在有很多人在使用华为手机,有些新用户不知道如何在相机中显示黄金比例参考线,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,找到并点击[相机]图标.2. 第二步打 ...

  • 网页设计中如何利用“黄金比例”?

    今天这篇给同学们科普一下经典法则「黄金比例」,从概念到案例都有,看完不是特别清楚也木关系,最后附上一个瞬间生成黄金分割参考线的PS神器,帮你在实战中学起来! 神器驾到:<PS神器!简单实用的黄金 ...

  • 如何把黄金比例应用到设计上?

    吉萨金字塔和达芬奇传世画作<蒙娜丽莎>与 Twitter 和 百事之间的共同点是什么? 他们的设计都是基于黄金分割的啊! 黄金分割是一个数学比例.我们在大自然中很容易找到这样的比例,当它用 ...

  • 黄金比例之 LOGO 作品集

    小编:黄金比例制作的作品不管是海报.照片.Logo都有一种莫名合理的美感.今天一起去欣赏一组由黄金比例制作的优秀logo作品,.这组作品来自UI 设计师:Kazi Mohammed Erfan. 之前 ...

  • 黄金比例在线计算工具

    黄金比例(黄金分割)这个专业名词我想设计师不会陌生,现今很多工业产品.电子产品.建筑物或艺术品均普遍应用黄金分割,展现其功能性与美观性.此外在LOGO 设计.APPUI设计.网页设计等方面也同样适用, ...

  • 黄金比例Logo 【AI教程】

    一.新建合成. 二.新建背景. 三.制作限定框. 四.制作黄金比例圆. 五.制作logo鱼. 六.给鱼上色. 七.加点噪点,多加点质感. 教程作者:葡萄鱼 原设计作者:Mohamed Achraf 原 ...

  • 黄金比例工具

    这篇文章具体讲一下黄金比例系统规则与每种构图的方法和用法,在什么情况下采用哪种比例,具体要怎么用,用在哪里等.也介绍了黄金比例实际功能是什么.为方便各位小伙伴运用黄金比例作图:在文章的末尾附带黄金比例 ...

  • 【海平面】Logo设计中的黄金比例

    本文主要给大家简单介绍黄金分割比例的定义.算法的公式.作者通过多个案例生动形象给大家展示黄金分割比例具体用法.可通过案例吸取自身所需的知识. 从远古时代,美好的事物就开始受到人们的颂扬.但很少有人知道 ...