@ChiNa_威海_山巖?：一個(gè)電商Banner?由不同的元素（背景、主體、文字、裝飾）構(gòu)成，如何運(yùn)用好這四個(gè)元素，就成了一個(gè)Banner?是否優(yōu)秀的關(guān)鍵。上篇我們聊了背景和主體兩部分，今天繼續(xù)下集文字和裝飾部分，超多案例，內(nèi)附修圖技巧，干貨多多，別錯(cuò)過咯。

上期回顧：《用好這四個(gè)元素，幫你做出高大上的電商BANNER（附技巧及神器）》

往期電商設(shè)計(jì)好文回顧：

1. 《高效流程！幫你快速做出優(yōu)秀電商BANNER 的設(shè)計(jì)三部曲》
2. 《5個(gè)幫你快速進(jìn)階的電商BANNER 設(shè)計(jì)技巧（案例多）》
3. 《設(shè)計(jì)基礎(chǔ)功！聊聊平面構(gòu)成中的點(diǎn)線面（超多案例）》
4. 《電商好文！超多實(shí)戰(zhàn)案例幫你解鎖5種商品擺放姿勢(shì)》
5. 《實(shí)戰(zhàn)好文！幫你做出優(yōu)秀電商BANNER的五個(gè)方面（超多案例）》
6. 《從這四個(gè)方面挑選圖片素材，可以提高電商設(shè)計(jì)的出圖質(zhì)量》

三、文字

文字在圖片應(yīng)用中有三種比較常見的形式——文字為主、圖文并重、文字為輔。

文字為主和圖文并重的圖片大體有兩種表現(xiàn)形式——排版為主、特效為主。而以文字為輔的圖形因?yàn)槲淖植恍枰^突出，多以排版形式為主。極少使用特效去影響主體。

↑ 文字為主——排版為主

（想要突出文字，但文案字?jǐn)?shù)過多，又不想單調(diào)排列的時(shí)候可首選）

↑ 文字為主——特效為主

（想要突出文字，并且具有明確的主標(biāo)題，文案字?jǐn)?shù)較少的時(shí)候可首選）

↑ 圖文并重——排版為主

（圖片跟文字都要兼顧，尤其是電商領(lǐng)域極為常用）

 

↑ 圖文并重——特效為主

（想要突出表達(dá)某一文字，但又需要融合場(chǎng)景或產(chǎn)品，需要較高的技術(shù)能力）

↑ 文字為輔

（以圖片為主，往往是滿版形式，文字作為輔助在圖片四周分布，不會(huì)使用夸張的特效）

下面方法來了：很多朋友在做文字的排版時(shí)總覺得自己的文字非常別扭，但又找不到合適的解決方法，其實(shí)文字的排版，簡(jiǎn)單來說只需要注意以下兩點(diǎn)即可——團(tuán)結(jié)性與對(duì)比性。文字在應(yīng)用中大部分情況下一定不是單個(gè)存在的，而會(huì)以一種組合形式出現(xiàn)，而通俗來講這個(gè)文字的組合就好比咱們身邊的朋友圈。

團(tuán)結(jié)性——好朋友肯定是團(tuán)結(jié)友愛，激情四射的
對(duì)比性——每個(gè)人的體貌、性格都不同，或高矮胖瘦，有張揚(yáng)有內(nèi)斂......

團(tuán)結(jié)性

通俗來講就是各種大小文字集結(jié)在某個(gè)集體里，我們?cè)谧鑫淖值臅r(shí)候需要做的就是讓這群家伙在一個(gè)合理的限定范圍之內(nèi)各種抱團(tuán)，大部情況下這個(gè)限定范圍可以用一個(gè)矩形去表示，我們從下面的例圖中每種選擇一個(gè)來看。

圖1：排版為主的文字必須注重團(tuán)結(jié)性（左） 圖2：文字特效海報(bào)中也要有團(tuán)結(jié)性

↑ 條框中的文字不僅要注重團(tuán)結(jié)，還要盡量居中

↑ 大范圍的抱團(tuán)也是圖片中不能缺少的部分

在制圖過程中我們不要吝嗇參考線，盡量讓圖片中的文字元素找到集體感，讓團(tuán)結(jié)的愛不僅在小范圍內(nèi)傳播，也要擴(kuò)散到更廣闊的大集體中，這樣畫面才不會(huì)丟失整體。也許你現(xiàn)在回頭去看你的一些作品會(huì)發(fā)現(xiàn)很多文字在散兵游勇，單獨(dú)作戰(zhàn)，而只需要簡(jiǎn)單的幾條參考線，你就會(huì)發(fā)現(xiàn)團(tuán)結(jié)的力量是多么的偉大。

