電商視覺設(shè)計(jì)課件 第3章 商品營銷推廣圖設(shè)計(jì)

第3章商品營銷推廣圖設(shè)計(jì)本章介紹：營銷推廣圖片的設(shè)計(jì)是電商視覺設(shè)計(jì)師需要完成的重要工作任務(wù)，它通常包括主圖、直通車圖和鉆展圖的設(shè)計(jì)。精心設(shè)計(jì)的營銷推廣圖，能夠提升商品點(diǎn)擊率、促進(jìn)轉(zhuǎn)化率。本章針對(duì)商品營銷推廣圖的主圖設(shè)計(jì)、直通車圖設(shè)計(jì)以及鉆展圖設(shè)計(jì)等基礎(chǔ)知識(shí)進(jìn)行系統(tǒng)講解，并針對(duì)流行風(fēng)格與典型行業(yè)的營銷推廣圖進(jìn)行設(shè)計(jì)演練。通過本章的學(xué)習(xí)，讀者可以對(duì)商品營銷推廣圖片的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握營銷推廣圖的設(shè)計(jì)規(guī)范和制作方法，為接下來的PC端海報(bào)設(shè)計(jì)打下基礎(chǔ)。了解主圖的設(shè)計(jì)概況了解直通車圖的設(shè)計(jì)概況了解鉆展圖的設(shè)計(jì)概況知識(shí)目標(biāo)明確營銷推廣圖的設(shè)計(jì)思路掌握營銷推廣圖的制作方法能力目標(biāo)培養(yǎng)良好的營銷推廣圖設(shè)計(jì)操作習(xí)慣培養(yǎng)對(duì)營銷推廣圖的審美鑒賞能力培養(yǎng)對(duì)營銷推廣圖的設(shè)計(jì)創(chuàng)意能力素質(zhì)目標(biāo)主圖設(shè)計(jì)概述主圖的設(shè)計(jì)尺寸主圖的設(shè)計(jì)技巧應(yīng)用案例——設(shè)計(jì)嘉興肉粽主圖3.1主圖設(shè)計(jì)3.1.1主圖設(shè)計(jì)概述主圖展示圖主圖即商品的展示圖，是用于體現(xiàn)商品特色的視覺圖作為傳遞商品信息的核心，主圖需要具有較強(qiáng)的吸引力，只有這樣才能促使消費(fèi)者點(diǎn)擊瀏覽。因此，主圖視覺效果的好壞在很大程度上影響著商品的點(diǎn)擊率。商品主圖最多可以有5張，最少必須有1張。主圖的設(shè)計(jì)尺寸分為兩種，一種是正主圖，尺寸為800像素×800像素；另一種是配合主圖視頻方便移動(dòng)端觀看的豎圖，尺寸為750像素×1000像素。另外主圖的大小必須控制在500KB以內(nèi)。3.1.2主圖的設(shè)計(jì)尺寸主圖尺寸效果圖1．文字層級(jí)的設(shè)計(jì)技巧電商視覺設(shè)計(jì)師在進(jìn)行主圖設(shè)計(jì)時(shí)，需要明確文字層級(jí)，通常會(huì)對(duì)文字進(jìn)行三種層級(jí)的設(shè)計(jì)。第一層體現(xiàn)品牌形象。第二層提煉商品賣點(diǎn)。第三層展示促銷活動(dòng)。3.1.3主圖的設(shè)計(jì)技巧文字層級(jí)2．主圖背景的設(shè)計(jì)技巧主圖的背景通常以圖片場(chǎng)景和純色背景為主。圖片場(chǎng)景大部分使用的是生活類場(chǎng)景，可以令消費(fèi)者產(chǎn)生代入感。純色背景需要使用干凈的顏色，不建議使用大量飽和度高的顏色，這樣可以起到烘托商品的作用。3.1.3主圖的設(shè)計(jì)技巧文字層級(jí)使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“添加圖層樣式”命令為圖像添加效果，使用“矩形”工具、“圓角矩形”工具繪制基本形狀，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。3.1.4應(yīng)用案例——設(shè)計(jì)嘉興肉粽主圖設(shè)計(jì)效果圖直通車圖設(shè)計(jì)概述直通車圖的設(shè)計(jì)尺寸直通車圖的設(shè)計(jì)技巧應(yīng)用案例——設(shè)計(jì)靜音風(fēng)扇直通車圖3.2直通車圖設(shè)計(jì)1．搜索頁的直通車展位這類展位是指提示有“掌柜熱賣”的1-3位展示位、右側(cè)的16個(gè)豎向展示位和底部的5個(gè)橫向展示位。3.2.1

直通車圖設(shè)計(jì)概述搜索頁直通車展位2．其他高關(guān)注、高流量的直通車展位這類展位是指首頁下方的“猜我喜歡”展示位、“我的淘寶”頁面中的購物車下方展示位、“我的淘寶”里“已買到的寶貝”頁面中下方的“熱賣單品”展示位、收藏夾頁面底部的展示位和阿里旺旺PC端的“每日掌柜熱賣”展示位。3.2.1

