Photoshop CC網(wǎng)店美工全能一本通課件

項(xiàng)目簡介：PC端店鋪首頁設(shè)計(jì)與商品詳情頁設(shè)計(jì)一樣，是網(wǎng)店美工設(shè)計(jì)任務(wù)中的綜合型工作任務(wù)，通過精心設(shè)計(jì)的PC端店鋪首頁能夠向消費(fèi)者傳達(dá)品牌感和信任感。本章針對PC端店鋪首頁的基本概念和設(shè)計(jì)模塊等基礎(chǔ)知識進(jìn)行系統(tǒng)講解，并針對流行風(fēng)格和典型行業(yè)的PC端店鋪首頁進(jìn)行設(shè)計(jì)演練。通過本章的學(xué)習(xí)，讀者可以對PC端店鋪首頁的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識，并快速掌握PC端店鋪首頁的設(shè)計(jì)規(guī)范和制作方法，成功制作一個(gè)具有品牌影響力的PC端店鋪首頁。第6章PC端店鋪首頁設(shè)計(jì)課堂學(xué)習(xí)目標(biāo)了解店鋪首頁的基本概念熟悉店鋪首頁的設(shè)計(jì)模塊6.1店招與導(dǎo)航欄設(shè)計(jì)店招與導(dǎo)航位于店鋪頁面頂部，在PC端的任何頁面都可以看到。店招即店鋪的招牌，主要用于展示店鋪品牌、活動(dòng)內(nèi)容和特價(jià)商品等內(nèi)容。以淘寶為例，店招可以分為常規(guī)店招和通欄店招兩類。常規(guī)店招尺寸為950像素×120像素；通欄店招包含店招、導(dǎo)航欄和背景，尺寸建議為1920×150像素。好的店招會(huì)起到品牌宣傳，加深記憶的作用。導(dǎo)航欄則是對商品進(jìn)行分類，用于幫助消費(fèi)者定位到當(dāng)前位置、完成頁面之間的跳轉(zhuǎn)并快速找到商品，導(dǎo)航欄高度通常在10-50像素之間，建議30像素；導(dǎo)航欄字體建議為黑體和宋體，字號建議黑體為14像素、16像素，宋體為12像素、14像素；文字間距建議為20像素。下面為制作家居網(wǎng)店首頁店招與導(dǎo)航欄的方法，在設(shè)計(jì)過程中，我們圍繞店鋪基本信息與產(chǎn)品分類進(jìn)行創(chuàng)意。將背景變?yōu)榧兩?，令?nèi)容易讀。色彩選取灰色和中藍(lán)色體現(xiàn)了舒適和環(huán)保，字體選用黑體呼應(yīng)主題。搭配產(chǎn)品實(shí)物圖片，使人一目了然。6.1店招與導(dǎo)航欄設(shè)計(jì)6.2輪播海報(bào)設(shè)計(jì)輪播海報(bào)即多張海報(bào)循環(huán)播放，通常位于首頁店招和導(dǎo)航欄下方，主要用于進(jìn)行產(chǎn)品宣傳和活動(dòng)促銷等內(nèi)容。優(yōu)秀的輪播海報(bào)會(huì)對每張海報(bào)的主題、構(gòu)圖和配色等因素進(jìn)行綜合考慮和設(shè)計(jì)。輪播海報(bào)的設(shè)計(jì)尺寸可以依據(jù)4.1節(jié)中的PC端全屏海報(bào)和PC端常規(guī)海報(bào)的建議尺寸進(jìn)行設(shè)計(jì)。其他設(shè)計(jì)規(guī)則可以依據(jù)4.2節(jié)的設(shè)計(jì)形式進(jìn)行設(shè)計(jì)。下面為制作家居網(wǎng)店首頁輪播海報(bào)的方法，在設(shè)計(jì)過程中，我們結(jié)合店招導(dǎo)航，圍繞主體物餐桌椅進(jìn)行創(chuàng)意。背景為產(chǎn)品實(shí)拍圖，文字色彩選取褐色、灰色和玫紅色體現(xiàn)了穩(wěn)重、高端和溫馨。6.2輪播海報(bào)設(shè)計(jì)優(yōu)惠券即減價(jià)優(yōu)惠，通常位于首頁輪播海報(bào)下方，是店鋪常用的促銷方式，也是吸引消費(fèi)者進(jìn)行二次消費(fèi)的常用策略。優(yōu)惠券可以起到提高消費(fèi)者購買欲望、刺激沖動(dòng)消費(fèi)的作用。6.3優(yōu)惠券設(shè)計(jì)

