高效流程！幫你快速做出優(yōu)秀電商Banner 的設(shè)計三部曲

不沉的骨頭：這一期分享主要是說到我自己在工作中做營銷Banner 設(shè)計的方式和案例詳解，分為3個大方向和幾個小方向（版面/配色/細節(jié)豐富），我們一個一個去了解清楚。在此要說明的是，流程呢是我個人平時的習(xí)慣方式。僅供參考，希望能幫助到大家。

部分案例來源于網(wǎng)絡(luò) 多有得罪請恕罪。

一、Banner 三部曲

1-先形式

版面形式
標題形式

2-再配色

產(chǎn)品（人物）取色
依據(jù)理論
直覺配色

3-后豐富

點綴（氣氛）
質(zhì)感紋理
潤色調(diào)整

二、運動戶外專題Banner

1、先形式之版面形式

為什么要先形式？

先確定版面的形式、布局、標題樣式，然后再去考慮版面的色彩搭配。一個優(yōu)秀的設(shè)計即使它在黑白的情況下也是很好的，如果先從考慮配色然后再去考慮版面，設(shè)計的過程中會變的不順暢。

什么是版面形式？

形式是指Banner 設(shè)計里內(nèi)在要素的結(jié)構(gòu)或表現(xiàn)方式，形式包括設(shè)計上的各種板式內(nèi)在特征以及由這些板式所決定頁面上其它元素的特征、運動的過程和風(fēng)格的沿用等，畫面的形式?jīng)Q定了這個Banner 傳遞的信息、感覺。

在設(shè)計中的作用？

形式能Banner 更具有設(shè)計感，有得形式能讓Banner 理性穩(wěn)定、有的則讓Banner 飽滿或者力量。由于設(shè)計的發(fā)展，特定的需求在內(nèi)容上的創(chuàng)新，必須有新的形式與之相適應(yīng)。所以，要打破舊的形式，創(chuàng)立新形式。(正如熱門的手機端上動畫設(shè)計）

想一想平時看到或用到哪些版面形式？

以下幾種類型的版面形式是日常設(shè)計中經(jīng)常出現(xiàn)的Banner 表現(xiàn)形式：

畫面用立體表現(xiàn)形式讓人感覺商品是在盒子里面，通過模仿真實物體的形狀運用到Banner 中，比純平面的更有新意。

幾何形狀的版面形式在營銷Banner 設(shè)計中也是很常見的，因為比較容易出效果。除了上面斜切、圓、三角形狀的表現(xiàn)形式還有直線、不規(guī)則形狀、物體形狀的我就不一一放上來了。

單一背景的版面形式簡單清晰、這種形式重點在于點、線氣氛的打造和背景顏色的把控，一般顏色不會太艷麗。并且會在標題字體設(shè)計上面會加強表現(xiàn)。

背景以場景形式來表現(xiàn)的Banner ，不過這種形式在營銷專題中會比較少見，因為它的促銷氛圍會減弱。它在游戲?qū)ｎ}上面運用更多，游戲是有場景支持的。

這是2015年京東1111的大促設(shè)計用了立體的版面表現(xiàn)形式，想要營造一種真實感覺，讓人有伸手去拿的舉動，比較舒服、規(guī)整，不會顯得亂亂的。但是有些商品的透視和盒子的透視是不一樣的，所以有些地方會看著不太舒服。

如果要說形狀形式的應(yīng)用，今年淘寶1212的大促設(shè)計就是一個很好的案例。通過案例我們可以知道版面經(jīng)過了圓形形狀的多重分割，一是為了滿足大促類目商品、二來層次感也很強。圓形本身是一個比較飽滿的形狀，所以你看到這個版面的時候會更舒服更飽滿的感覺。

不過大家要區(qū)分形狀形式和形狀分割2個概念。

單一背景的表現(xiàn)形式會讓Banner 清晰、舒服，也是好設(shè)計的版面形式。但是要注意的是背景顏色的處理一定舒服，不然由于顏色面積大而亮瞎客戶的眼睛和視覺疲勞。