對(duì)比性

對(duì)比性是文字排版的核心，沒有對(duì)比的文字看起來呆滯死板，而又了對(duì)比之后的文字會(huì)更具有觀賞性和靈動(dòng)性。而跟我之前提到的人的體貌性格特征一樣，文字的對(duì)比用來用去也無非就是那么幾點(diǎn)：大小對(duì)比、高低對(duì)比、粗細(xì)對(duì)比、顏色對(duì)比、松緊對(duì)比。

有的朋友又會(huì)問，那這些對(duì)比我即便是知道了但是也不知道怎么用好啊，其實(shí)這個(gè)也是很簡(jiǎn)單的問題，就根我們身材各異的人，總歸能買到合適的衣服一樣，在大部分情況下這些對(duì)比也都是有規(guī)律和方法可循的。首先我們需要了解在我們團(tuán)結(jié)友愛的文字集體，主要由主標(biāo)題、副標(biāo)題、描述、正文、其他幾位成員組成的。

在文字形狀部分，主標(biāo)題就像個(gè)別領(lǐng)導(dǎo)，膀大腰圓，所以會(huì)比較大，比較粗；而副標(biāo)題由于長(zhǎng)期跟領(lǐng)導(dǎo)混所以也會(huì)比較大一坨，但是要突出領(lǐng)導(dǎo)的地位還是會(huì)收斂一些；最后就是描述部分，描述就好比職員，肯定是不可以搶領(lǐng)導(dǎo)的風(fēng)頭的所以會(huì)跟領(lǐng)導(dǎo)完全相反，又小又細(xì)；而正文就好比平頭百姓，都是比較平平凡凡，但是可能會(huì)有個(gè)別領(lǐng)導(dǎo)眼中的“憤青”會(huì)在百姓這個(gè)集體中做出一些反常的舉動(dòng)；其它其實(shí)是最可憐的，用時(shí)下比較流行的說法就是臨時(shí)工，有時(shí)候需要在那個(gè)位置上，而有時(shí)候可以直接去掉。而顏色不符，往往都是主標(biāo)題占據(jù)主導(dǎo)，要么最亮要么最暗，其余的文字顏色都要配合主標(biāo)題的顏色進(jìn)行挑選和更改。

當(dāng)然，部分圖片可能會(huì)有好多個(gè)領(lǐng)導(dǎo)班子、縣長(zhǎng)、市長(zhǎng)、省長(zhǎng)......說了這么長(zhǎng)了，我們用圖片去明確下這種關(guān)系：

 

 

上圖為了節(jié)省時(shí)間我就不一一標(biāo)注了......大家應(yīng)該能感受到。

如果看到這里，你還是覺得對(duì)于文字的排版無從下手的話，我提供一個(gè)簡(jiǎn)單的方法，雖然死板但是不會(huì)出現(xiàn)太多的錯(cuò)誤，以后可以在這個(gè)基礎(chǔ)上不斷完善、不斷提高。以電商banner為例，我們的排版可以圍繞主標(biāo)題的字?jǐn)?shù)多少，來運(yùn)用兩種方法，當(dāng)然電商中段落數(shù)量盡量不要少于三句/超過五句，如果不夠三句，可以把其中覺得是主標(biāo)題的那段翻譯成英文字，現(xiàn)在翻譯英文方式很多，而且也沒有必要害怕對(duì)不對(duì)，沒有人那么閑跟你在英文對(duì)錯(cuò)較真。

如果文案過多，也不要緊，我們可以把除了主副標(biāo)題以外的文案都當(dāng)做是描述來處理，方法后邊我會(huì)去講，我們先以這三段話做例子：

01、一周不重樣
02、出街就要吸引眼球
03、作為女人必須時(shí)尚精致

首先不要考慮那么多，直接在畫布上打上文案：

 

比如“一周不重樣”是主標(biāo)題（主標(biāo)題字?jǐn)?shù)少），就要選擇一種又粗又大的字體，一般這種字體。選擇另外一段作為副標(biāo)題也應(yīng)用這個(gè)字體，最后剩余的一段選擇細(xì)體。如果你能在這個(gè)時(shí)候考慮到女性要用柔和的字體，男性可以使用剛硬的字體就更好：

在文字兩邊建立參考線，并將文字以參考線為基準(zhǔn)ctrl+t兩邊對(duì)齊，記住要按住shift保持等比例，并保持每?jī)删湓捴g的間距一致：

根據(jù)主次將文字顏色進(jìn)行細(xì)微調(diào)整，但目的是要讓主標(biāo)題更突出：

