電商視覺設(shè)計(jì)課件 第4章 電商海報(bào)設(shè)計(jì)

第4章電商海報(bào)設(shè)計(jì)本章介紹：電商海報(bào)設(shè)計(jì)是電商視覺設(shè)計(jì)任務(wù)中的重中之重，與營銷推廣圖相比，電商海報(bào)更為醒目震撼，能夠令用戶瞬間了解平臺或店鋪的活動信息及促銷信息。本章針對電商海報(bào)的基本概況、布局類型、PC端電商海報(bào)的表現(xiàn)形式及手機(jī)端電商海報(bào)的設(shè)計(jì)技巧等知識進(jìn)行系統(tǒng)講解，并針對流行風(fēng)格與典型行業(yè)的電商海報(bào)進(jìn)行設(shè)計(jì)演練。通過本章的學(xué)習(xí)，讀者能夠?qū)﹄娚毯?bào)的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識，并快速掌握電商海報(bào)的設(shè)計(jì)規(guī)范和制作方法，為接下來的商品詳情頁設(shè)計(jì)打下基礎(chǔ)。了解電商海報(bào)的基本概況熟悉電商海報(bào)的布局類型明確PC端電商海報(bào)的表現(xiàn)形式明確手機(jī)端電商海報(bào)的設(shè)計(jì)技巧知識目標(biāo)了解電商海報(bào)的基本概況熟悉電商海報(bào)的布局類型明確PC端電商海報(bào)的表現(xiàn)形式明確手機(jī)端電商海報(bào)的設(shè)計(jì)技巧知識目標(biāo)明確電商海報(bào)的設(shè)計(jì)思路掌握電商海報(bào)的制作方法能力目標(biāo)培養(yǎng)良好的電商海報(bào)設(shè)計(jì)的操作習(xí)慣培養(yǎng)對電商海報(bào)的審美鑒賞能力培養(yǎng)對電商海報(bào)的設(shè)計(jì)創(chuàng)意能力素質(zhì)目標(biāo)電商海報(bào)的常見類型電商海報(bào)的常見尺寸4.1電商海報(bào)概述PC端海報(bào)的常見類型可以根據(jù)設(shè)計(jì)尺寸分為PC端全屏海報(bào)和PC端常規(guī)海報(bào)。PC端全屏海報(bào)常用于PC端店鋪首頁和PC端專題頁，PC端常規(guī)海報(bào)則只用于個(gè)別PC端店鋪首頁。4.1.1電商海報(bào)的常見類型PC端店鋪首頁全屏海報(bào)PC端店鋪首頁常規(guī)海報(bào)手機(jī)端海報(bào)的常見類型可以根據(jù)設(shè)計(jì)尺寸分為手機(jī)端豎版海報(bào)和手機(jī)端橫版海報(bào)。手機(jī)端豎版海報(bào)常用于平臺App閃屏頁、平臺App彈窗、手機(jī)端店鋪首頁和手機(jī)端店鋪專題頁頭圖，手機(jī)端橫版海報(bào)常用于平臺App輪播圖、平臺App橫版廣告圖及平臺App專題頁頭圖。4.1.1電商海報(bào)的常見類型手機(jī)端豎版海報(bào)手機(jī)端橫版海報(bào)1．PC端海報(bào)的設(shè)計(jì)尺寸PC端海報(bào)的設(shè)計(jì)尺寸會根據(jù)電商平臺的規(guī)則和商家的具體設(shè)計(jì)要求而有所區(qū)別。（1）PC端全屏海報(bào)這類海報(bào)寬度為1920像素，高度建議在500像素～800像素，高度常用尺寸為500像素、550像素、600像素、650像素、700像素、800像素。（2）PC端常規(guī)海報(bào)這類海報(bào)寬度為950像素、750像素和190像素，高度建議在100像素～600像素，常用尺寸為750像素×250像素和950像素×250像素。4.1.2電商海報(bào)的常見尺寸2．手機(jī)端海報(bào)的設(shè)計(jì)尺寸手機(jī)端海報(bào)展示位置不同，尺寸也會有所不同。（1）手機(jī)端豎版海報(bào)當(dāng)作為平臺App閃屏頁出現(xiàn)時(shí)，寬度為750像素，高度為1624像素。當(dāng)作為平臺App彈窗出現(xiàn)時(shí)，寬度建議在580像素以內(nèi)，高度建議在1000像素以內(nèi)。（2）手機(jī)端橫版海報(bào)手機(jī)端橫版海報(bào)寬度為750像素，高度會根據(jù)不同的展示位置而發(fā)生變化，我們可以根據(jù)不同的展示位置通過寬高比例確定高度。當(dāng)作為平臺App輪播圖出現(xiàn)時(shí)，常用3:1這個(gè)比例。當(dāng)作為平臺App橫版廣告圖出現(xiàn)時(shí)，常用2:1這個(gè)比例。4.1.2電商海報(bào)的常見尺寸電商海報(bào)的布局類型電商海報(bào)的布局原則4.2電商海報(bào)的版面布局PC端電商海報(bào)通常以橫版形式出現(xiàn)，橫版的布局構(gòu)圖常用的有左右布局、左中右布局，偶爾會用到上下布局。在不影響版式構(gòu)圖的前提下，左右布局中文字與圖片的位置可以根據(jù)設(shè)計(jì)靈活調(diào)換。4.2.1電商海報(bào)的布局類型左右布局左中右布局上下布局手機(jī)端海報(bào)會以橫版和豎版兩種類型出現(xiàn)，布局構(gòu)圖常用的有上下布局、左右布局、十字布局、上中下布局、左中右布局和包圍布局。其中上下布局和上中下布局更適用于豎版類型，左右布局和左中右布局更適用于橫版類型，包圍布局和十字布局則兩種類型都適用。4.2.1電商海報(bào)的布局類型手機(jī)端海報(bào)1.布局均衡布局均衡的海報(bào)可以給消費(fèi)者帶來平穩(wěn)的視覺感受。均衡布局通常分為對稱均衡和非對稱均衡兩種形式。其中對稱均衡又細(xì)分為絕對對稱均衡和相對對稱均衡。在PC端電商海報(bào)中，相對對稱均衡在上下布局和左中右布局中被廣泛使用。雖然非對稱均衡兩側(cè)的元素并不相同，但是通過設(shè)計(jì)元素的不同配比依然可以達(dá)到一種觀感均衡，非對稱均衡常用于左右布局的PC端電商海報(bào)中。4.2.2電商海報(bào)的布局原則

