美工知識(shí),淘寶鉆展banner設(shè)計(jì)思路(4)

來(lái)源:站酷 作者:morning924 學(xué)習(xí):22543人次

鉆展圖的全稱為鉆石展位圖,是淘寶網(wǎng)圖片類廣告位競(jìng)價(jià)投放平臺(tái),鉆石展位依靠圖片創(chuàng)意吸引買家點(diǎn)擊,獲取巨大流量,一張好的鉆展圖就尤為重要了。

一.鉆展圖的作用和意義

1.什么是鉆展圖

鉆展圖的全稱為鉆石展位圖,是淘寶網(wǎng)圖片類廣告位競(jìng)價(jià)投放平臺(tái),是為淘寶賣家提供的一種營(yíng)銷工具。鉆石展位依靠圖片創(chuàng)意吸引買家點(diǎn)擊,獲取巨大流量。鉆石展位是按照流量競(jìng)價(jià)售賣的廣告位。計(jì)費(fèi)單位為CPM(每千次瀏覽單價(jià)),按照出價(jià)從高到低進(jìn)行展現(xiàn)。賣家可以根據(jù)群體(地域和人群)、訪客、興趣點(diǎn)三個(gè)維度設(shè)置定向展現(xiàn)。

2.鉆展投放的目的和策略

目的:

策略:

①.單品推廣:適合熱賣單品,季節(jié)性單品;適合想要打造爆款,通過(guò)一個(gè)爆款單品帶動(dòng)整個(gè)店鋪的銷量的賣家;適合需要長(zhǎng)期引流,并不斷提高單品頁(yè)面的轉(zhuǎn)化率的賣家。

②活動(dòng)店鋪推廣:適合有一定活動(dòng)運(yùn)營(yíng)能力的成熟店鋪;適合需要短時(shí)間內(nèi)大量引流的店鋪。

③品牌推廣:適合與明確品牌定位和品牌個(gè)性的賣家。

3.鉆展投放的步驟

1、選擇廣告位。

2、根據(jù)廣告位的尺寸設(shè)計(jì)創(chuàng)意并上傳。

3、創(chuàng)意審核通過(guò)后,制作投放計(jì)劃。

4、充值。

5、完成投放。

m.theoat.com.cn_0410094S2-0.jpg

4.鉆展圖投放的位置

m.theoat.com.cn_04100931V-1.jpg

路徑:賣家中心-我要推廣-鉆石展位

二.鉆展圖設(shè)計(jì)要求

1.因地制宜

和直通車不同,鉆展的位置眾多且尺寸各異。在鉆展位置方面,僅投放大類就包括天貓首頁(yè)、淘寶首頁(yè)、淘寶旺旺、站外門戶、站外社區(qū)、無(wú)線淘寶等,對(duì)應(yīng)的鉆展尺寸更是高達(dá)數(shù)十種,不同的鉆展位置由于針對(duì)人群不同,其消費(fèi)特征和興趣點(diǎn)也各不同,不同尺寸的鉆展位置給了我們不同的設(shè)計(jì)發(fā)揮。因此我們?cè)谥谱縻@展圖片時(shí),要根據(jù)位置、尺寸等信息調(diào)整廣告訴求,并采取合適的表達(dá)方式,這就是鉆展圖片的個(gè)性化、定制化合差異化特征。以衛(wèi)浴為例,在pc_網(wǎng)上購(gòu)物_淘寶我要買_通欄位置上,由于其是細(xì)長(zhǎng)條形,設(shè)計(jì)師采用了一字型組合呈現(xiàn)方式,畫面布局簡(jiǎn)單時(shí)尚,很好地契合了鉆展位置的尺寸特征,如圖所示:

m.theoat.com.cn_0410095624-2.jpg

又如在pc_網(wǎng)上購(gòu)物_淘寶首頁(yè)焦點(diǎn)圖右側(cè)banner二的鉆展位置上,下圖潔面乳的圖從色彩上很好地與周邊圖片相呼應(yīng)

m.theoat.com.cn_0410094944-3.jpg

是否符合資源位要求在哪查看?

答:賣家中心-我要推廣-鉆石展位-尺寸-資源位圖片要求鏈接

2.主圖突出

鉆展的主圖可以是產(chǎn)品圖片,可以是創(chuàng)意方案,還可以是買家訴求的呈現(xiàn)。無(wú)論如何,鉆展主圖的可操作性要比直通車主圖更強(qiáng),這是因?yàn)橐话沣@展的尺寸要相對(duì)大一些,且有多種規(guī)格可選。在這種情況下,要求主圖一定要突出,才能夠吸引更多買家的點(diǎn)擊。如下圖所示,鞋子的品質(zhì)感和做工樣式,令人忍不住想擁有一雙。

m.theoat.com.cn_0410093018-4.jpg

3.目標(biāo)明確

