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

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

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

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

三、文字

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

文字為主和圖文并重的圖片大體有兩種表現(xiàn)形式——排版為主、特效為主。而以文字為輔的圖形因為文字不需要太過突出，多以排版形式為主。極少使用特效去影響主體。

↑ 文字為主——排版為主

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

↑ 文字為主——特效為主

（想要突出文字，并且具有明確的主標題，文案字數(shù)較少的時候可首選）

↑ 圖文并重——排版為主

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

 

↑ 圖文并重——特效為主

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

↑ 文字為輔

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

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

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

團結(jié)性

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

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

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

↑ 大范圍的抱團也是圖片中不能缺少的部分

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

對比性

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

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

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

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

 

 

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

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

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

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

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

 

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

在文字兩邊建立參考線，并將文字以參考線為基準ctrl+t兩邊對齊，記住要按住shift保持等比例，并保持每兩句話之間的間距一致：

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

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

主標題字數(shù)較多的情況，方法與上面講的大體相同，只是對齊方式可以使用左右對齊或中心對齊。還是上面那三句，我們該用出街就要吸引眼球作為主標題來排列，我省去中間的步驟，直接看最后的結(jié)果，大家肯定都能看明白：

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

01、字體的選擇：

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

比如：

02、字體的種類：

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

03、字體顏色：

有些顏色過于艷麗的海報往往會讓用戶難受的要死，一般情況下看幾眼就不會想再看下去，顏色使用不當會讓眼睛疲勞，甚至會影響觀看者的情緒。

對于上面部分對您造成的一切不適，本人概不負責~~

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

四、裝飾

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

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

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

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

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

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

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

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

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

01、素材應(yīng)用

 

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

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

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

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

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

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

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

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

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

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

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

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

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

△ 畫面中使用諸多中國元素的實物素材，體現(xiàn)中國風主題

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

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

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

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

So Thanks~

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

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

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

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

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