直通車圖設(shè)計(jì)概述高流量直通車展位3.2.2直通車圖的設(shè)計(jì)尺寸直通車圖直通車圖的設(shè)計(jì)尺寸和主圖一樣，可分為兩種，一種是常規(guī)直通車圖，尺寸為800像素×800像素，如圖3-37所示；另一種是方便移動(dòng)端觀看的豎圖，尺寸為750像素×1000像素。3.2.3直通車圖的設(shè)計(jì)技巧產(chǎn)品文字內(nèi)容1．文字內(nèi)容的設(shè)計(jì)技巧在進(jìn)行直通車圖設(shè)計(jì)時(shí)，為了提高商品的點(diǎn)擊率，設(shè)計(jì)師需要對(duì)文字內(nèi)容進(jìn)行提煉設(shè)計(jì)。例如，低價(jià)商品需要強(qiáng)調(diào)商品的價(jià)格和活動(dòng)；中高端商品需要強(qiáng)調(diào)商品的品質(zhì)、銷量以及效果；大品牌商品則需要強(qiáng)調(diào)商品自身的品牌形象。3.2.3直通車圖的設(shè)計(jì)技巧產(chǎn)品文字內(nèi)容2．凸顯設(shè)計(jì)的特殊技巧直通車圖雖然是商家通過付費(fèi)進(jìn)行推廣，但商品之間依然存在著強(qiáng)烈的競(jìng)爭(zhēng)。因此電商視覺設(shè)計(jì)師可以通過一些特殊手法。需要注意的是，若商品本身的款式吸引力足夠強(qiáng)，則只需使用少量文字和干凈的背景以凸顯商品的品質(zhì)感，這樣更能吸引消費(fèi)者。使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“添加圖層樣式”命令為圖形添加效果，使用“圓角矩形”工具、“矩形”工具繪制基本形狀。3.2.4應(yīng)用案例——設(shè)計(jì)靜音風(fēng)扇直通車圖效果圖鉆展圖設(shè)計(jì)概述鉆展圖的設(shè)計(jì)尺寸鉆展圖的設(shè)計(jì)技巧應(yīng)用案例——設(shè)計(jì)美食活動(dòng)鉆展圖3.3鉆展圖設(shè)計(jì)鉆展圖即鉆石展位圖，也是一種強(qiáng)有力的營銷方式。與直通車圖一樣，商家也需要付費(fèi)購買鉆展圖展示位置，以此進(jìn)行商品、活動(dòng)甚至是品牌的推廣，吸引消費(fèi)者點(diǎn)擊。鉆展圖通常位于電商平臺(tái)首頁的醒目位置。3.3.1鉆展圖設(shè)計(jì)概述淘寶鉆展圖（1）首頁焦點(diǎn)鉆展圖：這類鉆展圖位于淘寶首頁上方，是整個(gè)淘寶首頁的視覺中心。其尺寸為520×280像素，由于尺寸較大，能夠更好地展示商品與文案，因此價(jià)格昂貴。3.3.2鉆展圖的設(shè)計(jì)尺寸產(chǎn)品鉆展圖（2）首頁二焦點(diǎn)鉆展圖：這類鉆展圖位于淘寶首頁焦點(diǎn)鉆展圖右下角，是首頁一屏的黃金位置。其尺寸為160×200像素，由于尺寸較小，因此主要展示商品，文案要精簡(jiǎn)，但需要加大字號(hào)。3.3.2鉆展圖的設(shè)計(jì)尺寸產(chǎn)品鉆展圖（3）首頁通欄鉆展圖：這類鉆展圖位于淘寶首頁“有好貨”的下方，是首頁重要位置。其尺寸為375×130像素，尺寸和，價(jià)格適中，性價(jià)比合適，設(shè)計(jì)時(shí)需要圖文結(jié)合。3.3.2鉆展圖的設(shè)計(jì)尺寸產(chǎn)品鉆展圖1．推廣內(nèi)容的設(shè)計(jì)技巧進(jìn)行鉆展圖設(shè)計(jì)時(shí)，為了提高點(diǎn)擊率，需要先確定推廣內(nèi)容，然后再根據(jù)內(nèi)容進(jìn)行圖片和文案的設(shè)計(jì)。鉆展圖的推廣內(nèi)容通?？梢苑譃橐韵氯N。（1）推廣單品：其圖片素材多選擇單個(gè)商品，文案以商品賣點(diǎn)和促銷信息為重點(diǎn)。3.3.3鉆展圖的設(shè)計(jì)技巧商品廣告內(nèi)容（2）推廣活動(dòng)或店鋪：其圖片素材多選擇商品的組合形式或模特，文案以促銷信息為重點(diǎn)。（3）推廣品牌：其圖片多選擇品牌相關(guān)素材，文案要弱化促銷信息，強(qiáng)化品牌形象。3.3.3

鉆展圖的設(shè)計(jì)技巧品牌展示2．引人注目的設(shè)計(jì)技巧（1）直接運(yùn)用商品圖作為背景，簡(jiǎn)潔醒目，快速吸引消費(fèi)者。（2）將商品圖片與方案進(jìn)行適當(dāng)角度的傾斜，令整個(gè)畫面更富有張力，更能吸引消費(fèi)者的注意力。3.3.3

鉆展圖的設(shè)計(jì)技巧品牌展示

使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果。3.3.4

應(yīng)用案例——設(shè)計(jì)美食活動(dòng)鉆展圖設(shè)計(jì)效果使用多種參數(shù)化工具、生成器建模工具以及多邊形建模工具建立模型，使用“攝像機(jī)”工具控制視圖的顯示效果，使用“區(qū)域光”工具制作燈光效果，使用“材質(zhì)”面板創(chuàng)建材質(zhì)并設(shè)置材質(zhì)參數(shù)，使用“物理天空”工具創(chuàng)建環(huán)境效果，使用“編輯渲染設(shè)置”按鈕