《網(wǎng)店視覺營(yíng)銷設(shè)計(jì)》 課件全套 李永明 模塊1-7 認(rèn)識(shí)網(wǎng)店視覺營(yíng)銷設(shè)計(jì)崗位 - 淘寶天貓網(wǎng)店視覺設(shè)計(jì)綜合實(shí)訓(xùn)

新形態(tài)活頁式教材和融媒體一體化教學(xué)《網(wǎng)店視覺營(yíng)銷設(shè)計(jì)》網(wǎng)店“視覺營(yíng)銷設(shè)計(jì)”崗位的主要工作內(nèi)容就是從事視覺設(shè)計(jì)。本崗位緊跟產(chǎn)業(yè)發(fā)展趨勢(shì)和電子商務(wù)行業(yè)人才需求，有效銜接“1+X

網(wǎng)店運(yùn)營(yíng)推廣”職業(yè)技能等級(jí)證書（初級(jí)）

中網(wǎng)店裝修工作領(lǐng)域的技能要求；并立足課堂教學(xué)，通過將“電子商務(wù)技能”大賽“視覺營(yíng)銷”模塊的資源轉(zhuǎn)化課堂教學(xué)內(nèi)容的有益補(bǔ)充，將課程教學(xué)和職業(yè)技能競(jìng)賽、“1+X”證書考試等進(jìn)行有機(jī)融合，實(shí)現(xiàn)“崗課賽證”的融合統(tǒng)一?！耙曈X營(yíng)銷設(shè)計(jì)”崗位注重知識(shí)、

技能、

素養(yǎng)相互銜接，培養(yǎng)從員者的視覺營(yíng)銷能力，突出電子商務(wù)專業(yè)特色，服務(wù)企業(yè)人才需求，能助力經(jīng)濟(jì)社會(huì)高質(zhì)量發(fā)展?！半娮由虅?wù)技能”技能大賽知識(shí)點(diǎn)要求：視覺營(yíng)銷模塊（文案策劃、視覺識(shí)別（VI）、商品圖片等）?！熬W(wǎng)店運(yùn)營(yíng)推廣”1+X證書知識(shí)點(diǎn)要求：網(wǎng)店裝修模塊（店鋪專屬

VI

的概念、

色彩的搭配原則、

字體的選擇原則等）THANK

YOU（一）任務(wù)工單任務(wù)目的：了解視覺營(yíng)銷設(shè)計(jì)的定義，認(rèn)識(shí)視覺營(yíng)銷設(shè)計(jì)的工作范疇，明確網(wǎng)站美工人員應(yīng)具備的素養(yǎng)。任務(wù)描述：利用京東、天貓等行業(yè)類主要網(wǎng)絡(luò)購物平臺(tái)網(wǎng)店素材，了解網(wǎng)站美工崗位主要完成的工作內(nèi)容，培養(yǎng)美工能力。知識(shí)目標(biāo)：了解視覺營(yíng)銷設(shè)計(jì)的定義、工作范疇，學(xué)習(xí)如何做一名合格的視覺營(yíng)銷設(shè)計(jì)師。能力目標(biāo)：能根據(jù)視覺營(yíng)銷設(shè)計(jì)崗位工作內(nèi)容，培養(yǎng)視覺營(yíng)銷設(shè)計(jì)人員設(shè)計(jì)理念和美工素養(yǎng)。思政元素：在培養(yǎng)和樹立美工設(shè)計(jì)理念時(shí)，樹立正確的美工崗位職業(yè)觀，培養(yǎng)團(tuán)隊(duì)合作意識(shí)，感受中華民族五千年歷史文化在視覺營(yíng)銷設(shè)計(jì)設(shè)計(jì)中的優(yōu)美體現(xiàn)。（二）任務(wù)情境菲菲準(zhǔn)備去應(yīng)聘一家知名網(wǎng)店的視覺營(yíng)銷設(shè)計(jì)崗位，為了增加應(yīng)聘成功的概率，參加了一場(chǎng)入職培訓(xùn)。培訓(xùn)第一天，菲菲就直接提問培訓(xùn)師：“老師，我已經(jīng)學(xué)過Photoshop圖像處理軟件了，可以直接做網(wǎng)店視覺設(shè)計(jì)師崗位的相關(guān)工作吧？我的月薪能拿到多少？”（三）任務(wù)解析在培訓(xùn)師帶領(lǐng)下，一起梳理“網(wǎng)絡(luò)購物”的優(yōu)勢(shì)和劣勢(shì)，弄清楚網(wǎng)店視覺營(yíng)銷設(shè)計(jì)崗位是干什么的，在網(wǎng)店經(jīng)營(yíng)中起什么作用，進(jìn)而形成正確的職業(yè)觀。調(diào)查網(wǎng)店視覺營(yíng)銷設(shè)計(jì)師的薪酬，起薪和兩三年后月薪層級(jí)的薪資差異。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一 什么是視覺營(yíng)銷設(shè)計(jì)網(wǎng)店視覺營(yíng)銷設(shè)計(jì)師是網(wǎng)店頁面編輯美化工作者的統(tǒng)稱，主要負(fù)責(zé)網(wǎng)店店鋪的裝修設(shè)計(jì)工作。屬于IT行業(yè)的一種職業(yè)崗位。隨著網(wǎng)絡(luò)視覺營(yíng)銷的發(fā)展壯大，網(wǎng)店視覺設(shè)計(jì)師的市場(chǎng)需求會(huì)日益增多，這是一項(xiàng)很穩(wěn)定有前途的職業(yè)。視覺營(yíng)銷設(shè)計(jì)的工作離不開軟件工具，一般會(huì)用到Photoshop（簡(jiǎn)稱PS）、Dreamweaver（簡(jiǎn)稱DW）、illustrator（簡(jiǎn)稱AI）、CINEMA

4D（簡(jiǎn)稱C4D）等軟件。其中，PS通常被用來處理產(chǎn)品圖片和素材，DW常被用于編寫網(wǎng)頁代碼、添加圖片鏈接，AI用于矢量圖繪制，C4D常被用來制作一些三維效果。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二 視覺營(yíng)銷設(shè)計(jì)主要工作內(nèi)容本崗位工作主要包括：負(fù)責(zé)店鋪的整體形象設(shè)計(jì)，包括風(fēng)格設(shè)計(jì)、店鋪展示、底部欄設(shè)計(jì)、主頁設(shè)計(jì)等；負(fù)責(zé)店內(nèi)產(chǎn)品裝飾設(shè)計(jì)，包括產(chǎn)品擺放、產(chǎn)品圖片處理、主圖/首圖設(shè)計(jì)、詳情頁設(shè)計(jì)等；負(fù)責(zé)活動(dòng)和宣傳所需的頁面設(shè)計(jì)工作，包括海報(bào)設(shè)計(jì)、直通車/鉆展圖設(shè)計(jì)、活動(dòng)時(shí)的店鋪裝修等；此外，有些店鋪網(wǎng)店視覺設(shè)計(jì)師還需要負(fù)責(zé)文案編撰、產(chǎn)品拍攝甚至是產(chǎn)品上架等工作。（五）任務(wù)實(shí)施菲菲和團(tuán)隊(duì)伙伴，在培訓(xùn)師的指導(dǎo)下，一起分工合作，在互聯(lián)網(wǎng)上檢索和整理中國網(wǎng)絡(luò)購物市場(chǎng)的相關(guān)數(shù)據(jù)資料，并進(jìn)行匯總和分析。根據(jù)國家統(tǒng)計(jì)局發(fā)布的統(tǒng)計(jì)數(shù)據(jù)，2022年我國網(wǎng)上零售額達(dá)13.79

萬億元，同比增長(zhǎng)4%?？缇畴娚踢M(jìn)出口額2.11

萬億元，同比增長(zhǎng)9.8%。重點(diǎn)監(jiān)測(cè)電商平臺(tái)累計(jì)直播場(chǎng)次超過

1.2

億場(chǎng)，直播商品超過9500

萬個(gè)，累計(jì)觀看超過

1.1億人次。這些數(shù)據(jù)顯示網(wǎng)絡(luò)購物成為日常生活購物的重要場(chǎng)景。（五）任務(wù)實(shí)施步驟一 整理中國網(wǎng)絡(luò)購物市場(chǎng)的發(fā)展數(shù)據(jù)通過網(wǎng)絡(luò)搜索，完成以下2022年度數(shù)據(jù)分析：1.網(wǎng)絡(luò)零售品類TOP3和銷售額占比；2.網(wǎng)絡(luò)零售增速TOP3和上一年度對(duì)比增速數(shù)據(jù)；3.網(wǎng)絡(luò)零售主要平臺(tái)（至少5個(gè)）；根據(jù)整理的數(shù)據(jù)，填寫表相應(yīng)單元格：（五）任務(wù)實(shí)施步驟二 調(diào)研視覺營(yíng)銷設(shè)計(jì)主要工作內(nèi)容菲菲和團(tuán)隊(duì)伙伴，在培訓(xùn)師的帶領(lǐng)下，認(rèn)真地學(xué)習(xí)美工的相關(guān)知識(shí)，上網(wǎng)搜索什么是視覺營(yíng)銷設(shè)計(jì)，討論用戶在網(wǎng)購和實(shí)體店中購物體驗(yàn)的差異。在學(xué)習(xí)的過程中，菲菲深深地體會(huì)到網(wǎng)店視覺設(shè)計(jì)崗位的重要性。視覺營(yíng)銷設(shè)計(jì)的主要任務(wù)，就是讓店鋪更美觀，更容易被顧客所關(guān)注到。視覺設(shè)計(jì)是網(wǎng)店運(yùn)營(yíng)的左手（轉(zhuǎn)化率），網(wǎng)店推廣是網(wǎng)店運(yùn)營(yíng)的右手（流量），視覺設(shè)計(jì)和推廣對(duì)網(wǎng)店運(yùn)營(yíng)都非常重要。通常情況下，對(duì)提高全店成交轉(zhuǎn)化率的主要因素有：寶貝圖文細(xì)節(jié)有吸引力；相比同類寶貝，價(jià)格、運(yùn)費(fèi)便宜；相比同類寶貝，店鋪信用等級(jí)較高、客服服務(wù)到位、買家評(píng)價(jià)較好：店鋪裝修、頁面布局美觀易用。這也說明，網(wǎng)店視覺設(shè)計(jì)對(duì)提高成交轉(zhuǎn)化率有非常重要的作用，是網(wǎng)店視覺營(yíng)銷的關(guān)鍵。（五）任務(wù)實(shí)施步驟二 調(diào)研視覺營(yíng)銷設(shè)計(jì)主要工作內(nèi)容菲菲對(duì)網(wǎng)店運(yùn)營(yíng)的主要崗位進(jìn)行了檢索和整理，并填寫表（五）任務(wù)實(shí)施步驟二 調(diào)研視覺營(yíng)銷設(shè)計(jì)主要工作內(nèi)容整理美工專員的日常工作內(nèi)容：①

規(guī)劃店鋪及素材：要對(duì)整個(gè)店鋪頁面、麥材及架構(gòu)進(jìn)行規(guī)劃；②

商品寶貝拍攝（或配合專業(yè)攝影師完成拍攝）：對(duì)新上架商品拍攝，拍攝好每個(gè)產(chǎn)品的主圖以及詳情頁細(xì)節(jié)等圖片；③ 圖片美化工作：使用Photoshop