最后我們可以在這個(gè)基礎(chǔ)上咋進(jìn)行微調(diào)，比如增加一些形狀進(jìn)去增強(qiáng)設(shè)計(jì)感，改變某個(gè)字的顏色顯得俏皮，拉大某幾句之間的間距使排版靈動(dòng)，增加一些其他的文字元素豐富內(nèi)容等等，其實(shí)方法變來變?nèi)フ娴木褪枪潭敲磶讉€(gè)，只是看你平時(shí)怎么去積累他們，并且在使用的時(shí)候注意好對(duì)齊、居中、對(duì)比等細(xì)致的問題。還要補(bǔ)充一點(diǎn)是英文字母除了特殊情況盡量使用大寫，以保證高度是一致的，文字要團(tuán)結(jié)~嗯！

主標(biāo)題字?jǐn)?shù)較多的情況，方法與上面講的大體相同，只是對(duì)齊方式可以使用左右對(duì)齊或中心對(duì)齊。還是上面那三句，我們?cè)撚贸鼋志鸵矍蜃鳛橹鳂?biāo)題來排列，我省去中間的步驟，直接看最后的結(jié)果，大家肯定都能看明白：

由于我覺得很重要，這里再提一下關(guān)于文字使用中需要避免的三個(gè)問題：

01、字體的選擇：

很多朋友沒有很強(qiáng)的做字能力，所以經(jīng)常會(huì)使用現(xiàn)成的字體，但是我們一定要搞清楚文字所在的環(huán)境，去找到合適的字體，比如很多人愛用的霹靂體，如果是比較喜慶的場(chǎng)面，你用這種字體做文字肯定在效果上失很突兀的，在比如比較正規(guī)的，嚴(yán)肅的場(chǎng)合，用一些娃娃體，少女體，也肯定是驢唇不對(duì)馬嘴。

比如：

02、字體的種類：

一張圖片中不要使用過多的不同字體，這樣不僅會(huì)讓主次不明確，而且也會(huì)顯得特別亂，最好把字體數(shù)量控制在3個(gè)內(nèi)，既有變化，也不會(huì)很混亂。

03、字體顏色：

有些顏色過于艷麗的海報(bào)往往會(huì)讓用戶難受的要死，一般情況下看幾眼就不會(huì)想再看下去，顏色使用不當(dāng)會(huì)讓眼睛疲勞，甚至?xí)绊懹^看者的情緒。

對(duì)于上面部分對(duì)您造成的一切不適，本人概不負(fù)責(zé)~~

關(guān)于文字特效的部分一兩句也不可能講明白，也會(huì)在后續(xù)的教程中提到，這里就不在說了。

四、裝飾

裝飾元素在圖片中不一定必須出現(xiàn)，但是一旦出現(xiàn)就要讓畫面變得精彩起來，很多人可能會(huì)對(duì)裝飾元素感到迷茫，也不知道如何去應(yīng)用才會(huì)合適，希望接下來的文章會(huì)讓你改變這種在狀態(tài)。

裝飾元素大概分為以下幾種——文字特效、光效裝飾、幾何形狀及線條裝飾、實(shí)物裝飾。

↑ 文字裝飾要與正常的文字排版區(qū)分開，一般用來裝飾的文字很多情況下我們不會(huì)去看它寫的什么，甚至都看不清它寫的什么，它僅僅只是為了裝飾圖片效果而放在那里的，在電商描述板塊和拍攝影視類作品比較常見。

光效裝飾與我們上期提到的光的應(yīng)用基本雷同，這里不去糾結(jié)，不過在這里我需要額外說點(diǎn)題外話，很多人愿意跟別人要素材，我個(gè)人是這么理解素材這件事情的。只有自己親手下的素材才是自己的素材，該用的時(shí)候你能想起來你素材庫里面有這么個(gè)東西，能真正幫到你，況且在你尋找某一素材的時(shí)候，可能會(huì)找到其他更讓你靈感的東西（至少我很多時(shí)候都是會(huì)遇到這種情況）別人給的素材，頂多就是你的素材庫多了一點(diǎn)東西罷了，很多都是記不住的，到底該用的時(shí)候你還是不知道你原來有這么個(gè)東西。素材庫這種設(shè)計(jì)師的命門，不是用來跟人比較你自己有多少多少G的素材，而是讓你作圖的時(shí)候更靈活、更方便，請(qǐng)記住！那是你的素材庫。

作為一個(gè)設(shè)計(jì)講師，很多時(shí)候?qū)σ恍┰O(shè)計(jì)師的小陋習(xí)愿意多說點(diǎn)東西，如果冒犯了個(gè)別朋友，請(qǐng)您諒解。