相對(duì)于直通車主圖更多針對(duì)單品引流,核心實(shí)現(xiàn)單品轉(zhuǎn)化的目的而言,鉆展投放的目的可能會(huì)有很多種,比如通過(guò)鉆展引流到聚劃算款,通過(guò)鉆展預(yù)熱大型活動(dòng),通過(guò)鉆展進(jìn)行品牌形象宣傳,通過(guò)鉆展上新等。所以,在鉆展圖片的設(shè)計(jì)制作中,首先需要我們明確自己的營(yíng)銷目標(biāo),再根據(jù)它進(jìn)行針對(duì)性的素材選擇和設(shè)計(jì),這樣點(diǎn)擊率才更有保障。如下圖,核心目的是為聚劃算引流,令人一看便知。

m.theoat.com.cn_0410092933-5.jpg

4.形式美觀

但凡美的東西總是令人無(wú)法抗拒,形式美觀的鉆展圖片,更能獲取客戶好感進(jìn)而實(shí)現(xiàn)高點(diǎn)擊。在素材相同、創(chuàng)意類似的情況下,鉆展圖片的美感就成為了決勝關(guān)鍵。如下圖,這是一款男士棉衣的鉆展圖,設(shè)計(jì)師在排版,配色,字體,標(biāo)簽的使用方面,均符合促銷的主題,對(duì)于用戶有極強(qiáng)的拉動(dòng)力。

m.theoat.com.cn_0410096436-6.jpg

三.鉆展圖設(shè)計(jì)形式參考

1.整體排版方式

①.兩欄式:左文右圖or左圖右文

圖片文案兩邊分,最簡(jiǎn)單的構(gòu)圖;一般主體占整個(gè)畫面的7/10;在文案排版上一定要突出中心點(diǎn)

m.theoat.com.cn_0410091Z0-7.jpg

②.三欄式:中間文字 兩邊圖

圖片以不同大小位置擺放,形成空間感,適合多個(gè)產(chǎn)品,或者多色

m.theoat.com.cn_0410096354-8.jpg

③.上下式: 上面文字下面圖

產(chǎn)品或者文字占畫面的2/3,主要用于多系列產(chǎn)品促銷活動(dòng)

m.theoat.com.cn_0410093N2-9.jpg

④.組合式1:模特+文字+圖

給人感覺畫面豐滿,內(nèi)容較多,特別適合化妝品等頁(yè)面設(shè)計(jì)

m.theoat.com.cn_04100aI6-10.jpg

⑤.組合式2:兩邊模特+文字+圖

左右兩邊模特,上面文字,下面產(chǎn)品,適合多系列產(chǎn)品促銷活動(dòng)

m.theoat.com.cn_0410092114-11.jpg

⑥.純文字+背景

純文字背景,一般適用小圖尺寸,重點(diǎn)突出文字信息,折扣,簡(jiǎn)單直白表達(dá)意思

m.theoat.com.cn_0410095443-12.jpg

⑦.正反三角形構(gòu)圖

三角構(gòu)圖,立體感強(qiáng),構(gòu)圖穩(wěn)定自然,空間感強(qiáng),給用戶心情:安全感極強(qiáng),穩(wěn)定可靠

m.theoat.com.cn_04100923c-13.jpg

⑧.垂直構(gòu)圖

平均分配,各個(gè)產(chǎn)品占相同比重,秩序感強(qiáng),給用戶感覺比較正式,適合多個(gè)產(chǎn)品,多色系展示

m.theoat.com.cn_041009B13-14.jpg

⑨.斜切式

斜切式構(gòu)圖讓整個(gè)畫面富有張力,可以讓主體和需要表達(dá)的內(nèi)容更醒目傳達(dá)!注意:文字一定得更緊斜著的透視對(duì)齊

m.theoat.com.cn_0410094460-15.jpg

⑩.漸次式構(gòu)圖

多個(gè)產(chǎn)品進(jìn)行漸次式排列,各個(gè)產(chǎn)品所占比例不同,由大及小,構(gòu)圖穩(wěn)定,次序感強(qiáng),利用透視指向文案,此類構(gòu)圖給用戶的感覺:穩(wěn)定自然,產(chǎn)品豐富可靠

m.theoat.com.cn_04100a164-16.jpg

?.放射性構(gòu)圖

由一個(gè)視覺中心點(diǎn)放射出來(lái),極強(qiáng)透視感特別適合大促活動(dòng)的banner,專題設(shè)計(jì)

m.theoat.com.cn_04100911a-17.jpg

?.極端式構(gòu)圖

將文字或圖形的某一元素放大,然后整個(gè)畫面的走向圍繞此元素,適合:個(gè)性,時(shí)尚的類目

m.theoat.com.cn_0410092F8-18.jpg

2.文字陳列方式

2.1.排版輪廓

m.theoat.com.cn_0410093T1-19.jpg

2.2對(duì)齊方式

2.2.1.左對(duì)齊/右對(duì)齊

m.theoat.com.cn_0410095533-20.jpg

這些都是最常見的電商海報(bào),基本都采用了左對(duì)齊排版方式,對(duì)齊是最常見也是最基礎(chǔ)的排列方式。大家可以隨手翻翻身邊的書籍,里面的所有排版都會(huì)應(yīng)用對(duì)齊。對(duì)齊的排版會(huì)有一道看不見的線,這條線平行于海報(bào)的邊界線,與海報(bào)的邊相呼應(yīng),將所有的文案自然而然的串聯(lián)到一起。給人以穩(wěn)重,力量,統(tǒng)一,工整的感覺,是最最常見的排列方式。

