《淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)--視覺設(shè)計(jì)+店鋪裝修+移動(dòng)端店鋪》教學(xué)課件—第6章制作PC端網(wǎng)店首頁

1、淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)-視覺設(shè)計(jì)+店鋪裝修+移動(dòng)端店鋪（微課版）第6章制作PC端網(wǎng)店首頁目錄 Contents6.1 認(rèn)識PC端網(wǎng)店首頁6.2 網(wǎng)店店招與導(dǎo)航條的制作6.3 全屏海報(bào)的制作6.4 優(yōu)惠券的制作6.7 課堂實(shí)訓(xùn)制作女包PC端網(wǎng)首頁6.5 商品分類的制作6.6 其他板塊的制作6.1.1 PC 端網(wǎng)店首頁的構(gòu)成要素在制作網(wǎng)店P(guān)C端首頁前，需要先了解網(wǎng)店首頁的構(gòu)成要素，淘寶網(wǎng)店P(guān)C端首頁的構(gòu)成要素主要包括店招、導(dǎo)航條、全屏海報(bào)、優(yōu)惠活動(dòng)、商品分類、商品展示和頁尾模塊等。某網(wǎng)店的首頁展現(xiàn)效果6.1.2 PC端網(wǎng)店首頁制作規(guī)范網(wǎng)店美工在進(jìn)行PC端網(wǎng)店首頁制作時(shí)要注意遵循以下規(guī)范。規(guī)劃首頁布局

2、：合理規(guī)劃首頁頁面布局，可以設(shè)計(jì)出富有品牌特色的視覺頁面效果，提升消費(fèi)者的視覺瀏覽體驗(yàn)。如圖所示即為不同構(gòu)成元素組合所形成的首頁布局效果。6.1.2 PC端網(wǎng)店首頁制作規(guī)范定位首頁風(fēng)格：網(wǎng)店美工在進(jìn)行首頁視覺設(shè)計(jì)時(shí)一定要明確網(wǎng)店的品牌定位，做到網(wǎng)店風(fēng)格和商品信息的統(tǒng)一。合理搭配頁面元素：首頁的構(gòu)成元素眾多，網(wǎng)店美工在制作首頁時(shí)，要在網(wǎng)店頁面規(guī)劃的基礎(chǔ)上，對各元素合理搭配，以突出重要信息，快速地對消費(fèi)者進(jìn)行信息引導(dǎo)。目錄 Contents6.1 認(rèn)識PC端網(wǎng)店首頁6.2 網(wǎng)店店招與導(dǎo)航條的制作6.3 全屏海報(bào)的制作6.4 優(yōu)惠券的制作6.7 課堂實(shí)訓(xùn)制作女包PC端網(wǎng)首頁6.5 商品分類的制作6.

3、6 其他板塊的制作6.2.1 店招的制作要點(diǎn)就淘寶網(wǎng)而言，按尺寸大小可以將店招分為常規(guī)店招和通欄店招兩類。常規(guī)店招為950120像素，而通欄店招尺寸多為1920150像素。一般來說，店招主要包括品牌形象展示店招和商品導(dǎo)購店招兩種。品牌形象展示：制作該類店招時(shí)應(yīng)主要以展示網(wǎng)店名稱、品牌Logo、品牌成績等為主。商品導(dǎo)購店招：制作該類店招時(shí)主要以展示性價(jià)比較高的23款主推商品的信息為主。6.2.1 店招的制作要點(diǎn)店招中可以包含文字、圖片、形狀等視覺元素，除此之外，也可根據(jù)需要添加關(guān)注按鈕、搜索框、網(wǎng)店公告以及聯(lián)系方式等其他內(nèi)容。但店招的展示范圍有限，在不違背品牌形象和商品定位的前提下，合理安排視覺

4、元素即可。如圖所示的店招就通過視覺元素的組合體現(xiàn)了品牌形象、品牌口號和收藏網(wǎng)店等內(nèi)容。6.2.2 店招風(fēng)格的確定與選擇一個(gè)完整的網(wǎng)店要求店招、商品、網(wǎng)店具有統(tǒng)一的風(fēng)格?！傲巡钡甑牡暾芯腕w現(xiàn)出了強(qiáng)勁的自然風(fēng)、民族風(fēng)，設(shè)計(jì)上采用了凸顯民俗風(fēng)情的花紋圖案，體現(xiàn)服裝的大氣?！癚YX”店的店招則以淺灰色背景為主，體現(xiàn)了男性沉穩(wěn)、嚴(yán)肅的性格特征。6.2.3 導(dǎo)航條的制作原則店招的下方就是導(dǎo)航條。導(dǎo)航條是網(wǎng)店的重要組成部分。網(wǎng)店美工要在網(wǎng)店經(jīng)營業(yè)務(wù)和內(nèi)容劃分原則的基礎(chǔ)上，按照以下設(shè)計(jì)要點(diǎn)進(jìn)行制作。導(dǎo)航條要與店招的風(fēng)格和顏色相互呼應(yīng)，保證視覺效果的統(tǒng)一。導(dǎo)航條的長度有限，每個(gè)導(dǎo)航條欄目的內(nèi)容要簡潔，否則容易