場景感版面形式在營銷Banner 設(shè)計會比較少，一是后面套用尺寸不方便、二是耗時。

這種要么是場景合成或者手繪場景，這也是很棒的。在游戲?qū)ｎ}中就是常見的了。

版面形式回顧總結(jié)：

1-每個版面形式各有特點，要根據(jù)實際情況去選擇
2-形式不能大于內(nèi)容，記住我們是要傳遞信息
3-要打破舊的形式，創(chuàng)立新形式

優(yōu)秀的設(shè)計案例還有很多這個需要大家平時的采集和觀察，下面我們來看標題形式。

二、先形式之標題形式

什么是標題形式？

標題形式是我為Banner 主文案標題的表現(xiàn)的叫法，標題在營銷Banner 設(shè)計中是很重要的所以通常我們會進行一些字體變形、毛筆拼接、立體化等手法來處理標題。讓其更具有設(shè)計感。

在設(shè)計中的作用？

標題形式在Banner 中我們不會停留在原字體上，總是會動一動筆畫。使其更加的形象、有趣、酷炫，所以字體設(shè)計就尤為重要了。另一方面是用愿字體會侵權(quán)的哦。

 

想一想平時看到或用到哪些標題形式：

以下幾種類型的標題形式是日常設(shè)計中經(jīng)常出現(xiàn)的：

字體變形在營銷設(shè)計上提升促銷力度，且更加有設(shè)計感。優(yōu)秀的字體變形會在設(shè)計中起到點睛的作用。

這不能完全算是單獨的標題形式，可以歸于字體變形環(huán)節(jié)，但我想提出來說，因為在標題設(shè)計上面加入相應(yīng)的元素能起到畫龍點睛的作用。閃電和女人很好的提升了Banner 的設(shè)計感！可以說是小元素大提升。

立體字的標題形式在營銷設(shè)計經(jīng)常會使用到，因為它很容易表現(xiàn)出促銷效果。不管是很強的立體字形式還是一點，都可以讓你的設(shè)計更加的豐富、有力量的視覺感受。標題做立體字形式大家要注意立體面的厚度盡量不要超過字體筆畫的厚度，不然會顯得比較笨重。

標題加框或多框的形式也是比較常見，這樣做的好處是。非常好的解決文字與背景顏色太相近或突出文字，層次感也強。

字體變形的應(yīng)用

通過對比我們可以發(fā)現(xiàn)圖1經(jīng)過字體變形后更加的符合主題的氣質(zhì)，同時也大大的提升了畫面設(shè)計感。而圖2純字體過于普遍的字體，沒有多大特點。

我們在進行字體變形的時候可以根據(jù)字的特征加入相應(yīng)元素，無論是閃電、愛心、錢幣，它們都更加形象的加了設(shè)計感。從某個字來聯(lián)想到相關(guān)的元素進行搭配或者某個字的筆畫用元素代替，當(dāng)然不能影響識別性。

字體變形的練習(xí)

字體變形這是一個長期去練習(xí)和不斷調(diào)整的事情，在紙上面我們可以大膽的把自己的想法畫出來。

1. 在優(yōu)設(shè)上面搜索字體設(shè)計教程肯定有的哦
2. 關(guān)注優(yōu)秀的字體大神或請教他人

如果想學(xué)習(xí)全面的字體設(shè)計方法，可以看看大神張家佳老師的培訓(xùn)課程：http://xue.uisdc.com/ziti

立體字形式應(yīng)用

立體字的標題表現(xiàn)形式在幾個形式中是比較難把握的，不然設(shè)計就會很難看。大家要注意的是標題的透視要和商品的透視一致，例如第一個圖的傘和標題的透視是一樣的都是向上，所以不會顯的突兀，畫面自然就舒服了。

加外框形式應(yīng)用

如果你不做立體面標題形式，那么在文案不能在背景上面完全突出的話加外框是最好的選擇，但是記住外框的顏色都比背景深，大家多嘗試嘗試就會了。層次感也會豐富一些。

