photoshop撕紙效果的簡(jiǎn)單介紹

021yin.com

寫(xiě)在前面：

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

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

一、平面構成的含義是什么？

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

三、我們該如何在Banner圖設計中運用平面構成呢？

四、平面構成之于電商Banner圖的意義是什么？

五、總結

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

一、平面構成的含義是什么？

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

而我的理解是：平面構成主要是在二維空間運用點(diǎn)、線(xiàn)、面結合一定的規律所形成的一種視覺(jué)語(yǔ)言，他可以是抽象的，也可以是具象的，可以是感性的，也可以是理性的，同時(shí)它也不是獨立存在的，而是伴隨著(zhù)色彩／肌理／光影等而存在的?；旧鲜篱g萬(wàn)物，所有我們接觸到的或無(wú)法接觸到的，看得見(jiàn)的或看不見(jiàn)的事物里都有平面構成的運用和身影。

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

Banner組成要素包含* 個(gè)方面：文案 、商品／模特、背景、點(diǎn)綴物（可有可無(wú)）。

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

三、我們該如何在Banner圖設計中運用平面構成呢？

在前面我們提到，平面構成主要是在二維空間運用點(diǎn)、線(xiàn)、面結合一定的規律所形成的一種視覺(jué)語(yǔ)言，而B(niǎo)anner中的所有元素（文案／商品或模特／背景／點(diǎn)綴物）其實(shí)都可以看作是平面構成里的點(diǎn)線(xiàn)面這些構成元素。

那么，接下來(lái)我們就需要了解* 個(gè)有關(guān)平面構成的概念了：

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

2、所有元素在一起所體現的構成形式

* 、了解幾個(gè)常用的平面術(shù)語(yǔ)

接下來(lái)，我們分別了解下這幾個(gè)概念：

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

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

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

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

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

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

結合：形與形相互結合成較大的新形狀。

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

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

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

舉幾個(gè)例子：

重疊 減缺

結合重疊

相切 透疊

分離＋結合＋差疊＋減缺

減缺

2、所有元素在一起所體現的構成形式

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

下面我們分別來(lái)舉例說(shuō)明：

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

形狀的重復

骨骼的重復

大小的重復

色彩的重復

肌理的重復

方向的重復

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

Banner舉例： 模特重復排列疊加到北京里，既是一種紋理也是一種模特展示的方式。

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

形狀的近似

骨骼的近似

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

小時(shí)候

長(cháng)大后

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

（* ）漸變，是我常常聽(tīng)說(shuō)的一種效果，在自然界中能親身體驗到，在行駛的道路上我們會(huì )感到樹(shù)木由近到遠、由大到小的漸變。比如：

形狀的漸變

方向的漸變

位置的漸變

大小的漸變

色彩的漸變

骨骼的漸變

光影的漸變

大小漸變舉例：故宮吉印通 前段時(shí)間的表情包

（重復＋大小漸變）

舉個(gè)例子： 鞋子的排列方式。

背景的紋理形狀。

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

形狀的對比

大小的對比

色彩的對比

肌理的對比

位置的對比

重心的對比

空間的對比

虛實(shí)的對比

對比舉例：買(mǎi)家秀和買(mǎi)家秀 。。。

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

Banner舉例：

（* ）密集，密集在設計中是一種常用的組織圖面的手法，基本形在整個(gè)構圖中可自由散布，有疏有密。最疏或最密的地方常常成為整個(gè)設計的視覺(jué)焦點(diǎn)，他其實(shí)也是對比的一種情況，越密集的地方給人感覺(jué)距離越遠，反之越近。

點(diǎn)的密集

線(xiàn)的密集

面的密集

密集舉例：日本波點(diǎn)女王草間彌生的作品

草間彌生

Banner舉例：

（* ）發(fā)射，是一種常見(jiàn)的自然現象，太陽(yáng)四射的光芒就是發(fā)射的。發(fā)射具有方向的規律性，發(fā)射中心為最重要的視覺(jué)焦點(diǎn)，所有的形象均向中心集中，或由中心散開(kāi)，有時(shí)可造成光學(xué)動(dòng)感，會(huì )產(chǎn)生爆炸的感覺(jué)，有強烈的視覺(jué)效果。