下面為制作家居網(wǎng)店首頁優(yōu)惠券的方法，在設(shè)計(jì)過程中，我們結(jié)合輪播海報(bào)，圍繞店鋪優(yōu)惠活動(dòng)進(jìn)行創(chuàng)意。將背景變?yōu)榧兩?，使?nèi)容易讀。色彩選取中藍(lán)色、灰色和中黃色分別體現(xiàn)了清新、穩(wěn)重和舒適。優(yōu)惠券信息以標(biāo)簽的形式出現(xiàn)，具有醒目、直觀的特點(diǎn)。

6.3優(yōu)惠券設(shè)計(jì)

6.4分類模塊設(shè)計(jì)分類模塊即店鋪商品的類別，通常位于店鋪首頁輪播海報(bào)或優(yōu)惠券下方，是用于引導(dǎo)消費(fèi)者進(jìn)行購買商品的重要模塊。優(yōu)秀的分類模塊起到提升購買效率、增強(qiáng)用戶體驗(yàn)的作用。

下面為制作家居網(wǎng)店首頁分類模塊的方法，在設(shè)計(jì)過程中，我們結(jié)合輪播海報(bào)，圍繞店鋪商品分類進(jìn)行創(chuàng)意。將背景變?yōu)榧兩?，令?nèi)容易讀。色彩延用優(yōu)惠券模塊中的配色。圖標(biāo)采用與家居相關(guān)的線性圖標(biāo)呈現(xiàn)了簡約精致的特點(diǎn)，整體排版簡潔清晰。6.4分類模塊設(shè)計(jì)

6.5商品展示設(shè)計(jì)商品展示即店鋪商品的展示區(qū)域，通常位于店鋪首頁優(yōu)惠券或分類模塊下方，是用于向消費(fèi)者展示爆款商品、新上商品和推薦商品等內(nèi)容的模塊。商品展示的布局通常分為整體模塊布局、主次模塊布局和自由模塊布局。優(yōu)秀的商品展示模塊可以起到引導(dǎo)消費(fèi)者購買、促進(jìn)商品銷售的作用。

下面為制作家居網(wǎng)店首頁商品展示的方法，在設(shè)計(jì)過程中，我們結(jié)合輪播海報(bào)，圍繞店鋪熱銷產(chǎn)品進(jìn)行創(chuàng)意。將背景變?yōu)榧兩蜐u變色，令內(nèi)容易讀。色彩延用優(yōu)惠券模塊中的配色。整體排版整齊有序，一目了然。6.5商品展示設(shè)計(jì)

6.6底部信息設(shè)計(jì)底部信息即店鋪其他信息展示，通常位于店鋪首頁的最下方，用于放置店鋪品牌故事、購物須知和店鋪公告等信息，優(yōu)秀的底部信息可以起到補(bǔ)充說明、挽留消費(fèi)者的作用。

下面為制作家居網(wǎng)店首頁底部信息的方法，在設(shè)計(jì)過程中，我們結(jié)合輪播海報(bào)，圍繞店鋪簡介進(jìn)行創(chuàng)意。背景為商品實(shí)拍圖，凸顯網(wǎng)店經(jīng)營方向。色彩沿用商品展示模塊中的配色。底部按鈕較為醒目，易于消費(fèi)者點(diǎn)擊。6.6底部信息設(shè)計(jì)

6.7模塊合并設(shè)計(jì)制作完成各個(gè)模塊后，需要將模塊合并形成一張完整的首頁。下面為制作家居網(wǎng)店首頁模塊合并的方法。

6.8課堂實(shí)訓(xùn)-PC端數(shù)碼產(chǎn)品店鋪首頁設(shè)計(jì)在設(shè)計(jì)過程中，圍繞主體物頭戴式耳機(jī)進(jìn)行創(chuàng)意。背景為漸變色、純色與圖片相結(jié)合的形式，增加多種元素實(shí)現(xiàn)點(diǎn)綴效果。色彩選取亮藍(lán)色、深紫色和玫紅色分別體現(xiàn)了科技、時(shí)尚和質(zhì)感。字體選用創(chuàng)意美術(shù)體和黑體起到了呼應(yīng)主題的作用。采用黃金比例分割的左右構(gòu)圖表現(xiàn)和諧美感。圖標(biāo)采用與數(shù)碼產(chǎn)品相關(guān)的線性圖標(biāo)體現(xiàn)了簡約精致的特點(diǎn)，整體設(shè)計(jì)充滿特色，契合主題。

6.9課后習(xí)題-PC端護(hù)膚品店鋪首頁設(shè)計(jì)在設(shè)計(jì)過程中，圍