2.2.2.居中對(duì)齊

m.theoat.com.cn_0410093501-21.jpg

居中式的排版在生活中最常見就是房地產(chǎn)和一些珠寶海報(bào)~居中排版會(huì)給人正式,大氣,高端,有品質(zhì)感覺。在電商海報(bào)中居中排版經(jīng)常會(huì)見到文案直接打在產(chǎn)品上面,文案的遮擋會(huì)和后面的產(chǎn)品營(yíng)造出一前一后的層次感,加上一些光效會(huì)讓整張畫面空間感提升許多。

居中對(duì)齊并不適合入門的新手,因?yàn)檫@對(duì)畫面的布局把控有一定的要求。

2.3.內(nèi)容分組

當(dāng)文案過(guò)多的時(shí)候就考慮將文案分組,將相同信息的文案擺放到一起,這樣不僅使整個(gè)頁(yè)面富有條理性,也會(huì)看上去非常美觀,更加有利于消費(fèi)者閱讀。

看一組案例↓

m.theoat.com.cn_0410095645-22.jpg

如果一個(gè)海報(bào)上包含的文案信息太多,不加以整理的話就會(huì)顯得雜亂無(wú)章毫無(wú)秩序,通過(guò)分組,就好比寫作文分自然段一個(gè)道理。將有同一性質(zhì)的文案分為一組,就會(huì)讓版面無(wú)論在視覺感官還是閱讀層次上來(lái)看都很有條理性。

通過(guò)什么方式分組呢?其中一個(gè)手段是對(duì)比。

無(wú)對(duì)比不設(shè)計(jì)。人們的眼睛不喜歡看平淡無(wú)奇千篇一律的東西,喜歡看有對(duì)比的畫面!使用對(duì)比的排版技巧可以最有效的增加畫面的視覺效果。對(duì)比原則包含的內(nèi)容很多,比如虛實(shí)對(duì)比,冷暖對(duì)比等等,這次我們只談關(guān)于字體的大小對(duì)比和粗細(xì)對(duì)比。

首先一起看下面這個(gè)案例↓

m.theoat.com.cn_0410095031-23.jpg

大家看下使用對(duì)比前后的效果,在排版中僅僅運(yùn)用對(duì)齊這一個(gè)原則是不夠用的,第二步就要用到對(duì)比!第一張圖片由于缺少對(duì)比,整體顯得很乏味,除了標(biāo)題略大一點(diǎn)下面的文本太長(zhǎng)而且沒(méi)有吸引讀者的地方。第二張海報(bào)則運(yùn)用對(duì)比的手法,使得頁(yè)面更吸引人。而且文案的組織結(jié)構(gòu)一目了然,更便于讀者閱讀。

第二張海報(bào)中的主標(biāo)題加大加粗,與引標(biāo)題2014夏裝...形成大小和粗細(xì)對(duì)比。下面的正文采用小字,但是價(jià)格部分加粗強(qiáng)調(diào)再次形成對(duì)比。最下面的包郵說(shuō)明部分采用最細(xì)最小的字與順豐包郵又形成一種粗細(xì)大小的對(duì)比。還有不要擔(dān)心字小了顧客就不讀,只要標(biāo)題吸引到顧客,自然會(huì)讀這些較小的文字。只要將重點(diǎn)文字提煉出來(lái)放大加粗之后就能使整個(gè)版面信息主次分明,富有層級(jí)和組織性,就會(huì)在視覺上引導(dǎo)消費(fèi)者向下瀏覽。

注意事項(xiàng)

* 找出文案中最重點(diǎn)的語(yǔ)句,運(yùn)用粗細(xì)對(duì)比和大小對(duì)比加以強(qiáng)調(diào)和區(qū)分!

* 字體既然要對(duì)比就要對(duì)比分明,把標(biāo)題設(shè)置12號(hào)字,把正文設(shè)置為10號(hào)字毫無(wú)意義,既然用對(duì)比就要大足夠大,小足夠小,細(xì)夠細(xì),粗夠粗,讓人眼一看就看出來(lái)他們的對(duì)比關(guān)系!記住!一定要對(duì)比分明!

* 對(duì)比不光會(huì)讓畫面更加美觀,而且也會(huì)增加頁(yè)面的可讀性,不要擔(dān)心對(duì)比后的讀者不會(huì)去讀小字,假如畫面所有文字都一樣大的時(shí)候,沒(méi)重點(diǎn),沒(méi)邏輯性,顧客往往一瞥而過(guò)。只要你強(qiáng)調(diào)的部分吸引到顧客,顧客也會(huì)下意識(shí)的往下看。

下面通過(guò)一些案例截圖幫助大家更好的認(rèn)識(shí)大小和粗細(xì)對(duì)比!

m.theoat.com.cn_04100a001-24.jpg

大家看到?jīng)],只通過(guò)改變字體的大小和粗細(xì)就能把設(shè)計(jì)變的非常精美!有時(shí)候?yàn)榱藢?duì)比更加明顯,會(huì)降低小字部分的透明度,產(chǎn)生明暗對(duì)比。