中心點(diǎn)的發(fā)射

螺旋式的發(fā)射

同心式的發(fā)射

發(fā)射舉例：星軌／水波／觀(guān)世音菩薩背后自帶的光環(huán)

水波

星軌（攝影）

每次觀(guān)世音菩薩出場(chǎng)總是會(huì )自帶光環(huán)（大家小時(shí)候應該都比較熟悉這些畫(huà)風(fēng)了吧）

Banner舉例：放射線(xiàn)，使得畫(huà)面聚焦到中間部分內容。

（7）特異，是指構成要素在有次序的關(guān)系里，有意違反次序，使少數個(gè)別的要素顯得突出，以打破規律性。

形狀的特異

大小的特異

色彩的特異

方向的特異

肌理的特異

特異舉例：其實(shí)各種類(lèi)似于連連看的游戲，就是這么個(gè)原理

Banner舉例：一家人站成一排，個(gè)頭比較小的那一個(gè)就給人一種特異和俏皮的感覺(jué)，使畫(huà)面不那么單調。

（* ）空間

利用大?。罕热缃筮h小。

利用重疊：前后／上下等關(guān)系。

利用陰影：使物體具有立體感／空間感。

利用疏密：比如間隔越小，越密集，感覺(jué)就越遠。

利用透視：平行線(xiàn)由寬到窄。

利用色彩：冷色遠離，暖色靠近。

利用肌理：越粗糙越近，越細膩越遠。

矛盾空間：真實(shí)不存在的空間，假想的。

虛實(shí)關(guān)系：遠景／中景／近景。

矛盾空間舉例：前段時(shí)間非常流行的一款游戲《紀念碑谷》

空間感Banner舉例：畫(huà)面中的元素可以假想為一些有大有小的點(diǎn)，然后按一定透視空間規律擺放（近大遠?。?。

（9）分割，把整體分成小的部分。比如：

等形分割

自由分割

比例與數量

分割舉例：來(lái)自大自然的梯田

分割Banner舉例： 不同比例大小的色塊組成Banner的背景。

商品的排列也可以起到分割畫(huà)面的作用。

（10）肌理，又稱(chēng)質(zhì)感，由于物體的材料不同，表面的排列、組織、構造等不同，因而產(chǎn)生粗糙感、光滑、軟硬感。比如：

筆觸的變化

凹凸不平的肌理

噴繪/染

自帶的紋理效果

肌理舉例：木材等

肌理Banner舉例： 背景采用噴墨＋涂色的方式形成了一種很時(shí)尚的紋理。

（11）錯視，因空間距離或周?chē)h(huán)境所造成的視覺(jué)差。主要有下面幾種：

1.繆勒—萊依爾錯視

圖中兩條線(xiàn)是等長(cháng)的，由于上下線(xiàn)段兩端的箭頭方向相反，上線(xiàn)段的箭頭占據的空間大，所以上面的線(xiàn)顯的較長(cháng)。

2.垂直線(xiàn)與水平線(xiàn)的錯視

大多數人往往把垂直線(xiàn)看的比水平線(xiàn)要長(cháng)，這是高估的錯覺(jué)。在水平線(xiàn)長(cháng)度為* -10mm時(shí)，這種錯覺(jué)最大。

* .透視錯視

圖中的兩條線(xiàn)是相等的?？雌饋?lái)下面的要短，是因為透視的錯覺(jué)。

* .正方形的錯視

標準的正方形左右的邊看上去大于上下的邊。

* .黑白錯視

圖中黑白線(xiàn)段，由于白線(xiàn)段明度大，具有膨脹的現象，所以看以來(lái)比黑線(xiàn)段長(cháng)。

* .由于圖形結構的影響而產(chǎn)生的錯視

圖中組成三、四、五邊形的邊長(cháng)都相等，但由于周長(cháng)和面積的不同，產(chǎn)生邊長(cháng)的不同。

7.對比錯視

高個(gè)子和矮個(gè)子在一起，高的會(huì )顯的越高，矮的會(huì )顯的越矮。

錯視舉例：比如虛實(shí)手繪拼接，比如有些攝影作品