等平面設(shè)計(jì)軟件對(duì)圖片進(jìn)行美化；④

主圖、詳情頁設(shè)計(jì)：制作出主圖、詳情頁圖文，按照消費(fèi)者購買心理合理排版詳情頁圖文；⑤

店鋪整體形象設(shè)計(jì)和更新。（五）任務(wù)實(shí)施步驟二 調(diào)研視覺營(yíng)銷設(shè)計(jì)主要工作內(nèi)容根據(jù)互聯(lián)網(wǎng)上發(fā)布的視覺營(yíng)銷設(shè)計(jì)招聘要求，分別將自己認(rèn)為有價(jià)值的20條招聘信息（需要有詳細(xì)的任職條件、如：學(xué)歷、工作經(jīng)驗(yàn)、需具備的知識(shí)及操作技能）整理到文檔中，然后一起討論甄別，留下符合需求的招聘信息，整理出視覺營(yíng)銷設(shè)計(jì)崗位最重要的10條要求。，、（五）任務(wù)實(shí)施步驟三 整理視覺營(yíng)銷設(shè)計(jì)崗位分級(jí)和薪酬根據(jù)步驟二對(duì)視覺營(yíng)銷設(shè)計(jì)人員招聘信息的梳理，培訓(xùn)師要求菲菲，根據(jù)招聘崗位的要求不同，將視覺營(yíng)銷設(shè)計(jì)崗位分成三個(gè)層次并梳理每個(gè)層次的崗位要求和薪資待遇。通過大型招聘類網(wǎng)站如58同城、BOSS直聘前程無憂、獵聘網(wǎng)、智聯(lián)招聘等，了解視覺營(yíng)銷設(shè)計(jì)職位需求信息，崗位要求，薪酬待遇等相關(guān)內(nèi)容。（五）任務(wù)拓展2020年以來，習(xí)近平總書記在不同場(chǎng)合多次就發(fā)展電子商務(wù)作出重要指示，對(duì)發(fā)展農(nóng)村電商、跨境電商、絲路電商等提出要求，明確指出電子商務(wù)是大有可為的。黨的十九屆五中全會(huì)指出，要發(fā)展數(shù)字經(jīng)濟(jì)，堅(jiān)定不移建設(shè)數(shù)字中國。電子商務(wù)作為數(shù)字經(jīng)濟(jì)中規(guī)模最大、

表現(xiàn)最活躍、發(fā)展勢(shì)頭最好的新業(yè)態(tài)新動(dòng)能，網(wǎng)店運(yùn)營(yíng)推廣是電子商務(wù)新發(fā)展格局藍(lán)圖中非常重要的一環(huán)，必將在暢通國內(nèi)大循環(huán)，促進(jìn)國內(nèi)國際雙循環(huán)中發(fā)揮重要作用。請(qǐng)根據(jù)各主要招聘網(wǎng)站的“網(wǎng)店運(yùn)營(yíng)推廣”職位招聘信息，整理運(yùn)營(yíng)推廣專員的主要崗位職責(zé)。THANK

YOU（一）任務(wù)工單任務(wù)目的：了解視覺營(yíng)銷設(shè)計(jì)的技能要求，認(rèn)識(shí)視覺營(yíng)銷設(shè)計(jì)常用的工具軟件有哪些，明確網(wǎng)站美工人員應(yīng)具備的技能素質(zhì)。任務(wù)描述：觀察和分析京東、天貓等行業(yè)內(nèi)主要網(wǎng)絡(luò)購物平臺(tái)網(wǎng)店，了解視覺營(yíng)銷設(shè)計(jì)崗位需要的專業(yè)技能，完成日常工作需要使用的工具軟件主要特點(diǎn)。知識(shí)目標(biāo)：視覺營(yíng)銷設(shè)計(jì)常用工具軟件的基本操作和適用場(chǎng)景。能力目標(biāo)：能根據(jù)視覺營(yíng)銷設(shè)計(jì)崗位技能需要，培養(yǎng)視覺營(yíng)銷設(shè)計(jì)人員工具軟件應(yīng)用能力和綜合設(shè)計(jì)能力。思政元素：樹立正確的視覺設(shè)計(jì)崗位職業(yè)技能價(jià)值觀，正確認(rèn)識(shí)視覺設(shè)計(jì)崗位常用工具軟件國產(chǎn)替代的重要性，培養(yǎng)國產(chǎn)軟件的正版化應(yīng)用意識(shí)。（二）任務(wù)情境菲菲和團(tuán)隊(duì)伙伴，在培訓(xùn)師的帶領(lǐng)下，已經(jīng)了解視覺營(yíng)銷設(shè)計(jì)的崗位要求和職業(yè)上升路徑。菲菲向培訓(xùn)師提問，要成為一名成功的視覺營(yíng)銷設(shè)計(jì)師，我需要學(xué)習(xí)哪些知識(shí)，會(huì)哪些技能？我現(xiàn)在對(duì)Photoshop比較熟悉，還需要精通哪些工具軟件？培訓(xùn)師說：“每家企業(yè)對(duì)視覺營(yíng)銷設(shè)計(jì)師的招聘條件不盡相同，我們可以做個(gè)統(tǒng)計(jì)，從企業(yè)的崗位需求中提煉視覺設(shè)計(jì)的知識(shí)清單。”菲菲和團(tuán)隊(duì)成員通過對(duì)招聘信息進(jìn)行分析和梳理，整理出視覺設(shè)計(jì)知識(shí)清單，確定熟練的視覺營(yíng)銷設(shè)計(jì)師需要具備哪些知識(shí)和技能。（三）任務(wù)解析漂亮恰當(dāng)?shù)囊曈X設(shè)計(jì)可以延長(zhǎng)買家在網(wǎng)店的停留時(shí)間，買家瀏覽網(wǎng)頁時(shí)不易疲勞，自然就會(huì)細(xì)心瀏覽店鋪。合理的規(guī)劃和精心的設(shè)計(jì)可以有效地吸引和留住買家，從而實(shí)現(xiàn)提高銷量的目的。視覺設(shè)計(jì)師要學(xué)會(huì)用Photoshop這個(gè)軟件進(jìn)行網(wǎng)店及網(wǎng)店元素的設(shè)計(jì)和相關(guān)圖片的處理，一切設(shè)計(jì)的目標(biāo)都是為了銷售！以下兩個(gè)店鋪的首頁，清晰地展示了精心設(shè)計(jì)的店鋪首頁和簡(jiǎn)單制作的店鋪首頁的區(qū)別，也提示我們合適的設(shè)計(jì)工具對(duì)展現(xiàn)效果的重要影響。兩個(gè)店鋪制作效果如圖：（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一

視覺營(yíng)銷設(shè)計(jì)的技能要求優(yōu)秀的視覺營(yíng)銷設(shè)計(jì)從業(yè)者，一般來說，應(yīng)具備以下基本的技能要求。①

圖片處理技能。電商平臺(tái)上的商品圖片是吸引消費(fèi)者的重要因素之一，因此網(wǎng)店視覺設(shè)計(jì)師需要掌握?qǐng)D片處理技能，包括剪裁、調(diào)整大小、調(diào)整顏色、去除背景等。同時(shí)，還需要了解各種不同圖片格式的特點(diǎn)和應(yīng)用場(chǎng)景，如

JPG、PNG、GIF

等。②

平面設(shè)計(jì)技能。視覺營(yíng)銷設(shè)計(jì)師需要具備一定的平面設(shè)計(jì)技能，包括色彩搭配、排

版、字體選擇等。這些技能可以幫助電商美工設(shè)計(jì)出美觀、易讀、易懂的頁面布局和推廣圖。③

熟

練

使

用

設(shè)

計(jì)

軟

件

。

視覺設(shè)計(jì)師需要熟練掌握設(shè)計(jì)軟件，如 Photoshop、Illustrator、InDesign

等。這些軟件可以幫助視覺設(shè)計(jì)師更好地處理圖片、設(shè)計(jì)頁面和推廣圖。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一

視覺營(yíng)銷設(shè)計(jì)的技能要求④

熟悉各電商平臺(tái)。視覺設(shè)計(jì)師需要熟悉不同電子商務(wù)平臺(tái)的特點(diǎn)和規(guī)則，如淘寶、天貓、京東、拼多多等。這些平臺(tái)有不同的圖片尺寸、廣告位規(guī)格等，以及各平臺(tái)的移動(dòng)APP

的規(guī)格要求，設(shè)計(jì)師需要根據(jù)平臺(tái)要求進(jìn)行設(shè)計(jì)。⑤

溝通能力。視覺營(yíng)銷設(shè)計(jì)師需要與團(tuán)隊(duì)其他成員進(jìn)行良好地溝通，如和運(yùn)營(yíng)人員、客服人員、產(chǎn)品經(jīng)理等。溝通能力可以幫助設(shè)計(jì)師更好地理解需求，設(shè)計(jì)出符合要求的作品。⑥

數(shù)據(jù)分析能力。商品主圖的點(diǎn)擊率和頁面的停留時(shí)間，是視覺營(yíng)銷設(shè)計(jì)師的主要考核指標(biāo)。所以美工人員應(yīng)有一定的數(shù)據(jù)分析，來獲得什么樣的圖更有效，可以提高工作能力。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

視覺營(yíng)銷設(shè)計(jì)常用的工具軟件視覺營(yíng)銷設(shè)計(jì)崗位，在完成如店標(biāo)、店招、網(wǎng)店首頁、商品主圖等設(shè)計(jì)與制作時(shí)，一般常用的工具軟件有以下這些，熟練掌握這些軟件的使用，對(duì)提高設(shè)計(jì)水平和工作效率，有非常重要的幫助。Photoshop。簡(jiǎn)稱PS，目前常用的版本有Photoshop

CS6、Photoshop

CC2015、Photoshop

2020

等，本書的美工設(shè)計(jì)與制作以

2020

版為基礎(chǔ)，所有作品案例的設(shè)計(jì)和制作，主要使用本軟件實(shí)現(xiàn)。它是由美國Adobe公司開發(fā)和發(fā)行的圖像處理軟件，主要應(yīng)用在處理像素構(gòu)成的數(shù)字圖像，是網(wǎng)店視覺設(shè)計(jì)主要使用的工具軟件，如圖：（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

視覺營(yíng)銷設(shè)計(jì)常用的工具軟件2. Dreamweaver。簡(jiǎn)稱

DW，Dreamweaver

是

Adobe

公司推出的一款網(wǎng)頁設(shè)計(jì)軟件，它提供了一個(gè)可視化的頁面編輯器，同時(shí)也支持手動(dòng)編輯

HTML、CSS

和JavaScript代碼。Dreamweaver

擁有許多功能和工具，可以幫助用戶輕松創(chuàng)建響應(yīng)式網(wǎng)頁、應(yīng)用程序和移動(dòng)應(yīng)用程序。店鋪裝修時(shí)，想要頁面呈現(xiàn)更多個(gè)性化內(nèi)容，動(dòng)圖效果以及交互內(nèi)容，那么就要通過代碼來實(shí)現(xiàn)，而代碼的編輯就要在Dreamweaver

軟件來完成，如圖：（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

視覺營(yíng)銷設(shè)計(jì)常用的工具軟件3. Illustrator。簡(jiǎn)稱

