好這四個(gè)元素，幫你做出高大上的電商BANNER

一個(gè)電商Banner 由不同的元素（背景、主體、文字、裝飾）構(gòu)成，如何運(yùn)用好這四個(gè)元素，就成了一個(gè)Banner 是否優(yōu)秀的關(guān)鍵。今天這篇好文，結(jié)合超多案例，教你如何運(yùn)用好這四個(gè)元素，內(nèi)附不少配色和修圖的技巧及工具，干貨多多，別錯(cuò)過咯。

我們聊聊圖片制作中的元素構(gòu)成，以及如何運(yùn)用這些元素讓圖片內(nèi)容更合理、豐富。根據(jù)大的框架我們首先可以給圖片中的元素氛圍以下4類。

背景
主體
文字
裝飾

一、背景

我們在制作圖片的時(shí)候一般會(huì)有以下幾種背景的應(yīng)用形式——純色、漸變、圖案、固有背景、合成背景。

△ 純色背景（多應(yīng)用于整潔、簡單、明確、大氣的海報(bào)）

漸變背景（多應(yīng)用于高端、上檔次、清新的海報(bào)）

圖案背景（多應(yīng)用于活力、張揚(yáng)、青春、宣傳促銷的海報(bào)）

原有環(huán)境（多應(yīng)用體現(xiàn)整體性、規(guī)整性及真實(shí)性的海報(bào)）

新的環(huán)境（多應(yīng)用于體現(xiàn)主體性與主題性的海報(bào)）

背景的應(yīng)用往往會(huì)對一張圖片起到?jīng)Q定性的作用，我們來談一談具體的一些方法。

背景元素在使用的時(shí)候最需要注意的首先就是配色問題、簡單來說就是弄出背景與其他元素的融合與反差。

一般情況下有以下幾種搭配方式，近似色融合、互補(bǔ)色反差、亮暗色反差。并且在實(shí)際的操作中，往往都是文字比其他元素需要與背景更有強(qiáng)烈的反差感。

近似色的融合使整個(gè)畫面和諧安定

那么如何使用好近似色呢，這里我給出2種具體的方法（哇哈哈~你們等的就是這個(gè)吧！不講方法那是我的教程么~）

第一種：通過吸管去吸主體的顏色

第二種：將主體物復(fù)制一份并將下方的主體物放大，然后濾鏡—模糊—高斯模糊，確定好合適的數(shù)值。這種方法會(huì)使主體跟背景之間有更好的融合過度。文字還是通過第一種方法吸取某一個(gè)臨近的色塊。

互補(bǔ)色的反差使整個(gè)畫面具有對比

互補(bǔ)色的應(yīng)用，往往是針對需要有強(qiáng)烈的畫面渲染和對比的場景，還是比較容易上手的，我們首先需要了解一個(gè)東西就是6位色相環(huán)，既RGB與CMY兩種顏色模式直接的規(guī)律。正三角形順時(shí)針方向從上依次為RGB，到三角形瞬時(shí)間方向從下依次為CMY，而我們所說的互補(bǔ)色就是相對應(yīng)的兩個(gè)顏色系列，既紅與青、黃與藍(lán)、綠與品紅。這里需要額外提到的是我們在做一些光效的時(shí)候，可以往陰影部分適當(dāng)增加一些補(bǔ)色進(jìn)去，會(huì)讓陰影更加真實(shí)。

如果我們還記不住互補(bǔ)色為哪兩種色系、也可以打開圖像—調(diào)整——色彩平衡。也會(huì)有非常明確的補(bǔ)色關(guān)系

我們?nèi)搜鬯茏R(shí)別的顏色直觀的去定義只有紅、橙、黃、綠、青、藍(lán)、紫、品紅八種色系，所以不管我們的主體是什么顏色，我們都可以尋找到它相近的補(bǔ)色，如果實(shí)在無法用肉眼去判斷，我們也可以使用拾色器去吸當(dāng)前顏的顏色并找到它的具體色相。

在相較于近似配色，補(bǔ)色配色能更加突出主體的輪廓，使主體更加明確，對比更加強(qiáng)烈。

亮暗色的反差使整個(gè)畫面具有沖擊

亮與暗是一種很極致的反差效果，就好比漆黑的房間中哪怕只是點(diǎn)燃了一根火柴也會(huì)有極強(qiáng)烈的沖擊感。我們可以仔細(xì)回想自己看過的作品，在絕大多數(shù)成熟的作品中亮暗對比、關(guān)的渲染、陰影的處理都是必不可少的環(huán)節(jié)。

亮部的處理方法

第一種方法：背景中的亮部往往都是利用「光」去完成的，光的應(yīng)用也有很多種，我推薦幾個(gè)我比較常用的方式，首先第一個(gè)而是濾鏡，叫做光線工廠（現(xiàn)在也有叫燈光工廠），很多設(shè)計(jì)論壇都有下載。左邊部分為效果區(qū)，右邊為調(diào)整區(qū)，一目了然，比如容易上手。

第二種方法：是使用光的素材，并通過圖層混合模式的濾色、柔光、疊加等方式對素材進(jìn)行處理。

最好為黑色底的，更容易濾色掉黑色部分。

△ 一些應(yīng)用的效果

第三種方法：是通過自行繪制來實(shí)現(xiàn)效果，也許新手會(huì)感覺比較生疏，不太容易控制，但是熟練應(yīng)用之后會(huì)給你的設(shè)計(jì)帶來很多便利，我平時(shí)很少使用漸變工具去制作漸變效果，而是通過畫筆去繪制漸變效果，這樣可以讓漸變更加靈活，也給你的設(shè)計(jì)帶來更多的可能性。