5、造成欄目內(nèi)容擁擠，不利于消費(fèi)者查看。導(dǎo)航條欄目內(nèi)容顏色要與背景色形成鮮明對比，以方便消費(fèi)者查看并點(diǎn)擊瀏覽對應(yīng)的頁面。導(dǎo)航條示例6.2.4 制作網(wǎng)店 LogoLogo是店招中的一部分，在設(shè)計(jì)Logo時(shí)不僅要造型美觀，并能將網(wǎng)店的信息展現(xiàn)出來，使消費(fèi)者一目了然。其具體操作如下。1 新建文件2 設(shè)置描邊參數(shù)6.2.4 制作網(wǎng)店 Logo3 繪制圓5 刪除多余部分4 柵格化圖層6.2.4 制作網(wǎng)店 Logo8 繪制斜線 7 添加漸變效果6 繪制形狀9 繪制形狀并填充顏色6.2.4 制作網(wǎng)店 Logo12 繪制矩形并輸入文字11 繪制樹葉葉頭10 繪制樹葉的其他形狀13 完成后的效果6.2.5 制作通欄

6、店招下面將制作水果網(wǎng)店的店招，在制作時(shí)先將制作的logo添加到店招中，再依次添加收藏、熱銷商品等內(nèi)容。在顏色的選擇上采用綠色為主色，以清新的檸檬為背景，使整個(gè)效果美觀清新、自然。其具體操作如下。1 繪制參考線2 添加素材6.2.5 制作通欄店招3 創(chuàng)建組4 添加 Logo5 輸入“農(nóng)家果園”文字6 輸入其他文字6.2.5 制作通欄店招8 拖入水果素材7 輸入其他文字9 輸入商品促銷文字11 繪制導(dǎo)航條10 繪制圓角矩形6.2.5 制作通欄店招13 繪制矩形框12 設(shè)置導(dǎo)航條文字15 完成后的效果14 設(shè)置色階值目錄 Contents6.1 認(rèn)識PC端網(wǎng)店首頁6.2 網(wǎng)店店招與導(dǎo)航條的制作6.3

7、 全屏海報(bào)的制作6.4 優(yōu)惠券的制作6.7 課堂實(shí)訓(xùn)制作女包PC端網(wǎng)首頁6.5 商品分類的制作6.6 其他板塊的制作6.3.1 全屏海報(bào)的組成要點(diǎn)全屏海報(bào)一般是由文案、商品圖片、模特或背景中的至少兩種元素組成的，下面分別分別介紹。01020304商品圖片：可以讓文案描述更加具象化。背景：背景主要起烘托主題的作用。文案：文案主要用來表現(xiàn)海報(bào)主題，其組成部分包括標(biāo)題、副標(biāo)題、促銷信息等。模特：模特是輔助商品展示的元素。6.3.2 全屏海報(bào)的設(shè)計(jì)要點(diǎn)要想讓全屏海報(bào)美觀、吸引消費(fèi)者注意力，就要對每張全屏海報(bào)的主題、構(gòu)圖和配色等進(jìn)行綜合考慮。下面分別進(jìn)行介紹。主題：無論是新品上市還是活動(dòng)促銷，海報(bào)都需要

8、確定一個(gè)主題，并確定對應(yīng)的輪播圖效果。618 促銷活動(dòng)的主題海報(bào)6.3.2 全屏海報(bào)的設(shè)計(jì)要點(diǎn)構(gòu)圖：構(gòu)圖的好壞直接影響海報(bào)的效果，構(gòu)圖主要分為左右構(gòu)圖、左中右三分式構(gòu)圖、上下構(gòu)圖、底面構(gòu)圖和斜切構(gòu)圖6種。左右構(gòu)圖6.3.2 全屏海報(bào)的設(shè)計(jì)要點(diǎn) 配色：海報(bào)需要統(tǒng)一色調(diào)。在配色時(shí)，重要的文字信息用突出、醒目的顏色進(jìn)行強(qiáng)調(diào)，通過明暗對比以及不同顏色的搭配來確定對應(yīng)的風(fēng)格。海報(bào)的背景顏色應(yīng)該統(tǒng)一，不要使用太多的顏色，以免頁面雜亂。比較漂亮的配色效果6.3.3 制作全屏海報(bào)本例將制作6月上新海報(bào)，通過左右構(gòu)圖的方式，進(jìn)行文字和商品的排版，右側(cè)為水果商品的集合，左側(cè)為文字的說明，使整個(gè)畫面自然、美觀，充滿