AI，是Adobe公司推出的一款矢量圖形制作軟件，廣泛應(yīng)用在印刷出版、海報(bào)書籍排版、插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁面的制作等。網(wǎng)店視覺設(shè)計(jì)使用AI 軟件時(shí)，主要用于一些圖標(biāo)的制作，海報(bào)藝術(shù)文字的創(chuàng)意制作等。AI軟件儲(chǔ)存的圖片是矢量格式，不存在失真的問題，店鋪裝修通常也會(huì)涉及到很多AI格式的素材需要編輯，然后輸出其他相應(yīng)文件格式進(jìn)行應(yīng)用，如圖：（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

視覺營(yíng)銷設(shè)計(jì)常用的工具軟件4. CINEMA

4D。簡(jiǎn)稱C4D，是德國Maxon Computer推出的一款3D動(dòng)畫軟件，它可以實(shí)現(xiàn)工業(yè)設(shè)計(jì)、平面創(chuàng)意海報(bào)設(shè)計(jì)、電子產(chǎn)品海報(bào)設(shè)計(jì)、欄目包裝動(dòng)畫等。網(wǎng)店產(chǎn)品三維展示是未來的趨勢(shì)，類似C4D此類軟件在網(wǎng)站美化中的應(yīng)用會(huì)越來越廣泛，如圖：（五）任務(wù)實(shí)施步驟一

認(rèn)識(shí)Photoshop2020版工作界面打開Windows10“開始”菜單，找到“Adobe

Photoshop

2020”菜單項(xiàng)，單擊啟動(dòng)程序。仔細(xì)觀察并記錄2020版工作界面的構(gòu)成。（五）任務(wù)實(shí)施步驟一

認(rèn)識(shí)Photoshop2020版工作界面①

標(biāo)題欄。打開一個(gè)文件以后，系統(tǒng)會(huì)自動(dòng)創(chuàng)建一個(gè)標(biāo)題欄。在標(biāo)題欄中會(huì)顯示該文件的名稱、格式、窗口縮放比例及顏色模式等信息。② 菜單欄。菜單欄位于軟件界面的最上方，包含了

Photoshop

所有的功能。用戶可選擇各菜單項(xiàng)下的命令來完成各種操作和設(shè)置。③

工具箱。工具箱默認(rèn)位于工作界面的左側(cè)，包含了

Photoshop

的常用工具。部分工具按鈕的右下角帶有一個(gè)黑色小三角形標(biāo)記，表示這是一個(gè)工具組，將鼠標(biāo)指針移到工具圖標(biāo)上，單擊鼠標(biāo)右鍵可展開隱藏的工具。選擇工具箱中的工具后，一般需要在工作區(qū)中進(jìn)行操作。（五）任務(wù)實(shí)施步驟一

認(rèn)識(shí)Photoshop2020版工作界面④

屬性欄。在工具箱中選擇任意工具后，位于菜單欄下方的屬性欄中將顯示當(dāng)前工具的相應(yīng)屬性和參數(shù)，用戶可對(duì)其進(jìn)行更改和設(shè)置。⑤

面板區(qū)。面板區(qū)位于軟件界面的右側(cè)，在初始狀態(tài)下，面板區(qū)中一般會(huì)顯示顏色、屬性、圖層等多個(gè)常用面板。這些面板主要用于配合圖像的編輯、控制及參數(shù)設(shè)置等操作。面板區(qū)中的面板可執(zhí)行“窗口”菜單下的命令來進(jìn)行有針對(duì)性的選擇顯示。⑥

狀態(tài)欄。狀態(tài)欄位于工作界面的最底部，可以顯示當(dāng)前文檔的大小、尺寸、當(dāng)前工具和窗口縮放比例等信息。單擊狀態(tài)欄中的三角圖標(biāo)可設(shè)置狀態(tài)欄所顯示內(nèi)容。⑦

編輯區(qū)。工具箱右側(cè)中部最大的區(qū)域是編輯區(qū)，打開或創(chuàng)建的文檔都在此區(qū)域顯示。（五）任務(wù)實(shí)施步驟一

認(rèn)識(shí)Photoshop2020版工作界面認(rèn)識(shí)

Photoshop

2020

版工具箱上各工具的作用，并和舊版進(jìn)行對(duì)比。根據(jù)已學(xué)習(xí)過的知識(shí)，填寫表（五）任務(wù)實(shí)施步驟二

使用Photoshop2020版制作網(wǎng)店促銷標(biāo)簽新建文檔，輸入標(biāo)題：促銷標(biāo)簽，設(shè)置寬度：230像素，高度：230像素，分辮率：72像素/英寸，顏色模式：RGB顏色，背景內(nèi)容：透明。（五）任務(wù)實(shí)施步驟二

使用Photoshop2020版制作網(wǎng)店促銷標(biāo)簽2.

新建圖層，命名為“撕邊正圓”。設(shè)置前景色“#aa313f”，使用“圓形工具”，在屬性欄，選擇“路徑”，在畫布上繪制寬

200

像素，高

200

像素的正圓形路徑，并使用“路徑選擇工具”，將路徑移動(dòng)到圖布居中位置，如圖。（五）任務(wù)實(shí)施步驟二

使用Photoshop2020版制作網(wǎng)店促銷標(biāo)簽打開“窗口”菜單，選擇“畫筆”，在“畫筆”列表中，選擇常規(guī)畫筆中“硬邊圓”。在“窗口”菜單，選擇“畫筆設(shè)置”，大?。?0像素，間距：100%，其它保持默認(rèn)，在畫筆示例區(qū)，曲線已變成緊密相連的一串正圓，如圖在“圖層”面板，“撕邊矩形”圖層，切換到“路徑”，指向工作路徑，右單擊，在彈出菜單中選擇“描邊路徑”，在彈出對(duì)話框中，選擇工具“畫筆”，單擊“確定”，如圖

1.2.11所示。1.2.11（五）任務(wù)實(shí)施步驟二

使用Photoshop2020版制作網(wǎng)店促銷標(biāo)簽指向工作路徑，右單擊，在彈出菜單中選擇“填充路徑”，在彈出對(duì)話框中，內(nèi)容“前景色”，單擊“確定”。在“路徑”面板，刪除工作路徑。如圖

1.2.12

所示。3. 選擇“橢圓”工具，新建兩個(gè)圖層，在畫布中間分別繪制高寬為

180

像素、170

像素的兩個(gè)正圓，無填充，白色描邊

1

個(gè)像素，實(shí)線。移動(dòng)到合適位置，如圖

1.2.12

所示效果。1.2.12（五）任務(wù)實(shí)施步驟二

使用Photoshop2020版制作網(wǎng)店促銷標(biāo)簽4. 新建

3

個(gè)文字圖層，依次是“8”、“折”、“正品包郵”，設(shè)置合適的字體、顏色、字號(hào)，并參考樣例，擺放在“撕邊正圓”的合適位置。如圖所示。5.

打開“文件”菜單，選擇存儲(chǔ)為“促銷標(biāo)簽.jpg”，在“JPEG

選項(xiàng)”中，品質(zhì)設(shè)置為“8”，一般即可保證圖片的品質(zhì)，也能適當(dāng)減小文件容量。也可以保存為

PNG格式，可以保留透明背景，后期疊加到有較復(fù)雜背景顏色的圖片時(shí)有更好的效果。（五）任務(wù)實(shí)施步驟三

分析推廣圖設(shè)計(jì)優(yōu)點(diǎn)和創(chuàng)新在網(wǎng)店推廣中，商品及活動(dòng)等信息，大多數(shù)都是通過營(yíng)銷推廣圖傳遞給買家，網(wǎng)店在投放廣告前，就會(huì)制定明確的目標(biāo)。為達(dá)到預(yù)期的推廣效果，準(zhǔn)確傳達(dá)推廣信息是推廣圖設(shè)計(jì)的首要任務(wù)。推廣圖一般會(huì)呈現(xiàn)商品相關(guān)的信息，包括：商品價(jià)格、折扣、活動(dòng)信息、銷量、商品圖片等，合理的設(shè)計(jì)會(huì)極大提升潛在買家的信息認(rèn)知度。下表提供了三張視覺營(yíng)銷設(shè)計(jì)效果圖，請(qǐng)對(duì)這三張推廣圖進(jìn)行分析并填寫表。（六）任務(wù)拓展任選以下任一款風(fēng)格促銷標(biāo)簽，完成設(shè)計(jì)和制作。效果可以參考圖。THANK

YOU新形態(tài)活頁式教材和融媒體一體化教學(xué)《網(wǎng)店視覺營(yíng)銷設(shè)計(jì)》視覺設(shè)計(jì)師一般是指對(duì)平面、

色彩、

基調(diào)、

創(chuàng)意等進(jìn)行處理的技術(shù)人才。網(wǎng)店視覺設(shè)計(jì)師特指對(duì)網(wǎng)店網(wǎng)店商品風(fēng)格與色彩的搭配、

字體的正確選擇進(jìn)行處理的技術(shù)人才。

消費(fèi)者可以通過精美的排版、

字體設(shè)計(jì)、

色彩搭配,

更直觀方便地看到頁面的重點(diǎn),

延長(zhǎng)在網(wǎng)店的停留時(shí)間,從而增加網(wǎng)店的流量和商品的銷量。學(xué)生通過本模塊的學(xué)習(xí)，可以了解并掌握商品調(diào)色、字體運(yùn)用、視覺構(gòu)圖、商品構(gòu)圖及文案撰寫等基本技能?！半娮由虅?wù)技能”技能大賽知識(shí)點(diǎn)要求：視覺營(yíng)銷模塊（文案策劃、

視覺識(shí)別（VI）、商品圖片等）?！熬W(wǎng)店運(yùn)營(yíng)推廣”1+X證書知識(shí)點(diǎn)要求：網(wǎng)店裝修模塊（店鋪專屬

VI

的概念、

色彩的搭配原則、

字體的選擇原則等）THANK

YOU（一）任務(wù)工單任務(wù)目的：利用圖形圖像處理軟件，了解色彩搭配和商品調(diào)色以獨(dú)特的視覺沖擊，讓顧客留下深刻印象，提高推廣轉(zhuǎn)化率。任務(wù)描述：利用提供的奶茶飲品圖片素材，通過對(duì)產(chǎn)品色彩進(jìn)行分析構(gòu)思，結(jié)合商品特點(diǎn)，運(yùn)用Photoshop軟件完成商品主圖色彩選擇及搭配。知識(shí)目標(biāo)：了解色相、明度和純度等相關(guān)概念，認(rèn)識(shí)色彩平衡工具、自然飽和度工具。能力目標(biāo)：能利用圖形圖像處理軟件，綜合各種視覺元素，進(jìn)行色彩搭配與商品調(diào)色。思政元素：中國傳統(tǒng)節(jié)日主要有春節(jié)、元宵節(jié)、清明節(jié)、端午節(jié)、中秋節(jié)、重陽節(jié)等，傳承的是中華民族優(yōu)秀歷史文化，紅色是中國人最喜歡在節(jié)日使用的色彩。（二）任務(wù)情境“愛尚乳飲”網(wǎng)店為了提高“雙十一”銷售額，決定優(yōu)化店內(nèi)主圖的顏色搭配并優(yōu)化商品顏色屬性。通過這個(gè)重要的環(huán)節(jié)，獲得巨大的流量，進(jìn)而提高網(wǎng)店的銷售額。（三）任務(wù)解析根據(jù)提供的店鋪主圖PSD文件，調(diào)整各個(gè)圖層的顏色搭配，優(yōu)化商品的顏色。如圖2.1.1所示。通過賣點(diǎn)文案部分的色彩搭配，突出店鋪本次活動(dòng)的折扣優(yōu)勢(shì)和活動(dòng)期限等信息，引流消費(fèi)者。效果如圖2.1.2所示。圖2.1.1商品主圖初始圖2.1.2設(shè)置顏色后的商品主圖（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一

