淘寶Benner圖如何做做淘寶對(duì)設(shè)計(jì)一竅不通肯定在平時(shí)的開店過程中會(huì)遇到很多的困難，但是沒關(guān)系，現(xiàn)在開始學(xué)也不晚，今天要大家講解的是最基本的問題，淘寶Benner圖如何做？

一、先了解普遍意義上的色彩是指什么？

簡(jiǎn)單點(diǎn)來說，色彩即顏色，顏色可以分成有彩色和五彩色兩大類，看有彩色主要看色相／純度／明度三個(gè)方面的屬性，無彩色也就是白色／黑色／各種深淺不同的灰色，也可以說無彩色是飽和度為零色彩。

色相，即可以明確表示顏色色別的名稱，比如紅橙黃綠藍(lán)靛紫：

色彩有冷暖之分，我大致用溫度的概念標(biāo)注一下，其中“0”是指中性色，“－0”是指中性偏冷，“＋0”是指中性偏暖（這里的溫度是我自己為了具體化冷暖的概念而標(biāo)記的，主要是方便大家理解，所以不用去糾結(jié)這個(gè)數(shù)值準(zhǔn)不準(zhǔn)確哈哈，你明白他們代表很冷／很熱／一般冷／一般熱就好了！～）。明度，就是指色彩的明亮程度（通俗點(diǎn)講，在某種色彩里添加的白色越多就越明亮，添加的黑色越多就暗）。

要想做好電商設(shè)計(jì)，最基礎(chǔ)學(xué)問最大的當(dāng)屬Banner設(shè)計(jì)了，所以我們還是從Banner設(shè)計(jì)開始說起，先回顧一下Banner是由哪些部分組成的。

二、再回顧一下Banner的組成要素有哪些？

Banner組成要素包含4個(gè)方面：文案 、商品／模特、背景、點(diǎn)綴物。

三、Banner的作用是什么？

宣傳／展示／廣而告之／準(zhǔn)確傳達(dá)信息。

四、那么在Banner設(shè)計(jì)中影響到信息傳達(dá)的有哪些因素呢？

(一)整體畫面的氣質(zhì)是否對(duì)路；

(二)信息之間的層級(jí)關(guān)系是否準(zhǔn)確；

(三)是否考量了Banner所投放的環(huán)境。

接下來，我們針對(duì)上面3個(gè)因素一個(gè)一個(gè)來講解：

(1)整體的畫面氣質(zhì)是否對(duì)路

這里指的畫面氣質(zhì)就是指給人傳遞出一種什么樣的感覺，比如說用戶看了你這個(gè)Banner之后會(huì)感覺它很熱鬧／很素雅／很高冷／很年輕有活力／很潮／很壓抑／很恐怖／很高貴等等這些感覺，那么下面我舉幾個(gè)例子：

Banner舉例：很熱鬧的畫面氣質(zhì)（關(guān)鍵詞：低價(jià)促銷／周年慶／節(jié)假日促銷等搞活動(dòng)的性質(zhì)）

總結(jié)觀察：畫面由暖色變?yōu)槔渖螅瑫?huì)發(fā)現(xiàn)熱鬧的畫面氣質(zhì)銳減，所以在表現(xiàn)熱鬧氣質(zhì)的Banner設(shè)計(jì)中，除了畫面形式比較活潑或者動(dòng)感以外，我們也常借助大面積的暖色（紅／橙及附近區(qū)域）來渲染熱鬧氛圍，讓人感覺喜慶或者熱血沸騰，然后控制不住就買買買～對(duì)于服飾的Banner氣質(zhì)的畫面千萬不要把畫面堆得太滿，一定要記得留白和搭配優(yōu)雅纖細(xì)些的文字（有襯線或者無襯線字體均可），或者比較有文化底蘊(yùn)的字體，千萬不要用五大三粗的文字或者把畫面塞得滿滿的。

我們知道一個(gè)Banner包含有好幾個(gè)部分，文案／模特或商品／背景／點(diǎn)綴物，而最終他們組合成為一個(gè)Banner，其層級(jí)是存在主次之分的，可以分為下面幾種情況：

1、以產(chǎn)品或模特為主角（主要突出產(chǎn)品或模特）；

2、以活動(dòng)標(biāo)題為主角；

3、以利益點(diǎn)為主角。