這里要說(shuō)明的是，錯視在一些視差動(dòng)畫(huà)的網(wǎng)頁(yè)頁(yè)面里運用的會(huì )比較多一些，還有一些app的引導頁(yè)，這里Banner舉例的話(huà)可能也不太合適，不過(guò)也可以給大家看一下：

比如這個(gè)畫(huà)面里的黃色圓點(diǎn)，同樣的黃色圓點(diǎn)，在暗色背景上是很突出的，但在同樣是黃色的背景上就幾乎看不見(jiàn)了，但其實(shí)原點(diǎn)是沒(méi)變的，只是背景的顏色變了，就導致我們看到了不一樣的結果。

* 、了解幾個(gè)常用的平面術(shù)語(yǔ)，如下：

和諧統一／對比突出／對稱(chēng)／畫(huà)面平衡／視覺(jué)重心／節奏韻律

和諧統一：

元素與元素之間，或所有元素構成的整體是一種協(xié)調的關(guān)系，比如大?。伾L(fēng)格等的協(xié)調。

Banner舉例：整體的明亮色彩，搭配的雨滴小元素，以及雨傘產(chǎn)品和模特裝扮，左中右排版方式都看起來(lái)很協(xié)調統一。

對比突出：

即把2個(gè)質(zhì)或者量反差很大的元素放在一起，使人感覺(jué)主體鮮明突出，整體又活躍而統一，比如大?。瘮盗浚剩螤畹膶Ρ?。

Banner舉例：紅色模特部分面積比較大，無(wú)論是色彩還是面積優(yōu)勢，都使得它在檸檬黃背景上特別突出。

對稱(chēng)：

假設在一個(gè)圖形中間畫(huà)一條垂直或水平線(xiàn)后，畫(huà)面的左右或上下2邊是可以完全重合的，則我們稱(chēng)之為對稱(chēng)。

Banner舉例：典型的對稱(chēng)構圖咯，Bra就是一個(gè)對稱(chēng)的形狀。

畫(huà)面平衡：

即元素與元素之間，元素與整體之間的大?。螤睿瘮盗浚剩馁|(zhì)等的分布與視覺(jué)上的平衡。

Banner舉例：左右兩邊色彩面積上是平衡的，但是數量和形狀上的略微差異，使得畫(huà)面不那么單調。

視覺(jué)重心：

通過(guò)對畫(huà)面中元素的數量／顏色／位置／大?。馁|(zhì)等進(jìn)行處理，畫(huà)面中所出現的視覺(jué)焦點(diǎn)。

Banner舉例：模擬撕紙效果形成的破洞，有一種視覺(jué)聚焦的效果。

節奏韻律：畫(huà)面中的一種或多種元素按一定的規律排列，會(huì )產(chǎn)生音樂(lè )一般的旋律感。

Banner舉例： 鞋子擺放姿勢不一樣，產(chǎn)生了一種動(dòng)律感，使畫(huà)面不單調不呆板。

重點(diǎn)（高潮部分）來(lái)了?。。。?！

以上講了這么多知識點(diǎn)，那么結合這些知識點(diǎn)，我總結繪制了一些比較實(shí)用的Banner拍版樣式，如下圖所示：

以上呢，我就先總結這么多，其實(shí)所有的Banner版式都是大同小異的，因為我們前面提到，Banner是由文案／模特或商品／背景／點(diǎn)綴物組成的，而所有這些元素就相當于我們平面構成里的點(diǎn)線(xiàn)面，當我們改變這些元素的角度／距離／大?。瘮盗浚瘶邮剑伾?，新的版式也就產(chǎn)生了，所以，大家不妨也試試看哦。

四、平面構成之于電商Banner圖的意義是什么？

Banner中的所有元素其實(shí)都相當于平面構成里的點(diǎn)或線(xiàn)或面，而所有元素所組成的Banner畫(huà)面其實(shí)又是一種情緒和信息的表達，所以我們可以從下面* 個(gè)方面去理解這個(gè)問(wèn)題：

（1）從活動(dòng)主題的角度：

（2）從信息層級的角度：

（* ）從品牌調性的角度 :

（* ）從視覺(jué)美感的角度：

（1）從活動(dòng)主題的角度：