了解色相色相是色彩的相貌稱謂，用以區(qū)別各種不同色彩的名稱，如圖2.1.3所示。1.基本色相：紅、橙、黃、綠、青、藍(lán)、紫。2.暖色、冷色與中性色：大部分的紅、橙色相屬于暖色，給人溫暖、熱情的感覺；紅色是中華民族最喜愛的顏色，成為中國人的文化圖騰和精神皈依,代表著喜慶、熱鬧與祥和。大部分的藍(lán)色、青色等色相屬于冷色，給人寒冷、安靜的感覺。其他沒有明顯冷暖傾向的顏色屬于中性色。圖2.1.3

色相圓環(huán)圖（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

了解明度色彩的明度是指色彩的深淺程度，如圖2.1.4所示。不同色相的不同明度：不同的色彩具有不同的明度，任何色彩都存在明暗變化。在彩色中，明度最高的是黃色，明度最低的是紫色。紅、橙、藍(lán)、綠的明度相近，為中間明度；相同色相的不同明度：在同一色相的明度中存在深淺的變化，如藍(lán)色中由淺到深有粉藍(lán)、淡藍(lán)、天藍(lán)等明度變化。在一個(gè)畫面中如何安排不同明度的色彩也可以幫助表達(dá)不同的感情。圖2.1.4

明度展示圖（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備三

了解純度色彩的純度是指色彩中所包含某色的飽和程度。如圖2.1.5所示。它表示色彩中所含有色成分的比例，比例越大，含有色成分越多，純度越高；比例越小，含有色成分越少，純度越低。最為鮮艷、純度最高的顏色稱之為“純色”；反之，純度最低的顏色稱為“無色”的灰色。圖2.1.5

色彩純度（五）任務(wù)實(shí)施步驟一

調(diào)整背景顏色①

分析圖2.1.2所示商品色彩，進(jìn)行色彩搭配構(gòu)思。在PS2020中打開圖2.1.1所示“商品主圖上色.psd”(位置：教材資源/素材文件/模塊2.1/)。②

點(diǎn)擊背景圖層，設(shè)置前景色為“#fcaa54”，填充前景色；選擇圖層1，填充前景色；③

選擇圓角矩形3，雙擊圖標(biāo)輸入“#fcaa54”；④

選擇圓角矩形2，雙擊圖標(biāo)輸入“#fcaa54”。完成后效果如圖2.1.6所示。圖2.1.6主圖添加背景色（五）任務(wù)實(shí)施步驟二

調(diào)整其他顏色①選擇形狀1雙擊圖標(biāo)，填充“#f8c31b”；②選擇矩形1副本2雙擊圖標(biāo)，填充“#f8c31b”；③選擇矩形1副本8雙擊圖標(biāo)，填充“#c1564c”；④選擇矩形1副本雙擊圖標(biāo)，填充“#ffc2b1”，最終效果如圖2.1.7所示。圖2.1.7主圖色彩設(shè)置后效果（六）任務(wù)拓展“愛尚乳飲”網(wǎng)店為了提高春節(jié)期間銷售額，決定優(yōu)化店內(nèi)主圖的顏色搭配并優(yōu)化商品顏色屬性。打開“任務(wù)拓展-自由填色主圖.psd”(位置：教材資源/素材文件/模塊2.1/)，自由填色。通過豐富色彩，吸引流量，進(jìn)而提高網(wǎng)店的銷售額。圖2.1.8自由填色主圖THANK

YOU（一）任務(wù)工單任務(wù)目的：了解字體的運(yùn)用和字體創(chuàng)意，根據(jù)商品屬性特點(diǎn)，合理選擇字體進(jìn)行設(shè)計(jì)與運(yùn)用。任務(wù)描述：根據(jù)網(wǎng)店活動(dòng)與商品屬性特點(diǎn)等市場(chǎng)信息，利用圖形圖像處理軟件，選擇適合的字體并進(jìn)行設(shè)計(jì)與運(yùn)用，增加設(shè)計(jì)感，提升店鋪與商品的格調(diào)。知識(shí)目標(biāo)：了解常用的字體類型，了解各類商品對(duì)應(yīng)的字體選擇，提升字體設(shè)計(jì)創(chuàng)意度。能力目標(biāo)：熟練掌握各類字體，并靈活應(yīng)用字體創(chuàng)意在各類商品用圖和店鋪活動(dòng)主題設(shè)計(jì)中。思政元素：漢字是世界上最古老的文字之一，至少有六千多年的歷史，中國漢字博大精深。（二）任務(wù)情境“愛尚乳飲”網(wǎng)店為了提高“雙十一”銷售額，決定優(yōu)化店內(nèi)商品促銷圖的字體。通過字體優(yōu)化，讓消費(fèi)者對(duì)商品的品牌及屬性等內(nèi)涵產(chǎn)生共鳴。（三）任務(wù)解析根據(jù)提供的詳情頁P(yáng)SD文件，調(diào)整各個(gè)圖層的字體，優(yōu)化商品的字體。優(yōu)化前如圖2.2.1所示。通過賣點(diǎn)文案字體優(yōu)化，突出店鋪活動(dòng)的折扣優(yōu)勢(shì)和活動(dòng)期限等信息引流消費(fèi)者。優(yōu)化后效果如圖2.2.2所示。圖2.2.1優(yōu)化前商品圖圖2.2.2優(yōu)化后的商品圖（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一 字體的特點(diǎn)字體，是指文字的外在形式特征；即文字的風(fēng)格、文字的外衣。字體是文化的載體，是社會(huì)的縮影。中國漢字博大精深，經(jīng)過六千多年的演變，目前公認(rèn)字體有“甲骨文，金文，小篆，隸書，楷書，行書，和草書”，這七種字體被稱為“漢字七體”，是中華文化的瑰寶。日常設(shè)計(jì)工作中，我們需要對(duì)常用風(fēng)格的字體，其特點(diǎn)與適用情形進(jìn)行區(qū)分與掌握，一般適用場(chǎng)景如表2.2.1所示。名稱字體特點(diǎn)

適用場(chǎng)景

宋體

字形方正、結(jié)構(gòu)嚴(yán)謹(jǐn)、大氣通用

是印刷行業(yè)應(yīng)用得最為廣泛的一種字體。閱讀時(shí)有一種舒適醒目的感覺。在現(xiàn)代印刷中主要用于書刊或報(bào)紙的正文部分，也適用于包括電視字幕在內(nèi)的任何媒體。

黑體

穩(wěn)重、搶眼

顯示清晰

多用于標(biāo)題制作，有強(qiáng)調(diào)的效果。另外，用清瘦型的黑體做電影、電視的字幕已被普遍接受。

楷體

清秀、柔美

帶書卷味

是近、現(xiàn)代印刷品中追求書卷味的產(chǎn)物，多用于啟蒙教材。在專業(yè)書籍中多用于主觀文字當(dāng)中，也可以用作字幕。仿宋

權(quán)威、古樸

是早期中文打字機(jī)的專用字體，至今仍是紅頭文件的專用字體。印刷品中使用仿宋體體現(xiàn)權(quán)威，也常用于觀點(diǎn)提示性闡述。

圓體

活潑、有趣

商業(yè)常用

這類字體最初出現(xiàn)在海外商業(yè)場(chǎng)合，也稱線性。國內(nèi)漢字版本的圓體字比較僵硬，缺乏一定美感，不適用電視字幕。

綜藝

藝術(shù)、專業(yè)

現(xiàn)代感強(qiáng)

一種設(shè)計(jì)味較濃的字體，部分使用可表現(xiàn)一種藝術(shù)的時(shí)尚，過多則顯矯揉造作。

表

2.2.1

不同風(fēng)格字體的適用場(chǎng)景（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

字體的創(chuàng)意1.筆畫代替法：是一種常見的字體設(shè)計(jì)創(chuàng)意方法，它采用有象征性的視覺圖形符號(hào)，讓觀眾能夠迅速理解設(shè)計(jì)理念。筆畫代替法的具體操作步驟是在原有字體的基礎(chǔ)上，設(shè)計(jì)師通過刪除或增加字體的某一筆畫，從而用其他形式代替或者做相應(yīng)的銜接來完成字體的創(chuàng)意設(shè)計(jì)，通過強(qiáng)調(diào)的手法變現(xiàn)字體的內(nèi)涵。如圖（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

字體的創(chuàng)意2.細(xì)節(jié)添加法。是根據(jù)字體主題進(jìn)行針對(duì)性的設(shè)計(jì)修飾，常常是在橫豎撇捺的筆畫端點(diǎn)處進(jìn)行錨點(diǎn)添加或斷點(diǎn)處理。當(dāng)然每個(gè)字體的筆畫有許多，不一樣的細(xì)節(jié)添加方式得到的設(shè)計(jì)作品也是風(fēng)格異迥的。另外，筆畫根據(jù)不一樣的寫作主體也有一定的差別。例如，男性字字體的筆畫相對(duì)較粗，而女性字體的筆畫則比較纖細(xì)。如圖（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

字體的創(chuàng)意3.筆畫刪減法。是設(shè)計(jì)師在保證字體識(shí)別度的前提下，對(duì)筆畫進(jìn)行減法留白處理，這種設(shè)計(jì)的前提就是確保讀者能夠識(shí)別字體。筆畫刪減法的優(yōu)點(diǎn)是使設(shè)計(jì)字體的文藝氣息濃厚，設(shè)計(jì)師通過留白的方式增加字體的設(shè)計(jì)性。如圖（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

字體的創(chuàng)意4.效果添加法。這種方法適用于項(xiàng)目時(shí)間緊急的情況下，設(shè)計(jì)師可以在字體庫里找到合適的字體，進(jìn)行簡(jiǎn)單的加工，就能實(shí)現(xiàn)相當(dāng)不錯(cuò)的效果。這種方法的具體步驟是通過運(yùn)用圓角、描邊等一系列工具對(duì)原字體筆畫進(jìn)行一些外形上的變化。例如，圓角工具把筆畫轉(zhuǎn)折處變直為曲，描邊工具使字體加粗或減細(xì)，傾斜工具可以加強(qiáng)字體的力度與動(dòng)感。如圖（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

字體的創(chuàng)意5.符號(hào)拼接法。是通過拆解外文或標(biāo)點(diǎn)符號(hào)獨(dú)特的筆畫裝飾，再按照漢字的字形結(jié)構(gòu)去組合。這種方法使用較多的字體是藏文、中世紀(jì)的手寫卷花體等。設(shè)計(jì)師也可以嘗試拆解其他字體的筆畫結(jié)構(gòu)，搭配幾何圖形進(jìn)行新的字型重組，效果也不錯(cuò)。如圖（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

