電商Banner橫幅的常見設(shè)計有哪些技巧

1、電商Banner橫幅的常見設(shè)計有哪些技巧如何用圖案提升節(jié)奏感+用裝飾活躍氛圍;分割背景怎么做;大色塊背景如何配色等 等，全是電商Banner常見的技巧。值得一提的是文中案例非常豐富，能大大降低 新手的學習難度。部分案例來源于網(wǎng)絡(luò)多有得罪請恕罪哈。OlJBanner5 寶圖案圖形節(jié)奏感裝飾碎屑氣氛足分割背景更活躍背景顏色大色塊終極寶02）案例改稿分享是不是你也會出現(xiàn)這些問題：畫面臟頁面空細節(jié)不足一、圖案圖形節(jié)奏感圖案指的什么圖案相比大家都知道，也或多或少用過。圖案放大可以變得大氣，縮小也可以很精 致。而Banner中經(jīng)常會出現(xiàn)的圖案大都是幾何形狀的重復(fù)或旋轉(zhuǎn)得到的圖形，用來做 為背景的紋理來豐富

2、背景的細節(jié)感。有時候有人經(jīng)常會說背景里少了點什么，下次 你不妨嘗試一下用用。不是一定要用，如果你需要可以試試效果呢。舉個例子：采用一個幾何形狀通過平移重復(fù)得到的圖案，在應(yīng)用在純色的背景上我把它稱之為 圖案。案例中的背景采用了純色背景搭配，沒有過多的顏色。在這種情況下為了使 背景避免過于簡單，所以加上了菱形圖案來豐富背景的細節(jié)和層次。圖形指的什么有人可能會問了，圖案和圖形的區(qū)別是什么呢。圖案是通過復(fù)制平移得到的，而圖 形可以通過復(fù)制平移和循環(huán)放大某個形狀得到的圖形。圖形比圖案的節(jié)奏感往往會 更強一些，圖形需要手動去調(diào)整和復(fù)制，可以做更多的差異化重復(fù)。而圖案則是規(guī) 律性更好。再舉個例子：圖1：案例

3、中的圖形是通過相同的圓角矩形，氏度和寬度的變化來組合成了更強的 節(jié)奏感。它可以是色彩變化多端，也可以是單色深淺變化。圖2：案例用了三角形向上循環(huán)重復(fù)使用，并且通過改變顏色深淺增強了空間感。 其實上面還加了一成三角線的圖案，不知道小伙伴們你們看到?jīng)]?？磳Ρ?1-背景有圖案和沒有的區(qū)別：我就拿一個三角形圖案Banner對比添加和不添加圖案的感受，在沒有添加圖案的 情況下雖然這個案例在其他方面我做了挺多視覺表現(xiàn)，但是沒有圖案還是會感覺少 了一點節(jié)奏感和細節(jié)。當我們?yōu)楸尘皩犹砑恿藞D案之后，畫面變得飽滿、同時也增 加了促銷的感受。看對比02-背景有圖案和沒有的區(qū)別：同樣是沒有和有圖案的對比（為了大家看的

4、明顯一點我把圖案加深了一些，因為是 線條圖案圖片縮小就不是很清晰了）圖案不僅可以是形狀、它也可以是線條。很明 顯的感受到第一張圖促銷氛圍已經(jīng)可以滿足了，但是通常我們會為了讓背景更有細 節(jié)會添加一些圖案。（個人意見僅供參考）圖案的應(yīng)用第一個案例中用到了 3種圖案，圓、星、豎條都是來烘托頁面背景。其中豎條屬 于圖形重復(fù)。第二個案例用到了類似波浪線的圖案，這些圖案總是會給人與生俱來的節(jié)奏感。圖形的應(yīng)用案例中是由多邊星形由小發(fā)散的圖形，是不是有很強的節(jié)奏感。圖案不僅是平鋪重 復(fù)得到，它還可以由一個基本型放大-復(fù)制-放大這樣循環(huán)得到的圖形（也可以說是 放射性構(gòu)成）在這樣一個背景純白的視覺上面，大膽的使用

