首页

快速掌握黄金分割构图法

雪涛

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

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

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

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

黄金分割构图法的基本理论来自于黄金比例 ── 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 个简单的案例实操,利用黄金分割构图来帮助我们构图和排版,最有利于我们对图片焦点位置的选择和排版分布的掌控。

文章来源:优设

平面中的构图技巧

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

平面中的9种构图,但有的同学还不是太明白,所以小编今天细说里面其中一种构图:视觉引导线,加深大家的理解。

视觉引导线构图

什么是视觉引导线?(视觉动线)

视觉动线会将观众视觉引导到特定的方向,先创造一个视觉中心点,之后会提供一条让观众可隐约跟随的视觉路径,划分视觉阶级明显让观众知道元素之间的相对重要性。引导线是运用元素本身的原始形象或直接画出实体线条,借用这些引导线观众的视线可以被指向画面的其它元素哦。

上图中使用了视觉动线 + 留白,留白可以让海报中的「手」更加抢眼,使观众第一眼就会看那只手。接着就是视觉引导线了,引导线不一定是实体线条,它可以是元素本身的原始形状、人物视线以及元素组合等等,借用这些引导线让观众的视线可以被指向画面中的其它元素。

说到这里,我想大家也知道上图的引导线是什么了吧?引导线是手与线的组合,观众的第一视线是手,然后会顺着手拉的线方向延伸,最后停留到右下角的小字里。这几行小字就是作者要表达的主要信息。

但为什么不直接居中非要弄个引导线?虽然可以用这些中规中矩的构图,但往往会显得无趣,也不一定能吸引用户去看了。

下面小编用一些案例来让大家更好理解。

案例:

上面的海报设计是很好的例子,首先利用视觉中心点让观众集中到大字区域,然后顺着线条查看下方的内容,先是 bla 的内容,接着就是 zer,所以这图主要信息应该是 RYDER BLAZER(但小编不知道是啥……)

上图中,人物的视线也可以算是一种引导作用。

总之好的视觉引导线可以让作品富有故事性和艺术性,还能提升作品视觉上的观赏度。所以我们创造时应该重视构图。

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

学会这6个特殊视角的构图方法,让你的设计脱颖而出!

周周

白无常:许多设计师都习惯的把精力放在视觉元素的效果上,而忽视了视觉元素之间的位置关系。如果对设计的构图没有了解,即便是精彩的画面效果也发挥不了作用,甚至会误解了传播的信息。

设计构图的作用

构图过程是设计师从混乱的视觉元素中找到条理性,帮助观者在各个视觉元素之间建立联系,从而有助于他们阅读。设计的构图的作用是为了加强视觉的张力增加设计的趣味性,吸引并引导着观者的注意力。

手机UI视觉设计构图的基本法则

用心设计

今天跟大家分享的主要从APP引导页设计,APPbanner图设计说起,这四项基本视觉构图法则适合偏平面设计。当然这也是大家学习APP ui设计的基本理论知识。

当然一个完整的引导页界面包含:主题图、背景渲染图、文字、点缀图以及动画元素组成。

第一条构图法则:均衡

小白自学APP设计:UI视觉设计构图的基本法则

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档