字體的創(chuàng)意6.氛圍裝飾法。適用于各種節(jié)日，設(shè)計(jì)師在設(shè)計(jì)好的基礎(chǔ)字型周圍添加放射線、波點(diǎn)等幾何形狀，或花型，來烘托氣氛，對(duì)字體含義的表達(dá)起到輔助作用。如圖（五）任務(wù)實(shí)施步驟一

調(diào)整標(biāo)題文字格式在PS中打開圖2.2.1所示“蘇打水推廣.psd”。使用文字工具點(diǎn)擊標(biāo)題，設(shè)置圖層樣式，描邊，3像素，顏色為“#fb6c83”，使用選擇工具，點(diǎn)擊小標(biāo)題，將小標(biāo)題適當(dāng)往上移。如圖2.2.9所示。圖2.2.9調(diào)整標(biāo)題文字格式（五）任務(wù)實(shí)施步驟二

調(diào)整價(jià)格活動(dòng)欄文字格式選中滿98元減15元，設(shè)置圖層樣式，描邊，2像素，顏色為“#000000”，使用選擇工具，點(diǎn)擊價(jià)格，適當(dāng)往下移動(dòng)。最終效果如圖2.2.10所示。圖2.2.10調(diào)整價(jià)格活動(dòng)欄文字格式（六）任務(wù)拓展“愛尚乳飲”網(wǎng)店為了提高“雙十二”銷售額，決定制作獨(dú)有的“雙十二”卡通字，以便應(yīng)用到網(wǎng)店促銷商品圖中。參考圖2.2.11所示制作風(fēng)格獨(dú)特的卡通字體。圖2.2.11卡通字體設(shè)計(jì)THANK

YOU（一）任務(wù)工單任務(wù)目的：利用圖形圖像處理軟件，了解視覺構(gòu)圖和頁面布局；以獨(dú)特的視覺沖擊，讓顧客留下深刻印象，提高推廣轉(zhuǎn)化率。任務(wù)描述：在雜亂的畫面中，根據(jù)對(duì)畫面和商品信息的分析，提煉出合理構(gòu)圖布局，利用Photoshop2020軟件中移動(dòng)、字體、選框等相關(guān)工具完成圖片的構(gòu)圖及內(nèi)容排版。知識(shí)目標(biāo)：了解視覺構(gòu)圖和頁面布局的種類、對(duì)商品特點(diǎn)和排版的關(guān)系有初步了解。能力目標(biāo)：能使用圖形圖像處理軟件；能綜合各種視覺元素進(jìn)行設(shè)計(jì)；能優(yōu)化構(gòu)圖和排版。思政元素：店鋪的“滿減”活動(dòng)，要符合社會(huì)主義核心價(jià)值觀中“誠信”原則。（二）任務(wù)情境“

愛尚乳飲”網(wǎng)店為了提高“雙十一”銷售額，決定優(yōu)化店內(nèi)詳情頁圖片的視覺構(gòu)圖和頁面布局。通過重新構(gòu)圖，吸引流量，提高網(wǎng)店的銷售額。圖2.3.1詳情頁片段原圖圖2.3.2優(yōu)化后的詳情頁片段（三）任務(wù)解析根據(jù)提供的商品詳情頁的片段PSD文件，調(diào)整各個(gè)圖層的構(gòu)圖，優(yōu)化商品的排版。如圖2.3.1所示，通過賣點(diǎn)文案，突出店鋪本次活動(dòng)的優(yōu)惠券和活動(dòng)期限等信息。優(yōu)化后的詳情頁如圖2.3.2所示。店鋪贈(zèng)送優(yōu)惠券，開展“滿減”活動(dòng)，主要目的是促銷，吸引顧客下單。促銷活動(dòng)要符合社會(huì)主義核心價(jià)值觀中“誠信”原則，不搞虛假宣傳，促進(jìn)社會(huì)文明、和諧發(fā)展。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一 視覺構(gòu)圖畫面的構(gòu)圖是視覺藝術(shù)作品中最直接、最基本的表現(xiàn)形式之一。衡量畫面中條線、形狀的長(zhǎng)度、寬度和角度，以及畫面元素之間的比例、間隔與關(guān)系等，是構(gòu)圖的核心。構(gòu)圖的過程需要綜合運(yùn)用多種藝術(shù)技法：1. 中心構(gòu)圖法：是將主體放置在畫面中心進(jìn)行構(gòu)圖。這種構(gòu)圖方式的最大優(yōu)點(diǎn)就在于主體突出、明確，而且畫面容易取得左右平衡的效果。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一 視覺構(gòu)圖水平線構(gòu)圖法：是最基本的構(gòu)圖法，以水平線條為主。水平、舒展的線條能夠表現(xiàn)出寬闊、穩(wěn)定、和諧的感覺，通常運(yùn)用在湖面、水面、草原等等。垂直線構(gòu)圖法：畫面中以垂直線條為主。運(yùn)用垂直線構(gòu)圖時(shí)，物品自身就符合垂直線特征，例如樹木。垂直線在人們的心里是符號(hào)化象征，能充分展示景物的高大和深度。三分構(gòu)圖法：也稱作井字構(gòu)圖法，在這種方法中，需要將場(chǎng)景用兩條豎線和兩條橫線分割，這樣可以得到

4

個(gè)交叉點(diǎn)，將畫面重點(diǎn)放置在

4

個(gè)交叉點(diǎn)中的一個(gè)即可。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一 視覺構(gòu)圖對(duì)稱構(gòu)圖法：按照一定的對(duì)稱軸或?qū)ΨQ中心，使畫面中景物形成軸對(duì)稱或者中心對(duì)稱。引導(dǎo)線構(gòu)圖法：即利用線條引導(dǎo)觀者的目光，使之匯聚到畫面的焦點(diǎn)。引導(dǎo)線不一定是具體的線，凡有方向的、連續(xù)的物品，都可以作為引導(dǎo)線?？蚣軜?gòu)圖法：將畫面重點(diǎn)利用框架框起來的構(gòu)圖方法，會(huì)引導(dǎo)觀者注意框內(nèi)景象，產(chǎn)生跨過門框即進(jìn)入畫面的感受。重復(fù)構(gòu)圖法：當(dāng)主體是同樣的物品，將這一群主體同時(shí)重復(fù)呈現(xiàn)的構(gòu)圖方法。單調(diào)地重復(fù)同一物體，占據(jù)整個(gè)畫面并且沒有明顯雜亂的其它物體出現(xiàn)，起到突出主體的效果。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

頁面布局1.卡片式2.分屏式3.大標(biāo)題式4.個(gè)性化推薦5.網(wǎng)格式6.導(dǎo)航標(biāo)簽7.內(nèi)容輪播（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

頁面布局卡片式頁面布局：卡片就是交互信息的承載體，通常以一個(gè)濃縮的形式提供相關(guān)頁面內(nèi)容。卡片式頁面布局非常適合在頁面上放置大量?jī)?nèi)容，同時(shí)又使每個(gè)內(nèi)容保持鮮明。分屏式頁面布局：這種布局既指垂直拆分屏幕，也指水平拆分屏幕。是將頁面分割為均等或者不均等的兩部分，這種方式的好處就是可以將文字信息和圖像元素進(jìn)行更有效的布局區(qū)分，讓信息更有條理，人們更容易閱讀。大標(biāo)題式頁面布局：隨著移動(dòng)端頁面設(shè)計(jì)的興起，大字體的排版設(shè)計(jì)得到了普及，大號(hào)字體在標(biāo)題中特別受歡迎。較大的文本更具有易讀性，并改善了用戶體驗(yàn)。個(gè)性化推薦頁面布局：通過用戶的個(gè)性化需求給其推薦符合需求的內(nèi)容。如京東、天貓等電商平臺(tái)，首頁商品流會(huì)根據(jù)購物行為數(shù)據(jù)推薦可能想買的物品。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

頁面布局網(wǎng)格式頁面布局：信息被組織成網(wǎng)格，使其易于瀏覽。網(wǎng)格允許將文本、照片、視頻平均分配到頁面上，讓用戶決定每個(gè)單元的重要性。導(dǎo)航標(biāo)簽頁面布局：導(dǎo)航標(biāo)簽是產(chǎn)品的主要框架，其架構(gòu)分布基本都是由標(biāo)簽導(dǎo)航來組織，讓用戶了解這款產(chǎn)品的主要功能。內(nèi)容輪播頁面布局：通常在頁面的頂部找到。一般包含與文本相結(jié)合的圖像。當(dāng)空間有限時(shí)，它們用于在頁面的單個(gè)部分中顯示多個(gè)內(nèi)容。輪播允許在同一區(qū)域展示多個(gè)重要內(nèi)容輪播，非常適合在電子商務(wù)網(wǎng)站上展示特色產(chǎn)品。（五）任務(wù)實(shí)施打開“詳情頁優(yōu)化排版.psd，使用移動(dòng)工具將圖2.3.1頁面布局，參考圖2.3.2的布局樣式，重新實(shí)施頁面排版，使用重排后的頁面布局合理，重點(diǎn)突出店鋪本次活動(dòng)的優(yōu)惠券和活動(dòng)期限等信息。圖2.3.2（六）任務(wù)拓展根據(jù)提供的草本精華面膜素材，合理構(gòu)圖和布局，設(shè)計(jì)和制作一張商品的介紹橫幅，要求版面設(shè)計(jì)合理，重點(diǎn)突出。最終制作效果如圖2.3.18所示。圖2.3.18

草本精華面膜橫幅參考效果THANK

YOU（一）任務(wù)工單任務(wù)目的：利用圖形圖像處理軟件，使用魔棒，快速選擇工具，選框工具等功能摳出商品。任務(wù)描述：利用魔棒工具和快速選擇選定商品輪廓，修改容差數(shù)據(jù)增加摳圖后商品平滑度，獲得自然無鋸齒的商品摳圖；利用鋼筆工具，在商品輪廓添加多個(gè)錨點(diǎn)，手動(dòng)修改錨點(diǎn)位置，形成封閉曲線路徑，將路徑變?yōu)檫x框，去除未選中部分，獲得自然無鋸齒的商品摳圖。知識(shí)目標(biāo)：了解魔棒，快速選擇工具，選框工具等功能。能力目標(biāo)：能利用圖形圖像處理軟件，快速，準(zhǔn)確，摳出商品。思政元素：背景復(fù)雜的商品摳圖需要耐心和細(xì)心，需要精益求精的“工匠精神”。（二）任務(wù)情境“愛尚乳飲”網(wǎng)店為了提高“雙十一”銷售額，上架一款新商品，需要把拍攝的商品從白底圖中摳出，便于店鋪制作新品促銷相關(guān)圖片。（三）任務(wù)解析根據(jù)提供的商品白色背景圖，如圖2.4.1所示，從中摳出商品，放置到透明背景的圖中，商品完整，無鋸齒無毛邊，效果如圖2.4.2所示。圖2.4.1

商品白底圖圖2.4.2摳出透明背景商品圖（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一

魔棒工具魔棒工具是Photoshop中提供的一種比較快捷的摳圖工具，對(duì)于一些背景比較單一、分界線比較明顯的圖像，通過魔棒工具可以很快速的將圖像摳出。魔棒的作用是可以知道點(diǎn)擊區(qū)域的顏色，并自動(dòng)獲取附近區(qū)域相同的顏色，使它們處于選擇狀態(tài)。利用魔術(shù)棒工具摳圖過程：①