案例欣賞 - 字體變形

案例欣賞-加外框

標題形式回顧總結(jié)：

1. 字體變形不能影響識別性
2. 立體字標題形式要注意版面中的透視
3. 標題加外框是一個不錯的方式

優(yōu)秀的設(shè)計案例還有很多這個需要大家平時的采集和觀察，下面我們來看配色有哪些事兒。

二、再配色

關(guān)于色彩

我們通過視覺獲取信息，色彩是非常重要的。除了設(shè)計的表現(xiàn)形式，我們經(jīng)常通過色彩來分別事物的狀態(tài)和感覺。色彩可以激發(fā)情感和感官的元素。

常用的配色方式

我們在工作當(dāng)中經(jīng)常會用到的配色方式：參考配色、產(chǎn)品取色、直覺配色、依據(jù)理論4個方式來進行版面的配色。

我們經(jīng)常會用到參考配色，參考優(yōu)秀設(shè)計案例的配色。

參考優(yōu)秀案例中背景的顏色、標題顏色、搭配元素顏色來進行我們設(shè)計版面的配色。

1、找參考

在進行一個需求設(shè)計的時候我們往往都回去找相關(guān)的參考這時候就要充分利用到我們的花瓣，平時自己采集的案例找參考，千萬不要單單只是去找同性質(zhì)的參考。我們要擴大領(lǐng)域，只要是優(yōu)秀的設(shè)計我們都可以去參考。

確定主參考

在我們找的參考案例中挑選一個比較符合的參考配色（前期在考慮板式形式的時候也要一起尋找參考，不要只是單一的去找配色參考）其它的案例作為另外考慮。

進行配色

在版面形式確定好之后，我們進行配色從背景到標題的配色。在過程中往往不會一次性的搭配和諧，所以我們要多嘗試。不管是顏色的純度、明度變化，可以適當(dāng)調(diào)整會有一樣的效果。

2、產(chǎn)品（模特）取色

根據(jù)要出現(xiàn)的產(chǎn)品或模特帶有的顏色來進行背景和標題的配色方式，比較實用簡單的一種方式。

標題英文的顏色取于模特衣服的顏色，不過要在這個色調(diào)上面找到一個舒適純度的顏色，不要就直接用吸取的顏色。

另外背景的配色淺藍和模特的衣服黃色真好是對比色所以會舒服，這是我們后面要說到的理論配色。

這個案例中產(chǎn)品上的顏色都充分的運用到標題上面，在深色背景上文案首選白色或亮色 。

這2個直通車案例，配色非常的舒服。飽和度不高背景的顏色有純度的變化，給人一種很柔的感覺。

案例欣賞：

3、依據(jù)理論

根據(jù)理論來進行我們版面的配色是非常好的一種方式，在很多優(yōu)秀的設(shè)計上面你會發(fā)現(xiàn)里面的顏色與顏色之間的關(guān)系。經(jīng)常用到的理論有對比色、互補色、近似色、三角形搭配。

對比色（三角形搭配是3個顏色互相對比的組合）

通過右邊的色相上面三角形來看我們案例中出現(xiàn)的主要色彩，紫色、黃色、青色這三個顏色都在三角形配色的范圍里面，所以版面的顏色會比較舒服、生動。要注意的是把什么顏色設(shè)為背景色，紫色相對于黃色和青色是不亮也不暗的顏色所以比較合適作為背景色。

在使用三角形搭配的時候一定要選出一種色彩作為主色，另外兩種作為輔助色。使用了低飽和度的色彩也不錯。

對比色 — 案例欣賞

青色和黃色是對比色。在色相環(huán)上相距120度到180 度之間的兩種顏色，稱為對比色。

紫色、青色、黃色是三角配色，它們各自之間是對比色所以構(gòu)成了三角配色。在產(chǎn)品色是亮色的情況下，背景色用暗色是一個好的選擇！

互補色