下面扯一下疏密對(duì)比

在居中對(duì)齊的排列方法中經(jīng)常還會(huì)運(yùn)用疏密的對(duì)比手法。

m.theoat.com.cn_04100a947-25.jpg

疏密對(duì)比中很多新人容易犯的一個(gè)毛病就是字符間距不寬不緊,給人的感覺很松垮,有時(shí)候可以嘗試把字距調(diào)整為負(fù)值,更加緊湊一點(diǎn)。疏的夠疏,密的夠密,不要半疏不密的給人感覺會(huì)不穩(wěn)定。

最后總結(jié)

一般來(lái)說(shuō)一張海報(bào)基本就運(yùn)用這三個(gè)原則,對(duì)齊,對(duì)比,分組。切記一句話,畫面中每一個(gè)元素的存在以及它的擺放都有它的道理!畫面是你設(shè)計(jì)的,你應(yīng)該說(shuō)出你這么做的來(lái)由!

所有帶有震撼視覺效果的畫面都是源自對(duì)比,如果有人說(shuō)你畫面太平淡了,那么就請(qǐng)運(yùn)用對(duì)比吧!對(duì)比是最有效的改變你畫面的救命草!

一般一個(gè)廣告圖的文案并不多,基本上一套文案就分為兩部分,一是:賣點(diǎn)(這兩樣無(wú)非就是價(jià)格和包郵還有送禮品之類的),二是襯托文字,只要把重要的和次要分清楚,接下來(lái)設(shè)計(jì)的思路就很明確了,賣點(diǎn)要大要粗顏色醒目,襯托文字設(shè)計(jì)小一點(diǎn)排版好看就行了。

m.theoat.com.cn_0410096041-26.jpg

3.商品陳列方式

①.疊加的

疊加商品+切邊構(gòu)圖+截取部分商品展示+商品數(shù)量要多

m.theoat.com.cn_0410091220-27.jpg

總結(jié):

將商品按一定的構(gòu)圖規(guī)律沿著banner圖四周環(huán)繞,這就給一副畫加一個(gè)框把它裱起來(lái)一個(gè)道理,既美觀又能聚焦視覺到畫面中心,只不過(guò)這里是將視覺聚焦到中間文案,這也是為什么這種構(gòu)圖文案信息都是居中在畫布中間放置的原因,該手法在攝影構(gòu)圖中也很常見

1, 這種構(gòu)圖往往要求所選商品形狀要盡量規(guī)整,比如矩形,方形,圓形,擺放位置和大小要形成一定規(guī)律,有大有小,有高有低,切勿亂擺

2, 因?yàn)檫x擇的是疊加模式,將商品融進(jìn)背景里的處理手法,所以對(duì)商品的顏色并無(wú)太多要求

3, 這種常運(yùn)用于服飾鞋包、美妝美膚等活動(dòng)banner里

m.theoat.com.cn_04100960U-28.jpg

還有其他類似手法的我們也一起看下,下次遇到適合這樣處理商品的圖不妨一試,時(shí)尚感立馬提升

②.模擬貨架擺放的

模擬商品真實(shí)擺放場(chǎng)景+三件以上商品

m.theoat.com.cn_0410093011-29.jpg

總結(jié):這種手法主要就是試圖營(yíng)造一種真實(shí)的購(gòu)物場(chǎng)景,一定程度上增加網(wǎng)購(gòu)信任感和親和力

1.這種手法對(duì)于商品的拍攝角度有較高要求,因?yàn)榭瓷先ヒ鎸?shí),如果透視陰影光線都不對(duì),就穿幫了

2. 如果有條件在拍攝時(shí)就把場(chǎng)景搭建好,那么作圖的時(shí)候直接拿來(lái)用酒好了

商品堆放+三件以上商品

m.theoat.com.cn_04100962F-30.jpg

選用左右各45°角商品、中間正視角度商品堆放在畫面左邊,三角形構(gòu)圖,畫面比較穩(wěn)

m.theoat.com.cn_04100911U-31.jpgm.theoat.com.cn_04100933F-32.jpg

商品堆放在畫面中間,居中放置,其中一個(gè)商品比重最大,周圍小物體圍繞周邊,形成穩(wěn)定的三角構(gòu)圖

m.theoat.com.cn_04100940G-33.jpg

商品堆放在畫面右邊,其中一個(gè)商品比重最大,周圍小物體圍繞周邊,形成穩(wěn)定的三角構(gòu)圖

m.theoat.com.cn_0410094418-34.jpg

商品堆放在畫面中間,其中一個(gè)商品在最高點(diǎn),周圍物體圍繞周邊,形成穩(wěn)定的三角構(gòu)圖

m.theoat.com.cn_04100962E-35.jpg

這四個(gè)都是橫向或縱向往一個(gè)軸線堆放,也是穩(wěn)定構(gòu)圖,類似堆積木,做漢堡,唯一要注意的是,商品角度上有點(diǎn)變化可以讓畫面更靈活,如上圖所示

總結(jié):