按住Ctrl+O快捷鍵打開一張圖片，并切換到魔棒工具（快捷鍵W）；②

在選項(xiàng)欄里調(diào)整合適的容差大小，再對(duì)圖片進(jìn)行點(diǎn)選，按住shift就是增加選區(qū)，按住alt是減去選區(qū)；③

右單擊找到“選擇反向”并選中（快捷鍵Ctrl+Shift+I），這樣就可以反選選區(qū)；④

按住Ctrl+J

將圖層復(fù)制出來，完成摳圖。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二

磁性套索工具磁性套索工具不需要按鼠標(biāo)左鍵直接移動(dòng)鼠標(biāo)，在工具頭處會(huì)出現(xiàn)自動(dòng)跟蹤的線，這條線總是走向顏色與顏色邊界處，邊界越明顯磁力越強(qiáng)，將首尾連接后可完成選擇，一般用于顏色與顏色差別比較大的圖像選擇。利用磁性套索工具摳圖過程：①

打開圖片，并將工具欄切換到磁性工具（快捷鍵L）；②

利用磁性工具對(duì)想要摳出來的圖片進(jìn)行描線；③

首尾相接形成封閉區(qū)域，完成選區(qū)，完成摳圖。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備三

多邊形套索工具多邊形套索工具用于框選多邊形或棱角分明圖像。利用多邊形套索工具摳圖過程：①

在工具欄中切換到工具欄切換到多邊形工具（快捷鍵L）,找到關(guān)鍵的點(diǎn)，用直線連接，首尾相接形成封閉區(qū)域，完成選區(qū)。②

按住Ctrl+J

將圖層復(fù)制出來，完成摳圖。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備四

鋼筆工具利用鋼筆工具進(jìn)行摳圖是一種非常常見的摳圖方式，它能做到高精度的描繪主體邊緣。利用鋼筆工具需要耐心和細(xì)心，要制作完善的店鋪美工圖，需要精益求精的“工匠精精神”，它也是我們職業(yè)能力、職業(yè)品質(zhì)的體現(xiàn)。利用鋼筆工具摳圖過程：① 點(diǎn)擊工具箱中的“鋼筆工具”按鈕，在選項(xiàng)欄中選擇矢量繪圖模式為“路徑”；② 將光標(biāo)移動(dòng)到圖像中圖形的邊緣，單擊鼠標(biāo)左鍵即可創(chuàng)建一個(gè)錨點(diǎn)，接著將鼠標(biāo)移動(dòng)到第二個(gè)位置單擊，創(chuàng)建第二個(gè)錨點(diǎn)，此時(shí)兩個(gè)錨點(diǎn)會(huì)鏈接成一條直線路徑；③ 如果要用鋼筆工具畫曲線路徑，需要在創(chuàng)建完第二個(gè)錨點(diǎn)后按住鼠標(biāo)左鍵不放并進(jìn)行拖拽，可以繪制曲線路徑，曲線路徑的方向、弧度及形狀可以通過拖動(dòng)方向線來進(jìn)行控制；按住Shift鍵可以繪制水平、垂直或者以45°角為增量的直線；（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備四

鋼筆工具利用鋼筆工具進(jìn)行摳圖是一種非常常見的摳圖方式，它能做到高精度的描繪主體邊緣。利用鋼筆工具需要耐心和細(xì)心，要制作完善的店鋪美工圖，需要精益求精的“工匠精精神”，它也是我們職業(yè)能力、職業(yè)品質(zhì)的體現(xiàn)。利用鋼筆工具摳圖過程：④ 當(dāng)繪制曲線轉(zhuǎn)折向直線時(shí)，在轉(zhuǎn)折錨點(diǎn)處可以先按住Alt鍵將鋼筆工具切換到轉(zhuǎn)換點(diǎn)工具，然后單擊轉(zhuǎn)折位置的錨點(diǎn)，再繼續(xù)繪制直線路徑；⑤ 如果要在繪制過程中調(diào)整錨點(diǎn)的位置，可以按住Ctrl鍵切換到直接選擇工具，點(diǎn)擊錨點(diǎn)并按住鼠標(biāo)左鍵進(jìn)行拖動(dòng)即可改變錨點(diǎn)的位置。隨著錨點(diǎn)位置的改變，路徑形狀等也發(fā)生改變；⑥ 當(dāng)繪制到起始錨點(diǎn)位置時(shí)，光標(biāo)變?yōu)榱恕颁摴P圖標(biāo)帶小圓圈”的形狀后，單擊即可閉合路徑?？梢园绰窂睫D(zhuǎn)換為選區(qū)的快捷鍵：Ctrl+Enter將該路徑轉(zhuǎn)換為選區(qū)，既可以在選區(qū)中進(jìn)行摳圖。（五）任務(wù)實(shí)施使用PS打開文件“奶茶商品白底圖.jpg”

(位置：教材資源/素材文件/模塊2.4/)，點(diǎn)擊魔棒工具，容差設(shè)置為10，點(diǎn)擊圖片白色背景的部分，此時(shí)圖片中白色部分被選中。如圖2.4.3所示。打開“選擇”菜單，選擇“反選”（或快捷鍵Shift+Ctrl+I）。按住Ctrl+J

將圖層復(fù)制出來，關(guān)閉背景圖層，完成摳圖，效果如圖2.4.2所示。圖2.4.3

商品白底補(bǔ)選中效果（六）任務(wù)拓展某箱包網(wǎng)店新到一款拉桿箱，準(zhǔn)備作為新品重點(diǎn)推廣，請(qǐng)將拉桿箱從實(shí)拍圖中摳出，要求摳圖完整，邊無鋸齒無毛邊?？梢跃C合運(yùn)用各種摳圖方法。文件“任務(wù)拓展-行禮箱.jpg。圖2.4.4

拉桿箱摳圖素材THANK

YOU（一）任務(wù)工單任務(wù)目的：了解活動(dòng)文案、商品文案等不同類別文案；了解如何根據(jù)商品及活動(dòng)特點(diǎn)提煉相關(guān)文案。任務(wù)描述：根據(jù)三種商品的屬性特點(diǎn)及所在活動(dòng)，通過橫向?qū)Ρ仁忻娓?jìng)品，提煉出區(qū)別于其他商品的賣點(diǎn)爆點(diǎn)，突出活動(dòng)優(yōu)惠、商品賣點(diǎn)，創(chuàng)作出精準(zhǔn)、吸睛的商品文案。知識(shí)目標(biāo)：了解商品文案的基本構(gòu)成，對(duì)如何提煉關(guān)鍵詞有深入的認(rèn)識(shí)。能力目標(biāo)：熟練掌握商品及活動(dòng)關(guān)鍵詞的提煉技能；熟練運(yùn)用該技能對(duì)關(guān)鍵詞進(jìn)行創(chuàng)意整合，撰寫出契合商品、突出賣點(diǎn)的優(yōu)質(zhì)文案。思政元素：文案撰寫要符合中國特色社會(huì)主義的精神文明，彰顯中國特色社會(huì)主義的顯著特征和內(nèi)在品質(zhì)。（二）任務(wù)情境“愛尚乳飲”網(wǎng)店為了提高“雙十一”銷售額，決定重新設(shè)計(jì)三款新品主圖文案。（三）任務(wù)解析根據(jù)提供的店鋪商品主圖PSD文件，優(yōu)化主圖文案。（四）知識(shí)準(zhǔn)備商品文案優(yōu)化的主要關(guān)注點(diǎn)：商品的重要屬性。在商品詳情頁對(duì)商品進(jìn)行描述時(shí)，一定要突出商品的重要屬性，讓顧客能清楚地了解商品的參數(shù)和適用范圍。商品優(yōu)勢(shì)。商品是網(wǎng)店的核心，因此文案創(chuàng)作必須突出產(chǎn)品的優(yōu)勢(shì)。在進(jìn)行商品介紹和描述的時(shí)候，要將商品最具特色的地方和優(yōu)勢(shì)展現(xiàn)出來，用合理簡(jiǎn)潔的文字做好介紹。為店鋪創(chuàng)作核心品牌詞。相信開設(shè)網(wǎng)店，一定有自己的想法和目標(biāo)，可以方案創(chuàng)作的時(shí)候，多發(fā)揮自己的情感以及靈感，做到真誠動(dòng)人。廣告用語。廣告語可以幫助店鋪樹立良好形象，但是需要注意不要過于夸張。如“小店剛剛開張，誠信經(jīng)營(yíng)，做讓顧客滿意和放心的店鋪！”，通過平實(shí)的語句更能打動(dòng)顧客。抓住用戶心理。店鋪的文案，都是為了能夠讓用戶看到，并獲得好的反饋，因此在文案創(chuàng)作的時(shí)候，也可以換位思考，寫出用戶喜歡和需要的內(nèi)容，進(jìn)而打動(dòng)顧客。商品文案撰寫量，必須體現(xiàn)中國特色社會(huì)主義的精神文明，彰顯中國特色社會(huì)主義的顯著特征和內(nèi)在品質(zhì)；努力發(fā)揮社會(huì)主義核心價(jià)值觀對(duì)精神文化產(chǎn)品創(chuàng)作傳播的引領(lǐng)作用。（五）任務(wù)實(shí)施“愛尚乳飲”網(wǎng)店即將要銷售豆奶、奶茶、蘇打水三款商品(素材位置：教材資源/素材文件/模塊2.5/)，現(xiàn)在為這三款新品，設(shè)計(jì)商品簡(jiǎn)潔上口的賣點(diǎn)文案；并將文案用適合字體添加到商品主圖。1.豆奶賣點(diǎn)文案參考：①每天一杯豆奶，美容養(yǎng)顏還不餓！②植物營(yíng)養(yǎng)，好吸收?、蹪庥舳鼓?叫醒一天活力元?dú)?2.奶茶賣點(diǎn)文案參考：①滴滴真滋味，濃濃奶茶香!②紅茶配鮮奶,味你更精彩!③好喝的秘密全在鮮奶里面哦!3.蘇打水賣點(diǎn)文案參考：①蘇打水天生,養(yǎng)胃泉天成!②天然萬年，潤(rùn)水又潤(rùn)心解酒養(yǎng)胃蘇打水，提神養(yǎng)顏容貌美!③你是我的小蘇打,甜蜜只為你綻放!（六）任務(wù)拓展某小家電店鋪，“12.12”準(zhǔn)備對(duì)某品牌的男式電動(dòng)剃須刀進(jìn)行推廣，請(qǐng)?jiān)趫D2.5.1所示“任務(wù)拓展-新品上架文案設(shè)計(jì).jpg中的虛線框處，設(shè)計(jì)合適的商品介紹文案，以便吸引顧客購買。文案設(shè)計(jì)完成后，請(qǐng)將文案以合適的方式，添加到圖片的虛線框處。圖2.5.1

剃須刀推廣圖THANK