而背景和點(diǎn)綴物永遠(yuǎn)不可能是主角，他們只能是配角，同時(shí)在這里顏色不是一個(gè)獨(dú)立的分析要素存在，它應(yīng)該是伴隨著平面的知識(shí)點(diǎn)來說，所以這里我也會(huì)順帶一點(diǎn)平面方面的知識(shí)點(diǎn)，舉幾個(gè)例子：

（一）以產(chǎn)品或模特為主角（主要突出產(chǎn)品或模特 ），我們有三個(gè)方向可以去發(fā)揮：

（1）讓商品（模特）的顏色與背景顏色絕對(duì)地區(qū)分開來，讓它成為天空（畫面）中最閃亮的一顆星～也就是我們說的色彩對(duì)比，色彩對(duì)比又包含三種：明度對(duì)比／飽和度對(duì)比／色相對(duì)比，假設(shè)下圖中的圓就是商品或模特。我們?cè)偃ド匆幌聦?duì)比的效果，如下圖（去色是我們常用的一種查看信息是否突出的方法，令外還有一種距離觀察法查看對(duì)比效果，比如你也可以離屏幕站遠(yuǎn)一點(diǎn)查看，或者人保持不動(dòng)縮小畫布查看）：

這樣看，哪個(gè)對(duì)比效果好些？是不是一目了然了？不過還是要說明一點(diǎn)，明度飽和度里任何一項(xiàng)要素發(fā)生改變，其他要素也是跟著改變的，比如說你增加了一個(gè)顏色的明度，代表你在這個(gè)顏色里增加了白色，那么相對(duì)應(yīng)的這個(gè)顏色的純度飽和度肯定也就下降了，不知道我說這些你們明白了沒有？（默默點(diǎn)根煙～惆悵臉～）

對(duì)了，我還要在這里繼續(xù)插一句嘴：色彩對(duì)比不會(huì)單獨(dú)存在，它的運(yùn)用永遠(yuǎn)是依附于下面兩種方式存在的（增大商品模特面積或者增加商品模特?cái)?shù)量）：

（2）通過留白或者大小對(duì)比的方式讓商品（模特）體積或面積足夠大。

（3）通過一定的擺放規(guī)律，讓商品（模特）數(shù)量足夠多，因?yàn)閿?shù)量多了總面積自然也就大了嘛～。

（二）以活動(dòng)標(biāo)題為主角

跟上面的道理類似，可以運(yùn)用增大標(biāo)題面積或者同時(shí)結(jié)合色彩對(duì)比的方式使標(biāo)題突出成為主角：

（三）以利益點(diǎn)為主角

道理同上（有時(shí)候我們做Banner會(huì)直接用利益點(diǎn)作為大標(biāo)題，這種就會(huì)使Banner的低價(jià)促銷的氣息會(huì)更濃烈些）

總結(jié)來說，但我們講色彩的時(shí)候，其實(shí)也是在講平面構(gòu)成，當(dāng)我們?cè)谥v色彩三要素（明度／純度／色相）的其中一項(xiàng)的時(shí)候，其實(shí)也意味著在同時(shí)考慮其他要素，因?yàn)樯什粫?huì)單獨(dú)存在，色彩要素也不會(huì)單獨(dú)存在（我重復(fù)這么多遍，也是操碎了心呢～～）。

是否考量了Banner所投放的環(huán)境？

當(dāng)我們講到環(huán)境的時(shí)候，往往會(huì)講到外部環(huán)境和內(nèi)部環(huán)境，也就是站在全局去考慮問題和站在自我的角度去考慮問題，如果你是要在某平臺(tái)投放 Banner，那么這個(gè)平臺(tái)對(duì)你來說就是大環(huán)境，具體到你投放的那一小塊Banner位置就是小環(huán)境。

從平臺(tái)設(shè)計(jì)師的角度出發(fā)，她肯定是希望你所有的Banner放在這個(gè)平臺(tái)頁面里，整體是融合的，不突兀的 ，比如下面的萬件好禮免費(fèi)送和專屬活動(dòng)這塊的小Banner，用不同色相表示不同會(huì)場(chǎng)或主題，但是每一個(gè)色彩的明度飽和度是相似的，設(shè)計(jì)形式也一樣都有自己的規(guī)范，這就給人整體統(tǒng)一協(xié)調(diào)的感覺：

五、色彩在Banner設(shè)計(jì)中所起到的作用