雖然都是堆放的形式,但是變化也是可以很多樣化,前面幾種三角堆放商品的形式在食品,服飾鞋包或綜合類目的活動(dòng)中應(yīng)用較多,后面幾種比較適合同類商品的堆放,要求商品形狀是比較規(guī)則的立方體或扁平的物體,想象一下堆積木或疊衣服就知道了

遠(yuǎn)景近景的對(duì)比+2件以上物品

m.theoat.com.cn_0410091J0-36.jpg

總結(jié):這種形式不需要太多商品,比較適合推單品的活動(dòng),要求商品拍攝角度要好看,45°角最佳,這樣透視感比較容易出來(lái)效果,近大遠(yuǎn)小,近景商品為主角

③.手繪商品

手繪+虛實(shí)結(jié)合+1個(gè)以上商品

m.theoat.com.cn_04100a524-37.jpg

其實(shí)這種就是前面講到的很常見的商品三角構(gòu)圖堆放,文案和商品左右布局啦,只是商品變成全手繪稿,設(shè)計(jì)感和藝術(shù)氣息立馬提升幾個(gè)臺(tái)階(你就當(dāng)我是夸張手法吧,畢竟讀書少。。),如果你有手繪功底并且時(shí)間充裕,并且你的需求人愿意讓你這么搞,你就開干吧

m.theoat.com.cn_04100925Z-38.jpg

這三種構(gòu)圖前面也講到了,這里就不再多說(shuō),我要說(shuō)的是,如果你有手繪功底,并且你的活動(dòng)類型是可愛或者炫酷,或者腦洞大開的,你就發(fā)揮自己的特長(zhǎng),加點(diǎn)想象力,在實(shí)物圖上手繪幾筆,虛實(shí)結(jié)合,畫面非常有活力,看到的人都會(huì)覺得,哇!好棒!不信你試一下?

總結(jié):

1.硬性指標(biāo):會(huì)手繪,有想象力,或者你會(huì)照葫蘆畫瓢也行

2.要你的活動(dòng)定位愿意讓你這么干,畢竟不是每個(gè)類目都適合這種手法,比如如果是要走國(guó)際高端路線,這種手法就會(huì)太小兒科了,與品牌調(diào)性不一致,這種適合于潮牌服飾鞋包,護(hù)膚美妝,母嬰,韓系日系可愛風(fēng)

3.你的手繪內(nèi)容應(yīng)該是與商品活動(dòng)有關(guān)的或有聯(lián)系,如果你賣的是女裝,你畫只鴨子合適嗎?

4.時(shí)間充裕,因?yàn)槭掷L比較費(fèi)時(shí)間哦(牛逼的除外)

④.拿在模特手上或穿在身上腳上的

穿在模特身上展示+大小對(duì)比+1件以上物品

m.theoat.com.cn_041009E32-39.jpg

左中右布局,商品三角堆放在右邊,模特試穿效果圖左邊,文案在中間,對(duì)稱式構(gòu)圖,穩(wěn)定

m.theoat.com.cn_04100911A-40.jpg

左右布局,商品和模特三角堆放在右邊,文案在左邊,左右面積相當(dāng),畫面穩(wěn)定

m.theoat.com.cn_04100963a-41.jpg

左右布局,模特試穿局部效果圖放右邊,全身展示在左邊,文案在左邊,左右面積大小相當(dāng),畫面穩(wěn)定,同時(shí)右邊多彩大面積局部視圖起到比較突出展示商品的效果

m.theoat.com.cn_04100912P-42.jpg

近景和遠(yuǎn)景布局,文案在前,商品在后,文案信息為主體,多個(gè)商品排排放為遠(yuǎn)景作背景

m.theoat.com.cn_0410094338-43.jpg

左邊模特試穿效果展示,右邊文案信息,同時(shí)文案排版遵循模特姿勢(shì),畫面有動(dòng)感,如箭頭所示

m.theoat.com.cn_0410092105-44.jpg

左右都為模特局部效果展示,但是文案信息在右邊,所以增大左邊模特面積,這里一個(gè)是模特大小的對(duì)比,一個(gè)是背景顏色淺和深的對(duì)比,最終效果畫面穩(wěn)定

總結(jié):

這種形式需要一個(gè)姿勢(shì)好看或動(dòng)感的模特試穿效果,若是左右的布局,則適合近大遠(yuǎn)小的形式,若為左中右布局,則適合大小相當(dāng)?shù)膶?duì)稱式構(gòu)圖,顏色的選取和形塑造都應(yīng)該遵循產(chǎn)品本身的特點(diǎn)來(lái),這是比較有依據(jù)的做法

⑤.飄的

飄著的商品+大小對(duì)比+虛實(shí)對(duì)比+3件以上商品

m.theoat.com.cn_0410092500-45.jpg

主體在中間,前面清晰近景圍繞,后面虛化遠(yuǎn)景圍繞,點(diǎn)綴其他幾個(gè)大小不一的虛化物體,讓畫面有動(dòng)感和層次感,注意力還是集中在畫面中央的商品上

m.theoat.com.cn_04100a9C-46.jpg

左中右對(duì)稱布局,文案信息在中間為主體,商品近景大,遠(yuǎn)景小,一看就是要促銷賣各種鞋子的

m.theoat.com.cn_04100a536-47.jpg

