排版教程，五個步驟細說Banner排版

寫在前面：

我之前說過要寫一系列專門針對電商的三大構(gòu)成的文章的，而在上篇文章中我已經(jīng)給大家梳理了一篇關(guān)于色彩的文章：六個步驟細說電商banner圖設(shè)計之色彩的奧秘，那么今天呢，我就接著要給大家講一篇關(guān)于平面構(gòu)成的文章好了。

在講之前，我先給大家列一個內(nèi)容大綱：

一、平面構(gòu)成的含義是什么？

二、電商Banner圖是由什么組成的？

三、我們該如何在Banner圖設(shè)計中運用平面構(gòu)成呢？

四、平面構(gòu)成之于電商Banner圖的意義是什么？

五、總結(jié)

注：前半部分是給大家講解的基礎(chǔ)知識，后半部分是運用這些基礎(chǔ)知識結(jié)合實例講解，所以建議從頭到位耐心看完哦，需要些時間消化（經(jīng)濟基礎(chǔ)決定上層建筑嘛，前面不看后面也就看不懂了），接下來我們一個個問題來解剖：

一、平面構(gòu)成的含義是什么？

百度百科的解釋是：平面構(gòu)成是視覺元素在二次元的平面上，按照美的視覺效果，力學(xué)的原理，進行編排和組合，它是以理性和邏輯推理來創(chuàng)造形象、研究形象與形象之間的排列的方法，是理性與感性相結(jié)合的產(chǎn)物。

而我的理解是：平面構(gòu)成主要是在二維空間運用點、線、面結(jié)合一定的規(guī)律所形成的一種視覺語言，他可以是抽象的，也可以是具象的，可以是感性的，也可以是理性的，同時它也不是獨立存在的，而是伴隨著色彩／肌理／光影等而存在的。基本上世間萬物，所有我們接觸到的或無法接觸到的，看得見的或看不見的事物里都有平面構(gòu)成的運用和身影。

二、電商Banner圖是由什么組成的？

Banner組成要素包含4個方面：文案 、商品／模特、背景、點綴物（可有可無）。

<點圖片看大圖>www.theoat.com.cn

而我在之前反復(fù)強調(diào)過的，Banner的作用是：宣傳／展示／廣而告之／準確傳達信息。

三、我們該如何在Banner圖設(shè)計中運用平面構(gòu)成呢？

在前面我們提到，平面構(gòu)成主要是在二維空間運用點、線、面結(jié)合一定的規(guī)律所形成的一種視覺語言，而Banner中的所有元素（文案／商品或模特／背景／點綴物）其實都可以看作是平面構(gòu)成里的點線面這些構(gòu)成元素。

那么，接下來我們就需要了解3個有關(guān)平面構(gòu)成的概念了：

1、元素與元素之間的排列關(guān)系

2、所有元素在一起所體現(xiàn)的構(gòu)成形式

3、了解幾個常用的平面術(shù)語

接下來，我們分別了解下這幾個概念：

1、元素與元素之間的排列關(guān)系

它們之間的排列有下面這么幾種：分離／相切／重疊／透疊／結(jié)合／減缺／差疊／重疊。

<點圖片看大圖>

分離：形與形之間不接觸，有一定距離。

相切：形與形之間的邊緣正好相切。

重疊：形與形之間覆疊關(guān)系，由此產(chǎn)生上下前后的空間關(guān)系。

透疊：形與形有透明性的相互交疊，但不產(chǎn)生上下前后的空間關(guān)系。

結(jié)合：形與形相互結(jié)合成較大的新形狀。

減缺：形與形相互覆疊，覆疊的形狀被剪掉。

差疊：形與形相互交疊，交疊的部分產(chǎn)生一個新的形。

重合：形與形相互重合，變?yōu)橐惑w。

舉幾個例子：

<點圖片看大圖>

<點圖片看大圖>

<點圖片看大圖>

<點圖片看大圖>

2、所有元素在一起所體現(xiàn)的構(gòu)成形式

從所有元素（點線面）整體看，其構(gòu)成形式主要有重復(fù)、近似、漸變、變異、對比、集結(jié)、發(fā)射、特異、空間與矛盾空間、分割、肌理及錯視等等。

下面我們分別來舉例說明：

（1）重復(fù)，指在同一設(shè)計中，相同的形象出現(xiàn)過兩次以上，重復(fù)是設(shè)計中比較常用的手法，以加強給人的印象，造成有規(guī)律的節(jié)奏感，使畫面統(tǒng)一。所謂相同，在重復(fù)的構(gòu)成中主要是指形狀、顏色、大小等方面的相同。比如：

形狀的重復(fù)

骨骼的重復(fù)

大小的重復(fù)

色彩的重復(fù)

肌理的重復(fù)

方向的重復(fù)

重復(fù)舉例：電影《滿城盡帶黃金甲》劇照

Banner舉例：模特重復(fù)排列疊加到背景里，既是一種紋理也是一種模特展示的方式。

（2）近似，近似指的是在形狀、大小、色彩、肌理等方面有著共同特征，它表現(xiàn)了在統(tǒng)一中呈現(xiàn)生動變化的效果。近似的程度可大可小，如果近似的程度大就產(chǎn)生了重復(fù)感。近似程度小就會破壞統(tǒng)一。比如：

形狀的近似

骨骼的近似

近視舉例：臺灣的一對雙胞胎姐妹

<點圖片看大圖>

小時候

<點圖片看大圖>

長大后

Banner舉例：相同款式不同顏色的鞋子，大小不一的波點。

（3）漸變，是我常常聽說的一種效果，在自然界中能親身體驗到，在行駛的道路上我們會感到樹木由近到遠、由大到小的漸變。比如：

形狀的漸變

方向的漸變

位置的漸變

大小的漸變

色彩的漸變

骨骼的漸變

光影的漸變

大小漸變舉例：故宮淘寶前段時間的表情包

<點圖片看大圖>

（重復(fù)＋大小漸變）

舉個例子：鞋子的排列方式。

<點圖片看大圖>

背景的紋理形狀。

<點圖片看大圖>

（4）對比，有時候是形態(tài)上的對比，有時是色彩和質(zhì)感的對比。對比可產(chǎn)生明朗、肯定、強烈的視覺效果，給人深刻的印象。比如：

形狀的對比

大小的對比

色彩的對比

肌理的對比

位置的對比

重心的對比

空間的對比

虛實的對比

對比舉例：買家秀和買家秀 。。。

開玩笑了，我們舉個正經(jīng)的例子吧：照片ps前后

<點圖片看大圖>

Banner舉例：