YOU新形態(tài)活頁式教材和融媒體一體化教學(xué)《網(wǎng)店視覺營(yíng)銷設(shè)計(jì)》網(wǎng)店首頁作為網(wǎng)店的門面，其作用主要是通過頁面的視覺，商品，促銷，服務(wù)等綜合氛圍，讓消費(fèi)者對(duì)店鋪和產(chǎn)品有初步的了解，從而產(chǎn)生興趣和購買欲望，促進(jìn)商品銷售，首頁效果是否出彩會(huì)直接影響網(wǎng)店的流量，一個(gè)完整的網(wǎng)店首頁由各個(gè)模塊組成，每個(gè)模塊都具有其獨(dú)特的功能，其中主要包括店標(biāo)、店招、首頁焦點(diǎn)輪播圖、優(yōu)惠券、商品分類和商品促銷圖等。本章節(jié)主要任務(wù)是完成店鋪首頁的視覺營(yíng)銷設(shè)計(jì)與制作。“電子商務(wù)技能”技能大賽要求：網(wǎng)店美工模塊（店標(biāo)店招設(shè)計(jì)、首頁輪播圖設(shè)計(jì)）?！熬W(wǎng)店運(yùn)營(yíng)推廣”1+X

證書（初級(jí)）要求：PC端店鋪首頁設(shè)計(jì)與制作。THANK

YOU（一）任務(wù)工單任務(wù)目的：確定網(wǎng)店整體裝修風(fēng)格，把握網(wǎng)店的主題定位，根據(jù)網(wǎng)店首頁內(nèi)容確定網(wǎng)店首頁設(shè)計(jì)方案。任務(wù)描述：重點(diǎn)突出春夏上新的營(yíng)銷氛圍，為愛尚服飾網(wǎng)店進(jìn)行網(wǎng)店首頁設(shè)計(jì)分析知識(shí)目標(biāo)：了解網(wǎng)店首頁制作規(guī)范和網(wǎng)店首頁類型。能力目標(biāo)：能根據(jù)活動(dòng)主題，產(chǎn)品定位等元素進(jìn)行網(wǎng)店首頁內(nèi)容有序安排，設(shè)計(jì)具有營(yíng)銷氛圍的網(wǎng)店首頁。思政元素：培養(yǎng)學(xué)生誠信經(jīng)營(yíng)，杜絕虛假宣傳行為

。（二）任務(wù)情境愛尚服飾是一家主營(yíng)各類女裝、男裝、女鞋、男鞋等的綜合性服飾網(wǎng)店，準(zhǔn)備在淘寶網(wǎng)開設(shè)第一家線上網(wǎng)店，網(wǎng)店注冊(cè)成功后，正好搭上了春夏新品上新的一波潮流，愛尚服飾準(zhǔn)備以春夏新品上新為主題活動(dòng)，進(jìn)行網(wǎng)店裝修。網(wǎng)店裝修是一個(gè)持續(xù)性很強(qiáng)的工作，需要付出很多時(shí)間和精力去完成。優(yōu)秀的網(wǎng)店裝修不是一成不變的，它會(huì)根據(jù)商品的變化，季節(jié)的變化，促銷活動(dòng)的變化而進(jìn)行相應(yīng)的調(diào)整，其中，首頁的裝修又是網(wǎng)店的門面，一個(gè)設(shè)計(jì)感強(qiáng)的首頁，不僅能提升網(wǎng)店的品質(zhì)，也會(huì)讓買家對(duì)網(wǎng)店產(chǎn)生初步信任，從而提高轉(zhuǎn)化率。本次網(wǎng)店首頁設(shè)計(jì)重點(diǎn)突出上新的營(yíng)銷氛圍，使網(wǎng)店商品和網(wǎng)店活動(dòng)整體風(fēng)格相符。（三）任務(wù)解析愛尚服飾網(wǎng)店首頁設(shè)計(jì)，第一步要跟網(wǎng)店?duì)I銷人員充分溝通，根據(jù)網(wǎng)店產(chǎn)品，營(yíng)銷活動(dòng)等確定網(wǎng)店的整體設(shè)計(jì)風(fēng)格，把握網(wǎng)店主題定位，其次是確定網(wǎng)店首頁的具體內(nèi)容，最后根據(jù)網(wǎng)店內(nèi)容來確定網(wǎng)店首頁的最終設(shè)計(jì)方案，完成整體布局。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一

了解網(wǎng)店首頁下圖為天美意官方旗艦店首頁，從圖3.1.1中可以看出，店招位于整個(gè)頁面頂端，下面緊接著是焦點(diǎn)圖，讓顧客首先了解網(wǎng)店最近的營(yíng)銷活動(dòng)和上新。優(yōu)惠活動(dòng)區(qū)主要有網(wǎng)店滿減優(yōu)惠券，入會(huì)活動(dòng)，充值折上折三部分組成，優(yōu)惠區(qū)下面是根據(jù)熱門搜索關(guān)鍵詞設(shè)置的商品分類入口，最下面一部分是商品促銷陳列區(qū)，主要突出產(chǎn)品和價(jià)格，一個(gè)完整的網(wǎng)店首頁不僅介紹了網(wǎng)店信息，網(wǎng)店活動(dòng)也很好的展示了網(wǎng)店商品。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一

了解網(wǎng)店首頁（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一

了解網(wǎng)店首頁（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一

了解網(wǎng)店首頁（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二 網(wǎng)店首頁主要內(nèi)容一個(gè)網(wǎng)店首頁的裝修好壞會(huì)直接影響網(wǎng)店的流量。布局合理，具有吸引力的網(wǎng)店首頁會(huì)無形中增加消費(fèi)者的訪問深度，提高轉(zhuǎn)化率。網(wǎng)店首頁內(nèi)容一般包括店標(biāo)、店招、首頁焦點(diǎn)圖等內(nèi)容：店招。店招位于網(wǎng)店首頁的頂端位置，用于傳遞網(wǎng)店信息，一般有LOGO標(biāo)識(shí)，網(wǎng)店名稱，商品圖片，廣告語、優(yōu)惠活動(dòng)、導(dǎo)航條等信息組成。店標(biāo)。店標(biāo)代表著特定的形象，是品牌傳遞過程中應(yīng)用最廣泛、出現(xiàn)頻率最高的元素，是區(qū)別于其他網(wǎng)店的重要標(biāo)志。店標(biāo)一般位于店招內(nèi)。首頁焦點(diǎn)輪播圖。通常位于店招下面，是網(wǎng)店的橫幅廣告，一般用于宣傳網(wǎng)店的熱銷產(chǎn)品，網(wǎng)店活動(dòng)信息等內(nèi)容，在版面設(shè)計(jì)上要足夠吸引買家的視線。通常由兩張及兩張以上的橫幅海報(bào)組成。優(yōu)惠券。是商家為了促成銷售而設(shè)置的優(yōu)惠活動(dòng)，對(duì)于網(wǎng)店來說可以提高網(wǎng)店購買率，刺激買家下單，提升客單價(jià)。商品分類。一個(gè)優(yōu)秀的商品分類設(shè)計(jì)不僅可以讓買家更加方便快捷的找到自己所需要的商品，還具備了很好的商品推薦作用，同時(shí)也能方便網(wǎng)店商品的分類管理。商品促銷展示圖。相當(dāng)于網(wǎng)店的櫥窗，在首頁中主要用來展示網(wǎng)店爆款產(chǎn)品，熱銷產(chǎn)品，最新單品等商品信息，讓顧客很快就能找到賣家最想推薦的產(chǎn)品，提高下單率。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備三 網(wǎng)店首頁類型品牌型網(wǎng)店首頁。這類網(wǎng)店主要是依靠品牌形象來進(jìn)行商品營(yíng)銷。視覺設(shè)計(jì)大氣簡(jiǎn)約，頁面風(fēng)格與線下品牌風(fēng)格基本保持一致，強(qiáng)調(diào)品牌LOGO和品牌名，品牌的質(zhì)量和服務(wù)，設(shè)計(jì)上反而會(huì)弱化促銷價(jià)格等的呈現(xiàn)效果，比如用比較淡的顏色、小的字體來呈現(xiàn)頁面中價(jià)格，優(yōu)惠活動(dòng)等信息，重點(diǎn)突出品牌產(chǎn)品的價(jià)值和特色。營(yíng)銷型網(wǎng)店首頁。這類網(wǎng)店在視覺設(shè)計(jì)上會(huì)更加賣力的展示營(yíng)銷促銷氛圍，重點(diǎn)突出活動(dòng)優(yōu)惠信息等，頁面效果中在字體和色彩上努力展示營(yíng)銷設(shè)計(jì)，比如通過數(shù)字等形式表現(xiàn)出具體的優(yōu)惠信息，在數(shù)字的顏色，大小上都有所強(qiáng)調(diào)。誠信經(jīng)營(yíng)，杜絕虛假宣傳行為。比如有些網(wǎng)店在做廣告時(shí)聲稱其產(chǎn)品質(zhì)量更好，價(jià)格更優(yōu)惠，但未提供任何證明，且未能提供可靠的數(shù)據(jù)支持其聲稱的優(yōu)勢(shì)，屬于虛假宣傳行為。當(dāng)然，有的網(wǎng)店并沒有明確的定位，一般來說首頁都會(huì)展示產(chǎn)品優(yōu)勢(shì)和促銷信息。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備四 網(wǎng)店首頁設(shè)計(jì)原則網(wǎng)店首頁裝修要符合網(wǎng)店的形象，有自己的品牌特色或產(chǎn)品特色；網(wǎng)店首頁裝修要選擇合適的色彩色調(diào)，注重整體頁面風(fēng)格和諧搭配；網(wǎng)店首頁裝修要突出重點(diǎn)，比如促銷、新品、折扣等內(nèi)容，要能在短時(shí)間內(nèi)抓住客戶眼球，以快速精準(zhǔn)的方式將重要信息直接傳達(dá)給顧客；網(wǎng)店首頁導(dǎo)航清晰，要讓顧客隨時(shí)能找到自己所需要的產(chǎn)品；頁面長(zhǎng)度最好不要超過三屏，太長(zhǎng)的頁面容易讓人失去耐性。（五）任務(wù)實(shí)施步驟一 確定網(wǎng)店的整體裝修風(fēng)格網(wǎng)店的裝修風(fēng)格首先體現(xiàn)在網(wǎng)店的整體色彩、色調(diào)和產(chǎn)品的風(fēng)格上，第三方平臺(tái)網(wǎng)站上本身自帶多種風(fēng)格可供選擇，商家可以選擇默認(rèn)的網(wǎng)店模板來進(jìn)行裝修，也可以根據(jù)店內(nèi)商品的特點(diǎn)和營(yíng)銷氛圍來重新設(shè)計(jì)，使網(wǎng)店獨(dú)具特色。愛尚服飾是一家主營(yíng)各類女裝、男裝、女鞋、男鞋等的綜合性服飾網(wǎng)店，本次網(wǎng)店裝修重在突出“春夏上新”的季節(jié)營(yíng)銷因素，將準(zhǔn)備上架的一批春夏裝進(jìn)行促銷活動(dòng)。根據(jù)“春夏上新”的活動(dòng)主題，收集圖片等裝飾元素，確定視覺色彩為綠色。確定網(wǎng)店首頁類型。視覺色彩確定后，做一個(gè)什么類型的網(wǎng)店可通過調(diào)研用戶需求，品牌定位，品牌營(yíng)銷等方面出發(fā)，愛尚服飾本身不是一個(gè)知名品牌，想要打開市場(chǎng)，營(yíng)銷先行。所以本次網(wǎng)店裝修注重營(yíng)造營(yíng)銷氛圍，制作一個(gè)營(yíng)銷型的網(wǎng)店首頁。（五）任務(wù)實(shí)施步驟二 確定網(wǎng)店首頁設(shè)計(jì)方案網(wǎng)店首頁的風(fēng)格確定好后，下面要多和運(yùn)營(yíng)進(jìn)行溝通，融入營(yíng)銷思維，確定網(wǎng)店首頁各部分的內(nèi)容。1.確定網(wǎng)店首頁具體內(nèi)容。這需要美工人員和營(yíng)銷人員進(jìn)行詳細(xì)溝通，了解活動(dòng)主題、主推產(chǎn)品、優(yōu)惠方案等內(nèi)容，然后將溝通的結(jié)果進(jìn)行填表，然后確定最終設(shè)計(jì)方案功能模塊內(nèi)容要求結(jié)論活動(dòng)主題主題內(nèi)容是什么？文案的主次順序是這樣的？活動(dòng)的起止時(shí)間是什么？需要重點(diǎn)展示的元素是什么？主推產(chǎn)品主推產(chǎn)品有哪些？它們分別有什么樣的定位？主推產(chǎn)品的核心賣點(diǎn)是什么？?jī)r(jià)格和折扣分別是什么？推薦的主次順序是什么？?jī)?yōu)惠方案有什么樣的優(yōu)惠信息？具體優(yōu)惠方案是什么？產(chǎn)品分類網(wǎng)店產(chǎn)品共有哪幾個(gè)類別？產(chǎn)品是否有主次之分？產(chǎn)品的展現(xiàn)方式是什么樣的？首頁內(nèi)容頁面從上到下的順序是怎么樣的？（五）任務(wù)實(shí)施步驟二 確定網(wǎng)店首頁設(shè)計(jì)方案2.確定網(wǎng)店首頁設(shè)計(jì)方案。根據(jù)首頁的具體內(nèi)容，確定網(wǎng)店設(shè)計(jì)方案，繪制網(wǎng)店首頁設(shè)計(jì)基本布局。店招首頁焦點(diǎn)輪播圖（一張營(yíng)銷活動(dòng)圖，一張新品推薦圖）優(yōu)惠區(qū)商品分類商品促銷展示區(qū)（五）任務(wù)拓展淘寶“618年中慶”活動(dòng)即將開始，為了順利開展活動(dòng)，每小組自選一種自己最熟悉的產(chǎn)品，比如運(yùn)動(dòng)鞋，確定裝修風(fēng)格，首頁內(nèi)容，完成網(wǎng)店首頁的設(shè)計(jì)規(guī)劃。THANK