互補色色彩之間是強烈的對比造成不穩(wěn)定感，互補色搭配在正式的設(shè)計中比較少見。通過右邊的色相上面三角形來看我們案例中出現(xiàn)的主色和輔助色是很明顯的紅綠互補色，都說紅綠配丑到哭。案例中用白色很好的避免了綠色與紅色的接觸，不是一樣生動好看么？

在各種色相搭配中，互補色搭配無疑是一種最突出的搭配，所以如果你想然你的作品特別引人注目，那互補色搭配或許是種最佳選擇。

互補色—案例欣賞

紫色和黃色是互補色。在色相環(huán)上相距180 度之間的兩種顏色，稱為互補色。

互補色案例真的是比較少，上面案例中的紅配綠，顏色的飽和度不是特別的高，所以還算穩(wěn)定，對比不是的別的強烈。

近似色/類似色搭配

色環(huán)上距離較近的色彩搭配被稱為近似色搭配或者類似色搭配，一般這種色彩之間大搭配顯得平靜而舒服。案例中的橙紅色和黃色正式色相環(huán)上面的近似色。

近似色搭配在日常設(shè)計中比較常見，所以對眼睛來說，這是種最舒適的搭配方式。在使用近似色搭配的時候，一定要適當(dāng)加強對比，不然可能使畫面顯得平淡。

近似色—案例欣賞

案例中的洋紅、青色、藍色它們是相近的幾個顏色，在版面中比較舒服。黃色作為副標題顏色是因為黃色是藍色的對比色，所以黃色會比較突出。主標題直接用白色，如果用黃色，黃色面積太大會不舒服。

非常舒服的一個近似色搭配，文案加上了外框避免白色和換色和綠色直接接觸，因為同為亮色，亮色和亮色直接接觸會不舒服刺眼，所以用了藍色緩解。

3、直覺配色

直覺配色就是當(dāng)我們說冬天你會想到藍色、說夏天你會想到紅色\藍色、說春天你會想到綠色等等。

也就是說當(dāng)我們拿到需求文案的時候第一反應(yīng)會想到的顏色比如食品零食，我們肯定會首先考慮橙色、紅色這些讓人有食欲的顏色。跟我們主題息息相關(guān)的。

從標題“夏日狂歡”中很明顯我們配色要清爽、貼近夏天的感覺，那么我們會首先想到藍色、沙灘大海，然后在確定我們的輔助色進行搭配。在根據(jù)主題確定好主色調(diào)，然后開始確定輔助色和相關(guān)的優(yōu)秀配色參考。

之前的一個零食營銷需求，根據(jù)零食所以我就先想到橙色、黃色，然后找類似優(yōu)秀的參考進行配色，來給自己一個大的感覺。

在根據(jù)主題確定好主色調(diào)，然后開始確定輔助色和相關(guān)的優(yōu)秀配色參考。

標題“藍鉆特權(quán)月”藍鉆嘛當(dāng)然考慮藍色搭配，不能說藍鉆弄個黃色背景那不成為黃鉆了 。

圣誕節(jié)我們會想到綠色、紅色，這2種顏色是代表圣誕節(jié)的氣氛，要是弄個黃色那就沒有圣誕節(jié)的感覺了。這2種顏色是互補色所以主色和輔助色的面積要控制，盡量要舒服。

配色方式回顧總結(jié)

1. 每種方式都有自己的好處，自己習(xí)慣就好
2. 深色背景配淺色，淺色背景配深色
3. 根據(jù)基礎(chǔ)理論去配色是個不錯的方式

優(yōu)秀的設(shè)計案例還有很多這個需要大家平時的采集和觀察。

下面我們來看版面豐富。

三、后豐富

為什么要豐富？

我們?nèi)粘g覽優(yōu)秀作品會發(fā)現(xiàn)頁面中會出現(xiàn)一些花瓣、綠葉、射線、雜色等等，當(dāng)我們的設(shè)計中有了這些的豐富后，作品的感覺會有明顯的上升。

常用的豐富方式

