29

方法+实例!新人也能快速掌握的黄金分割构图法

 4 years ago
source link: https://www.uisdc.com/golden-section-composition
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

自从做设计以来经常会看到一些很高大上的理论,例如:格式塔法则、网格系统、黄金分割法等等,这些词语给人第一印象就是很高大上,很难学会,也有很多设计师看到这些理论就被吓到,认为自己学不会,也不想学,因为理论知识确实是学起来很枯燥。对于初学者的设计师来说,这些理论可以在短时间不用学太多,但是对已经工作几年的设计师来说,这些设计理论知识也是必不可少的。

只有掌握设计中必要的设计知识,才能让自己的设计眼界、技能得到提升。就我个人而言,我在设计初期也是很反感这些所谓的理论知识,对于我来说简单通俗的教学才是最容易让人接受的,理论太深奥,我真的无法从中体会到真正的奥秘。但是,越到后面,我越喜欢研究那些设计理论知识,因为我越来越懂得那些理论的重要性,对我的设计也有很大的帮助。所以今天我采用通俗易懂的方法,教大家去理解和掌握这些高大上的设计理论知识。

今天主要分享我们经常听到的黄金分割构图法。

黄金分割构图法:是一种由古希腊人发明的几何学公式,遵循这一规则的构图形式被认为是「和谐」的,在欣赏一件形象作品时这一规则的意义在于提供了一条被合理分割的几何线段。

黄金分割构图法的基本理论来自于黄金比例 ── 1 : 1.618。

黄金分割构图法运用到海报设计、画册设计、网页设计、绘画、服装设计、logo 设计、电视电影、建筑等等领域。在摄影中也经常会引入黄金分割比例,可以让照片感觉更自然、舒适,更能吸引观赏者,给人一种赏心悦目的视觉感受。

优秀案例分析

我们先赏析一些运用黄金分割法的优秀案例,通过赏析能让我们体会到它的美和重要性。

1. 在海报中的应用

bENbie7.jpg!web

从上面的 2 张人物海报案例中,可以看出都利用了黄金分割螺旋法的技巧,当整张图作为背景时,我们不知道图片主题位置的掌控时,就可以采用黄金分割法的原则。对于人物,可以根据想要突出的人物某一部位,直接采用这种分割方法快速找到版面位置

下面2张海报是通过图形和文字的结合,主题文字排版的位置也都刚刚好是黄金分割的编排,带给人一种美的、舒适的画面感,图片和文字在版面的比例刚好是 1 : 0.618。

2. 在网页中的应用

3YRBriA.jpg!web

上面 2 个网页都采用了黄金分割的原则,大体将版面分为图片区+文案区,比例为 1 : 0.618。上面同时采用了网格重叠的形式,而下面的就是最基本的黄金分割比例。版面的编排整体给人一种呼吸感、有序的、层次分明的视觉感受,并且浏览的顺序也是井井有条,如下图阅读顺序指引:

777z6vQ.jpg!web

3. 在绘画上的应用

iUBbemY.jpg!web

像我们看熟悉的名画「蒙娜丽莎」、「维纳斯的诞生」等也符合黄金分割的比例。黄金分割比例也在这些作品上经过了历史认证,利用黄金分割布局,让画面更耐看、更精致。

4. 在摄影上的应用

RfuERzj.jpg!web

在摄影中也经常会引入黄金分割比例,可以让照片感觉更自然、舒适,更能吸引观赏者,给人一种赏心悦目的视觉感受。使用黄金分割的摄影可以制造出一种空旷、寂静的视觉效果,也可以制造出一种特写镜头的效果。不知道怎么拍照好看,学会这一招你的摄影立马高大上。

5. 在建筑上的应用

vAnaau2.jpg!web

在建筑设计中的运用也有很多案例,例如上面的金字塔和泰姬陵的多处布局都能看出黄金分割,第三张中国古建筑也都运用了黄金分割构图。自古以来很多文化建筑都采用了这个构图,让建筑看起来更加美观、耐看、精致。

怎么画螺旋黄金分割图

了解了螺旋黄金分割法的用途和好处,我们最主要的是需要知道怎么来画这个螺旋黄金图。

1. 新建画布

jaMNrmv.jpg!web

2. 画正方形

这里画正方形是最关键的一步,我们只要知道螺旋黄金图的比例就可以很快的画出来。

螺旋黄金图比例为:13 : 8 : 5 : 3 : 2 : 1

只要知道螺旋黄金图的比例我们就可以开始画正方形了,简单的正方形不用我多说吧。我们按 10 倍的比例来画图,简单的意思就是前面的螺旋黄金图比例都乘 10,变为 130 : 80 : 50 : 30 : 20 : 10,再根据这个数字画出 6 个正方形。

JBJVRr6.jpg!web

