第3章商品營銷推廣圖設計本章介紹：商品營銷推廣圖的設計是電商視覺設計師需要完成的重要工作任務，它通常包括主圖、直通車圖和鉆展圖的設計。精心設計的商品營銷推廣圖能夠提升商品的點擊率、轉化率。本章針對商品營銷推廣圖的主圖設計、直通車圖設計及鉆展圖設計等基礎知識進行系統講解，并針對流行風格與典型行業的商品營銷推廣圖進行設計演練。通過對本章的學習，學生可以對商品營銷推廣圖的設計有一個系統的認識，了解商品營銷推廣圖的設計思路，掌握其制作方法。了解主圖的基本概念了解直通車圖的基本概念了解鉆展圖的基本概念知識目標明確商品營銷推廣圖的設計思路掌握商品營銷推廣圖的制作方法能力目標提高營銷意識關注市場推廣動態素養目標主圖的基本概念主圖的設計尺寸主圖的設計方法課堂案例——設計科技布沙發主圖3.1主圖設計3.1.1主圖的基本概念主圖展示圖主圖即商品的展示圖，是用于體現商品特色的視覺圖。商品主圖最多可以有5張，最少必須有1張。這些主圖通常位于詳情頁，而第一張主圖還會位于搜索頁，因此需要設計師對主圖進行重點設計。主圖根據設計尺寸分為兩種，一種是正主圖，其設計尺寸為800px×800px，另一種是方便手機端消費者觀看的豎圖，其設計尺寸為750px×1000px。另外，主圖的大小必須控制在500KB以內。3.1.2主圖的設計尺寸主圖尺寸效果圖1．文字層級電商視覺設計師在進行主圖設計時，需要明確文字層級，通常會對文字進行三種層級的設計。第一層體現品牌形象。第二層提煉商品賣點。第三層展示促銷活動。3.1.3主圖的設計方法文字層級2．背景設計主圖的背景通常以圖片場景和純色背景為主，圖片場景大部分為生活類圖片場景，可以令消費者產生代入感。純色背景需要使用干凈的顏色，不建議使用飽和度高的顏色，這樣可以起到烘托商品的作用。背景設計3.1.3主圖的設計方法使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“添加圖層樣式”按鈕為圖像添加效果，使用“矩形”工具、“圓角矩形”工具繪制基本圖形。3.1.4課堂案例—設計科技布沙發主圖設計效果圖直通車圖的基本概念直通車圖的設計尺寸直通圖的設計方法課堂案例——設計美妝護膚直通車圖3.2直通車圖設計1．搜索頁直通車展位這類展位包括提示“掌柜熱賣”的1～3個展位、右側的16個豎向展位和底部的5個橫向展位。3.2.1直通車圖的基本概念搜索頁直通車展位2．消費者必經的其他高關注、高流量直通車展位這類展位包括首頁下方的“猜你喜歡”展位、“我的淘寶”頁面中購物車下方的展位及“我的淘寶”里“已買到的寶貝”頁面中的“熱賣單品”展位等。高流量直通車展位3.2.1直通車圖的基本概念3.2.2直通車圖的設計尺寸直通車圖的設計尺寸直通車圖可以像主圖一樣，根據設計尺寸分為兩種，一種是常規直通車圖，其設計尺寸為800px× 800px，如圖3-27所示；另一種是方便手機端消費者觀看的豎圖，其設計尺寸為750px×1000px。3.2.3直通車圖的設計方法1．文字內容在進行直通車圖設計時，為了提高商品的點擊率，設計師需要對文字內容進行提煉設計。例如，低價商品需要強調商品的價格和活動；中高端商品需要強調商品的品質、銷量以及效果；大品牌商品則需要強調商品自身的品牌形象。產品文字內容產品文字內容2．特殊手法直通車圖雖然是商家通過付費進行推廣，但商品之間依然存在著強烈的競爭。因此電商視覺設計師可以通過一些特殊手法。需要注意的是，若商品本身的款式吸引力足夠強，則只需使用少量文字和干凈的背景以凸顯商品的品質感，這樣更能吸引消費者。3.2.3直通車圖的設計方法使用多種參數化工具、生成器建模工具以及多邊形建模工具建立模型，使用“攝像機”工具控制視圖的顯示效果，使用“區域光”工具制作燈光效果，使用“材質”面板創建材質并設置材質參數，使用“物理天空”工具創建環境效果，使用“編輯渲染設置”按鈕和“渲染到圖像查看器”按鈕渲染圖像。3.2.4課堂案例—設計美妝護膚品直通車圖效果圖鉆展圖的基本概念鉆展圖的設計尺寸鉆展圖的設計方法課堂案例——設計生鮮食品鉆展圖3.3鉆展圖設計鉆展圖即鉆石展位圖，也是一種強有力的營銷方式。與直通車圖一樣，商家也需要付費購買鉆展圖展示位置，以此進行商品、活動甚至是品牌的推廣，吸引消費者點擊。鉆展圖通常位于電商平臺首頁的醒目位置。3.3.1鉆展圖的基本概念淘寶鉆展圖（1）首頁焦點鉆展圖：這類鉆展圖位于淘寶首頁上方，是整個淘寶首頁的視覺中心。其尺寸為520px×280px，由于尺寸較大，能夠更好地展示商品與文案，因此價格昂貴。3.3.2鉆展圖的設計尺寸產品鉆展圖（2）首頁二焦點鉆展圖：首頁二焦點鉆展圖位于淘寶首頁焦點鉆展圖右下角，其設計尺寸為160px×200px，由于尺寸較小，因此主要用于展示商品，文案要精簡，但需要加大字號。產品鉆展圖3.3.2鉆展圖的設計尺寸（3）首頁通欄鉆展圖：首頁通欄鉆展圖位于淘寶首頁“有好貨”的下方，其設計尺寸為375px×130px，尺寸和價格適中，且有較高的性價比，設計時需要圖文結合。產品鉆展圖3.3.2鉆展圖的設計尺寸1．推廣內容進行鉆展圖設計時，為了提高點擊率，需要先確定推廣內容，再根據內容進行圖片和文案的設計。鉆展圖的推廣內容通常可以分為以下3種。（1）推廣單品：其圖片素材多選擇單品，文案以商品賣點和折扣、促銷信息為重點。3.3.3鉆展圖的設計方法商品廣告內容（2）推廣活動或店鋪：其圖片素材多選擇商品的組合或模特，文案以折扣、促銷信息為重點。（3）推廣品牌：其圖片素材多選擇品牌相關素材，文案要弱化促銷，強化品牌。品牌展示3.3.3鉆展圖的設計方法2．設計技巧（1）直接運用商品圖作為背景，簡潔醒目，快速吸引消費者。（2）將文字和商品圖進行適當角度的傾斜，令整個畫面更富有張力，更能吸引消費者。品牌展示3.3.3鉆展圖的設計方法使用“橫排文字”工具添加文字，使用“圓角矩形”工具繪制基本圖形，使用“添加圖層樣式”按鈕為圖形添加效果。3.3.4課堂案例—設計美食活動鉆展圖設計效果使用Photoshop的繪圖工具、文字工具制作入耳式耳機直通車圖。課堂練習—設計入耳式耳機直通車圖效果圖使用Photoshop的繪圖工具、文字工具設計護膚面膜鉆展圖。課后習題——設計護膚面膜鉆展圖效果圖第4章PC端海報設計本章介紹：PC端海報設計是電商視覺設計任務中的重中之重，PC端海報較營銷推廣圖更為醒目、震撼，精心設計的PC端海報能夠令消費者快速了解平臺或店鋪的活動信息以及促銷信息。本章針對PC端海報的基本概念、類型與尺寸以及表現手法等知識進行系統講解，并針對流行風格與典型行業的PC端海報進行設計演練。通過對本章的學習，學生可以對PC端海報的設計有一個系統的認識，了解PC端海報的設計思路，掌握其制作方法。了解PC端海報的基本概念熟悉PC端海報的類型與尺寸明確PC端海報的表現手法知識目標明確PC端海報的設計思路掌握PC端海報的制作方法能力目標提高審美水平建立誠信意識素養目標4.1PC端海報的基本概念電商視覺設計中的海報有別于傳統平面設計中的海報，它是店鋪或平臺中的Banner，用于展示活動、促銷等信息。PC端海報4.2?PC端海報的類型與尺寸PC端全屏海報PC端常規海報PC端全屏海報常用于PC端店鋪首頁和PC端平臺專題頁，這類海報的設計尺寸會根據不同電商平臺的規則和商家的具體設計要求而有所區別，這類海報寬度為1920px，高度建議為500～800px，常用高度為500px、550px、600px、650px、700px、800px。4.2.1PC端全屏海報PC端全屏海報PC端常規海報在尺寸上有別于全屏海報，也用于PC端店鋪首頁。這類海報常用寬度為950px、750px和190px，高度建議為100～600px，常用設計尺寸為750px×250px和950px×250px。4.2.2PC端常規海報PC端常規海報攝影合成手繪三維課堂案例——設計西湖龍井海報4.3?PC端海報的表現手法攝影表現手法是指使用相機捕捉實際場景、物體或人物影像，再通過后期處理軟件進行調整、編輯和美化，以達到海報設計的目的。攝影可以呈現真實的場景和情感，適用于展示商品、人物或風景。4.3.1攝影攝影表現手法合成表現手法是指將多張照片、圖像或多種元素通過后期處理軟件合并在一起，創造出新的場景或圖像。設計師可以通過合成實現一些想象中的場景或概念，創造出引人注目的效果。4.3.2合成合成表現手法手繪表現手法是指將藝術家的繪畫技巧應用到海報設計中，通過繪制、涂鴉或描繪創造出獨特的圖像效果。手繪可以賦予海報更強的個性和藝術感，使其與眾不同，適用于一些文藝類或創意類的主題。4.3.3手繪手繪表現手法三維表現手法是指利用計算機圖形學技術創建出具有立體感的圖像或場景。設計師可以使用三維建模軟件創建物體、場景或人物，并通過渲染技術將其呈現在海報中。三維設計可以帶來更加生動和具有沖擊力的視覺效果，適用于需要突出立體感和現代感的海報設計。4.3.4三維