大大的文案sale為主體,商品有節(jié)奏的前后左右貼邊像是長(zhǎng)在主體上,商品作為修飾物,增加熱鬧促銷氛圍

總結(jié):這種形式要求有一個(gè)中心主體,在正中間,比如文案信息,然后商品作為配角,或煥然著他轉(zhuǎn),(想象一下宇宙銀河系什么的)或左右對(duì)稱漂浮著(對(duì)稱構(gòu)圖懂撒?左邊你飄一個(gè)大的,右邊我也飄一個(gè)大的,左邊你飄一個(gè)小的,右邊我也飄一個(gè)小的),或像生長(zhǎng)在主體周圍一樣(想想大樹上的葉子樹枝的生長(zhǎng)),所以說(shuō),設(shè)計(jì)真的是有很多可以向大自然學(xué)習(xí)的規(guī)律

按某種規(guī)律平鋪商品+4件以上商品

m.theoat.com.cn_04100963G-48.jpg

商品擺放要規(guī)整,要錯(cuò)落有致,有大有小,左邊文案,右邊商品的左右布局,左邊背景深,右邊背景淺,這樣子左右比重就平衡了,這種適用于商品品類相似,商品形狀規(guī)則的促銷活動(dòng)

m.theoat.com.cn_04100943X-49.jpg

商品圍繞中心主體文案規(guī)則排列,有輕有重的節(jié)奏,錯(cuò)落有致

m.theoat.com.cn_0410095423-50.jpg

上下結(jié)構(gòu)布局,商品橫向擺放,商品形狀一致,擺放有大有小有節(jié)奏感,畫面緊湊

m.theoat.com.cn_04100914c-51.jpg

左右結(jié)構(gòu)布局,商品置于整齊排列的圓形里,展示部分細(xì)節(jié),這種適用于商品種類繁多,商品形狀多樣化不規(guī)則的促銷活動(dòng)

總結(jié):

這種形式適合任何布局,上下也好,左右也好,居中也好,都無(wú)限制,所以你的banner到底適合哪一種,就要看緣分和心情了。。。(好吧其實(shí)要看你的商品適合哪種布局,具體請(qǐng)對(duì)照查看)

鋪滿整個(gè)畫面+前后景+n多商品

m.theoat.com.cn_0410093P8-52.jpgm.theoat.com.cn_0410094K1-53.jpg

總結(jié):

1.這種形式與清倉(cāng)大甩賣這種活動(dòng)簡(jiǎn)直是絕配,它往往意味著廉價(jià),超級(jí)便宜,商品種類蠻多,往往也可以淘到很多物美價(jià)廉的商品(所以也不要覺得這種banner非常俗氣哦)

2.將商品堆一堆鋪滿整個(gè)畫面,作為多彩的背景,文案利益點(diǎn)加一個(gè)純色底放置在上面(背景復(fù)雜,前景肯定要干凈才可以突出文字啦),最后一步,將折扣信息突出再突出,一個(gè)banner就完成了,是不是感覺自己在做一道類似于火鍋大雜燴的黑暗料理?設(shè)計(jì)跟做菜也是有相同之處呢,平時(shí)多思考觀察吧。

⑥.商品部分細(xì)節(jié)展示

超大局部細(xì)節(jié)展示+1件商品

m.theoat.com.cn_04100a936-54.jpg

總結(jié):

1.超大局部細(xì)節(jié)展示(因?yàn)榇笈凭褪沁@么自信啊,我細(xì)節(jié)棒,做工好用料好,不怕你拿放大鏡看我)所以,有些天天喊著我要做大牌感大牌感的廣告,但是,給的商品又是拍攝質(zhì)量很糟糕的,或者做工很一般的,真想。。。

2.大面積留白,畫面干凈無(wú)雜質(zhì),商品就是唯一的主角

3.其實(shí)是品牌logo稍微醒目點(diǎn),文案信息字體比較纖細(xì),并且字號(hào)很小,處在配角的位置,但是因?yàn)橥@種廣告大面積留白,即使字體很小很纖細(xì)可視度也很高,也不影響閱讀

4.背景色多為黑,白,灰,色彩也比較單一,總之,就是為了高冷而生

5.這種形式適用于奢侈品彰顯大牌調(diào)調(diào)的活動(dòng),或者數(shù)碼電子產(chǎn)品,數(shù)碼電子產(chǎn)品也是喜歡走這種高冷路線,因?yàn)槔淇幔斜聘,讓人覺得擁有它很有面子,那種一般的商品比如衣服有線頭,褶皺,產(chǎn)品用料又不高檔做工不精致的就不要嘗試這種了,因?yàn)楸緛?lái)你是想要裝大牌感來(lái)著,卻把你的瑕疵缺點(diǎn)展示出來(lái)了,就起反作用了

⑦.平面構(gòu)成圖形化的

m.theoat.com.cn_0410092J4-55.jpg

這種就是玩構(gòu)圖,看個(gè)人功力了,你看他的平行線,他的切割比例多么美,他的背景色塊的顏色都是從商品的配色吸取的(我好想是在說(shuō)廢話。。。這樣吧><)不過(guò)我要說(shuō)的是,如果有圓形,矩形,三角形,千萬(wàn)不要放過(guò)它們,因?yàn)檫@幾個(gè)基本圖形很容易玩出構(gòu)圖來(lái)