版面上面的氣氛、點綴、質(zhì)感這些表現(xiàn)，在這里我就不說了，大家可以去看我的上一篇設(shè)計分享《Banner 五重奏》中最后有關(guān)于常見的細節(jié)和氣氛表現(xiàn)方式。

潤色調(diào)整

第三部曲我們就說一說設(shè)計中潤色調(diào)整。當(dāng)然這是我平時工作的方式，有很多優(yōu)秀的方式，在這里我只是說下我的方式希望會對大家有好處。

 

這樣看靜態(tài)圖不是特別的明顯，如果你仔細看，1和2的顏色還是有變化的。亮度、暗度、飽和度都是有一些變化的，調(diào)整之后版面顏色會顯的亮一些，沒有調(diào)整之前版面有會一種灰灰的感覺。調(diào)整后也清晰一些。

我的潤色調(diào)整方式

1. 做完設(shè)計稿最后我都會建立一個調(diào)整組用來調(diào)整畫面的亮度、對比度、飽和度。調(diào)整之后畫面會更好。調(diào)整參數(shù)根據(jù)實際情況調(diào)整：

2. 在調(diào)整完明暗度這些之后，會蓋印一層做高反差保留，作用是讓畫面更加的清晰。這種方式和銳化有一定的區(qū)別，個人認為高反差保留會更加細致一些。（具體的調(diào)整大家可以看后面的案例詳解有提到）

高反差步驟

1. 建立一個空白圖層
2. 蓋印圖層(ctrl+shift+Alt+E)
3. 濾鏡——其它——高反差保留
4. 圖層混合模式——線性光
5. 降低不透明度(一般為20%-40%)

最后案例詳解

運動戶外的專題Banner，尺寸是2000寬度的下面的圖片會有點模糊，后面會放上原。在這里做一個案例詳解主要是分享具體的一個思路，案例不是特別的好，所以大家多多包涵！

最終效果：

根據(jù)我上面講到的三部曲，所以我進行了3個方面關(guān)鍵詞的提取：

版面形式:酷炫、運動感、傾斜、場景感
配色：綠色、藍色、黃色
豐富元素：雪、葉子、氣球

從上面的關(guān)鍵次可以知道無論是版面形式、配色、豐富元素上面來看，都是和戶外運動相關(guān)的。

大腦會直覺的反映出這些東西。

01 尋找參考

在我們找參考的時候，希望大家不要直接打開花瓣搜炫酷的背景、戶外專題等這些。作為一個有了工作經(jīng)驗的設(shè)計師一定要有自己的靈感庫，不能總是臨時抱佛腳。所以我們平時要用花瓣采集，分類不同的畫板。過一段時間也要去翻一翻之前采集的不然都沒印象了，另外平時也要多采集，要發(fā)揮得多吸收。

我的花瓣：

參考案例-這都是平時采集的優(yōu)秀作品：

02 挑選參考

03 步驟解析

先形式之版面

先構(gòu)建好版面基本的形式和標題排版，這個需求我采用的是左右布局方式。左邊標題右邊模特，背景采用場景來烘托。因為現(xiàn)在是冬天所以戶外給我的感覺滑雪、雪山的場景感受，所以我選擇了雪山類似的場景。

一、先形式之標題

現(xiàn)在我們開始對標題文案的變形、豐富處理。

01）主標題字體用造字工房版黑，原字體是矮一些，所以垂直縮放125%，下面進行字體變形（AI字體文件找不到了這里就只能適當(dāng)還原一下了）

02）通過輔助線把傾斜變成水平和垂直，然后進行部分筆畫的，銜接和變形

變形后的字會比原字體更加的規(guī)整統(tǒng)一。所以我們得到了下面的標題。

03）現(xiàn)在開始添加副標題和其它文案，英文部分添加了閃電的底色快襯托“冬季虧本巨獻”也添加了底色塊加以標題形式的豐富。最后做整體
斜切，斜切角度不要超過45°保持識別性。

最后我們得到這樣的一個版面形式：

你會發(fā)現(xiàn)及時沒有色彩的情況下，版面也是很有設(shè)計感的。