當我們拿到一個(gè)設計需求的時(shí)候，都會(huì )需要確定他的設計風(fēng)格，而這個(gè)風(fēng)格怎么來(lái)確定呢？就是要明白他的定位以及服務(wù)的人群是誰(shuí)，了解他們的興趣愛(ài)好，同時(shí)我們腦袋里會(huì )出現下面這幾個(gè)關(guān)鍵詞：熱鬧促銷(xiāo)／年輕活力／高冷大牌／時(shí)尚個(gè)性／規矩保守等

我們先看幾個(gè)Banner實(shí)例：

低價(jià)熱鬧促銷(xiāo)：畫(huà)面中會(huì )有有比較多的點(diǎn)綴物，也喜歡用大面積的暖色，其目的就是為了營(yíng)造熱鬧的氛圍，給人熱情有親和力的感覺(jué)，板式以上下或者居中排版的方式多點(diǎn)，這種方式的視覺(jué)也更聚焦一些。

所以熱鬧促銷(xiāo)的頁(yè)面可以考慮下面這些排版樣式：

年輕活力：這種主題的Banner設計其實(shí)跟熱鬧促銷(xiāo)的方法類(lèi)似，只是說(shuō)，這種畫(huà)面里的點(diǎn)綴元素或者模特樣式需要表現得顯得更加俏皮活力一些，色彩上也會(huì )比較艷麗或明亮，營(yíng)造一種青春活力的感覺(jué)，排版方式其實(shí)沒(méi)有什么特別的限制，發(fā)揮空間非常大。

所以年輕活力的頁(yè)面可以考慮下面這些排版樣式：

高冷大牌：這種主題的Banner設計重在體現一種一般人買(mǎi)不起，買(mǎi)了之后會(huì )顯得自己特別有優(yōu)越感的印象，那么畫(huà)面中就需要多留白，善用一些簡(jiǎn)潔的或有棱角的圖形設計，切忌用一些比較卡哇伊或太柔美復雜的線(xiàn)條，同時(shí)，商品或模特的品質(zhì)要高，總而言之就是給人一種很貴很高端的感覺(jué)（窮人買(mǎi)不起，有錢(qián)人買(mǎi)了有面子），這個(gè)跟低價(jià)熱鬧促銷(xiāo)是相反的。

所以高冷大牌的頁(yè)面可以考慮下面這些排版樣式：

（2）從信息層級的角度：

當我們在做一個(gè)banner的時(shí)候，如果沒(méi)有特別的要求，其實(shí)我們是有很多個(gè)方向選擇的，首先問(wèn)下自己你是想要突出什么信息呢？是突出商品呢？還是突出文字呢？還是突出整體的氛圍呢？還是強調整體的協(xié)調感呢？還是說(shuō)強調品牌呢？

一般來(lái)說(shuō)，一個(gè)好的Banner首先是要保證信息傳達準確，然后再需要保證畫(huà)面的協(xié)調感和氛圍的。

那么我先給大家看幾個(gè)案例舉例：

強調品牌（模特也屬于品牌的一部分）

強調商品以及SALE

強調整體的氛圍（商品融入在氛圍當中了）

強調SALE

比如大家可以看到我之前給大家總結的版式，基本上文案信息都是比較突出的，其次商品突出或者強調整體氛圍：

（* ）從品牌調性的角度

關(guān)于品牌這塊，可能是很多小商家目前不太重視，也覺(jué)得自己用不上的，但是各大電商平臺還有一些比較大的電商品牌都已經(jīng)有這種品牌意識了，所以不管你是在哪種團隊里，不防也都了解一下。

我們可以從這幾個(gè)方面去看待品牌這個(gè)問(wèn)題：風(fēng)格延續／品牌統一／風(fēng)格突破

品牌統一：天貓的貓頭形象，運用于各個(gè)品類(lèi)的廣告當中，這一創(chuàng )意既統一了品牌形象，又非常巧妙。

再比如初語(yǔ)：

一直以來(lái)，初語(yǔ)的所有模特，在眼睛那里都有一條白線(xiàn)，雖然不明白什么意思，但是給人印象特別深刻，形成那個(gè)了統一的品牌視覺(jué)形象，最后大家也看到了初語(yǔ)的新 logo，就是提取了眼睛那里的形象，新logo像下面這樣：

而它原來(lái)的logo是這樣的：