⑧.結(jié)合商品本身特點(diǎn)的

結(jié)合商品本身的特點(diǎn)排版+從文安里找靈感+2件以上商品

m.theoat.com.cn_0410092W2-56.jpg

這個(gè)廣告一看就是想表達(dá)這只拖鞋有多么“色“,這就是結(jié)合商品本身的特點(diǎn)和文案去聯(lián)想去發(fā)揮想象力,其實(shí)往往這種特質(zhì)比較明顯的商品是很容易讓設(shè)計(jì)師發(fā)揮的,我們的設(shè)計(jì)很多時(shí)候就是想辦法與商品產(chǎn)生關(guān)聯(lián),比如商品是質(zhì)感,顏色,紋理,圖案,形狀都是我們可以提取的元素

m.theoat.com.cn_04100ab1-57.jpg

雨傘和雨鞋可以做的這么乖,撲通。∈遣皇呛芟褚粋(gè)小胖孩打著傘,好形象,有親和力,好喜歡,買買買。!

所以說(shuō),有些比較討巧的商品就是可以擺放成這樣去賣萌,獲取用戶好感,然后。。。讓你忍不住想要買買買。。

總結(jié):把商品排版玩轉(zhuǎn)了,距離走向人生巔峰也就不遠(yuǎn)了(你信么?)其他的很多信息都只是順帶提一下,要講的太多,暫時(shí)先蔣這些。

4配色:

做電商就是賣貨,因此主要的設(shè)計(jì)需求都以產(chǎn)品為主,所以我們就可以根據(jù)產(chǎn)品的顏色以及運(yùn)營(yíng)需求的風(fēng)格基調(diào)這2個(gè)方面來(lái)配色,用一句話來(lái)闡述就是:以產(chǎn)品的顏色為基準(zhǔn)(基色),以運(yùn)營(yíng)需求為方向(目標(biāo))。最終的圖片效果與運(yùn)營(yíng)需求基調(diào)相匹配。

如何選色?可以從產(chǎn)品圖中直接取色,這個(gè)方法很多做過(guò)一段時(shí)間設(shè)計(jì)工作的童鞋都會(huì)自行領(lǐng)悟,在一些設(shè)計(jì)書中也是不約而同地提到。因?yàn)閺漠a(chǎn)品選出的色彩可以很好的與產(chǎn)品色相呼應(yīng),視覺上可以相互關(guān)聯(lián)。 是最簡(jiǎn)單的選色方法.

案例:

產(chǎn)品:男士襯衫。關(guān)鍵詞:時(shí)尚,潮流帥氣,活躍。文案:潮流風(fēng)尚,夏裝八折上線。

m.theoat.com.cn_0410096355-58.jpg

以下的幾種配色方案主要以藍(lán)色(模特身上的衣服)為基色,然后圍繞藍(lán)色展開。

4.1.1鄰近色

m.theoat.com.cn_0410095915-59.jpg

m.theoat.com.cn_04100a3D-60.jpg

4.1.2間隔色

m.theoat.com.cn_0410093214-61.jpg

m.theoat.com.cn_0410093036-62.jpg

m.theoat.com.cn_0410094039-63.jpg

m.theoat.com.cn_0410093501-64.jpg

m.theoat.com.cn_0410095O9-65.jpg

m.theoat.com.cn_0410094523-66.jpg

4.1.5暗色調(diào)

m.theoat.com.cn_0410096047-67.jpg

m.theoat.com.cn_041009E03-68.jpg

4.1.6暗色調(diào)+高純度

m.theoat.com.cn_0410094H4-69.jpg

m.theoat.com.cn_041009D31-70.jpg

m.theoat.com.cn_0410091E3-71.jpg

4.2.配色比例

日本設(shè)計(jì)師 曾經(jīng)針對(duì)色彩的配色提出比例原則70%,25%與5%的配色比例方式,其中的底色為大面積使用的底色,大家可以從上面的海報(bào)中自己分析下,哪個(gè)是主色,哪個(gè)是輔助色,哪個(gè)是強(qiáng)調(diào)色。

m.theoat.com.cn_0410091M7-72.jpg

5.字體

m.theoat.com.cn_0410096351-73.jpg

5.1字體的基礎(chǔ)應(yīng)用

m.theoat.com.cn_0410094I9-74.jpg

m.theoat.com.cn_0410095943-75.jpg

m.theoat.com.cn_0410091S3-76.jpg

5.2字體的高級(jí)使用:

5.2.1男性字體

m.theoat.com.cn_04100961S-77.jpg

m.theoat.com.cn_04100963F-78.jpg

5.2.2女性字體

m.theoat.com.cn_04100a600-79.jpg

5.2.3孩童

m.theoat.com.cn_0410094291-80.jpg

5.2.4中性

m.theoat.com.cn_0410095L4-81.jpg

5.2.5促銷型

關(guān)鍵詞:粗,大,顯眼,傾斜,文字變形等,例如 “造字工房力黑”等