對稱均衡非對稱均衡2.重點(diǎn)突出當(dāng)PC端電商海報(bào)布局均衡后，設(shè)計(jì)師還應(yīng)突出畫面的視覺重點(diǎn)，否則會容易造成主次不分，不利于傳達(dá)信息。在電商海報(bào)中，需要突出的元素通常為商品主體或文字，有時(shí)還會突出按鈕，引導(dǎo)消費(fèi)者進(jìn)行商品購買。突出這些重點(diǎn)常用的方法有顏色對比、大小對比和位置對比。4.2.2電商海報(bào)的布局原則位置對比突出商品主體大小對比突出文字顏色對比突出按鈕PC端電商海報(bào)的風(fēng)格定位PC端電商海報(bào)的表現(xiàn)手法應(yīng)用案例——設(shè)計(jì)實(shí)木雙人床PC端電商海報(bào)4.3PC端電商海報(bào)的表現(xiàn)形式電商視覺設(shè)計(jì)師可以根據(jù)不同的設(shè)計(jì)需求進(jìn)行不同的電商海報(bào)設(shè)計(jì)。電商海報(bào)的設(shè)計(jì)形式可以大致分為以下三種。（1）活力促銷設(shè)計(jì)形式：活力促銷設(shè)計(jì)形式的海報(bào)，顏色普遍鮮艷，字體較為醒目。4.3.1PC端電商海報(bào)的風(fēng)格定位活力促銷設(shè)計(jì)形式（2）淡雅文藝設(shè)計(jì)形式：淡雅文藝設(shè)計(jì)形式的海報(bào)，顏色多為柔和鄰近色，文案字體為端正優(yōu)雅型，產(chǎn)品、模特及點(diǎn)綴的顏色應(yīng)與背景色保持統(tǒng)一。4.3.1PC端海報(bào)的風(fēng)格定位淡雅文藝設(shè)計(jì)形式（3）簡約品牌設(shè)計(jì)形式：簡約品牌設(shè)計(jì)形式的海報(bào)，配色較少，顏色多采用品牌色，文案以標(biāo)語為主，商品擺放具有一定的空間感。4.3.1PC端海報(bào)的風(fēng)格定位簡約品牌設(shè)計(jì)形式

PC端海報(bào)的表現(xiàn)手法多種多樣，常用的有攝影、合成、手繪、三維，這些表現(xiàn)手法可以相互結(jié)合進(jìn)行共同使用，設(shè)計(jì)師可以根據(jù)自身的設(shè)計(jì)優(yōu)勢進(jìn)行靈活設(shè)計(jì)。4.3.2

PC端電商海報(bào)的表現(xiàn)手法攝影手繪合成三維使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖像添加效果。4.3.3應(yīng)用案例——設(shè)計(jì)實(shí)木雙人床PC端電商海報(bào)效果圖4.4?手機(jī)端電商海報(bào)的設(shè)計(jì)特點(diǎn)圖形分割簡潔背景應(yīng)用案例——設(shè)計(jì)女性旗袍手機(jī)端電商海報(bào)圖形分割是運(yùn)用各種圖形將完整的版面分割成不同的部分，根據(jù)分割后的版面進(jìn)行布局。圖形分割方法簡單，效果明顯。常用的圖形分割形式有線性分割、形狀分割和放射分割。4.4.1?圖形分割線性分割簡潔背景是運(yùn)用簡單的設(shè)計(jì)方法制作海報(bào)的背景，根據(jù)背景的風(fēng)格組合文字和商品主體。打造簡潔背景能夠清晰地呈現(xiàn)商品，凸顯信息。常見的簡潔背景表現(xiàn)形式有單色背景、漸變背景和底紋背景。4.4.2?簡潔背景底紋背景漸變背景單色背景使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“添加圖層樣式”命令為圖形添加效果。4.4.3?應(yīng)用案例——設(shè)計(jì)女性旗袍手機(jī)端電商海報(bào)效果圖使用多種參數(shù)化工具、生成器建模工具以及多邊形建模工具建立模型，使用“攝像機(jī)”工具控制視圖的顯示效果，使用“區(qū)域光”工具制作燈光效果，使用“材質(zhì)”面板創(chuàng)建材質(zhì)并設(shè)置材質(zhì)參數(shù)，使用“物理天空”工具創(chuàng)建環(huán)境效果，使用“編輯渲染設(shè)置”按鈕和“渲染到圖像查看器”按鈕渲染圖像。課堂實(shí)訓(xùn)——設(shè)計(jì)新品吹風(fēng)機(jī)PC端電商海報(bào)效果圖使用多種參數(shù)化工具、生成器建模工具