5、單個傾斜長條復(fù)制得到的背景圖形， 與模特姿態(tài)和五彩繽紛的元素組合起來巧妙的產(chǎn)生了有節(jié)奏感。二、裝飾碎屑氣氛足Banner設(shè)計中經(jīng)常用到會有彩禮飄帶、矩形、三角形、紅包外形、橫條等裝飾。案例中都具備圖案、圖形，密集的點點圖案使背景更有細節(jié)、圓形的多個復(fù)制的圖 案讓畫面更飽滿，飄起來的裝飾是不是也有大有小。三個需要注意的方面1）有大有小最基本的基礎(chǔ)，因為大小產(chǎn)生空間感、節(jié)奏感，如下圖左12）別克隆別克隆的意思就是不要所有元素都重復(fù)的使用，案例中的三角形有描邊的、填充的、 幾何體，元素更豐富了，但適可而止。如中間圖3）有深有淺案例中三角形的顏色有深淺看到了吧，這樣做是讓畫面不會很平?jīng)]有遠近感覺。如

6、圖右1三、分割背景更活躍有人問我這個Banner用什么分割呢?圓形、矩形?當場我就愣住了，只想靜靜。這 個你自己想用什么分割都可以呀，不同的分割給人不同的視覺感受。搞清楚你想要 的就知道用什么了。因為它在Banner設(shè)計中的確是很有效果的，所以我們不僅需要實踐，還要進行對 比分析，這一我們才會成長的更快嘛。一個案例來演示下，同一主題不同分割的應(yīng)用。矩形的分割應(yīng)用 無分割 有分割 在這里舉例矩形的分割，傾斜的會更加利落一些。還有別的方式我就不一一舉例了, 大家多留意觀察和收集（案例只是來舉例分割的其他方面我就沒有調(diào)整）圓形、三角形的分割應(yīng)用 圓形 三角形 圓讓人看起會有圓滑、包容的感受，而三角形

7、是干凈利落到底的感受。形狀的大小、 位置，在文案后面還是模特（商品）后面，都是可以變動的。不同的地方感覺會不一 樣。背景的分割會讓你的畫面變得有層次，多嘗試就會有慢慢對分割有一定的認識和感 受。四、背景顏色大色塊第四寶色塊大面積色塊的應(yīng)用，在Banner設(shè)計中特別明顯。也是非常有效，天貓、淘寶、京 東等這些國內(nèi)電商平臺的活動經(jīng)常是以色塊背景為主。色塊在很久之前就很流行， 作為一種風格。在大色塊背景上面，白色的文案、圖案就成為了視覺焦點。在色塊 背景上應(yīng)用類似時尚的波普元素，畫面節(jié)奏感就出來了。案例如下: 案例中背景顏色是整個藍色大色塊，在這樣的情況下。白色的文案就顯得非常突出 了，成為了視覺的

8、焦點。所以有時候我們會看到天貓、淘寶、京東的促銷活動中的 會場Banner經(jīng)常會這樣做，一是讓主題文案成為視覺的焦點，二是延展其它會場 方便套用。沒有過多的特效處理，這樣大大的節(jié)約了時間成本。用色塊背景的時候該注意什么最重要的就是配色了，顏色盡量不要超過三種。模特或產(chǎn)品的顏色不要和背景顏色 跳躍太大，列如上面的案例背景是藍色，那么其它的顏色可以是青色、紫色、黃色 搭配起來會比較舒適?？赡苣銜f黃色和藍色相隔那么遠，黃色是和任何顏色都可 以很好的搭配的，所以你會看到官方的Banner圖中出現(xiàn)黃色的利益點、小色塊。如果你用不好對比色、互補色、近似色等這些配色理論。那我們就把這些簡化成2 個占I J