9、初夏的氣息，其具體操作如下。1 添加植物素材2 添加窗戶和水果素材6.3.3 制作全屏海報(bào)3 設(shè)置投影參數(shù)4 設(shè)置圖層混合模式5 添加木柵欄素材6.3.3 制作全屏海報(bào)6 輸入文字9 添加文字7 添加矢量蒙版8 添加小素材目錄 Contents6.1 認(rèn)識PC端網(wǎng)店首頁6.2 網(wǎng)店店招與導(dǎo)航條的制作6.3 全屏海報(bào)的制作6.4 優(yōu)惠券的制作6.7 課堂實(shí)訓(xùn)制作女包PC端網(wǎng)首頁6.5 商品分類的制作6.6 其他板塊的制作6.4.1 優(yōu)惠券的類型網(wǎng)店首頁中的優(yōu)惠券根據(jù)使用場景的不同可分為以下5種不同的類型。新人券現(xiàn)金券滿減券折扣券免單券6.4.2 優(yōu)惠券的制作要點(diǎn)優(yōu)惠券的制作有以下幾項(xiàng)需要注意的內(nèi)

10、容。優(yōu)惠券的使用范圍優(yōu)惠券的使用條件優(yōu)惠券的發(fā)放時(shí)間優(yōu)惠券的使用時(shí)間優(yōu)惠券的使用限制優(yōu)惠券的最終解釋權(quán)制作要點(diǎn)6.4.3 優(yōu)惠券的制作技巧優(yōu)惠券的內(nèi)容應(yīng)該盡量精簡，不要添加任何與優(yōu)惠內(nèi)容無關(guān)的信息，否則容易引起消費(fèi)者的反感。在網(wǎng)店成本經(jīng)營范圍內(nèi)盡量設(shè)置大面值來刺激消費(fèi)者外，面值的展示還應(yīng)該在優(yōu)惠券中占據(jù)最大版面。制作多張優(yōu)惠券時(shí)，可先設(shè)計(jì)一個(gè)優(yōu)惠券模版，在此模版基礎(chǔ)上制作其他類似優(yōu)惠券，并修改對應(yīng)的內(nèi)容即可。商家的優(yōu)惠券總量有限，還應(yīng)該設(shè)計(jì)優(yōu)惠券被領(lǐng)取完后的狀態(tài)?？蓪?yōu)惠券轉(zhuǎn)為灰度模式，并給出提示信息。6.4.4 制作優(yōu)惠券下面將制作“農(nóng)夫果園”水果網(wǎng)店的滿減優(yōu)惠券。在制作時(shí)不但要確定優(yōu)惠券的

11、內(nèi)容，包括使用條件、使用時(shí)間、使用限制，以淺綠色作為主色，通過簡單的模塊組成，讓優(yōu)惠信息得以展現(xiàn)，其具體操作如下。1 添加參考線2 繪制形狀3 復(fù)制形狀并修改6.4.4 制作優(yōu)惠券4 設(shè)置漸變疊加參數(shù)6 輸入文字7 繪制圓角矩形5 設(shè)置投影參數(shù)6.4.4 制作優(yōu)惠券9 完成后的效果8 繪制形狀目錄 Contents6.1 認(rèn)識PC端網(wǎng)店首頁6.2 網(wǎng)店店招與導(dǎo)航條的制作6.3 全屏海報(bào)的制作6.4 優(yōu)惠券的制作6.7 課堂實(shí)訓(xùn)制作女包PC端網(wǎng)首頁6.5 商品分類的制作6.6 其他板塊的制作6.5.1 商品分類的制作要點(diǎn)首頁中的商品分類一般以標(biāo)簽的形式來進(jìn)行呈現(xiàn)，即“分類圖標(biāo)+文字”的組合形式。