正方形画好后按照这个转圈的顺序排好即可。

AfEJBnE.jpg!web

3. 画圆弧线

正方形画好后,画圆弧线,可以通过画正圆得到。

圆弧线为正圆的四分之一,圆的半径为每个不同正方形的边长,通过不同大小的正方形画出不同大小的圆弧即可。

开始画圆弧:以大正方形的右下角为圆心画正圆,注意相切位置,画好后删除多余的锚点。

JVjUFna.jpg!web

△ 圆心位置

nyaARjN.jpg!web

△ 相切位置

fQ3uA3A.jpg!web

△ 删除多余锚点

BJzmQ3q.jpg!web

△ 圆弧画完后

到了这一步基本也就出现我们想要的螺旋黄金图,最后只需要将我们的正方形改成描边的模式即可。

VVnyUru.jpg!web

△ 最终图形

6fy2Yja.jpg!web

这里展示一下第二种方法:

VVnyUru.jpg!web

螺旋黄金比1 : 1.618在画面中怎么看?

iUzIreR.jpg!web

利用黄金分割法的案例实操

说了这么多,没有实际的操作案例你们是不是也很头痛,到底拿到这个技巧怎么去使用呢?在我这里例举一个横版和一个竖版的案例。

1. 横版

找素材

zeqmQry.jpg!web

这里找来几张图片,因为是做分析案例,所以我就选择我自己喜欢的图,我选择的是图1。

VRJzmmi.jpg!web

图片调整

图片确定后,我们就需要把图放到我们的画布中。

fEnIv2b.jpg!web

bAvEjiQ.jpg!web

但是问题来了,一般我们的设计尺寸基本是不会和找到的素材是一样大的,我们到底要怎样放大图片呢?图片中哪些元素可以忽略,哪些需要重视?螺旋黄金分割法就可以用上了。

利用我们的螺旋黄金分割图,放在我们的版面中。接下来就放大我们的素材图片,分析图片结构。图片上方都是天空,左边是海和天空,只有右下比较复杂,有人和零碎的石头,所以我们这里图片就以人为画面中的焦点,那么我们的螺旋图就需要改变一下位置。

aAnAN37.jpg!web

调整图片大小和位置,将图片中的人物放在螺旋图的焦点位置,这样我们的版面就快速地确定了视觉焦点。

IfUfuyr.jpg!web

文字排版

将文字排版在画布中,再根据文字竖排的样式,和人阅读的习惯,调整图的方向和文字位置,使人看向主题文字,给人一种指引的方向。

niemuyE.jpg!web

总结:主要利用螺旋黄金分割法调整图片的位置焦点,使画面中心达到舒适耐看和精致的视觉效果。

ye2AJnY.jpg!web

标记分析图:

zAZFb2Z.jpg!web

这个案例我就不做太多的讲解,因为很简单,直接利用螺旋黄金分割构图的方法,将版面按1 : 0.618的比例划分,然后在这个比例画布中排版文案和图片。

2. 竖版案例

图片位置排版

素材选择上面的图2,这里就做一张竖版的海报。

BriYVbR.jpg!web

将素材图放在画布中,准备好我们的螺旋黄金分割图,也放在画布中。根据图片本身的特点,人物只有上半身,所以将图片放在底部最为合适。至于人物应该靠中间还是靠边,我们同可以根据图片人物本身的姿势判断,根据人物是微抬头向上看,角度约 30 度,所以选择将人物靠边。

再就是人物具体位置的掌控,我们同样和上面的案例一样直接利用螺旋黄金分割图做参考位置选择,所以就很快找到合适的位置,如上面右图。

填充背景和文案

zeIbEnU.jpg!web

我们将背景颜色填充为天空统一的色彩,建立网格,将文案排版在画布中,上面主要是海报中的主要文案及主题文案,文案和图片的总体比例为1 : 0.618,遵循我们的黄金法则。

根据图片的气质,图片中的色彩和人物都属于文艺气质,清新、寂静、雅致的感觉,所以我们这里可以选衬线体宋体,结合韩文来体现整体的气质。

效果展示

最后看看海报效果吧,主要讲解螺旋黄金分割图的使用,所以排版方面讲解的比较简单,以及主题文字都采用最简单粗暴的字体,没有过多的修饰。

6ni6FbI.jpg!web

总结

文章分享了螺旋黄金分割构图的用途,很广泛,包含海报设计、画册设计、网页设计、绘画、服装设计、logo设计、电视电影、建筑、摄影等等领域,以及分享了黄金分割图形的画法,3 个简单的案例实操,利用黄金分割构图来帮助我们构图和排版,最有利于我们对图片焦点位置的选择和排版分布的掌控。

欢迎关注作者的微信公众号:「设计小余」

mIBvYzN.jpg!web


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK