开启左侧

[3D游戏特效] 完美构图-设计师黄金分割法应用与原理

  [复制链接]
123456.gif
(黑衣剑士的武器和对手的面部集中到了黄金分割点上,给人一个集中的逼迫点)
黄金分割是一个数学比例。我们在大自然中很容易找到这样的比例,当它用于设计时,能创造有生命力的、纯天然的视觉作品,愉悦我们的眼睛,但究竟什么事黄金比例,如何使用它来提高你设计水平呢?

一、黄金分割是什么?

1、黄金分割线

黄金比例也被称为黄金分割,存在于被分割成两截的线段中。我们设较长的一段为a,较短的一段为b,那么a / b = (a+b)/ a = 1.618 。


00.png.jpg
01.png

2、黄金比矩形

黄金比也适用于矩形。

1) 画一个正方形,设定变长为1,改变其中一个边为1.618,一个黄金比矩形就跃然纸上。

02.png

2) 如果把正方形叠加在矩形上,那么这两个图形会让你看到一个黄金比矩形。
03.png

3) 如果一直按照这样的方式把黄金比应用到心得矩形上,那么你最终会得到一个个逐渐缩小的正方形。
04.png

4) 假设你在上面这张黄金比例图的每个正方形的对角画一条曲线,你将会看到一个黄金比例曲线(亦称斐波那契序列),这个序列的每一个数字是前面连个数字之和。
06.png

3、黄金比圆

在每个正方形中画一个正圆,这样的话,所有元的大小也同样遵循1:1.618比例。

07.png


二、黄金分割的应用

黄金比例可以运用到设计中的许多地方,像布局、间距、内容、图片和版式。

1、布局(黄金比例)

我们常常把黄金比例看作是确定空间布局的使用指南,应用黄金分割的最简单方法是将举行的长宽比设为1:1.618 。

08.png
09.png
这样两列布局非常适合网页设计,在这种格式中你会看到许多在线内容。美国National Georaphic 就采用这种布局构建了一个整洁、便于阅读、结构良好的网站,它为读者提供了合乎规律的、秩序井然地、平衡的、层次分明的阅读体验。
01.jpg
游戏UI也同样适用此种布局

2、间距(黄金比例)

间距是任何设计的一大要素,它能营造负空间氛围,使最终的结果要么成功要么毁灭。

确定元素的间距是相当耗时的事情,但是运用黄金分割图,让正方形来引导你确定每个元素的位置,工作起来会更省力好多。这将确保你的间距和比例是通过严密的计算而不是“凭感觉来的”,同时任何为达到黄金比例而作的微妙的调整都可能的导致所有元素的差异。

运用多个黄金比例来保持设计作品的整体连贯性。

10.png

1) 设计工作室Moodley 为布雷根茨 Festspiele 表演艺术节开发了一款新的品牌标识,包括logo、logo风格和拼贴设计,应用于程序、节目单和户外活动。节目单着重强调了摄影和说明性的拼贴,还有一个留出大片空白的波形logo,黄金比例用来确定每个元素的大小和位置,以确保封面比例协调。
11.png

2) 新加坡的一家设计机构 Lemon Grophic 为 Terkaya 财富管理 创建了一个视觉识别系统(如下图),这种商务名片上的三个元素——小鹰、文字和大鹰,都分布在一条黄金曲线的不同位置。

12.png


3) 游戏界面也会把相应的疏密,各种元素的搭配分布在黄金曲线上的不同位置,就不会显得紊乱。
02.jpg


3、内容(黄金螺旋)

黄金螺旋可以被看作是确定内容的位置“指南”。我们的视觉会自然而然地落到螺旋的中心,这个位置有很多细节性的元素,所以在做设计时我们要非常关注螺旋的中心和螺旋走过的视觉空白区域。

13.png

在这个为 Saastamoisen saatio 所做的视觉识别系统中,随着黄金螺旋的不断延伸,内容也愈加密集。当我们的实现与曲线越近,字体和间距也在不断减小。 14.png

由这个原理,我们就可以把视觉焦点的放在螺旋延伸的黄金分割点上
0011.png
0010.png

话题才刚刚开始,我们继续更深入的探讨!

4、图像(黄金比例 — 三分法)

无论是传达重要信息或创建一个美观的照片,结构对任何图像都很重要。黄金比例可以帮助设计师搭建一个结构,引导观众的实现到重要的位置去。使用黄金比例,将一张照片分割成不等的三个空间,再运用线条和相交的点去创建结构。