對比發(fā)現，品牌形象更加統一了，也更有特色了（雖然會(huì )讓一些沒(méi)聽(tīng)過(guò)這個(gè)品牌的人以為它是賣(mài)面膜的，不過(guò)對于接觸過(guò)這個(gè)服裝品牌的人來(lái)說(shuō)還是很好理解的）。

風(fēng)格延續：這個(gè)在平臺的比較大型的活動(dòng)里里運用較多，比如各個(gè)分會(huì )場(chǎng)的風(fēng)格延續（排版樣式保持一致，只是改變了顏色和品類(lèi)商品和文案等）

風(fēng)格突破：關(guān)于品牌的風(fēng)格突破，可能是因為涉及到品牌升級或者品牌定位的改變，所以需要在設計上配合這一策略，比如說(shuō)原先你面對的可能是青少年群體，但隨著(zhù)時(shí)代的發(fā)展，你是繼續服務(wù)這些青少年群體跟著(zhù)他們一起成長(cháng)轉型為服務(wù)于大齡青年呢？還是繼續服務(wù)新一代的青少年群體呢？這時(shí)候你的用戶(hù)群體改變了，當然也就意味著(zhù)風(fēng)格可能需要作出改變咯。

比如吉印通13816211622 logo形象的升級：

對于這個(gè)話(huà)題，我們后面再抽出一篇文章單獨來(lái)講好了，大家感興趣嗎？

（* ）從視覺(jué)美感的角度：

當一個(gè)Banner在滿(mǎn)足了前面幾個(gè)要求的情況下，如果有能力的話(huà)，我們當然還是要做到達到視覺(jué)美感的要求的，那么從這個(gè)角度看，平面構成之于Banner設計的意義是什么呢？

我們可以看下下面幾個(gè)關(guān)鍵詞：平衡畫(huà)面／視覺(jué)沖擊力／畫(huà)面不單調／富有創(chuàng )意等。

平衡畫(huà)面：左中右排版

視覺(jué)沖擊力：放射線(xiàn)，中心聚焦

畫(huà)面不單調：將產(chǎn)品的方向或顏色做一些不規則的排列，避免乏味

富有創(chuàng )意：擬人化處理畫(huà)面，營(yíng)造一種身臨其境的場(chǎng)景感

五、總結

以上，我分別給大家講了這幾個(gè)知識點(diǎn)：

一、平面構成的含義是什么？

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

三、我們該如何在Banner圖設計中運用平面構成呢？

四、平面構成之于電商Banner圖的意義是什么？

到此，平面構成之于Banner設計的奧秘我就講完了，這次的內容量非常大，估計夠你們消化不止一周了，而我也沒(méi)有分為上下篇來(lái)寫(xiě)，原因有二：一方面是跟我自己的性格有關(guān)，我不太習慣分篇來(lái)講一個(gè)知識點(diǎn)，一個(gè)完整的知識點(diǎn)不管從哪里切斷我都會(huì )感覺(jué)不舒服，就像你吃一個(gè)東西吃得正爽，卻被別人告知說(shuō)：“另一半要留著(zhù)下次再吃哦”，雖然這樣子可以增加大家對下一篇文章的期待，但也會(huì )感覺(jué)不爽吧（不過(guò)為了大家不要吃撐了最好是收藏起來(lái)或轉發(fā)出去，以便后面再細細看）。

另一方面，因為我的這些知識點(diǎn)是要編輯到書(shū)本里的，所以我多寫(xiě)一點(diǎn)，那離我完成書(shū)本的寫(xiě)作也就近了一點(diǎn)，這也是我傾盡所有來(lái)寫(xiě)這些內容的原因，雖然每次寫(xiě)完一篇我就感覺(jué)自己的白頭發(fā)又多了幾根，啊哈哈。

最后，希望所有關(guān)注我的人／愛(ài)我的人都能從我這里有所收獲，無(wú)論是精神上還是技能上的，至少，這也意味著(zhù)你們的選擇是值得的。

版權聲明：早讀課文章均來(lái)自作者投稿或者授權文章，部分文章為轉載均盡量注明作者和來(lái)源，文章版權歸作者所有，若涉及版權問(wèn)題，請添加momo*：吉印通13816211622 j* 211* 1* ，感謝。