幾何形狀及線條：是裝飾中比較常見的一種效果，應(yīng)用起來更多的是點(diǎn)線面的結(jié)合（或者叫填充與描邊的結(jié)合）難點(diǎn)不是怎么應(yīng)用而是怎么去想，我在這里提供給大家一種思維方式——從簡(jiǎn)單到復(fù)雜，學(xué)會(huì)聯(lián)想。以點(diǎn)為例，一段話的前面可以放一個(gè)點(diǎn)作為小裝飾，那么這個(gè)點(diǎn)我們就可以展開更多的思維：

圖片中的點(diǎn)大部分時(shí)候還是與線配合使用，把上面的聯(lián)想再應(yīng)用到點(diǎn)線結(jié)合上。

面的應(yīng)用平時(shí)可以多做畫形延伸的練習(xí)，比如畫一個(gè)圓，然后不斷對(duì)這個(gè)圓進(jìn)行補(bǔ)充和修改，不僅能開拓思維也能在平時(shí)作圖中作為參考。

晶格化效果，也是比較常用的面的形式。晶格化軟件網(wǎng)上貌似很多，但是我都沒有用過，所以不在這里做誤導(dǎo)，我個(gè)人平時(shí)有三種方法做晶格化的東西。

01、素材應(yīng)用

 

02、通過濾鏡——像素畫——晶格化（PS本身的晶格化效果不是很突出，但作為晶格化背景來說還是可以接受的）

首先我們做一個(gè)漸變，顏色不要太深：

使用晶格化命令，數(shù)值自己拿捏。

03、制作小范圍的晶格效果的時(shí)候通過剪切蒙版去完成：

重復(fù)以上步驟，只是新圖層建在下方：

想要改變顏色可以建組后，剪切一個(gè)色相飽和度調(diào)整圖層，并勾選著色即可。

通過3D手段也是很容易做出小金格效果的。

還有就是自定義形狀了，一些常用符號(hào)、箭頭、對(duì)話框，條框等等都可以通過下載得到：

說了這么多我們看看一些案例中幾何形狀及線條的應(yīng)用：

SoHappy是我非常欣賞的設(shè)計(jì)師，想提高banner水平的朋友可以多去學(xué)習(xí)他的作品：《從這四個(gè)方面挑選圖片素材，可以提高電商設(shè)計(jì)的出圖質(zhì)量》

實(shí)物裝飾是很多圖片常用的手段，實(shí)物裝飾沒有太多的難點(diǎn)，只是積累了一定的素材基本都可以完成，我在這邊說一說實(shí)物裝飾的幾種常見用法：

01、裝飾元素出現(xiàn)在畫布邊緣并且不顯示全貌，既能保持畫面不空洞，又不會(huì)太過搶主體；這種手法需要注意虛實(shí)變化，多用高斯模糊做一些虛化，效果會(huì)更加明顯。

02、畫面中應(yīng)用若干實(shí)物裝飾點(diǎn)綴，豐富畫面的同時(shí)讓畫面的主體更明確。（我們要搞清楚主體跟主題的區(qū)別：主體是某個(gè)物體，而主題是畫面所要表達(dá)的含義，兩者截然不同的）。

△ 畫面中使用諸多中國(guó)元素的實(shí)物素材，體現(xiàn)中國(guó)風(fēng)主題

△ 畫面中使用諸多裝飾元素的團(tuán)元素，體現(xiàn)裝修節(jié)主體

03、使用實(shí)物散落效果是非常主要的實(shí)物元素應(yīng)用手法，通過實(shí)物的虛實(shí)散落來影響整體畫面，這種方法不需要散落數(shù)量的多少，而是需要注意大小變化，虛實(shí)變化，角度變化等，而且最好有部分散落物是超出畫面的，以增加整個(gè)圖片的延伸感。

虛實(shí)效果通過高斯模糊、動(dòng)態(tài)模糊完成即可。

關(guān)于設(shè)計(jì)元素的構(gòu)成與應(yīng)用方法講到這里，兩篇一萬多字的長(zhǎng)文，能對(duì)大家有一點(diǎn)幫助我就灰常開心了~

So Thanks~

歡迎關(guān)注微信公眾號(hào)：三根設(shè)計(jì)骨

「本月最值得閱讀收藏的完美像素使用手冊(cè)」

1. 《值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之原理篇》
2. 《中文版來了！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之細(xì)節(jié)篇》
3. 《第三集！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之易用性篇》
4. 《第四集！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之軟件技巧篇》
5. 《最終版！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之軟件技巧篇》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com