（一）點(diǎn)綴作用（渲染氛圍用）；

（二）突出主體（梳理信息層級(jí)）；

（三）平衡畫面（整體視覺協(xié)調(diào)）；

（四）延續(xù)風(fēng)格（涉及到風(fēng)格統(tǒng)一調(diào)性的時(shí)候）；

（五）塑造畫面氣質(zhì)（傳遞恰當(dāng)?shù)那榫w給用戶）。

就以上五種作用，我在下面會(huì)分別舉例說明：

（一）點(diǎn)綴作用（渲染氛圍用）

當(dāng)你做了一個(gè)冷色調(diào)的頁面拿給你的主管或需求人看，他說畫面太冷清的時(shí)候，而你又懶得改顏色改形式等等，總之你非常懶不想動(dòng)，那么不妨試下下面這樣周圍點(diǎn)綴些暖色的方式（色彩依附的形狀和大小面積你自己斟酌咯～只需要記住點(diǎn)綴物是配角，他是烘托氣氛用的，永遠(yuǎn)不要搶了主角的風(fēng)頭，要不然導(dǎo)演不給你這配角安排角色了，怕不怕？）。

（二）突出主體（梳理信息層級(jí)）

這個(gè)通過色彩對(duì)比來突出信息層級(jí)的作用其實(shí)我在前面的知識(shí)點(diǎn)里已經(jīng)講了哦，翻回到前面去看下吧，我就不繼續(xù)說一遍了。

（三）平衡畫面（漸變色使得整體視覺協(xié)調(diào)）

我們有時(shí)候會(huì)看到一些Banner強(qiáng)調(diào)的是整體畫面的協(xié)調(diào)感覺，并不會(huì)重點(diǎn)去突出強(qiáng)調(diào)什么，整個(gè)畫面給人感覺特別舒服，那是因?yàn)樗麄兺捎玫氖穷愃粕珜?duì)比或者鄰近色對(duì)比，亦或者是采用相似明度和飽和度的不同色相的漸變調(diào)和。

（四）延續(xù)風(fēng)格（涉及到風(fēng)格統(tǒng)一調(diào)性的時(shí)候）

通過色彩來延續(xù)風(fēng)格的作用往往在平臺(tái)做一些比較大型的活動(dòng)，涉及到多個(gè)不同品類不同分會(huì)場(chǎng)的時(shí)候會(huì)運(yùn)用到，我看到一些店鋪電商品牌也慢慢規(guī)范化了之后也會(huì)用到這種方式以保持品牌統(tǒng)一調(diào)性性，也就是保持設(shè)計(jì)風(fēng)格一致，色彩的明度純度接近，只是改變色相，以不同的色相代替不同的品類或者分會(huì)場(chǎng)來設(shè)計(jì)Banner圖。

（五）塑造畫面氣質(zhì)（傳遞恰當(dāng)?shù)那榫w給用戶）

比如我們前面提到的很活力／很可愛／很高貴／很素雅等等，我這里也不繼續(xù)描述了哦，文章開頭都有提到過的。

淘寶Benner圖如何做，優(yōu)秀案例欣賞

六、如何在Banner設(shè)計(jì)中使用色彩

色彩不會(huì)獨(dú)立存在，他必定是依附于其它構(gòu)成和表現(xiàn)形式而存在，比如平面構(gòu)成、立體構(gòu)成等，所以我將從下面幾個(gè)方面來論述：

（1）當(dāng)色彩運(yùn)用在不同的面積；

（2）當(dāng)色彩運(yùn)用于不同的形狀；

（3）當(dāng)色彩運(yùn)用在不同的肌理；

（4）當(dāng)色彩運(yùn)用于不同的色彩；

（5）當(dāng)色彩運(yùn)用于不同的主題；

（6）當(dāng)色彩運(yùn)用于不同的環(huán)境。

總結(jié)：

我們需要知道色彩是一種情緒的表達(dá)，也許要學(xué)會(huì)舉一反三（其他顏色可以以此類推無論），另外無論是有彩色還是無彩色它們都不會(huì)獨(dú)立存在，它必定是依附于其它表現(xiàn)形式而存在，比如與平面構(gòu)成、立體構(gòu)成結(jié)合運(yùn)用。

轉(zhuǎn)載請(qǐng)注明出處（本文轉(zhuǎn)載于：http://www.byyxtyey.net/school/infos19892.html）