比例是1:0.618:1,设定第一和第三纵列的宽度是1,那么纵列的为0.618;同样,水平方向第一和第三横排的高度为1,中间一行的宽度为0.618。现在使用这些先河焦点吸引管着的注意力向这些位置集中。这些元素形成了一种张力,增加了设计结构的趣味和力量。

15.png

另一种通过黄金比例处理图像未知的方法是三分法,它不像黄金比例一样精确,但相当接近。三分法即将空间划分为三个水平或垂直防线都相等的空间,使图像的重要元素都围绕在举行中心理想情况下的四个交点上。
16.png
封面的整体布局同事遵循黄金分割和黄金螺旋,内容集中在螺旋的位置,越接近落选的中心内容月详细。

5、格式(黄金比例圆)

黄金比例可以用来创建比例协调的正方形和矩形,它也可以用来创建黄金比例的圆。每一个正方形中的元都与七邻近的圆成1:1.618的比例,这就是完美的圆。

17.png

使用黄金分割不仅能创建和谐的、均衡的设计,也能保持格式的一致性。让我们看一下百事可乐和Twitter的logo。

1) 百事可乐的标识基于两个按照黄金比例相交的圆,小圆在重叠的图案中并不那么明显,但是通过logo中间的白色部分还是能被识别的。

18.png

2) Twitter的标识基于集合结构并重点利用了圆的完美,从下面这张图我们可以看出,它确实是运用黄金比例绘制的,但不完全精确,团总体还是遵循黄金比平平衡、协调、有序的特点。

19.png

3)苹果公司LOGO设计中的黄金分割
00.JPEG

美好的画面结构适用于平面构成,当然也适用于影视以及游戏的镜头设计。
20.jpg
21.jpg
22.jpg
23.jpg
24.jpg

只要构成画面,就有一定的规则可循,一定要学会灵活运用。所谓活学活用。
01.JPEG

02.JPEG

游戏美术的一些应用

游戏美术场景设计——构图的元素和原则

“设计元素”和“设计原则”被称为艺术的语言或基石。对游戏环境艺术师而言,指的就是用于构建关卡的模块、道具和光线。

1、游戏美术场景设计——设计元素


设计元素是艺术师构筑图像的工具,就好比视觉上的乐高积木。设计元素共有7种:线条、物体、大小、空间、颜色、质感和色值。

线条:线条可用于定义物体的形状、外形或轮廓。线条包含长度和方向,而对观察者的视觉冲击取决于其延伸的角度。线条分为4种:水平、垂直、倾斜和曲线。水平线暗示着场景安详宁静,垂直线传达力量和强势,斜线代表移动或改变,而曲线给人安静祥和的感觉。游戏邦获悉,线条可用于引导玩家注视某个特定的方向。

物体:物体既可以通过线条的组合来构建,也可以通过颜色或色调的改变来塑造。以下是各种不同的物体:几何体——人造建筑物;有机体——自然物体或那些由不规则曲线组成的物体;阴阳——占据或不占据空间的物体;静态——稳定、不移动的物体;动态——蕴含着移动或动作的物体。

大小:大小可以通过各物体间的关系体现出来,没有对比便无法突显大小差异。物体间的大小差异影响视觉吸引力。

游戏美术场景设计——物体间的大小差异

空间:空间可通过物体来划定。

颜色:简单来说,每种颜色都是色调、色值和色度的混合结果。颜色分为暖色和冷色,大量对比都可以通过颜色来实现。

质感:环境艺术师对质感都很熟悉。作为设计元素之一,质感指的是外表的视觉效果。粗糙、光滑、崎岖不平等均属质感。

色值:色值代表物体、阴影或颜色的亮暗程度。增加白色或黑色以及增加或减少光照的色度都可以使色值有所变化。光源的位置及其亮暗程度均对场景的外观和玩家的情感响应有重大影响。

2、游戏美术——设计原则

设计原则指的是在构图中有效安排设计元素所采取的技术手段。设计原则包括平衡、方向、强调、比例、韵律、简化和统一。由于画面中需要融合各种不同元素,因而艺术师在每幅图画中也会使用多种原则。理解这些原则并将其运用于关卡设计中,可以更有效地制作出所需的视觉效果,向玩家传达设计师的想法。

平衡:平衡所取得的效果是玩家的视线会自觉聚焦到屏幕左右两侧的中心点,可通过合理安排两侧的元素来实现。

