![](http://dingyue.ws.126.net/2024/0612/4d0e75bdj00sey1kj000jd200u0005dg00u0005d.jpg)
![](http://dingyue.ws.126.net/2024/0612/a9bdef56j00sey1kn0099d200u000crg00u000cr.jpg)
构图是在有限的空间内把文字、色彩、图形等元素结合起来构成画面,使作品不仅具有美感,还能清晰表达设计者的目的。不同构图能使画面产生不同的视觉变化,进而给观者带来不同的心理感受。本期分享的是上下构图的使用方法,此构图形式具有良好的视觉效果,也比较容易掌握,是非常实用的构图方式。
![](http://dingyue.ws.126.net/2024/0612/f886b2d5j00sey1kn000ad200tn0030g00tn0030.jpg)
上下构图形式是将版面分割为上下两部分,或让画面中的元素整体呈现出上下的分布趋势,主空间承载视觉点,次空间承载阅读信息,呈现的视觉效果平衡而稳定。
![](http://dingyue.ws.126.net/2024/0612/d62cb89dj00sey1kp019td200tk015og00tk015o.jpg)
最典型的上下构图由“上图下字”或者“上字下图”两部分构成,图片及文字各占据一部分,互不干预,能清晰明了的传达出版面的信息。
![](http://dingyue.ws.126.net/2024/0612/1e1ec144j00sey1kt02avd200ti018vg00ti018v.jpg)
主空间还经常使用图形化的标题文字充当画面主体,可以很好解决画面缺少图片层级的问题。
![](http://dingyue.ws.126.net/2024/0612/adfd8a4dj00sey1kx01opd200tm02jag00tm02ja.jpg)
上下构图空间划分比较固定,为了得到丰富的视觉效果和良好的设计感,需要通过精心设计的编排来丰富版面的视觉效果。比如文字的横竖排版,元素之间的对比、点线面的运用、巧妙的留白等。
![](http://dingyue.ws.126.net/2024/0612/06106001j00sey1l301nfd200tm02n0g00tm02n0.jpg)
![](http://dingyue.ws.126.net/2024/0612/9c23fd25p00sey1l30003d200tn0031g00tn0031.png)
进行上下构图设计时,可以根据版面内容的信息体量划分画面的空间,常用的版面分割比例有:1:1、1:1.618、1:1.414、1:2、1:3等。在设计时也可以反复进行调整,直到找到最为合适的构图比例。
1:1分割
把画面平分为上下两部分,形成对称均衡的分割构成。
![](http://dingyue.ws.126.net/2024/0612/b68247a9j00sey1l400b9d200rp00i8g00rp00i8.jpg)
1:1分割比例构成方式,
多用于版面中两部分内容处于并列或对立的关系。
![](http://dingyue.ws.126.net/2024/0612/38c49763j00sey1l8015cd200rq01kzg00rq01kz.jpg)
黄金分割
“黄金分割比例(1:1.618)”被认为是最具美感的分割比例,具有严谨的艺术性、和谐性,蕴藏着丰富的美学价值。
![](http://dingyue.ws.126.net/2024/0612/fc795defj00sey1lc00ccd200qk00hgg00qk00hg.jpg)
在设计中有意识地运用黄金分割比例进行设计,
可以营造出富有美感的版式效果。
![](http://dingyue.ws.126.net/2024/0612/6b0a2509j00sey1lf00whd200qn013lg00qn013l.jpg)
白银分割
“白银分割比例(1:1.414)”是日本率先采用的一种分割比例,目前广泛运用在版式设计的布局中。
![](http://dingyue.ws.126.net/2024/0612/804ffebej00sey1lh00ged200qe00i9g00qe00i9.jpg)
与黄金分割相比,白银分割次空间占据的比例更大一些,能够承载的信息量也更多。
![](http://dingyue.ws.126.net/2024/0612/12dd32a6j00sey1lk00oid200q601lzg00q601lz.jpg)
2:1分割
采用2:1的比例,图片主体在画面中占据主导地位,视觉焦点更清晰。
![](http://dingyue.ws.126.net/2024/0612/d22f4346j00sey1ll00avd200qy00hmg00qy00hm.jpg)
主要的信息(标题)常融入图片中放在主空间成为画面主体,阅读性文字则放在次空间。
![](http://dingyue.ws.126.net/2024/0612/c4d69cc7j00sey1lp01uyd200r1025gg00r1025g.jpg)
3:1分割
3:1分割的比例与2:1比例相似,但图片在画面中占据主导地位更强,主空间承载视觉点,次空间承载阅读信息。
![](http://dingyue.ws.126.net/2024/0612/cb5ccf97j00sey1ls00isd200q500hog00q500ho.jpg)
![](http://dingyue.ws.126.net/2024/0612/558468a1j00sey1lu01cud200qa011gg00qa011g.jpg)
通过比例,可以让版面分割更严谨。但没有那个比例关系绝对正确,需要根据画面的项目调性、信息体量、信息功能与图文主体而定。如使用其它比例分割的优秀案例:
![](http://dingyue.ws.126.net/2024/0612/5767b562j00sey1m202u3d200tw03m7g00tw03m7.jpg)
给大家提供一个工具,可在线计算黄金比例、白银比例、铂金比例、青铜比例等。可在百度搜索关键词“黄金比在线计算工具”。
(https://www.shejidaren.com/examples/tools/golden-ratio/index.html)
![](http://dingyue.ws.126.net/2024/0612/8579dc4cj00sey1m5001id200to00lng00to00ln.jpg)
![](http://dingyue.ws.126.net/2024/0612/c66097acp00sey1m50002d200tn0031g00tn0031.png)
把图文按比例分别编排在版面上下方,是比较严谨规范的构图方式,但是为了避免版面的呆板,可以通过调整版面空间变换出多种编排形式。如以下几个案例:
缩小图片和文字空间,
使留白处形成外空间,增加层次感。
![](http://dingyue.ws.126.net/2024/0612/6f5d2489j00sey1m801bld200tx014wg00tx014w.jpg)
在背景(绘画作品)上重新划出新的空间,形成内外空间对比,既丰富了画面层次,又让版面变得生动有趣。
![](http://dingyue.ws.126.net/2024/0612/1daae981j00sey1ma019ld200tx015eg00tx015e.jpg)
通过图片文字的错位排版和负空间的巧妙留白,
让原本呆板的上下构图变得灵活多变,充满个性。
![](http://dingyue.ws.126.net/2024/0612/7ec24602j00sey1md00b4d200tx0185g00tx0185.jpg)
让图片位置重心偏移,打破均衡稳定的构图形式。标题的破图处理,也增加了版面的灵活性与丰富性。
![](http://dingyue.ws.126.net/2024/0612/563bdb13j00sey1mg017wd200tx018ng00tx018n.jpg)
在上方空间上划分出新的空间,这样的手法可以很好让空间具有多变性,也可以让我们的设计更加灵动。
![](http://dingyue.ws.126.net/2024/0612/d3b31450j00sey1mi0059d200tx013dg00tx013d.jpg)
![](http://dingyue.ws.126.net/2024/0612/5c885bafp00sey1mi0002d200tn0031g00tn0031.png)
上下构图的框架看似比较固定,但是也能通过设计手法,变换出多种编排形式,巧妙破除上下分割的单一性与呆板感。
曲线分割
把生硬的直线改为呈现出动态的曲线或斜线进行画面的分割,版面显得更生动活泼。
![](http://dingyue.ws.126.net/2024/0612/6841d4e4j00sey1mm01ckd200tx02fag00tx02fa.jpg)
![](http://dingyue.ws.126.net/2024/0612/1f353d99j00sey1mp011bd200tz01ihg00tz01ih.jpg)
图片裁切
把方形图片裁切为其他形状,使上下构图没有明显的分割线,也可以呈现出良好的视觉效果。
![](http://dingyue.ws.126.net/2024/0612/d38c2151j00sey1ms0144d200tx015sg00tx015s.jpg)
文字破图
使用文字串联起上下两个空间,
破除上下构图版面的单一性。
![](http://dingyue.ws.126.net/2024/0612/7cfc0b0aj00sey1mx01ayd200tx03n7g00tx03n7.jpg)
元素串联
利用图形、色块等元素串联空间,让主次空间建立起联系,具有丰富的视觉效果和良好的设计感。
![](http://dingyue.ws.126.net/2024/0612/de16a844j00sey1n100v8d200tx01rjg00tx01rj.jpg)
![](http://dingyue.ws.126.net/2024/0612/1ef7dcf3j00sey1n1002rd200ne00x3g00ne00x3.jpg)
图片退底
把图片主体进行退底处理,重新营造场景,
弱化空间的分区。
![](http://dingyue.ws.126.net/2024/0612/793448b8j00sey1n400nyd200tf01d1g00tf01d1.jpg)
![](http://dingyue.ws.126.net/2024/0612/a1ea5cb6j00sey1n7019ud200t301gug00t301gu.jpg)
![](http://dingyue.ws.126.net/2024/0612/7f3c4849j00sey1na00a6d200tx019zg00tx019z.jpg)
空间留白
使用留白破除两个空间的间隙,拉开画面的空间感,
具有良好的视觉效果。
![](http://dingyue.ws.126.net/2024/0612/d863211dj00sey1ne01tcd200tx01h4g00tx01h4.jpg)
![](http://dingyue.ws.126.net/2024/0612/5812f12bj00sey1ng005ed200sp014pg00g000mo.jpg)
![](http://dingyue.ws.126.net/2024/0612/bd02569ej00sey1ng002cd200sp014xg00sp014x.jpg)
![](http://dingyue.ws.126.net/2024/0612/cd28767cp00sey1nh0001d200to0030g00to0030.png)
1.上下构图是将版面分割为上下两部分,或让画面中的元素整体呈现出上下的分布趋势,主空间承载视觉点,次空间承载阅读信息,呈现的视觉效果平衡而稳定,是非常实用的构图方式;
2.进行上下构图设计时,可以根据版面内容的信息体量划分画面的空间,常用的版面分割比例有:1:1、1:1.618、1:1.414、1:2、1:3等;
3.为了避免版面的呆板,可以通过调整版面空间变换出多种编排形式;
4.可以通过曲线分割、图片裁切、文字破图、元素串联、图片退底、空间留白等手法,变换出多种编排形式,巧妙破除上下分割的单一性与呆板感。
热门跟贴