這就是我說的先形式后配色

二、再配色之參考配色

參考案例上面的顏色，選取了主色輔助色。通過右側(cè)的色相環(huán)我們可以知道藍色與綠色、黃色與綠色它們是近似色，而且藍色好黃色是對比色，所以這3個顏色搭配色會比較舒服。藍色設(shè)為主色是因為我的場景是雪山、天空。

三、再配色之添加場景

在確定好配色之后我們開始添加背景素材和形狀的上色

1. 我們先關(guān)掉形狀組，為背景添加顏色。藍色然后部分地方添加深和淺一些的顏色，讓背景有一種柔的感覺

2. 添加之前找好的素材然后添加蒙版，去掉不要的地方，保留或減淡想要的地方。

3. 現(xiàn)在我們添加一些云層、紋理、雪花的素材，處理方式都很簡單。

隨便找一個素材網(wǎng)站搜索云層素材就有psd文件，很好用。背景素材質(zhì)量不高的情況下添加一些網(wǎng)格線的紋理是個不錯的處理方式。

新建100x100的文檔，然后右邊和下邊各自添加一條黑色的線條

定義圖案路徑：編輯——定義圖案

添加雪花，進行動態(tài)模糊就可以有這樣的效果了

4. 對之前做好的形狀精選上色，選擇輔助色綠色搭配更加的和諧，深淺漸變。

最后得到下面版面效果：

四、再配色之添加標題

在背景做完之后我們陸續(xù)開始添加標題文案并且進行配色。

1. 打開文案組進行配色，主標題我選擇了白色，是因為后面會有產(chǎn)品和模特，而這些元素自帶的顏色會比較豐富，所以大面積的標題顏色就會不合適了，全部為白色又會比較蒼白所以我挑了“狂歡”2個字用黃色來搭配活躍版面。

2. 做完配色之后，目前的標題會顯得有一些輕、散的感覺，所以我加上了一些立體面和陰影來加強厚實的感覺。

3. 在標題區(qū)域加上一個淺色透明的底色來避免白色和背景色的直接接觸，緩解一下。

五、后豐富之添加模特、點綴元素

做到這一步后面的就輕松了，只需要添加模特、產(chǎn)品、點綴這些東西了。

1. 開始添加模特和產(chǎn)品，模特和產(chǎn)品的處理方式都是一樣的

用中性灰（#808080），圖層模式疊加）加強亮的地方和暗的地方，讓層次感更加豐富。

在這里我建議大家分開修，一個模特做一次中性灰修圖，這樣方便后面的處理和調(diào)整。千萬不要怕麻煩哦。

2.模特和產(chǎn)品都放好修圖之后，在它們之間添加一些濺起來的雪，豐富氣氛感。

3. 現(xiàn)在我們繼續(xù)豐富層次加上氣球、滑翔傘、綠葉、鳥等。

4. 在添加完這些基本元素裝飾之后，我們再次添加一層雪花效果和文案頂上面的光源來加強氣氛

5. 最后一步進行最后的潤色調(diào)整

用亮度/對比度/曲線/飽和度這些方式來對版面最后的調(diào)整，加強明暗、亮度、對比度、飽和度

參數(shù)根據(jù)實際情況來，有時候我們需要增強有時候我們需要減弱，看我的風(fēng)格來定哦。

還有最后加一層高反差保留適當(dāng)調(diào)整下清晰度。

最終效果：

到這里就結(jié)束了，教程還需要很多加強的地方，大家多多見諒。希望能對大家有幫助和啟發(fā)。謝謝大家！

歡迎關(guān)注我的個人公眾號“三根設(shè)計骨”：

「超實用的UI設(shè)計自學(xué)指南」

UI配色：《幫你從零開始全面掌握UI設(shè)計的配色方法》

UI版式：《一份詳盡全面的UI設(shè)計字體與排版指南》

自學(xué)姿勢：《別著急學(xué)軟件！先掌握科學(xué)有效的UI設(shè)計自學(xué)姿勢（超全面）》

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

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