下圖示范，如需在一個(gè)黑色背景上畫出一種紫色到藍(lán)色的過度，首先新建一個(gè)空白圖層，用柔邊的畫筆，不透明的在10%-30%之間，選擇適當(dāng)?shù)漠嫻P大小在圖層上繪制紫色，再次新建空白圖層，使用上述方法繪制藍(lán)色，連個(gè)圖層之間可以調(diào)整不同的模式，如濾色、柔光、變亮等查看不同效果，當(dāng)然如果正常情況下也很舒服可以直接使用正常模式。這里需要記住的是我們盡量新建空白圖層去繪制，這樣如果需要移動(dòng)光效也會(huì)變得非常簡便。

暗部處理方法

暗部處理的常用方法跟亮部處理的方式雷同，這里就不在重復(fù)啰嗦。我說說平時(shí)在處理圖片時(shí)會(huì)經(jīng)常用來處理暗部的方法 —— CAMER RAW濾鏡。PS在CC版本之后可以自由使用CAMER RAW濾鏡，是我個(gè)人認(rèn)為PS近幾年改變當(dāng)中最具有突破的一次，ACR可以廣泛應(yīng)用與圖層中，對圖片的處理帶來了巨大的便捷。

我們可以在濾鏡菜單中找到CAMER RAW濾鏡命令。

首先是基本選項(xiàng)中的高光、陰影、白色、黑色調(diào)節(jié)塊可以方便自如的控制你需要的調(diào)節(jié)的亮暗區(qū)域，其次清晰度選項(xiàng)可以幫助你把圖片銳化程度進(jìn)一步提升的同時(shí)減少鋸齒的出現(xiàn)。

效果選項(xiàng)中的裁剪后暈影可以輕松制作四角加暗效果，并且靈活性頗高。

二：主體

沒有主體的畫面是散亂而飄渺的，而如何在畫面中明確表現(xiàn)出主體也是很多設(shè)計(jì)師非常頭疼的問題，我在這里總結(jié)幾種方法可以讓我們有跟多的選擇去處理我們的主體。

我們要先搞清楚主體的畫面占用比，拿淘寶的一個(gè)Banner來說，畫布尺寸是990×400，而我的產(chǎn)品是一個(gè)魚竿，那么當(dāng)我的魚竿以全貌的形式呈現(xiàn)現(xiàn)在這張banner當(dāng)中會(huì)出現(xiàn)什么情況：

我們可以看到不管我們是橫放豎放還是斜著放都會(huì)給我們的圖片帶來大量的空白，這樣會(huì)使我們的圖片空洞毫無美感。這就是主體的畫面占用比太低（而正常情況下主體的畫面占比應(yīng)在30%以上）和主體的形狀局限性帶所帶來的一種不便，面對這種情況，我們需要做的就是放大主體，不需要完整呈現(xiàn)，這也是為什么很多人物為主體的圖片，都不會(huì)把人整體放在圖片中的原因，其實(shí)人的整體形狀跟魚竿也是類似都是長條形，所以處理人物的是也是適當(dāng)放大或者多放幾個(gè)人物在統(tǒng)一的畫面當(dāng)中。

當(dāng)我們把主體放大到適當(dāng)位置，發(fā)現(xiàn)還是有大量空白的時(shí)候，也是可以使用復(fù)制錯(cuò)位，并降低透明度的方式增加主體的畫面占比：

通過對主體畫面占比的分析，我們可以總結(jié)出一個(gè)方法，就是當(dāng)主體面積不夠時(shí)，可以通過放大主體體積或增加主體數(shù)量來維持主體的平衡

當(dāng)然，主體所占的比重，在一副圖中大多數(shù)情況，要比其他元素要大的。

大多數(shù)設(shè)計(jì)師在自己的設(shè)計(jì)之路上會(huì)經(jīng)歷一段時(shí)期，做出的東西自己也能感覺有問題，但是就是找不到問題在哪里，我在這里提供幾個(gè)例子，可能會(huì)對大家擺脫這個(gè)階段有一些幫助。

首先是要留意元素間小規(guī)模貼近疊加的問題。

很多元素小范圍內(nèi)非常貼近甚至直接重疊，會(huì)使畫面變得混亂擁擠。

第二個(gè)需要留意的是元素與邊緣。

我們在制作圖片前都會(huì)預(yù)留出血，但是這不代表出血意外的邊緣地區(qū)就可以隨意靠近，大多數(shù)情況下，我們還是要適中保持各元素與畫布的邊緣有一定的距離（特定裝飾除外）。在圖形中如果加入了文字，也要保證當(dāng)前文字不要緊貼圖形四周，如下圖，第一個(gè)要比第二個(gè)舒服的多，我們要學(xué)會(huì)給各類元素的邊緣流出空間。

第三個(gè)是需要留意畫面中元素的分布情況，如果你的畫面中的某一個(gè)元素或某一區(qū)域元素看做一個(gè)點(diǎn)，那么觀察這樣的點(diǎn)是有規(guī)律的還是散亂無章的，一般情況下分布有問題的圖會(huì)有2種，一是整個(gè)畫面基本都是大點(diǎn)而且不規(guī)律，另一個(gè)是整個(gè)畫面有多個(gè)小點(diǎn)且不規(guī)律。

最后需要注意元素的清晰度，首先就是圖源的分辨率要足夠的大并且清晰正常，第二是處理過程中盡量使用智能對象，使圖片不會(huì)出現(xiàn)丟失像素變模糊的問題。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

本文標(biāo)題：好這四個(gè)元素，幫你做出高大上的電商BANNER
文章源于：http://www.muchs.cn/news33/314883.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、軟件開發(fā)、微信公眾號、電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)