m.theoat.com.cn_0410092356-82.jpg

5.2.6品牌調(diào)性字體

關(guān)鍵詞:纖細(xì),小,優(yōu)美,干凈利落

一般用筆畫細(xì)的字體,字號(hào)也比較小,多用英文搭配,更加時(shí)尚。

m.theoat.com.cn_04100ab4-83.jpg

5.2.7文藝、名族風(fēng)

關(guān)鍵詞:纖細(xì),優(yōu)美,復(fù)古等

一般用筆畫細(xì)的字體,如:宋體等,字號(hào)也比較小或毛筆字體(用于標(biāo)題),而且常采用豎向排版。

m.theoat.com.cn_0410091612-84.jpg

6.小元素呈現(xiàn)

m.theoat.com.cn_04100922Z-85.jpg

m.theoat.com.cn_0410092Z3-86.jpg

m.theoat.com.cn_0410091240-87.jpg

m.theoat.com.cn_0410092920-88.jpg

m.theoat.com.cn_04100944G-89.jpg

四.鉆展圖的審核標(biāo)準(zhǔn)

1.因地制宜

根據(jù)位置、尺寸等信息采取合適的布局和表達(dá),契合鉆展位置的尺寸特征。

2.主題明確:

經(jīng)常會(huì)看到一些鉆展圖片,要么內(nèi)容很多,信息量很大,但是讓人摸不著頭腦,不知道主訴求點(diǎn)是什么;要么創(chuàng)意天馬行空,不知所云。鉆展圖片需要在有限的空間和時(shí)間內(nèi),快速吸引客戶的興趣并使其點(diǎn)擊,清晰明確的主題是圖片成功的第一要求。

如何讓設(shè)計(jì)出的鉆展圖主題清晰呢?首先,建議與提設(shè)計(jì)需求的人充分溝通,在明確推廣主題后再進(jìn)行設(shè)計(jì),其次,鉆展圖片的概念一定要在強(qiáng)調(diào)自身主題的前提下去設(shè)計(jì)。最后要進(jìn)行內(nèi)部檢驗(yàn),即在內(nèi)部研討設(shè)計(jì)好的圖片,看看退隊(duì)成員能否通過(guò)設(shè)計(jì)出來(lái)的圖片來(lái)確認(rèn)鉆展主題,另外,鉆展的主標(biāo)題盡量控制在6字以內(nèi),緊扣消費(fèi)者訴求,講大白話,直擊要害,能感知打動(dòng)用戶,一聽就明白。

3.形式美觀:

鉆展圖片是有結(jié)構(gòu)和層次的,不同布局呈現(xiàn)出來(lái)的是不同的視覺焦點(diǎn),如果視覺焦點(diǎn)不統(tǒng)一或者布局不理想,很容易形成信息錯(cuò)亂,造成原先應(yīng)該重點(diǎn)呈現(xiàn)的要素卻被客戶忽略的結(jié)果。圖片布局最常見的問(wèn)題有兩個(gè),一是信息散落,設(shè)計(jì)師試圖將信息點(diǎn)以均分形式平均到整個(gè)鉆展上,二是缺乏抓住用戶實(shí)現(xiàn)的能力。那么如何讓鉆展圖片的設(shè)計(jì)布局更為合理呢?

3.1文案排列越整齊,越便于閱讀。

3.2要基于用戶的閱讀習(xí)慣進(jìn)行排版,將內(nèi)容歸類,可以嘗試字、圖分離的設(shè)計(jì)方式。用戶遵循的是從左到右,從上到下,先主圖再文字的順序。

3.3好的鉆展圖片布局應(yīng)遵循兩條簡(jiǎn)單的定律:一是適當(dāng)留白。二是采用黃金分割法。

3.4根據(jù)商品、活動(dòng)的特性,用戶人群的特點(diǎn),渲染適合主題的有張力的畫面氛圍。

3.5色系不超過(guò)三種,灰度、純度對(duì)比平衡。

3.6文字搭配,平衡比例,合理控制圖片重心、視平線和視覺比重。

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
禿頭小寶貝兒2020-11-30 10:59
我的天,都是干貨,需要慢慢消化
zhang東方2017-02-16 09:15
值得收藏!
zhang東方2017-02-16 09:02
值得收藏!
唯艾尚2016-09-23 03:39
已收藏,慢慢看
唯艾尚2016-09-23 03:09
已收藏,慢慢看
小蘋果2016-08-22 05:07
非常好,多謝分享,大神
小蘋果2016-08-22 05:08
非常好,多謝分享,大神
云淡風(fēng)清-看淡2016-06-27 11:11
整理的好用心,一定好好拜讀!
云淡風(fēng)清-看淡2016-06-27 11:06
整理的好用心,一定好好拜讀!
8712203152016-05-06 10:16
大神
8712203152016-05-06 10:05
大神
Trans2016-04-25 05:10
保存慢慢看。
王延敏2016-04-25 05:04
保存慢慢看。
熊孩紙2016-04-24 10:51
學(xué)習(xí)啦。。學(xué)習(xí)啦。
那個(gè)人說(shuō)我累了2016-04-24 09:12
學(xué)習(xí)啦。。

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!