设计师使用的所有元素都有着对应的视觉重量,与颜色、色值和大小有关。暗色元素的视觉重量高于淡色元素,大型元素的视觉重量高于小型元素。游戏邦了解到,维持视觉平衡需要在视觉焦点两侧适当距离处放置恰当数量的“重”和“轻”元素。平衡屏幕上的元素可采用两种方法:对称和不对称。

对称平衡看起来较为顺眼,给人平静安稳的感觉。对称平衡包括三种类型:平行对称、转动对称和轴对称。在平行对称中,所有同等高度的元素从右向左依次排开。转动对称是指所有元素围绕共同的中心转动。轴对称即保持焦点两侧的元素平衡。 不对称平衡通过在焦点周围不规则摆放各种不同大小和视觉重量的元素来实现,这些元素间各自保持平衡。不规则平衡的另一种形式是用某个大型元素来与许多小型和视觉重量较轻的元素保持平衡。不对称构图通常传达视觉上的紧张感,给玩家情感带来的影响与对称平衡相反,它逐渐灌输的是激动、好奇或焦虑的感觉。

方向:方向可通过调整元素的位置、角度和分布点来实现。设计师可在构图中利用方向产生的视觉动向来引导玩家的注意力,更为确切地说,方向可以让玩家按照设计师的想法移动,方向还可以用于强调某个地点或某片区域的深度和广度。亮暗色值是塑造方向的利器。

强调:关卡中的强调指某场所的环境焦点。方向可用于在区域内引导玩家,但如果场景中缺乏令其感兴趣的视觉强调点,那么整片区域将变得死气沉沉,而且场景流动也会显得过快。

比例:在构图中,比例指各元素互相之间以及与整个世界的大小关系。结构比例(如天花板与地板间的距离)功能很多,可用于制造出视觉强调和重点,能够给玩家带来强势或恐惧感。

比例还包括黄金分割和三分构图法。在视频游戏中,虽然由玩家控制的动态镜头使构图中运用这些比例方法较为困难,但某些情况下依然可以用到。这些比例准则已研究数百年之久,能够给观察者带来不俗的视觉响应,因而在构图中非常重要。黄金分割比例为1:1.618,三分构图法是将屏幕横向及纵向三等分,在构图中位于这些交叉点的元素更为美观。

韵律:韵律是指视觉元素的重复出现。韵律看起来较为平和,玩家在不知不觉中跟从这种富有节奏感的样式。在构图中,韵律可用于制造场景的深度和动感,或对某物体的强调。

简化:某些视频游戏的关卡中,移动、VFX和声效的频率很快,比如敌人频繁地向玩家射击等。在这种情况下,构图必须读得又快又清晰。如果过于复杂、杂乱或模糊,就有可能丢失元素。游戏邦觉得,此时就应当考虑“简化”构图。如果从设计的构图中移除某个元素后构图依然能够发挥作用,那么简化的构图可以更有效地传达信息。在构图时,无需加入丝毫不起作用的元素。设计师应该使用真正需要的东西,尽量优化构图。

统一:统一是设计的最后一项原则,指的是场景或关卡中所有独立元素间的关系。统一可赋予画面整体感,画面中的所有元素在视觉上成为统一体。缩小元素间的距离可制造统一感。以设置小道具为例,在构图中小道具比随意摆放的道具更为美观。重复也可以塑造统一感,包括颜色、大小、质感和其他元素的重复。延伸则是更为微妙的技术,可以在构图中控制视觉的动向并有意将其引向视觉起点。


说了这么多,或许有些疲倦,那么就来点阮佳作品大图供大家欣赏!(透视消失点大致放在了黄金分割点上)
25.jpg

26.jpg

27.jpg

28.jpg

29.jpg

30.jpg

31.jpg





点击标签,内容一促即达。

晴风
自我介绍空空的,快来写点什么吧~
未设置城市
其他作品 (6)

完美构图-设计师黄金分割法应用与原理

16671 356 5年前
您需要登录后才可以回帖 登录

全部评论
谢谢分享
5年前 回复
感谢                 
5年前 回复
感谢分享~非常专业的干货
5年前 回复
好东西要大家分享···
5年前 回复
棒棒哒
5年前 回复
感谢分享
5年前 回复
感谢分享
5年前 回复
学习了学习了
5年前 回复
look
5年前 回复
数据加载中...
没有更多评论了
快速回复 返回顶部 返回列表