9、、01）暗色配亮色、亮色配暗色02）深色配淺色、淺色配深色暗色配克色、克色配暗色暗色和克色沒有規(guī)定說哪一個顏色就是暗色或克色，如果非要說那就是黑和白了。 某一個顏色暗和亮是可以控制的，就像是顏色深淺。但是我們以飽和度最高的情況 下，從最基本的紅橙黃綠青藍紫來說，如果它們對比起來就產(chǎn)生了暗和痙的。這里的分類表明的不是絕對的，因為一個藍色非常亮，但是如果和黃色比起來是不 是藍色相對暗了呢。，每個顏色都有它最先的色值，當然不會超過白色和黑色。白 黑才是最先和最暗的。就像如果這個世界沒有瘦子那么就不會有瘦子一樣。時間:2017-04-02 14:07所以我們會通過調(diào)顏色飽和度的深淺來讓它變暗或兜，當然

10、如果要深度的熟悉配色 原理，還是要從對比色、互補色等這些原理去了解，才能更加的透徹。而我在這里說的2個方法只是提醒下大家盡量少犯錯誤，例如如果用到暗紅色， 這個時候你就應(yīng)該毫不猶豫的用亮色或白色。舉例說明：如上在選定的顏色中，黃色比藍色克這就是鳧色配暗色，反之就是暗配鳧（以背景 色塊為主色）。如上2個顏色同為暗色所以不管怎么樣都是一個錯誤的案例（不管是痙色還是暗色 的情況下白色和黑色都是可以搭配的，當然首先考慮白色-白色是視覺焦點） 如上很顯然2個克色進行搭配不是明智的選擇，如果非要使用克色和克色搭配、 我建議用白色或者黃色這2個特色的顏色。如上白色和黃色去搭配鳧色色塊顯然是可行的、但是還是比

11、較刺眼的哦，從用戶角 度考慮還是要慎用。所以配色要配的舒適，有時候很多小伙伴會誤入歧途，克色搭配不行，他還是嘗試 亮色搭配。下次不妨用暗色試試哦。深色配淺色、淺色配深色從中間開始往上走顏色越來越深，反之越來越淺。深淺配色是指一個顏色由明度和 飽和度來控制顏色，然后進行配色。舉個例子：深綠色作為背景色塊，用它的淺色來搭配。如上圖可見或者反之進行搭配：看案例：案例中背景顏色和文案或利益點的形狀載體采用了深色配淺色的道理，當然文案還 是以白色為主。大多數(shù)都是色塊的深淺搭配而不是文字哦（記住色塊的情況下白色是視覺焦點）五、Banner終極寶!設(shè)計師終極絕招！養(yǎng)成10分鐘1次Ctrl+S的好習慣。Ban

12、ners寶回顧總結(jié)圖案圖形讓畫面變得節(jié)奏感背景分割沒有特定的形狀，而是看你需要什么形狀配 色切勿克色配亮色、暗色配暗色優(yōu)秀的設(shè)計案例還有很多這個需要大家平時的采集和觀察，更多的思考你會發(fā)現(xiàn)更 多的空間。下面我們來看下幾個改稿分享。六、案例改稿分享案例一：修改前案例中的錯誤：1.背景白色線條和白色立體英文過于搶眼2.標題細節(jié)表現(xiàn)不夠、不夠精致案例一：修改后解決方案：1.弱化線條和立體英文（混合模式柔光調(diào)整透明度即可）2.在標題上面疊加一層圖案 （或者是點或者是線）修改后可以發(fā)現(xiàn)中間主體在畫面中更加突出、主體位置更加明顯。標題也比純白色 更加精致。案例二：修改前案例中的錯誤：1.字體上面刮痕過多，顯得標題有些臟2.標題有一些輕飄案例二：修改后解決方案：1.減少劃痕到最舒服的比例（在素材不夠清晰的時候可以采用銳化素材將其更加精 致）2.給標題增加一層厚度，增加力量感。線條縮小容易變粗，大家可以看細節(jié)圖。刮痕變得更精致，也不會顯得畫面臟了案例三：修改前案例中的錯誤：1.兩側(cè)比較空不飽滿，商品推擠高度順序和標題主體不夠緊密2.標題雖然變形和 做了一些處理，是不是是否更