YOU（一）任務(wù)工單任務(wù)目的：利用圖形圖像處理軟件，設(shè)計(jì)和制作網(wǎng)店店標(biāo)，以簡(jiǎn)潔明了的構(gòu)圖讓顧客留下深刻印象。任務(wù)描述：通過使用文字，色彩，線條等完成“愛尚服飾”網(wǎng)店店標(biāo)的制作。知識(shí)目標(biāo)：了解鋼筆工具的使用，剪切蒙版的應(yīng)用，橢圓工具的使用，文字應(yīng)用。知道店標(biāo)的類型，店標(biāo)所包含的內(nèi)容和設(shè)計(jì)遵循的原則。能力目標(biāo)：能利用圖形圖像處理軟件，綜合各種視覺元素，設(shè)計(jì)出具有美感和創(chuàng)意的網(wǎng)店店標(biāo)。思政元素：樹立品牌意識(shí)，提升品牌影響力。（二）任務(wù)情境愛尚服飾準(zhǔn)備通過打造網(wǎng)上網(wǎng)店拓寬銷售渠道，裝修網(wǎng)店第一步就是要設(shè)計(jì)一款具有市場(chǎng)傳播度的店標(biāo)，要求店標(biāo)樣式圖文結(jié)合，圖案簡(jiǎn)潔明了，色彩明快，能針對(duì)目標(biāo)市場(chǎng)人群，讓人過目難忘，同兼顧時(shí)尚感，顏色要跟網(wǎng)店的經(jīng)營(yíng)商品或?qū)氊愄卣鞅３诛L(fēng)格一致。（三）任務(wù)解析一個(gè)好的店標(biāo)讓人印象深刻，愛尚服飾店標(biāo)主打明快的顏色和簡(jiǎn)潔的設(shè)計(jì)，通過運(yùn)用橢圓工具，矩形工具，鋼筆工具和矩形選框工具，完成的網(wǎng)店店標(biāo)效果如圖所示（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一 了解店標(biāo)店標(biāo)就是網(wǎng)店的標(biāo)志，是傳達(dá)信息的重要符號(hào)，是電商品牌的核心象征，代表著一個(gè)網(wǎng)店的形象和基本特征，它能帶給人最直觀的品牌感受，可以代表網(wǎng)店的風(fēng)格，網(wǎng)店的經(jīng)營(yíng)理念，產(chǎn)品的類別和特征，是網(wǎng)店或品牌宣傳推廣過程中應(yīng)用最廣泛、出現(xiàn)頻率最高的元素之一。店標(biāo)按照外觀類型分可以分為：1. 文字型。這種店標(biāo)通常是由網(wǎng)店名稱或品牌名稱的英文字母提取而成，或者是中文名稱文字的變形。這種店標(biāo)的風(fēng)格就是將品牌的視覺形象與公司名稱結(jié)合在一起，如下圖所示，奢侈品牌GUCCI的標(biāo)志就是簡(jiǎn)單的英文字母，沒有其他裝飾。小米的標(biāo)志就使用了米字的拼音變形，讓人一目了然。國民品牌美加凈采用了了中英文結(jié)合的方式，并對(duì)中文字做了適當(dāng)?shù)淖冃?。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一 了解店標(biāo)2.

圖片型。相對(duì)于文字性型的店標(biāo)，圖片的識(shí)別度更高，傳達(dá)信息的成本更低，應(yīng)用廣泛。如下圖所示,運(yùn)動(dòng)品牌耐克的標(biāo)志就是一個(gè)簡(jiǎn)單的勾，可以出現(xiàn)在它旗下任何的運(yùn)動(dòng)單品上。蘋果的標(biāo)志是缺了一口的蘋果造型，深入人心。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一 了解店標(biāo)3. 圖文結(jié)合型。這種LOGO設(shè)計(jì)通常由文字和圖形共同組成，既能有直接的語言信息傳播功能，又有直觀的視覺形象，相互補(bǔ)充，相互成就，收到了廣大商家的青睞，使用更加廣泛。如下圖所示。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備一 了解店標(biāo)店標(biāo)按照狀態(tài)區(qū)分還可以分為靜態(tài)店標(biāo)和動(dòng)態(tài)店標(biāo)，相比較而言，動(dòng)態(tài)店標(biāo)更能抓住顧客的眼球，比靜態(tài)店標(biāo)更能成為視覺焦點(diǎn)。淘寶網(wǎng)店用于上傳到網(wǎng)店并被賣家搜索后顯示在結(jié)果頁的店標(biāo)都是正方形小圖，尺寸建議不要超過100像素*100像素，文件大小80K以內(nèi)，格式可以是GIF、JPG、JPEG或者PNG。如下圖3.2.5所示。很多網(wǎng)店通常會(huì)在店招上放上網(wǎng)店的店標(biāo)，把店標(biāo)作為店招頁面的一部分進(jìn)行設(shè)計(jì)，這里店標(biāo)的尺寸建議為230像素*70像素。（四）知識(shí)準(zhǔn)備知識(shí)準(zhǔn)備二 店標(biāo)包含的內(nèi)容店標(biāo)是網(wǎng)店對(duì)外宣傳和推廣的主要元素，設(shè)計(jì)制作店標(biāo)可以包含的內(nèi)容主要包括：品牌標(biāo)志或網(wǎng)店名稱。店標(biāo)可以是本身經(jīng)營(yíng)的品牌標(biāo)志組成，可以是網(wǎng)店的名稱組成，也可以是網(wǎng)店標(biāo)志和網(wǎng)店名稱兩者組合而成。經(jīng)營(yíng)范圍。店標(biāo)的圖形能反映網(wǎng)店所經(jīng)營(yíng)的商品，讓顧客一目了然。經(jīng)營(yíng)理念。有的品牌會(huì)在店標(biāo)設(shè)計(jì)中加入經(jīng)營(yíng)理念，起到強(qiáng)化引導(dǎo)的作用，容易讓顧客對(duì)網(wǎng)店產(chǎn)生信任感，從而提升網(wǎng)店的轉(zhuǎn)化率，比如“正品保障”“專注品牌20年”等。網(wǎng)店網(wǎng)址。出現(xiàn)在店標(biāo)中的網(wǎng)址會(huì)強(qiáng)化人們對(duì)網(wǎng)店網(wǎng)址的記憶。（五）任務(wù)實(shí)施步驟一 制作店標(biāo)圖案①

在

Photoshop

中新建文件，大小為

230*70像素，分辨率為

72

像素/英寸，背景為白色，標(biāo)題名“愛尚服飾店標(biāo)”。②

選擇橢圓工具，在屬性欄中設(shè)置填充顏色為“#bc0000”，按住Shift鍵，在畫布左側(cè)畫正圓。復(fù)制本圖層形成新圖層，修改新圖層正圓填充顏色為“#ff9f00”，柵格化新圖層。③

選擇視圖菜單，分別新建垂直參考線和水平參考線定位在圓中心，選擇矩形選框工具，選擇黃色圓圖形的下半部分并刪除，效果如圖

所示。（五）任務(wù)實(shí)施步驟一 制作店標(biāo)圖案④

同時(shí)選擇兩個(gè)半圓圖層，

合并圖層，在新圖層上方新建圖層，選擇矩形工具，畫白色矩形，選擇

該圖層，右擊“創(chuàng)建剪貼蒙版”，隱藏白色矩形多余部分。用Ctrl+T鍵，旋轉(zhuǎn)圖形調(diào)整位置，（五）任務(wù)實(shí)施步驟一

制作店標(biāo)圖案⑤

選擇鋼筆工具，繪制如下圖所示路徑。形成字母A的外輪廓造型。（五）任務(wù)實(shí)施步驟一

制作店標(biāo)圖案⑥

在路徑面板中，選擇“將路徑作為選區(qū)載入”按鈕，將鋼筆繪制的路徑轉(zhuǎn)化為選區(qū)，新建圖層填充白色，取消選區(qū)。效果如圖所示。（五）任務(wù)實(shí)施步驟二 制作店標(biāo)文字①

新建圖層，選擇文字工具，屬性欄中設(shè)置字體為“蘇新詩毛糙體簡(jiǎn)”(字體位置：教材資源/素材文件/模塊3.2/)，字號(hào)為“38”，顏色為“#bc0000”,在A圖形的右側(cè)輸入文字“愛尚服飾”,適當(dāng)調(diào)整位置，效果如下圖所示。②

新建圖層，選擇文字工具，屬性欄中設(shè)置字體為“Algerian”，字號(hào)為“16”，顏色為“#ff9f00”，字符間距：120，輸入大寫的英文字母：“LOVE

FASHION”，店標(biāo)最終效果如圖所示。（六）任務(wù)拓展蝶衣舍女裝公司新成立，主營(yíng)各類女裝，并準(zhǔn)備在淘寶網(wǎng)開設(shè)蝶衣舍女裝網(wǎng)店，對(duì)于一個(gè)網(wǎng)店而言，店標(biāo)