12、其制作要求是：在遵循色彩和樣式統(tǒng)一的前提下，用簡單易懂的圖標(biāo)和文字進(jìn)行搭配，以便更加清晰、直觀地向消費(fèi)者傳達(dá)分類信息，引導(dǎo)消費(fèi)者查看分類，并在其中查看對應(yīng)的商品。因此，商品分類的視覺表現(xiàn)主要體現(xiàn)在分類的布局與分類圖標(biāo)的設(shè)計(jì)兩個(gè)方面。6.5.1 商品分類的制作要點(diǎn)分類的布局：從布局的角度上來說，商品分類要遵守簡潔、直觀、易于區(qū)分的原則。網(wǎng)店美工可將分類畫面按照分類數(shù)量進(jìn)行劃分，然后通過分割線、底紋或色塊等元素來進(jìn)行區(qū)分，以保證整體畫面的統(tǒng)一與規(guī)范。分類圖標(biāo)的設(shè)計(jì)：分類圖標(biāo)是分類文字的具象化表現(xiàn)，常采用實(shí)物圖片、輪廓勾勒、外形填充等方式來進(jìn)行快速設(shè)計(jì)，以與商品分類的內(nèi)容相關(guān)聯(lián)，讓消費(fèi)者快速識別并接

13、收信息。6.5.2 制作商品分類下面將制作“農(nóng)夫果園”水果網(wǎng)店的商品分類，在制作時(shí)先通過水蜜桃的細(xì)節(jié)展現(xiàn)提升整個(gè)板塊的美觀度，再使用矩形、圓角矩形、圓的結(jié)合讓分類商品通過形狀進(jìn)行展現(xiàn)，使整個(gè)效果美觀，其具體操作如下。1 繪制正圓2 繪制虛線圓3 添加剪貼蒙版4 繪制矩形并輸入文字5 繪制濺潑形狀6.5.2 制作商品分類6 繪制矩形7 輸入文字8 繪制矩形9 復(fù)制圓角矩形11 創(chuàng)建剪貼蒙版10 繪制正圓6.5.2 制作商品分類12 設(shè)置投影參數(shù)13 復(fù)制投影樣式14 輸入文字15 查看完成后的效果目錄 Contents6.1 認(rèn)識PC端網(wǎng)店首頁6.2 網(wǎng)店店招與導(dǎo)航條的制作6.3 全屏海報(bào)的制作

14、6.4 優(yōu)惠券的制作6.7 課堂實(shí)訓(xùn)制作女包PC端網(wǎng)首頁6.5 商品分類的制作6.6 其他板塊的制作6.6.1 制作商品展示本例將制作“農(nóng)夫果園”水果網(wǎng)店的商品展示，該商品展示主要是在商品分類的基調(diào)上進(jìn)行制作，其作用是展現(xiàn)網(wǎng)店中的熱銷商品。其具體操作如下。1 制作標(biāo)題欄2 添加芒果素材6.6.1 制作商品展示3 輸入文字4 繪制圓和圓角矩形5 完成海報(bào)的制作6.6.1 制作商品展示6 繪制矩形并添加素材7 輸入文字并保存圖像6.6.2 制作頁尾下面將從消費(fèi)者瀏覽網(wǎng)店的便利度與購物的常見問題出發(fā)，對水果網(wǎng)店的頁尾模塊進(jìn)行制作，在制作時(shí)以采摘場景為背景，通過文字的描述和簡單的分割線使頁尾與前面制作

15、的頁面更加統(tǒng)一，其具體操作如下。1 繪制矩形2 輸入文字3 完成頁尾的制作目錄 Contents6.1 認(rèn)識PC端網(wǎng)店首頁6.2 網(wǎng)店店招與導(dǎo)航條的制作6.3 全屏海報(bào)的制作6.4 優(yōu)惠券的制作6.7 課堂實(shí)訓(xùn)制作女包PC端網(wǎng)首頁6.5 商品分類的制作6.6 其他板塊的制作6.7 課堂實(shí)訓(xùn)制作女包 PC 端網(wǎng)店首頁某一網(wǎng)店的主營商品為時(shí)尚女包，頁面主要采用時(shí)尚、簡約的方式進(jìn)行展現(xiàn)，并通過各模特對商品的展現(xiàn)來呈現(xiàn)女包的時(shí)尚感。完成后通過錯(cuò)落有致的排序與布局，增強(qiáng)網(wǎng)店的時(shí)尚感，完成后的參考效果如圖所示。實(shí)訓(xùn)目標(biāo)6.7 課堂實(shí)訓(xùn)制作女包 PC 端網(wǎng)店首頁實(shí)訓(xùn)思路根據(jù)實(shí)訓(xùn)目標(biāo)，需要先制作 Logo，再制作店招、海報(bào)和網(wǎng)店展示區(qū)。（1） 制作 Logo是制作店招的第一步，本例將制作一個(gè)帶有眼睛圖像的店招。（2） 店招是消費(fèi)者查看網(wǎng)店的重點(diǎn)，本例主要采用左、中、右布局形式，將制作好的Logo放到店招中，在中間輸入網(wǎng)店的名稱，右側(cè)輸入互動(dòng)內(nèi)容，以使店招效果更加美觀。（3）