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

标签: 产品设计 | 发表时间:2019-12-24 18:58 | 作者:P迪
出处:http://www.alibuybuy.com

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

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

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

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

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

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

优秀案例分析

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

1. 在海报中的应用

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

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

2. 在网页中的应用

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

3. 在绘画上的应用

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

4. 在摄影上的应用

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

5. 在建筑上的应用

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

怎么画螺旋黄金分割图

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

1. 新建画布

2. 画正方形

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

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

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

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

3. 画圆弧线

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

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

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

△ 圆心位置

△ 相切位置

△ 删除多余锚点

△ 圆弧画完后

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

△ 最终图形

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

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

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

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

1. 横版

找素材

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

图片调整

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

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

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

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

文字排版

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

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

标记分析图:

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

2. 竖版案例

图片位置排版

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

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

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

填充背景和文案

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

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

效果展示

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

总结

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

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

 


© 推荐 for 互联网的那点事. | 猛击下载: iPhone客户端 猛击下载: Android客户端

相关 [方法 实例 新人] 推荐:

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

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

java泛型应用实例 - 自定义泛型类,方法

- - ITeye博客
注:  转载请注明出处: http://hejiangtao.iteye.com ,  用于商业得给我分成. 本文主要讲解道 java泛型类,泛型方法的应用实例 , 从 这里 可以下载到完整的java代码工程:   http://download.csdn.net/detail/hejiangtao/3996520.

Android Service的使用方法 音乐播放器实例

- - ITeye博客
Service翻译成中文是服务,熟悉Windows 系统的同学一定知道很熟悉了. Android里的Service跟Windows里的Service功能差不多,就是一个不可见的进程在后台执行,避免被用户误关闭. 因为Android在某些情况下会自动关闭非前台显示的Activity,所以如果要让一个功能在后台一直执行,不被Android系统关闭,比如说闹钟、后台播放音乐,就必须使用Service.

《APP开发》APP规范实例-详细的UI设计方法

- - 人人都是产品经理
对了一个APP开发初手来说,可能心里有很多的疑惑:屏幕设计为多宽,宽度是不是应该设置为百分比;按钮大小多大,怎么排列,文字字体用多大的?什么字体显示好看?图标多大,怎么用色?界面怎么布局?等等很多的问题,这篇文章就是专门为你们准备的. 互联网从业者必备微信公众号:woshipm,如果你已经关注了,证明你已经很牛逼了.

最简实例说明wait、notify、notifyAll的使用方法

- - Java - 编程语言 - ITeye博客
wait()、notify()、notifyAll()是三个定义在Object类里的方法,可以用来控制线程的状态. 这三个方法最终调用的都是jvm级的native方法. 随着jvm运行平台的不同可能有些许差异. •如果对象调用了wait方法就会使持有该对象的线程把该对象的控制权交出去,然后处于等待状态.

实例剖析4种数据仓库的建模方法

- -
数据仓库,这个几乎是所有大数据开发面试必问的话题. 结合业务举例说明数据仓库建模的步骤,以及注意事项. 维度该如何选择建设,原则是什么,主键如何设计等等. 一众问题搞得小伙伴们死去活来,甚至工作好几年的小伙伴都没搞清楚过,尤其是大厂特别爱问这些问题. 有些小伙伴甚至觉得这些都是形而上学,不懂这些我不一样搞了很多年开发.

[原]Dubbo实例

- -
Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. Remoting: 网络通信框架,实现了sync-over-async 和 request-response 消息机制. RPC: 一个远程过程调用的抽象,支持负载均衡、容灾和集群功能. Registry: 服务目录框架用于服务的注册和服务事件发布和订阅.

VisualVM 使用实例

- - 开源软件 - ITeye博客
VisualVM 是一款免费的性能分析工具. 监控程序运行的实时数据,从而进行动态的性能分析. 同时,它能自动选择更快更轻量级的技术尽量减少性能分析对应用程序造成的影响,提高性能分析的精度. 转储:性能分析工具从内存中获得当前状态数据并存储到文件用于静态的性能分析. 1     系统转储:JVM 生成的本地系统的转储,又称作核心转储.

学习AngularJS实例

- - Web前端 - ITeye博客
怎么样快速学习AngularJS. 相信很多初学者都有过或者类似的疑问,其实这个问题没有标准的答案,每个人的技术背景、工作经验等等都不经相同,所以学习AngularJS的切入点肯定也就不同,我之前初略使用过knockoutjs,当我第一眼看到AngularJS的Helloworld案例后,顿时就被声明式的语法和强大的双向绑定特性所吸引.

Kafka编程实例

- - CSDN博客云计算推荐文章
    Producer是一个应用程序,它创建消息并发送它们到Kafka broker中. 这些producer在本质上是不同. 比如,前端应用程序,后端服务,代理服务,适配器对于潜在的系统,Hadoop对于的Producer. 这些不同的Producer能够使用不同的语言实现,比如java、C和Python.