《網(wǎng)店美工（第5版）》教案PAGEPAGE29項(xiàng)目一網(wǎng)店裝修美工設(shè)計(jì)快速入門教學(xué)內(nèi)容一、初識網(wǎng)店裝修二、網(wǎng)店裝修風(fēng)格定位三、分析網(wǎng)店裝修中的常見問題教學(xué)要求【知識目標(biāo)】1．理解網(wǎng)店裝修的重要性。2．明白網(wǎng)店裝修與轉(zhuǎn)化率的關(guān)系。3．掌握分析網(wǎng)店裝修常見問題的方法?！灸芰δ繕?biāo)】1．能夠用有效的方法確定網(wǎng)店裝修的風(fēng)格。2．能夠分析網(wǎng)店裝修中的問題?！舅仞B(yǎng)目標(biāo)】1．重視細(xì)節(jié)，用細(xì)節(jié)處理體現(xiàn)對卓越的追求。2．提升審美能力，緊跟時(shí)代審美趨勢。教學(xué)重點(diǎn)1．網(wǎng)店裝修的重要性2．網(wǎng)店裝修的風(fēng)格定位教學(xué)難點(diǎn)1．網(wǎng)店裝修與轉(zhuǎn)化率的關(guān)系2．網(wǎng)店裝修的風(fēng)格定位教學(xué)方法講授法、案例法、實(shí)踐法課時(shí)數(shù)3課時(shí)教學(xué)內(nèi)容任務(wù)一初識網(wǎng)店裝修一、什么是網(wǎng)店裝修網(wǎng)店裝修是指賣家通過圖形圖像處理軟件對商品圖片進(jìn)行修飾，利用美學(xué)設(shè)計(jì)理念對文字、圖片等素材進(jìn)行組合，給人以舒適、直觀的視覺感受，讓買家從設(shè)計(jì)好的網(wǎng)店中了解到更多的商品信息和網(wǎng)店信息。美觀、大氣、恰如其分的網(wǎng)店裝修可以延長買家在網(wǎng)店中的停留時(shí)間，使買家在瀏覽網(wǎng)頁時(shí)不易出現(xiàn)視覺疲勞，能夠細(xì)心瀏覽網(wǎng)店，從而讓網(wǎng)店實(shí)現(xiàn)提高銷售額的目標(biāo)。二、網(wǎng)店裝修的重要性影響買家是否購買商品的因素主要有首頁裝修、商品圖片、描述專業(yè)度、描述可信度、服務(wù)保障、質(zhì)量保證、商品參數(shù)、使用情況、優(yōu)惠力度、客服態(tài)度等，其中大部分是需要依靠網(wǎng)店裝修來解決的。首頁是一個(gè)網(wǎng)店的門面，需要用心策劃和布局。商品圖片如果沒有經(jīng)過后期的美化，是很難讓買家產(chǎn)生興趣的。網(wǎng)店裝修是提高網(wǎng)店銷售額的法寶，因此網(wǎng)店賣家需要對網(wǎng)店進(jìn)行美化，以吸引更多的買家。三、網(wǎng)店裝修與轉(zhuǎn)化率的關(guān)系網(wǎng)店的銷量高低直接與轉(zhuǎn)化率相關(guān)，而影響轉(zhuǎn)化率的主要因素包括商品的圖片、買家的評價(jià)、賣家的促銷活動等。這些因素都與網(wǎng)店裝修有關(guān)，可見網(wǎng)店裝修與網(wǎng)店的轉(zhuǎn)化率是密不可分的。只有經(jīng)過深思熟慮、精心裝修的網(wǎng)店才更能吸引買家的消費(fèi)興趣，進(jìn)而提高網(wǎng)店的轉(zhuǎn)化率。任務(wù)二網(wǎng)店裝修風(fēng)格定位一、如何確定網(wǎng)店裝修的風(fēng)格網(wǎng)店裝修的風(fēng)格一般體現(xiàn)在網(wǎng)店的整體色彩、色調(diào)及圖片的拍攝風(fēng)格上。電商平臺網(wǎng)站上有多種風(fēng)格的網(wǎng)店裝修模板，賣家可以選擇這些固定的模板來進(jìn)行裝修，也可以根據(jù)店內(nèi)商品的特點(diǎn)和風(fēng)格自行設(shè)計(jì)，使網(wǎng)店裝修獨(dú)具特色，更符合網(wǎng)店的定位。確定網(wǎng)店裝修風(fēng)格的方法如下圖所示。在確定網(wǎng)店裝修的風(fēng)格時(shí)，首先需要做的就是通過綜合用戶研究結(jié)果、品牌營銷策略，采用內(nèi)部討論等方式明確關(guān)鍵詞，如“清爽”“專業(yè)”“有趣”“活力”等。其次邀請用戶、網(wǎng)店美工設(shè)計(jì)人員等參與素材圖片的收集工作，使用圖片展示風(fēng)格、情感，并且分析選擇圖片的原因，挖掘更多背后的故事和細(xì)節(jié)。最后，將素材圖片按照關(guān)鍵詞進(jìn)行分類，提取圖片色彩、配色方案材質(zhì)等方面的特征，作為最終視覺風(fēng)格的參考依據(jù)。二、不同行業(yè)網(wǎng)店裝修的風(fēng)格根據(jù)網(wǎng)店銷售商品的不同，對商品進(jìn)行有效的包裝和設(shè)計(jì)，使商品和網(wǎng)店所呈現(xiàn)出來的視覺效果獨(dú)具特色，在買家心中形成特定的印象，有助于網(wǎng)店自身形象的樹立。任務(wù)三分析網(wǎng)店裝修中的常見問題一、控制裝修圖片的色彩巧妙地運(yùn)用色彩可以使網(wǎng)店頁面變得鮮艷、生動、富有活力，但頁面的顏色不能太多、太雜，要保持統(tǒng)一，要有一個(gè)固定的配色方案對色彩進(jìn)行規(guī)范，以減少視覺干擾。顏色過多容易造成網(wǎng)店頁面的視覺效果復(fù)雜、混亂，對買家獲取商品信息毫無幫助，甚至可能會帶來負(fù)面影響。二、網(wǎng)店風(fēng)格的選擇在網(wǎng)店裝修之初就要確定風(fēng)格，通常情況下會選用“默認(rèn)風(fēng)格”。因?yàn)樯唐返膱D片大多是通過摳圖得到的，背景是白色的，“默認(rèn)風(fēng)格”的背景基本上也是白色的，整體會顯得簡明、舒適。如果商品圖片的背景不是白色的，就可以選擇其他風(fēng)格。此外，在把握網(wǎng)店整體風(fēng)格的同時(shí)，還要考慮其穩(wěn)定性和可更改性。三、控制網(wǎng)店視頻的時(shí)長要想提高商品的轉(zhuǎn)化率，就要在短時(shí)間內(nèi)將有效的信息傳遞給買家。一張靜態(tài)的圖片通常一兩眼就能看完，而一段視頻卻需要花上幾秒甚至更多的時(shí)間。因此，盡管各電商平臺規(guī)定的視頻時(shí)長上限并不短，但是賣家在制作視頻時(shí)仍然要控制好時(shí)間，讓買家能在極短的時(shí)間內(nèi)了解商品并做出購買的決定。項(xiàng)目實(shí)訓(xùn)：安踏天貓旗艦店首頁設(shè)計(jì)分析觀察安踏的天貓旗艦店首頁（見教材P12），請分別從網(wǎng)店風(fēng)格、色彩等方面對其網(wǎng)店首頁設(shè)計(jì)進(jìn)行分析。歸納與提高對于同樣的商品，有的網(wǎng)店賣家就能把商品賣出去，生意做得風(fēng)生水起，有的賣家發(fā)布的商品則無人問津。買家為什么會對相同的商品有截然不同的態(tài)度呢？除了推廣方式和營銷手段外，網(wǎng)店裝修的作用也不可小覷。商品再好，吸引不來買家也毫無用處。因此，對于賣家來說，網(wǎng)店裝修是決定網(wǎng)店成敗的重要因素之一。通過本項(xiàng)目的學(xué)習(xí)，我們理解了網(wǎng)店裝修的重要性，明白了網(wǎng)店裝修與轉(zhuǎn)化率的關(guān)系，學(xué)會了用有效的方法確定網(wǎng)店的裝修風(fēng)格，也要注意網(wǎng)店裝修細(xì)節(jié)問題，避免客流量的流失。項(xiàng)目二網(wǎng)店裝修四大要點(diǎn)教學(xué)內(nèi)容一、圖片——精心準(zhǔn)備圖片素材二、配色——網(wǎng)店色彩搭配三、布局——規(guī)劃網(wǎng)店頁面布局四、文字——制作網(wǎng)店頁面文字教學(xué)要求【知識目標(biāo)】1．掌握拍攝商品圖片的基本技巧。2．熟知常見的配色方法。3．了解頁面布局的組成要素和方式。4．學(xué)會使用布局來突出畫面的層次感和主次感。【能力目標(biāo)】1．能夠?qū)W(wǎng)店頁面進(jìn)行配色。2．能夠根據(jù)設(shè)計(jì)風(fēng)格收集修飾素材。3．能夠?qū)Χ温湮淖诌M(jìn)行合理排列，打造具有高表現(xiàn)力的文字造型，并利用文字營造特定的氛圍。【素養(yǎng)目標(biāo)】1．堅(jiān)定文化自信，在網(wǎng)店裝修設(shè)計(jì)中可以植入中華優(yōu)秀傳統(tǒng)文化元素。2．強(qiáng)化全局視野和系統(tǒng)思維，能夠站在全局的角度統(tǒng)籌考慮網(wǎng)店裝修設(shè)計(jì)。教學(xué)重點(diǎn)1．拍攝商品圖片的基本技巧2．常用的配色方法和技巧3．頁面布局的組成要素和布局方式4．如何打造具有高表現(xiàn)力的文字造型教學(xué)難點(diǎn)1．拍攝商品圖片2．常用的配色方法和技巧3．利用文字營造特定的氛圍教學(xué)方法講授法、案例法、實(shí)踐法課時(shí)數(shù)4課時(shí)教學(xué)內(nèi)容任務(wù)一圖片——精心準(zhǔn)備圖片素材一、拍攝商品圖片在網(wǎng)店裝修之前，首先需要拍攝足夠的商品圖片。只有從不同的角度拍攝商品，充分展示出商品更多的細(xì)節(jié)，才能最終打動買家。在拍攝某些商品的過程中，為了讓圖片中商品的色澤和質(zhì)感更加接近人眼看到的效果，還需要布置簡易的拍攝場景，讓拍攝中的光線滿足所需要的強(qiáng)度，使圖片中的商品清晰地展現(xiàn)出來。除了要布置拍攝環(huán)境、拍攝商品的細(xì)節(jié)圖以外，大多數(shù)時(shí)候?yàn)榱苏故旧唐返膶?shí)用特性，讓買家更直觀地感受商品的實(shí)物效果，賣家還需要拍攝模特使用或穿戴商品的圖片。二、收集修飾素材修飾素材往往會讓頁面效果更加絢麗，呈現(xiàn)的視覺元素更加豐富。因此，在進(jìn)行網(wǎng)店裝修之前，要根據(jù)網(wǎng)店的設(shè)計(jì)風(fēng)格及商品特點(diǎn)為網(wǎng)店裝修準(zhǔn)備所需的修飾素材。在商品圖片上添加修飾素材是為了提升商品的品質(zhì)感，而大多數(shù)的網(wǎng)店裝修中需要使用大量的修飾素材來讓整個(gè)頁面呈現(xiàn)出完整、統(tǒng)一和豐富的視覺效果。任務(wù)二配色——網(wǎng)店色彩搭配一、常見的配色方法在網(wǎng)店裝修中，常用的配色方法主要有同一色相配色、類似色相配色、相反色相配色、漸變效果配色和重色調(diào)配色。1．同一色相配色2．類似色相配色3．相反色相配色4．漸變效果配色5．重色調(diào)配色二、色彩與網(wǎng)店?duì)I銷色彩對網(wǎng)店?duì)I銷而言是一個(gè)極其重要的影響因素。雖然有些買家對網(wǎng)店首頁及商品頁面的色彩搭配并不是太在意，但是顏色會通過視覺對買家的心理與思維產(chǎn)生較大的影響。在運(yùn)營網(wǎng)店時(shí)，為了提高銷售的業(yè)績可以使用的有效策略很多，有時(shí)不用支付昂貴的廣告費(fèi)用，只要靈活地運(yùn)用顏色營銷方案就可以取得良好的效果。三、設(shè)計(jì)不同色調(diào)的頁面根據(jù)配色方案的不同，頁面給人的感覺和氛圍也有很多種。分析商品的特征，選擇一種合適的顏色，能夠?qū)⑸唐诽卣饔行У貍鬟f給買家，這一點(diǎn)在商品頁面的制作上至關(guān)重要。1．淺色調(diào)頁面2．清新色調(diào)頁面3．藍(lán)色調(diào)頁面4．綠色調(diào)頁面任務(wù)三布局——規(guī)劃網(wǎng)店頁面布局一、頁面布局的組成要素為了把商品和活動信息最大限度、有效、正確地傳達(dá)給買家，就需要進(jìn)行頁面的合理布局。在進(jìn)行布局之前，要首先了解頁面布局的組成要素。●背景●圖像●文字●留白二、常用的頁面布局方式在排列商品圖像或模特圖像時(shí)，為了突出商品的特征，可以將一些希望突出的圖像放大并布局于顯眼的位置，這樣效果會更加理想。較為常用的商品頁面的布局方式主要有以下幾種。1．中間對齊的頁面布局2．對角線排列的頁面布局3．棋盤式的頁面布局4．左對齊的頁面布局5．對稱型的頁面布局任務(wù)四文字——制作網(wǎng)店頁面文字一、網(wǎng)店頁面段落文字的排列方式在網(wǎng)店裝修的文字編輯過程中經(jīng)常會使用段落文字。段落文字的文本信息較多，其排列方式也是多種多樣的。1．自由對齊2．左對齊3．居中對齊4．右對齊二、打造具有高表現(xiàn)力的文字造型文字的創(chuàng)意設(shè)計(jì)實(shí)際上就是以字體的結(jié)構(gòu)為基礎(chǔ)，通過豐富的聯(lián)想，利用多種不同的創(chuàng)作手法，打造出具有高表現(xiàn)力的文字造型。1．連筆2．省略3．裝飾三、利用文字營造特定的氛圍利用文字這一簡單的元素，通過字體形狀的變化、修飾元素的添加和色彩的巧妙搭配就可以營造出特定的氛圍。1．喜慶2．冰爽3．天然4．可愛項(xiàng)目實(shí)訓(xùn)：格蘭仕天貓旗艦店裝修設(shè)計(jì)分析請認(rèn)真觀察三張圖片（見教材P30），分析其配色、頁面布局、文字排列方式、文字造型及文字營造的氛圍。歸納與提高買家進(jìn)入網(wǎng)店，如果視覺體驗(yàn)不好，通常就不會去看網(wǎng)店中的商品了，所以不能忽視最基本的網(wǎng)店裝修環(huán)節(jié)。本項(xiàng)目主要從圖片、配色、布局與文字4個(gè)方面介紹如何進(jìn)行網(wǎng)店裝修才能吸引買家眼球，提高轉(zhuǎn)化率。通過本項(xiàng)目的學(xué)習(xí)，我們掌握了掌握拍攝商品圖片的基本技巧，并能根據(jù)設(shè)計(jì)風(fēng)格收集修飾素材，熟知了常見的色彩搭配方法，學(xué)會了如何對網(wǎng)店頁面進(jìn)行色彩搭配，還了解了頁面布局的組成要素和方式，學(xué)會了使用頁面布局來突出頁面的層次感和主次感，能夠?qū)Χ温湮淖诌M(jìn)行合理排列，打造具有高表現(xiàn)力的文字造型，并利用文字營造特定的氛圍。項(xiàng)目三網(wǎng)店裝修六大技能教學(xué)內(nèi)容一、裁圖——糾正商品圖片角度二、摳圖——選取商品替換背景三、修圖——完美展現(xiàn)商品細(xì)節(jié)四、調(diào)色——校正有色差的商品圖片五、編輯——美化與修飾商品圖像六、文字——商品信息輔助說明教學(xué)要求【知識目標(biāo)】1．掌握對商品圖片的尺寸、構(gòu)圖進(jìn)行調(diào)整的方法。2．掌握對商品外形進(jìn)行校正的方法。3．掌握去除水印、局部擦除、調(diào)整模特面部和身形、銳化圖像的方法。4．掌握調(diào)整圖片亮度、校正圖片白平衡、調(diào)整圖片色調(diào)的方法?！灸芰δ繕?biāo)】1．能夠根據(jù)網(wǎng)店裝修設(shè)計(jì)的需要摳出商品圖像并替換背景。2．能夠根據(jù)需要去除水印、調(diào)整模特面部和身形。3．能夠制作具有創(chuàng)意感的標(biāo)題文字，并對段落文字進(jìn)行藝術(shù)化編排?！舅仞B(yǎng)目標(biāo)】1．在網(wǎng)店裝修過程中弘揚(yáng)工匠精神，精益求精。2．增強(qiáng)責(zé)任意識，彰顯“以買家為中心”的服務(wù)意識。教學(xué)重點(diǎn)1．對商品圖片進(jìn)行重新構(gòu)圖并美化2．對商品圖像進(jìn)行修圖和摳圖處理3．對商品圖片進(jìn)行校正調(diào)色教學(xué)難點(diǎn)1．對商品圖片進(jìn)行重新構(gòu)圖并美化2．對商品圖像進(jìn)行修圖和摳圖處理3．對商品圖片進(jìn)行校正調(diào)色教學(xué)方法講授法、案例法、實(shí)踐法課時(shí)數(shù)6課時(shí)教學(xué)內(nèi)容任務(wù)一裁圖——糾正商品圖片角度一、調(diào)整圖片的大小電商平臺通常會對商品圖片的大小有一定的限制，這是為了讓圖片能夠在網(wǎng)上快速地傳輸和顯示，所以在拿到商品圖片素材之后，大多數(shù)情況下網(wǎng)店美工設(shè)計(jì)人員都需要重新對商品圖片的大小進(jìn)行設(shè)置，使其符合電商平臺的要求。在PhotoshopCS6中，可以使用“圖像大小”命令調(diào)整商品圖片的尺寸。二、裁剪商品圖片中多余的圖像攝影師在拍攝商品時(shí)，為了將商品全部囊括到畫面中，有時(shí)可能會忽略商品圖片的構(gòu)圖，或者將不需要的對象也納入其中，此時(shí)可以使用PhotoshopCS6中的裁剪工具或“裁剪”命令來快速裁剪圖片中多余的圖像，以達(dá)到重新構(gòu)圖的目的。三、校正商品的外形在拍攝商品圖片時(shí)，由于拍攝角度等存在問題，圖片中的商品外形出現(xiàn)畸形，這會影響買家對商品外形的判斷和理解，此時(shí)需要網(wǎng)店美工設(shè)計(jì)人員對商品的外形進(jìn)行校正。在PhotoshopCS6中能夠輕松地解決這個(gè)問題，使用透視裁剪工具可以校正商品外形的透視角度，還可以在裁剪圖像的同時(shí)變換圖像的透視方式，更加準(zhǔn)確地校正商品圖片的透視效果，讓商品圖片恢復(fù)正常的透視效果。任務(wù)二摳圖——選取商品替換背景一、快速摳取單色背景圖片如果商品圖片背景為純色，且商品的顏色與背景的顏色差異很大，就可以使用PhotoshopCS6中的快速選擇工具和魔棒工具將商品圖像快速地?fù)溉〕鰜怼?．快速選擇工具2．魔棒工具二、摳取外形規(guī)則的商品圖片對一些外形較為規(guī)則、輪廓較為清晰的商品，如外形輪廓為矩形或圓形的商品，可以使用PhotoshopCS6中的矩形選框工具和橢圓選框工具進(jìn)行快速選擇并摳取。使用這兩個(gè)工具創(chuàng)建的選區(qū)邊緣更加平滑，能夠更加準(zhǔn)確地?fù)溉∩唐返倪吘墶?．用矩形選框工具摳取矩形商品2．用橢圓選框工具摳取圓形商品三、使用百度AI圖片助手摳取商品圖像在處理商品圖片時(shí)，如果商品顏色與背景顏色極為接近，那么使用Photoshop中的快速選擇工具和魔棒等工具摳取商品圖像通常效果不佳。此時(shí)，可以選擇使用百度AI圖片助手的“智能摳圖”工具將商品圖像快速地從背景中摳取出來。操作方法：見教材P37。四、使用美圖秀秀摳取人物圖像在網(wǎng)店裝修過程中，常常會遇到一些摳取起來比較麻煩的圖像，如模特雜亂的發(fā)絲、寵物等。而美圖秀秀的“智能摳圖”功能基于人工智能技術(shù)，在處理這類圖像時(shí)具有很大的優(yōu)勢。無論是簡單的背景，還是復(fù)雜的場景，利用該功能都能快速完成摳圖任務(wù)。操作方法：見教材P38。五、精細(xì)摳取圖像如果商品圖像的邊緣不規(guī)則但對摳圖質(zhì)量又有較高的要求，那么可以使用PhotoshopCS6中的鋼筆工具摳取圖像，鋼筆工具不僅可以精細(xì)地?fù)溉D像，而且能讓合成的畫面更加精致。鋼筆工具通過在圖像的邊緣繪制矢量路徑來完成摳圖操作。操作方法：見教材P39。任務(wù)三修圖——完美展現(xiàn)商品細(xì)節(jié)一、使用百度AI圖片助手去除水印如果商品圖片中包含水印，就會大大降低商品的表現(xiàn)力，給買家留下網(wǎng)店不夠?qū)I(yè)的印象，甚至?xí)屬I家產(chǎn)生網(wǎng)店盜圖的誤解，以致影響商品的銷售。使用百度AI圖片助手的“AI去水印”工具去除水印是比較便捷的方法。操作方法：見教材P41。二、使用美圖秀秀去除局部多余內(nèi)容在網(wǎng)店裝修過程中，有時(shí)不需要商品圖片中的某些內(nèi)容或者想使商品圖片的背景更加純粹，這時(shí)可以通過局部去除的方法清除多余的內(nèi)容。使用美圖秀秀的“消除筆”工具可以快速去除商品圖片局部多余內(nèi)容。操作方法：見教材P41。三、美化模特面部如果模特的妝面存在瑕疵，就會影響商品的表現(xiàn)，此時(shí)有必要對模特進(jìn)行“妝面美容”，其中包括祛斑、磨皮、加深妝容色彩等。1．祛斑操作方法：見教材P42。2．磨皮操作方法：見教材P42。3．加深妝容色彩操作方法：見教材P43。四、調(diào)整模特身形對于服裝類商品圖片來說，通過模特試穿進(jìn)行展示能夠讓買家產(chǎn)生代入感，可以對商品銷售起到很好的促進(jìn)作用。但是，有時(shí)模特自身?xiàng)l件、拍攝角度等不佳，會導(dǎo)致展示效果不夠理想，這時(shí)就需要對模特的身形進(jìn)行調(diào)整，最常見的就是瘦身處理。PhotoshopCS6中的“液化”濾鏡用于推拉、旋轉(zhuǎn)、反射、折疊和膨脹圖像的任意區(qū)域，所產(chǎn)生的變形可以是細(xì)微的，也可以是劇烈的，這使其成為修飾圖像和創(chuàng)建藝術(shù)效果的強(qiáng)大工具，也成為調(diào)整模特身形的利器。操作方法：見教材P44。五、銳化商品圖像如果商品圖像不清晰，那么買家就無法深入了解商品的細(xì)節(jié)。特別是需要對商品進(jìn)行局部展示時(shí)，圖像的清晰度直接關(guān)系到展示的效果。為了讓商品的細(xì)節(jié)更加清晰，需要在PhotoshopCS6中對商品圖像進(jìn)行銳化處理。銳化處理方法有以下兩種。1．用“USM銳化”濾鏡快速銳化商品圖像操作方法：見教材P45。2．用“高反差保留”濾鏡無雜色銳化商品圖像操作方法：見教材P46。任務(wù)四調(diào)色——校正有色差的商品圖片一、調(diào)整圖片的亮度在商品圖片的后期處理中，網(wǎng)店美工設(shè)計(jì)人員要先觀察圖片的整體明暗效果，對曝光不準(zhǔn)確的圖片，要對全圖的明暗進(jìn)行調(diào)整，通過提高亮度和增強(qiáng)暗調(diào)讓圖片的曝光趨于正常。在PhotoshopCS6中可以通過“曝光度”“色階”“曲線”等命令調(diào)整商品圖片的亮度，讓其快速恢復(fù)正常。1．用“曝光度”命令進(jìn)行二次曝光處理操作方法：見教材P46。2．用“色階”命令調(diào)整商品圖片的曝光和層次操作方法：見教材P47。3．用“曲線”命令調(diào)整不同明暗區(qū)域的亮度操作方法：見教材P48。二、校正商品圖片的白平衡操作方法：見教材P48。三、調(diào)整商品圖片的色調(diào)在商品圖片后期處理中，為了凸顯網(wǎng)店的風(fēng)格，可以適當(dāng)調(diào)整圖片的色調(diào)，讓其色彩表現(xiàn)更獨(dú)特、更符合商品特質(zhì)。在PhotoshopCS6中可以使用“照片濾鏡”命令模擬數(shù)碼相機(jī)鏡頭上安裝彩色濾鏡的拍攝效果，消除色偏或?qū)D片應(yīng)用指定的色調(diào)。操作方法：見教材P49。任務(wù)五編輯——美化與修飾商品圖像一、利用圖層樣式增強(qiáng)特效感通過“圖層樣式”對話框可以創(chuàng)建或設(shè)置圖層樣式，添加的圖層樣式會出現(xiàn)在圖層的下方。在“圖層樣式”對話框中可以編輯應(yīng)用于圖層的樣式，或者創(chuàng)建新樣式，為同一個(gè)圖層應(yīng)用一個(gè)或多個(gè)圖層樣式。操作方法：見教材P51。二、利用圖層混合模式制作特殊效果通過調(diào)整圖層混合模式可以對圖像的顏色進(jìn)行相加或相減，從而制作出特殊效果。PhotoshopCS6中包含了多種類型的圖層混合模式，包括組合型混合模式、加深型混合模式、減淡型混合模式、對比型混合模式、比較型混合模式和色彩型混合模式。根據(jù)不同的視覺需要，可以應(yīng)用不同的混合模式。操作方法：見教材P52。三、利用蒙版控制圖像顯示效果在PhotoshopCS6中進(jìn)行網(wǎng)店裝修時(shí)，使用蒙版可以保持畫面局部的圖像不變，對處理區(qū)域的圖像進(jìn)行單獨(dú)的色調(diào)和影調(diào)的編輯，被蒙版遮蓋起來的部分則不會發(fā)生改變，蒙版通常用于對商品圖片進(jìn)行摳取、編輯局部色調(diào)和影調(diào)等操作。操作方法：見教材P53。四、制作GIF動態(tài)閃圖為了能夠全方位地展示網(wǎng)店商品，達(dá)到吸引買家眼球的目的，一些網(wǎng)店往往會添加一些動態(tài)閃圖，也就是GIF格式的動態(tài)圖像。在PhotoshopCS6中可以制作GIF動態(tài)閃圖。操作方法：見教材P54。任務(wù)六文字——商品信息輔助說明一、添加文字并設(shè)置格式在網(wǎng)店裝修的文字編輯工作中，為處理好的商品圖片添加文字是第一個(gè)步驟。添加文字后，還需要對文字的字體、字號、字間距和顏色等進(jìn)行調(diào)整，使文字的外形和色彩符合當(dāng)前頁面的風(fēng)格，能夠準(zhǔn)確地傳達(dá)出商品的信息。操作方法：見教材P56。二、制作創(chuàng)意標(biāo)題文字有時(shí)為了營造特定的氛圍，需要讓標(biāo)題文字看起來更有新意，僅通過變換字體等格式是無法實(shí)現(xiàn)的，此時(shí)可以通過兩種方法對標(biāo)題文字進(jìn)行藝術(shù)化設(shè)計(jì)。1．使用“圖層樣式”對文字進(jìn)行修飾2．文字外觀的藝術(shù)化設(shè)計(jì)三、編排段落文字為了更好地調(diào)動買家的閱讀興趣，除了讓文字的內(nèi)容更加凝練外，還可以對大段文字進(jìn)行藝術(shù)化的編排設(shè)計(jì)，以增強(qiáng)文字信息的視覺傳達(dá)效果。項(xiàng)目實(shí)訓(xùn)：為商品圖片去除水印并調(diào)色結(jié)合本項(xiàng)目所學(xué)的去除水印的方法為女鞋商品圖片去除水印并進(jìn)行校正調(diào)色，使其恢復(fù)正常色調(diào)。技能拓展：使用AIGC工具智能去除衣服褶皺使用美圖設(shè)計(jì)室的“服裝去皺”功能，不僅可以快速地對圖片中的服裝進(jìn)行去皺處理，還能較好地保留服裝的細(xì)節(jié)，如服裝的圖案、紋理、裝飾等。操作方法：見教材P59。歸納與提高由于拍攝環(huán)境、拍攝器材及攝影水平等條件的限制，網(wǎng)店裝修準(zhǔn)備階段拍攝的商品圖片往往是無法直接使用的，需要網(wǎng)店美工設(shè)計(jì)人員對圖片的尺寸、構(gòu)圖、水印、色差、影調(diào)等進(jìn)行調(diào)整和編輯。在完成這些基本操作后，還要根據(jù)實(shí)際的設(shè)計(jì)需要進(jìn)行摳圖、添加文字等操作。通過本項(xiàng)目的學(xué)習(xí)，我們掌握了對商品圖片的尺寸、構(gòu)圖進(jìn)行調(diào)整的方法，對商品外形進(jìn)行校正的方法，去除水印、局部擦除、調(diào)整模特面部和身形、銳化圖像的方法，以及調(diào)整圖片亮度、校正圖片白平衡、調(diào)整圖片色調(diào)的方法等。項(xiàng)目四店標(biāo)與店招設(shè)計(jì)教學(xué)內(nèi)容一、初識網(wǎng)店店標(biāo)二、課堂案例：童裝網(wǎng)店店標(biāo)設(shè)計(jì)三、初識店招與導(dǎo)航及其設(shè)計(jì)思路四、課堂案例：美妝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)教學(xué)要求【知識目標(biāo)】1．了解網(wǎng)店店標(biāo)的設(shè)計(jì)形態(tài)和類型。2．掌握網(wǎng)店店標(biāo)的設(shè)計(jì)方法。3．了解店招與導(dǎo)航的設(shè)計(jì)思路。4．掌握網(wǎng)店店招與導(dǎo)航的設(shè)計(jì)方法?！灸芰δ繕?biāo)】1．能夠通過添加修飾元素、圖層樣式等方式對店招進(jìn)行修飾。2．能夠根據(jù)商品圖片及網(wǎng)店風(fēng)格確定店標(biāo)和店招的風(fēng)格及配色。3．能夠根據(jù)需要設(shè)計(jì)網(wǎng)店店標(biāo)、店招和導(dǎo)航?！舅仞B(yǎng)目標(biāo)】1．培養(yǎng)抽象思維，在店標(biāo)與店招設(shè)計(jì)中充分發(fā)揮想象力。2．在設(shè)計(jì)中懂得取舍，主次分明方能凸顯核心價(jià)值。教學(xué)重點(diǎn)1．設(shè)計(jì)網(wǎng)店店標(biāo)2．設(shè)計(jì)網(wǎng)店店招與導(dǎo)航教學(xué)難點(diǎn)1．設(shè)計(jì)網(wǎng)店店標(biāo)2．設(shè)計(jì)網(wǎng)店店招與導(dǎo)航教學(xué)方法講授法、案例法、實(shí)踐法課時(shí)數(shù)4課時(shí)教學(xué)內(nèi)容任務(wù)一初識網(wǎng)店店標(biāo)一、店標(biāo)的設(shè)計(jì)形態(tài)從設(shè)計(jì)的表達(dá)形態(tài)來看，店標(biāo)可以分為以下幾種。1．中文型店標(biāo)2．非中文型店標(biāo)3．圖文結(jié)合型店標(biāo)二、不同行業(yè)的店標(biāo)設(shè)計(jì)在設(shè)計(jì)店標(biāo)時(shí)，不同的行業(yè)和類目，針對不同的消費(fèi)者和不同的營銷目的，會有一些設(shè)計(jì)上的共性和個(gè)性。1．柔美型店標(biāo)2．陽剛型店標(biāo)3．可愛型店標(biāo)任務(wù)二課堂案例：童裝網(wǎng)店店標(biāo)設(shè)計(jì)一、設(shè)計(jì)理念●經(jīng)過分析和構(gòu)思，首先想到的是用可愛小熊的圖像來表現(xiàn)，所以第一步就是利用AIGC工具豆包的“圖像生成”功能生成一些卡通小熊圖像?！裾w以橘色為主，橘色在暖色中明度高，有著較強(qiáng)的視覺吸引力，并且寓意著明亮、活潑、溫暖?！裨贚ogo下方添加黑灰色店標(biāo)文字，直接點(diǎn)明品牌名稱和業(yè)務(wù)范圍，使消費(fèi)者能夠迅速理解品牌的屬性和定位。二、技術(shù)要點(diǎn)●使用豆包的“圖像生成”功能生成店標(biāo)中的主體部分。●使用PhotoshopCS6中的魔棒工具和鋼筆工具摳取Logo圖形。●使用圓潤的字體作為店標(biāo)文字。三、實(shí)操演練操作方法：見教材P65。任務(wù)三初識店招與導(dǎo)航及其設(shè)計(jì)思路一、認(rèn)識店招與導(dǎo)航店招和導(dǎo)航位于網(wǎng)店的頂端，成功的店招通常采用標(biāo)準(zhǔn)的顏色和字體、簡潔的設(shè)計(jì)版面。此外，店招一般包含精練、吸引力強(qiáng)的廣告語，畫面還要具備強(qiáng)烈的視覺沖擊力，清晰地告訴買家網(wǎng)店在賣什么，而且通過店招也可以對網(wǎng)店裝修的風(fēng)格進(jìn)行定位。店招所包含的主要內(nèi)容包括網(wǎng)店Logo、網(wǎng)店名稱、簡短的廣告語和廣告商品等。二、店招與導(dǎo)航的設(shè)計(jì)思路在設(shè)計(jì)店招時(shí)，要更多地從留住買家的角度來考慮。設(shè)計(jì)者在對店招的設(shè)計(jì)中，可以使用與網(wǎng)店商品風(fēng)格一致的色彩和圖片，同時(shí)添加具有吸引力的廣告信息和收藏信息來吸引買家的注意力。任務(wù)四課堂案例：美妝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)一、設(shè)計(jì)理念●以粉色為主，使用明度較高的幾種色彩來修飾畫面，讓店鋪形象更加柔美、夢幻?！瘛窭梅植嫉卯?dāng)?shù)奈淖謱Υ黉N內(nèi)容進(jìn)行點(diǎn)綴，使整個(gè)畫面風(fēng)格更加統(tǒng)一。二、技術(shù)要點(diǎn)●使用AIGC工具通義萬相的“文字作畫”功能生成店招背景圖?！袷褂盟夭闹谱鞯暾兄兴璧谋尘昂托揎椩兀ㄟ^PhotoshopCS6中的圖層混合模式和不透明度來調(diào)整編輯的效果。●使用PhotoshopCS6中的圖層樣式為店招文本添加內(nèi)陰影、漸變疊加、外發(fā)光和投影效果。三、實(shí)操演練操作方法：見教材P70。項(xiàng)目實(shí)訓(xùn)：家具網(wǎng)店店招與導(dǎo)航設(shè)計(jì)利用提供的素材為家具網(wǎng)店設(shè)計(jì)店招與導(dǎo)航，參照店鋪所售的家具風(fēng)格進(jìn)行配色，以營造高檔、專業(yè)的氛圍。技能拓展：利用AIGC工具通義萬相生成商品圖傳統(tǒng)的背景素材獲取方式可能依賴于現(xiàn)有的圖片素材庫或人工拍攝，這往往會受到素材數(shù)量和創(chuàng)意風(fēng)格的限制。與之相比，AIGC工具在背景素材生成方面展現(xiàn)出了獨(dú)特的優(yōu)勢。以通義萬相的“文字作畫”功能為例，它能依據(jù)輸入的各類提示詞，生成數(shù)量無限且樣式多樣的背景圖案與場景，從而為網(wǎng)店店招或海報(bào)設(shè)計(jì)開拓出全新且獨(dú)特的創(chuàng)意方向，有力地打破了常規(guī)思維所帶來的局限。在使用通義萬相的“文字作畫”功能時(shí)，可以按照特定的結(jié)構(gòu)輸入提示詞，其中包括以下3個(gè)部分。●主體●場景●風(fēng)格歸納與提高店標(biāo)與店招位于網(wǎng)店首頁的最頂端，是買家進(jìn)入網(wǎng)店首頁后看到的第一個(gè)模塊，所以是網(wǎng)店首頁設(shè)計(jì)的重中之重。它們的主要作用是向買家展示網(wǎng)店的店名、所售的商品等，并提供訪問網(wǎng)店各個(gè)功能模塊的快速通道。通過本項(xiàng)目的學(xué)習(xí)，我們了解了網(wǎng)店店標(biāo)的設(shè)計(jì)形態(tài)和類型，掌握了網(wǎng)店店標(biāo)的設(shè)計(jì)方法，還了解了店招與導(dǎo)航的設(shè)計(jì)思路，掌握了網(wǎng)店店招與導(dǎo)航的設(shè)計(jì)方法等。項(xiàng)目五全屏輪播區(qū)和商品陳列區(qū)設(shè)計(jì)教學(xué)內(nèi)容一、初識全屏輪播區(qū)及其設(shè)計(jì)思路二、課堂案例：節(jié)日主題的全屏輪播區(qū)設(shè)計(jì)三、商品陳列區(qū)視覺設(shè)計(jì)四、課堂案例：當(dāng)季熱賣商品陳列區(qū)設(shè)計(jì)教學(xué)要求【知識目標(biāo)】1．了解網(wǎng)店全屏輪播區(qū)的樣式與設(shè)計(jì)思路。2．掌握商品展示圖片的排列設(shè)計(jì)類型和F形瀏覽模式。3．了解商品陳列區(qū)常見的布局方式?！灸芰δ繕?biāo)】1．能夠通過添加修飾元素、圖層樣式等方式對全屏輪播區(qū)進(jìn)行修飾。2．能夠根據(jù)不同的節(jié)日氛圍制作合適的全屏輪播區(qū)。3．能夠根據(jù)需要制作當(dāng)季熱賣商品陳列區(qū)。【素養(yǎng)目標(biāo)】1．遵循規(guī)律，科學(xué)設(shè)計(jì)，把用戶需求放在首位。2．樹立創(chuàng)新意識，主動進(jìn)行設(shè)計(jì)創(chuàng)新。教學(xué)重點(diǎn)1．設(shè)計(jì)全屏輪播區(qū)2．設(shè)計(jì)商品陳列區(qū)教學(xué)難點(diǎn)1．設(shè)計(jì)全屏輪播區(qū)2．設(shè)計(jì)商品陳列區(qū)教學(xué)方法講授法、案例法、實(shí)踐法課時(shí)數(shù)4課時(shí)教學(xué)內(nèi)容任務(wù)一初識全屏輪播區(qū)及其設(shè)計(jì)思路一、認(rèn)識全屏輪播區(qū)網(wǎng)店的全屏輪播區(qū)主要用于告知買家網(wǎng)店在某個(gè)時(shí)間段有廣告商品或促銷活動，其位于網(wǎng)店導(dǎo)航的下方位置。它的主要作用就是告知買家網(wǎng)店在某個(gè)特定時(shí)間段的一些動態(tài)信息，幫助買家快速了解網(wǎng)店的活動或商品信息。二、全屏輪播區(qū)的設(shè)計(jì)思路全屏輪播區(qū)猶如賣家的外在形象一樣，在設(shè)計(jì)時(shí)用來搭配的圖片不能太復(fù)雜，這樣才能突出主題。同時(shí)，要采用符合網(wǎng)店商品形象的文字，以避免產(chǎn)生凌亂的感覺。任務(wù)二課堂案例：節(jié)日主題的全屏輪播區(qū)設(shè)計(jì)一、設(shè)計(jì)理念●在色彩搭配上，使用不同明度的綠色和橙色，營造出一種清新、自然的感覺?！袷褂脟憋L(fēng)山水、祥云、荷花的形象來代表端午節(jié)，映射出端午節(jié)的文化內(nèi)涵與自然之美，由此準(zhǔn)確地表達(dá)出活動的主題?！窈?bào)的文字設(shè)計(jì)采用藝術(shù)化的處理方式，既可以傳達(dá)出活動的主題和信息，又與海報(bào)的整體風(fēng)格相統(tǒng)一。二、技術(shù)要點(diǎn)●利用AIGC工具豆包的“圖像生成”功能生成國潮風(fēng)山水背景圖?！駥?dǎo)入背景圖、祥云、彩帶等素材襯托全屏輪播圖主題。●輸入文字并對其進(jìn)行變形，使其更有設(shè)計(jì)感。三、實(shí)操演練操作方法：見教材P82。任務(wù)三商品陳列區(qū)視覺設(shè)計(jì)一、營造視覺動線在進(jìn)行商品展示圖片的排列設(shè)計(jì)時(shí)，要使用整齊的排列讓買家獲得輕松感，圖片不宜過多，橫排圖片最好不超過5張，因?yàn)檫^多的圖片容易讓買家感到瀏覽壓力并產(chǎn)生疲倦感。除此之外，通過靈活多變的排列方式形成圖片組合的視覺瀏覽動線，也能減少死板的排列組合帶來的枯燥與乏味感。在示例中，商品陳列區(qū)的布局打破了橫排圖片以固定的數(shù)量單一擺放的形式，靈活的商品展示圖片排列組合形成了視覺瀏覽動線，不僅能夠緩解買家在瀏覽時(shí)的枯燥感，讓買家可以更多地注意到所展示的商品圖片，還能讓商品的展示有了主次的層級關(guān)系。二、商品布局藝術(shù)化商品展示圖片的布局是影響商品陳列區(qū)整體版式的關(guān)鍵，也是確立首頁風(fēng)格的關(guān)鍵。為了吸引買家的眼球，網(wǎng)店美工設(shè)計(jì)人員可以根據(jù)商品的功能、外形特點(diǎn)、設(shè)計(jì)風(fēng)格來對商品陳列區(qū)布局進(jìn)行精心的規(guī)劃與設(shè)計(jì)，將網(wǎng)店中的商品藝術(shù)化地展現(xiàn)出來。常見的商品陳列區(qū)布局方式有三種，包括方塊式布局，以及下面將要介紹的折線型布局與隨意型布局。1．折線型布局2．隨意型布局任務(wù)四課堂案例：當(dāng)季熱賣商品陳列區(qū)設(shè)計(jì)一、設(shè)計(jì)理念●在色彩搭配上，顏色對比要強(qiáng)烈，以增強(qiáng)視覺沖擊力。畫面主色調(diào)采用鮮艷的黃色和深灰色進(jìn)行對比，營造出時(shí)尚、大氣的視覺效果，這樣的顏色設(shè)計(jì)很容易吸引買家的注意力。●使用黃色矩形圖案進(jìn)行修飾，使畫面看起來更加和諧?！袷褂蒙钌档膬r(jià)格標(biāo)簽作為點(diǎn)綴，增強(qiáng)畫面的設(shè)計(jì)感。二、技術(shù)要點(diǎn)●使用PhotoshopCS6中的剪貼蒙版來控制圖像的顯示部分?！袷褂肞hotoshopCS6中的矩形工具繪制圖像的背景及修飾形狀，并應(yīng)用圖層樣式進(jìn)行修飾。三、實(shí)操演練操作方法：見教材P92。項(xiàng)目實(shí)訓(xùn)：中秋節(jié)全屏輪播區(qū)設(shè)計(jì)以提供的圖片為素材，為某食品店鋪設(shè)計(jì)中秋節(jié)活動的全屏輪播區(qū)。畫面中要包含簡要的活動內(nèi)容說明，色彩要大氣，具有濃郁的中國傳統(tǒng)風(fēng)格，要能烘托出歡樂、團(tuán)圓、祥和的節(jié)日氣氛。技能拓展：使用稿定AI制作運(yùn)動鞋上新海報(bào)操作方法：見教材P98。歸納與提高全屏輪播區(qū)和商品陳列區(qū)模塊占據(jù)的面積較大，也是整個(gè)網(wǎng)店首頁中非常醒目、非常具有視覺沖擊力的部分。如果全屏輪播區(qū)和商品陳列區(qū)做得非常吸引眼球，就會給網(wǎng)店帶來很多流量；如果設(shè)計(jì)得很普通，就會給網(wǎng)店的轉(zhuǎn)化率造成很大的影響。通過本項(xiàng)目的學(xué)習(xí)，我們了解了網(wǎng)店全屏輪播區(qū)的樣式與設(shè)計(jì)思路，掌握了商品展示圖片的排列設(shè)計(jì)類型和F形瀏覽模式，還了解了商品陳列區(qū)常見的布局方式。項(xiàng)目六首頁設(shè)計(jì)——服飾網(wǎng)店教學(xué)內(nèi)容一、課堂案例：精品女裝網(wǎng)店首頁設(shè)計(jì)二、課堂案例：可愛童裝網(wǎng)店首頁設(shè)計(jì)教學(xué)要求【知識目標(biāo)】1．了解服飾網(wǎng)店首頁設(shè)計(jì)的設(shè)計(jì)理念。2．掌握服飾網(wǎng)店首頁設(shè)計(jì)中的各種技術(shù)要點(diǎn)?！灸芰δ繕?biāo)】1．能夠根據(jù)服裝的類型、色彩和消費(fèi)群體等設(shè)計(jì)首頁的配色。2．能夠根據(jù)服飾的風(fēng)格與特點(diǎn)制作出獨(dú)具特色的網(wǎng)店首頁?！舅仞B(yǎng)目標(biāo)】1．培養(yǎng)工具思維，在設(shè)計(jì)中充分利用AIGC工具。2．設(shè)計(jì)不設(shè)限，積極探索設(shè)計(jì)行業(yè)的無限可能。教學(xué)重點(diǎn)1．精品女裝網(wǎng)店首頁設(shè)計(jì)2．可愛童裝網(wǎng)店首頁設(shè)計(jì)教學(xué)難點(diǎn)1．精品女裝網(wǎng)店首頁設(shè)計(jì)2．可愛童裝網(wǎng)店首頁設(shè)計(jì)教學(xué)方法講授法、案例法、實(shí)踐法課時(shí)數(shù)4課時(shí)教學(xué)內(nèi)容任務(wù)一課堂案例：精品女裝網(wǎng)店首頁設(shè)計(jì)一、設(shè)計(jì)理念●在色彩搭配上，以橙色為主色調(diào)，輔以白色和黃色等色彩，形成了簡潔明了、活力四射的視覺效果，符合夏季新品的主題?！窭梅植嫉卯?dāng)?shù)奈淖謱撁鎯?nèi)容進(jìn)行點(diǎn)綴，起到畫龍點(diǎn)睛的作用?！耥撁娌季謴纳系较掳凑沼墒璧矫艿陌媸竭M(jìn)行設(shè)計(jì)，使頁面內(nèi)容主次得當(dāng)，由此帶來的視覺緩沖可以延長買家的停留時(shí)間，激發(fā)買家的購買欲望。二、技術(shù)要點(diǎn)●利用PhotoshopCS6中的自定形狀工具繪制出首頁中所需的修飾形狀。●利用百度AI圖片助手的“AI擴(kuò)圖”功能擴(kuò)大模特圖的尺寸。●利用PhotoshopCS6中的剪貼蒙版對圖像的顯示進(jìn)行控制。三、實(shí)操演練操作方法：見教材P102。任務(wù)二課堂案例：可愛童裝網(wǎng)店首頁設(shè)計(jì)一、設(shè)計(jì)理念●在色彩搭配上，以綠色和黃色搭配為主，增強(qiáng)色彩的層次感?！耥撁娌季謱哟畏置鳎S白相間的色彩結(jié)合給人一種活潑、明亮的感覺，使商品的表現(xiàn)力更加突出。●主要以矩形作為修飾元素，對商品進(jìn)行合理的歸類和描述，使整個(gè)頁面一目了然，既簡單又大氣。二、技術(shù)要點(diǎn)●使用PhotoshopCS6中的橫排文字工具添加文字，利用“字符”面板對文字的字體、字號、顏色等文字屬性進(jìn)行設(shè)置。●使用美圖設(shè)計(jì)室的“人像背景”功能為模特更換背景。●使用PhotoshopCS6中的圓角矩形工具、橢圓工具和矩形工具繪制修飾圖形。三、實(shí)操演練操作方法：見教材P109。項(xiàng)目實(shí)訓(xùn)：時(shí)尚女裝網(wǎng)店首頁設(shè)計(jì)以女裝網(wǎng)店商品模特圖片為素材，設(shè)計(jì)網(wǎng)店首頁。要求設(shè)計(jì)的首頁能較好地展示出網(wǎng)店的主推商品及網(wǎng)店的促銷活動信息，能夠清晰地反映商品的特色，頁面色彩簡潔、統(tǒng)一，突出時(shí)尚、大氣等特征。技能拓展：使用百度AI圖片助手“AI圖”功能擴(kuò)圖在網(wǎng)店首頁設(shè)計(jì)中，有時(shí)需要特定尺寸的圖片來滿足頁面布局或宣傳海報(bào)的需求。然而，原始圖片的尺寸可能無法滿足這些需求，若直接對其進(jìn)行拉伸處理，圖片就會出現(xiàn)變形或模糊的問題。在這種情況下，百度AI圖片助手的“AI擴(kuò)圖”功能便能發(fā)揮重要作用。該功能可以在不破壞圖片原有風(fēng)格和內(nèi)容的基礎(chǔ)上，依據(jù)圖片已有的內(nèi)容與特征，待擴(kuò)展的空白區(qū)域進(jìn)行智能填充，進(jìn)而使圖片的整體內(nèi)容更豐富、更連貫。歸納與提高通過本項(xiàng)目的學(xué)習(xí)，我們能夠根據(jù)服裝的類型、色彩和消費(fèi)群體等來設(shè)計(jì)首頁的配色，能夠通過合理的布局來凸顯廣告商品，展示出服飾商品的特點(diǎn)，能夠根據(jù)服飾的風(fēng)格與特點(diǎn)制作出獨(dú)具特色的網(wǎng)店首頁，還掌握了服飾網(wǎng)店首頁設(shè)計(jì)中的各種技術(shù)要點(diǎn)和操作技巧。項(xiàng)目七首頁設(shè)計(jì)——食品網(wǎng)店教學(xué)內(nèi)容一、課堂案例：年貨節(jié)茶葉網(wǎng)店首頁設(shè)計(jì)二、課堂案例：“6·18”蜂蜜網(wǎng)店首頁設(shè)計(jì)教學(xué)要求【知識目標(biāo)】1．掌握網(wǎng)店首頁的色彩設(shè)計(jì)方法。2．掌握網(wǎng)店首頁的頁面布局方法。3．掌握食品網(wǎng)店首頁設(shè)計(jì)中的各種技術(shù)要點(diǎn)和技巧。【能力目標(biāo)】1．能夠根據(jù)商品的類型、色彩和消費(fèi)群體等設(shè)計(jì)首頁的配色。2．能夠根據(jù)不同的活動主題制作出獨(dú)具特色的網(wǎng)店首頁。3．能夠使用AIGC工具生成設(shè)計(jì)素材?！舅仞B(yǎng)目標(biāo)】1．將中國傳統(tǒng)文化元素與現(xiàn)代設(shè)計(jì)理念相融合，用設(shè)計(jì)講好中國故事。2．在設(shè)計(jì)時(shí)講究平衡之美，通過合理布局實(shí)現(xiàn)協(xié)調(diào)統(tǒng)一。教學(xué)重點(diǎn)1．年貨節(jié)茶葉網(wǎng)店首頁設(shè)計(jì)2．“6·18”蜂蜜網(wǎng)店首頁設(shè)計(jì)教學(xué)難點(diǎn)1．年貨節(jié)茶葉網(wǎng)店首頁設(shè)計(jì)2．“6·18”蜂蜜網(wǎng)店首頁設(shè)計(jì)教學(xué)方法講授法、案例法、實(shí)踐法課時(shí)數(shù)4課時(shí)教學(xué)內(nèi)容任務(wù)一課堂案例：年貨節(jié)茶葉網(wǎng)店首頁設(shè)計(jì)一、設(shè)計(jì)理念●在全屏輪播區(qū)，金色主要用于中國風(fēng)元素的點(diǎn)綴，與紅色背景形成鮮明對比，搭配頗具設(shè)計(jì)感的海報(bào)文字布局，能夠更好地突出“年貨佳選”活動主題的信息?！裨跓豳u商品區(qū)，先使用兩個(gè)廣告圖對重點(diǎn)商品進(jìn)行展示，再對其他商品進(jìn)行展示，使頁面布局看上去更加靈活，并具有一定的韻律感。●通過“新品第二件半價(jià)”“跨店滿減”“拍1發(fā)2送同款”“領(lǐng)券買2件減20元”等明顯的促銷信息，吸引買家的注意，刺激其購買欲望。二、技術(shù)要點(diǎn)●使用PhotoshopCS6軟件，為圖片創(chuàng)建圖層蒙版，對圖像的顯示進(jìn)行控制。●利用AIGC工具通義萬相的“文字作畫”功能生成海報(bào)背景素材?！窭肞hotoshopCS6中的“模糊”濾鏡為圖片添加模糊效果。三、實(shí)操演練操作方法：見教材P121。任務(wù)二課堂案例：“6·18”蜂蜜網(wǎng)店首頁設(shè)計(jì)一、設(shè)計(jì)理念●在配色上使用黃色作為頁面背景，使用紅色作為點(diǎn)綴色。鮮亮的配色給人一種溫馨、甜蜜的感覺，與蜂蜜的產(chǎn)品屬性相契合?！袢凛啿ズ?bào)通過頗具設(shè)計(jì)感的標(biāo)題文字布局吸引買家的視線，搭配豐富的蜂蜜商品，讓買家一眼就能了解網(wǎng)店銷售的主要商品，從而充分地展示網(wǎng)店信息。●商品展示區(qū)域通過不同的商品布局讓頁面顯得協(xié)調(diào)而不單一，增強(qiáng)買家進(jìn)一步深入了解商品的欲望。二、技術(shù)要點(diǎn)●使用PhotoshopCS6中的形狀工具繪制各種修飾形狀?！袷褂肁IGC工具豆包生成櫻花修飾素材，使用百度AI圖片助手智能摳圖?！袷褂肞hotoshopCS6中的圖層樣式增強(qiáng)文字的特效感。三、實(shí)操演練操作方法：見教材P132。項(xiàng)目實(shí)訓(xùn)：“99劃算節(jié)”面包網(wǎng)店首頁設(shè)計(jì)以面包網(wǎng)店商品圖片為素材，設(shè)計(jì)“99劃算節(jié)”促銷首頁。在設(shè)計(jì)過程中，整體風(fēng)格要簡潔、大氣，避免使用過多復(fù)雜的裝飾元素。背景顏色可以選擇與面包相關(guān)的暖色調(diào)，如米白色、淺黃色等，既能體現(xiàn)面包的溫馨感，又能營造出簡潔、大氣的氛圍。技能拓展：利用即夢AI生成C4D展臺場景圖展臺場景一直是各類促銷海報(bào)中的核心視覺元素，在宣傳設(shè)計(jì)中舉足輕重。以往這類場景設(shè)計(jì)主要依賴于C4D等專業(yè)的三維建模工具，使用該類工具雖然能夠制作出令人矚目的視覺效果，但操作過程相對復(fù)雜，對設(shè)計(jì)者的專業(yè)技能有著較高的要求?，F(xiàn)在，創(chuàng)作者可以借助各種AIGC工具迅速生成高質(zhì)量的展臺場景，極大地簡化了設(shè)計(jì)流程。操作方法：見教材P140。歸納與提高網(wǎng)店銷售的商品不同，首頁的設(shè)計(jì)風(fēng)格也會有所區(qū)別。本項(xiàng)目主要以設(shè)計(jì)食品網(wǎng)店首頁為例，詳細(xì)介紹了如何為年貨節(jié)茶葉網(wǎng)店和“6·18”蜂蜜網(wǎng)店打造出非同凡響的首頁效果。通過本項(xiàng)目的學(xué)習(xí)，我們不僅掌握了網(wǎng)店首頁的色彩設(shè)計(jì)方法和頁面布局方法，還掌握了食品網(wǎng)店首頁設(shè)計(jì)中的各種技術(shù)要點(diǎn)和技巧，以及AI工具在網(wǎng)店首頁設(shè)計(jì)中的應(yīng)用。項(xiàng)目八商品詳情頁設(shè)計(jì)教學(xué)內(nèi)容一、初識商品詳情頁及其設(shè)計(jì)思路二、課堂案例：豆?jié){機(jī)網(wǎng)店商品詳情頁設(shè)計(jì)三、課堂案例：保溫杯網(wǎng)店商品詳情頁設(shè)計(jì)教學(xué)要求【知識目標(biāo)】1．了解商品詳情頁設(shè)計(jì)的重要性。2．了解商品詳情頁的設(shè)計(jì)思路。3．掌握使用AIGC工具撰寫商品詳情頁文案的方法。4．掌握設(shè)計(jì)商品詳情頁的方法與技巧?！灸芰δ繕?biāo)】1．能夠根據(jù)需要使用AIGC工具撰寫商品詳情頁文案。2．能夠抓住不同商品的特點(diǎn)設(shè)計(jì)出別具一格的商品詳情頁。【素養(yǎng)目標(biāo)】1．培養(yǎng)發(fā)散思維，學(xué)會用創(chuàng)意提升設(shè)計(jì)品位和質(zhì)量。2．尊重消費(fèi)者的知情權(quán)和選擇權(quán)，提供詳盡且透明的商品信息。教學(xué)重點(diǎn)1．商品詳情頁的設(shè)計(jì)思路2．商品詳情頁的設(shè)計(jì)與制作教學(xué)難點(diǎn)1．商品詳情頁的設(shè)計(jì)思路2．商品詳情頁的設(shè)計(jì)與制作教學(xué)方法講授法、案例法、實(shí)踐法課時(shí)數(shù)5課時(shí)教學(xué)內(nèi)容任務(wù)一初識商品詳情頁及其設(shè)計(jì)思路一、認(rèn)識商品詳情頁商品詳情頁是所有網(wǎng)店?duì)I銷的落地點(diǎn)。買家通過搜索商品進(jìn)入網(wǎng)店，隨后一般會進(jìn)入商品詳情頁，商品詳情頁承擔(dān)著讓買家完成下單購買的職責(zé)。商品詳情頁主要用于展示單個(gè)商品的細(xì)節(jié)信息，它的精致程度和設(shè)計(jì)感直接影響買家對商品的認(rèn)知。二、商品詳情頁的設(shè)計(jì)思路實(shí)拍商品是最基本的要求，要讓買家覺得這家網(wǎng)店的商品質(zhì)量是完全可以信賴的。對于商品詳情頁的設(shè)計(jì)而言，商品信息的編輯與設(shè)計(jì)尤為重要。除了展示商品本身的外觀、性能等細(xì)節(jié)外，商品詳情頁中還可以直觀地展示網(wǎng)店內(nèi)的優(yōu)惠信息，如“折扣”“買一送一”“搭配促銷”“優(yōu)惠券”等。適當(dāng)?shù)靥砑右恍└郊有畔⒖梢宰尵W(wǎng)店和商品的展示更加真實(shí)和完整，從而提高頁面轉(zhuǎn)化率。在商品詳情頁中，為了讓買家更好地了解商品的實(shí)際效果，通常需要設(shè)計(jì)“使用感受”“尺碼標(biāo)示”和“商品細(xì)節(jié)”等內(nèi)容。由于對商品的不同描述需要在同一個(gè)頁面中展示，所以在設(shè)計(jì)中要注意把握好頁面的整體風(fēng)格。三、使用AIGC工具撰寫商品詳情頁文案在電商平臺上，商品琳瑯滿目，買家的注意力是稀缺資源。具有吸引力的詳情頁文案能夠使商品在眾多競品中脫穎而出。詳情頁文案可以通過獨(dú)特的標(biāo)題、富有感染力的語言風(fēng)格或者突出的賣點(diǎn)來吸引買家。商品詳情頁文案一般包括商品名稱、商品描述、品牌故事、使用方法、物流售后承諾、用戶評價(jià)等內(nèi)容。使用通義千問的“智能體”工具撰寫一款女士真皮手提包商品詳情頁文案。操作方法：見教材P147。任務(wù)二課堂案例：豆?jié){機(jī)網(wǎng)店商品詳情頁設(shè)計(jì)一、設(shè)計(jì)理念●在色彩搭配上，選擇以淺米色作為頁面背景，用黃色塊和棕色文字來修飾?！袷褂肞hotoshopCS6中的“投影”圖層樣式修飾圓角矩形，起到增強(qiáng)立體感的作用?！裎淖值木幣艅e具一格，有讓人眼前一亮的感覺，便于買家與商品產(chǎn)生情感上的共鳴。二、技術(shù)要點(diǎn)●利用AIGC工具豆包生成商品場景圖?！袷褂冒俣華I圖片助手去除多余圖像?！袷褂肞hotoshopCS6中的矩形工具、圓角矩形工具與直線工具繪制裝飾形狀。三、實(shí)操演練操作方法：見教材P149。任務(wù)三課堂案例：保溫杯網(wǎng)店商品詳情頁設(shè)計(jì)一、設(shè)計(jì)理念●由于兒童保溫杯的顏色為鮮明且對比度高的色系，所以首焦海報(bào)的顏色選擇淺米色作為背景色，以此作為襯托，使商品更加突出?！癫捎缅e落有致的圖像放置方法，讓頁面版式顯得靈活多變，富有設(shè)計(jì)感。●使用矩形對每組商品細(xì)節(jié)進(jìn)行分割，使買家能夠更直觀、更準(zhǔn)確地了解商品信息。二、技術(shù)要點(diǎn)●使用PhotoshopCS6中的矩形工具和圓角矩形工具繪制出頁面中所需的圖形。●使用PhotoshopCS6中的“投影”圖層樣式為海報(bào)中的圖形添加投影效果。●使用美圖設(shè)計(jì)室的“AI商品圖”功能為商品更換背景。三、實(shí)操演練操作方法：見教材P157。項(xiàng)目實(shí)訓(xùn)：寧夏枸杞商品詳情頁設(shè)計(jì)以某網(wǎng)店的寧夏枸杞圖片為素材設(shè)計(jì)網(wǎng)店商品詳情頁。除了全面地展示商品自然生長、顆粒飽滿等賣點(diǎn)之外，商品信息也要精練，能夠清晰地反映出寧夏枸杞天然、品質(zhì)優(yōu)的特點(diǎn)。整個(gè)頁面以紅色和棕色為主色調(diào)，不僅與枸杞的顏色相呼應(yīng)，還可以給人一種健康、高品質(zhì)的感覺，符合商品的高端定位。技能拓展：利用豆包精修鉆戒商品圖在處理需要精修的商品圖片時(shí)，尤其是珠寶首飾這類對細(xì)節(jié)要求極高的商品，傳統(tǒng)的修圖人員往往需要投入大量的時(shí)間與精力對圖片進(jìn)行細(xì)致的處理，這包括去除產(chǎn)品表面的瑕疵、還原其真實(shí)光澤和塑造光影效果等。而使用AIGC工具只需準(zhǔn)確地輸入對圖片精修的具體要求，比如描述想要去除的瑕疵類型、期望達(dá)到的顏色效果、希望塑造的光影風(fēng)格等詳細(xì)指令，即可快速生成一幅大致符合預(yù)期的精修圖片。這種方式無須創(chuàng)作者具備專業(yè)的圖像處理技能，整個(gè)操作過程簡便、快捷，大大縮短了圖片精修所耗費(fèi)的時(shí)間。操作方法：見教材P163。歸納與提高商品詳情頁是整個(gè)網(wǎng)店的亮點(diǎn)和聚焦點(diǎn)，通常情況下買家在網(wǎng)購時(shí)是看了商品詳情頁之后再下單購買的。一個(gè)充滿設(shè)計(jì)感的商品詳情頁能夠激發(fā)買家的消費(fèi)欲望，促使其快速下單購買，由此可見商品詳情頁設(shè)計(jì)的重要性與必要性。通過本項(xiàng)目的學(xué)習(xí)，我們了解了商品詳情頁設(shè)計(jì)的重要性、商品詳情頁的設(shè)計(jì)思路，掌握了使用AIGC工具撰寫商品詳情頁文案的方法，還掌握了設(shè)計(jì)商品詳情頁的方法與技巧。項(xiàng)目九商品短視頻制作教學(xué)內(nèi)容一、商品短視頻的作用二、課堂案例：商品主圖視頻制作三、課堂案例：商品詳情頁視頻制作教學(xué)要求【知識目標(biāo)】1．了解商品短視頻的作用。2．掌握商品主圖視頻的制作方法。3．掌握商品詳情頁視頻的制作方法?！灸芰δ繕?biāo)】1．能夠利用剪映專業(yè)版的“營銷成片”功能生成商品主圖短視頻。2．能夠利用剪映專業(yè)版剪輯商品詳情頁短視頻?！舅仞B(yǎng)目標(biāo)】1．拒絕千篇一律，不被模板束縛，在作品中體現(xiàn)個(gè)性與創(chuàng)意。2．關(guān)注媒介創(chuàng)新趨勢，充分利用新的媒介手段實(shí)現(xiàn)既定目的。教學(xué)重點(diǎn)1．商品主圖視頻制作2．商品詳情頁視頻制作教學(xué)難點(diǎn)1．商品主圖視頻制作2．商品詳情頁視頻制作教學(xué)方法講授法、案例法、實(shí)踐法課時(shí)數(shù)5課時(shí)教學(xué)內(nèi)容任務(wù)一商品短視頻的作用商品短視頻可以幫助賣家全方位地宣傳商品，它在一定程度上替代了傳統(tǒng)的圖文表達(dá)形式，雖然只有短短的十幾秒或幾十秒的時(shí)間，卻能讓買家非常直觀地了解商品的基本信息和設(shè)計(jì)亮點(diǎn)，為買家提供多感官的商品體驗(yàn)，從而節(jié)約買家進(jìn)行咨詢的時(shí)間，有助于讓買家快速下單。商品短視頻的主要作用如下。1．增強(qiáng)視聽刺激，激發(fā)購買欲2．多方位、多角度地展示商品的細(xì)節(jié)特征3．提供貼心、專業(yè)的服務(wù)4．提高網(wǎng)店商品轉(zhuǎn)化率任務(wù)二課堂案例：商品主圖視頻制作一、生成短視頻使用剪映專業(yè)版的“營銷成片”功能時(shí)，該功能能夠自動提取商品的關(guān)鍵信息，并據(jù)此進(jìn)行后續(xù)的剪輯處理。操作方法：見教材P167。二、視頻調(diào)色使用剪映專業(yè)版中的“自定義調(diào)節(jié)”“基礎(chǔ)調(diào)節(jié)”和“濾鏡”功能對視頻素材進(jìn)行調(diào)色，使畫面主體更加突出，細(xì)節(jié)更加分明。操作方法：見教材P169。三、制作視頻效果雖然AIGC工具的出現(xiàn)使短視頻制作的技術(shù)難度大幅降低，但創(chuàng)作者仍需保持自己的創(chuàng)意和個(gè)性化風(fēng)格，避免過度依賴模板導(dǎo)致視頻內(nèi)容同質(zhì)化。操作方法：見教材P170。任務(wù)三課堂案例：商品詳情頁視頻制作一、修剪視頻素材將素材導(dǎo)入“媒體”面板中，并按照順序?qū)⑺夭奶砑拥綍r(shí)間線上，然后根據(jù)背景音樂的節(jié)奏對素材進(jìn)行修剪。操作方法：見教材P171。二、制作分屏畫面效果使用剪映專業(yè)版的“蒙版”功能制作分屏畫面效果，通過分屏畫面的形式，能夠從不同角度、不同場景全方位地呈現(xiàn)商品的多種應(yīng)用場景。操作方法：見教材P172。三、視頻調(diào)色對短視頻進(jìn)行調(diào)色，以增強(qiáng)短視頻畫面的質(zhì)感，使短視頻中的各個(gè)視頻片段具有統(tǒng)一的色調(diào)。操作方法：見教材P173。四、編輯字幕使用剪映專業(yè)版的“文字模板”“默認(rèn)文本”和“動畫”等功能為短視頻添加產(chǎn)品信息字幕。操作方法：見教材P174。五、添加貼紙和特效使用剪映專業(yè)版的“貼紙”和“特效”功能，為短視頻增添更多趣味性與創(chuàng)意性元素。操作方法：見教材P176。項(xiàng)目實(shí)訓(xùn)：利用剪映專業(yè)版智能剪輯商品主圖視頻使用剪映專業(yè)版的“營銷成片”功能，導(dǎo)入“素材文件\項(xiàng)目九\項(xiàng)目實(shí)訓(xùn)”中所有的視頻素材，輸入產(chǎn)品名稱、產(chǎn)品賣點(diǎn)、適用人群及優(yōu)惠活動等信息，智能生成爆漿肉松小貝主圖視頻。技能拓展：利用可靈AI將圖片生成視頻常用的AIGC視頻生成工具多種多樣，其中包括可靈AI、即夢AI、Runway、HeyGen、LumaAI、Pika等。這些工具具備強(qiáng)大的功能，它們不僅支持創(chuàng)作者通過輸入文本以及上傳圖像的方式來生成視頻，還能實(shí)現(xiàn)視頻內(nèi)容的繼續(xù)創(chuàng)作功能，使視頻創(chuàng)作變得簡單、高效。本技能拓展是利用可靈AI將圖片生成視頻。操作方法：見教材P177。歸納與提高目前，網(wǎng)店平臺中的很多圖文內(nèi)容正在被更直觀、更生動的短視頻所取代。商品短視頻能夠讓買家快速了解商品的特點(diǎn)、功能與品牌理念等，迅速吸引買家的興趣，讓其產(chǎn)生購買的意愿。本項(xiàng)目通過兩個(gè)實(shí)操案例詳細(xì)介紹了利用剪映專業(yè)版制作商品主圖視頻和商品詳情頁視頻的方法。通過本項(xiàng)目的學(xué)習(xí)，我們不僅了解了商品短視頻的作用，還掌握了商品主圖視頻和商品詳情頁視頻的制作方法。項(xiàng)目十移動端網(wǎng)店裝修美工設(shè)計(jì)教學(xué)內(nèi)容一、分析移動端網(wǎng)店頁面結(jié)構(gòu)二、移動端網(wǎng)店首頁裝修設(shè)計(jì)三、移動端網(wǎng)店詳情頁裝修設(shè)計(jì)四、課堂案例：家裝節(jié)家具網(wǎng)店移動端首頁設(shè)計(jì)教學(xué)要求【知識目標(biāo)】1．了解移動端網(wǎng)店頁面的框架結(jié)構(gòu)。2．了解移動端網(wǎng)店圖片發(fā)布尺寸要求。3．掌握移動端網(wǎng)店首頁的裝修設(shè)計(jì)方法。4．掌握移動端網(wǎng)店詳情頁裝修設(shè)計(jì)的FABE原則?！灸芰δ繕?biāo)】1．能夠根據(jù)移動端網(wǎng)店裝修設(shè)計(jì)的需要設(shè)計(jì)輪播圖片及優(yōu)惠券。2．能夠根據(jù)需要制作商品分類導(dǎo)航板塊及商品分類展示板塊。3．能夠?qū)σ苿佣司W(wǎng)店詳情頁進(jìn)行裝修設(shè)計(jì)?！舅仞B(yǎng)目標(biāo)】1．堅(jiān)守誠信原則，用真實(shí)的商品信息取信于用戶。2．嚴(yán)謹(jǐn)務(wù)實(shí)，培養(yǎng)對工作的責(zé)任意識和擔(dān)當(dāng)精神。教學(xué)重點(diǎn)1．移動端網(wǎng)店首頁裝修設(shè)計(jì)2．移動端網(wǎng)店詳情頁裝修設(shè)計(jì)3．家裝節(jié)家具網(wǎng)店移動端首頁設(shè)計(jì)教學(xué)難點(diǎn)1．移動端網(wǎng)店首頁裝修設(shè)計(jì)2．家裝節(jié)家具網(wǎng)店移動端首頁設(shè)計(jì)教學(xué)方法講授法、案例法、實(shí)踐法課時(shí)數(shù)4課時(shí)教學(xué)內(nèi)容任務(wù)一分析移動端網(wǎng)店頁面結(jié)構(gòu)一、移動端網(wǎng)店頁面的框架結(jié)構(gòu)移動端網(wǎng)店和PC端網(wǎng)店一樣，也存在頁面之間的跳轉(zhuǎn)，以及頁面結(jié)構(gòu)層級關(guān)系的安排與布置問題。為了便于管理，手機(jī)淘寶已經(jīng)為賣家劃分好了相應(yīng)的網(wǎng)店頁面框架結(jié)構(gòu)。賣家雖然可以不必考慮圖標(biāo)、按鈕等設(shè)計(jì)，也不必過多地考慮移動端網(wǎng)店頁面的結(jié)構(gòu)組成，但是需要在已有的框架結(jié)構(gòu)中添加能夠促進(jìn)買家消費(fèi)的內(nèi)容。此外，根據(jù)框架結(jié)構(gòu)給所添加的內(nèi)容設(shè)置相應(yīng)的商品或活動鏈接也尤為重要，否則會導(dǎo)致網(wǎng)店框架結(jié)構(gòu)變得非?；靵y，不被買家所理解，甚至阻礙買家的購買進(jìn)程。二、移動端網(wǎng)店圖片發(fā)布尺寸要求為了規(guī)范設(shè)計(jì)，手機(jī)淘寶對圖片的發(fā)布尺寸做出了非常明確的要求，具體如下。●首頁和詳情頁圖片寬度通常為480~1600像素。●在圖片上添加文字時(shí)，中文字號不低于30點(diǎn)；英文和阿拉伯?dāng)?shù)字字號不低于20點(diǎn)?！駡D片高度不超過960像素（建議高度不超過600像素）；支持JPG、JPEG、GIF、PNG圖片格式。任務(wù)二移動端網(wǎng)店首頁裝修設(shè)計(jì)一、設(shè)計(jì)輪播圖片輪播圖片也稱焦點(diǎn)圖，通常被放在移動端網(wǎng)店的首焦頁面，也就是第一屏中能被買家快速看到的位置。通常情況下，輪播圖片包含網(wǎng)店上新活動通知、促銷活動展示等內(nèi)容。輪播圖片的內(nèi)容要簡潔、文字要清晰、主次要分明，并且要能達(dá)到快速傳播的目的。此外，在設(shè)計(jì)時(shí)要注意控制好輪播圖片的數(shù)量，以及展示的先后順序。二、設(shè)計(jì)優(yōu)惠券優(yōu)惠券是一種用于吸引買家注意力的重要促銷手段，通常情況下會被放在網(wǎng)店首頁的醒目位置，這樣可以在第一時(shí)間引起買家的關(guān)注，并讓其產(chǎn)生進(jìn)店購買的欲望。在進(jìn)行移動端網(wǎng)店的裝修設(shè)計(jì)時(shí)，一般將優(yōu)惠券放在店招或輪播圖片的下方，并留出足夠的空間，使用較為鮮明的色彩，讓買家能夠注意到優(yōu)惠券，這樣才能真正發(fā)揮其引流與促進(jìn)轉(zhuǎn)化的作用。三、設(shè)計(jì)商品分類導(dǎo)航板塊通常情況下，在移動端網(wǎng)店首頁中，輪播圖片與優(yōu)惠券板塊下方是分類導(dǎo)航板塊。在設(shè)計(jì)這個(gè)板塊時(shí)，要注意控制好圖片的顯示尺寸與比例，使其能夠清晰與完整地展示在買家面前，起到快速導(dǎo)航的作用。四、設(shè)計(jì)商品分類展示板塊在商品分類導(dǎo)航板塊下方是商品分類展示板塊。通常情況下，移動端網(wǎng)店首頁的商品分類展示板塊會呈現(xiàn)以爆款或促銷商品為主的商品圖片，將全店爆款或非常優(yōu)惠的商品圖片放在第一區(qū)，以促進(jìn)購買力的快速轉(zhuǎn)化。移動端買家更關(guān)注網(wǎng)店新品與應(yīng)季商品的發(fā)布，因此在移動端網(wǎng)店首頁商品分類展示板塊的第二區(qū)中可以對新品與換季商品進(jìn)行重點(diǎn)展示。商品分類展示板塊的分區(qū)不宜過多，每一區(qū)中的商品圖片也不宜過多，因?yàn)檫^多的分區(qū)或商品圖片會導(dǎo)致買家長時(shí)間下拉頁面，使其失去瀏覽的耐心。任務(wù)三移動端網(wǎng)店詳情頁裝修設(shè)計(jì)一、詳情頁裝修的FABE原則FABE原則是一種通過4個(gè)關(guān)鍵環(huán)節(jié)來回應(yīng)買家訴求，巧妙解答買家關(guān)心的問題，從而順利實(shí)現(xiàn)商品銷售目標(biāo)的銷售模式，其4個(gè)關(guān)鍵環(huán)節(jié)如下。F——特征（Features）A——優(yōu)點(diǎn)（Advantages）B——利益（Benefits）E——證據(jù)（Evidence）在FABE原則的指引下，需要做到以下幾點(diǎn)，讓詳情頁的描述變得更加符合網(wǎng)店的銷售環(huán)境，以增加買家的購買動力。1．真實(shí)感2．邏輯感3．親切感4．對話感5．氛圍感6．正規(guī)感二、突出商品信息移動端網(wǎng)店必須在前三屏對商品的賣點(diǎn)和重要信息進(jìn)行清晰的描述，因?yàn)檫^于煩瑣的關(guān)聯(lián)信息可能需要占用好幾屏的空間，每占用一屏的空間便會讓買家多一次滑動操作，這樣可能會導(dǎo)致買家不耐煩，讓其失去對商品的購買興趣，最終造成買家流失。任務(wù)四課堂案例：家裝節(jié)家具網(wǎng)店移動端首頁設(shè)計(jì)一、設(shè)計(jì)理念●在配色上使用藍(lán)色作為頁面背景，使用橙色作為點(diǎn)綴色。鮮明的配色將商品時(shí)尚、有活力的特質(zhì)展現(xiàn)得恰到好處。●首焦圖通過頗具設(shè)計(jì)感的標(biāo)題文字布局吸引買家視線，搭配黃色的家具商品圖，讓買家一眼就能了解網(wǎng)店銷售的主要商品，從而充分地展示網(wǎng)店信息?！裆唐氛故緟^(qū)域通過不同的商品布局方式讓頁面顯得協(xié)調(diào)而不單一，增強(qiáng)買家進(jìn)一步深入了解商品的欲望。二、技術(shù)要點(diǎn)●在PhotoshopCS6中，通過添加圖層樣式對文字效果進(jìn)行控制?！裨赑hotoshopCS6中，創(chuàng)建剪貼蒙版，控制圖像的顯示區(qū)域。●使用美圖設(shè)計(jì)室的“AI商品圖”功能生成商品場景圖。三、實(shí)操演練操作方法：見教材P191。項(xiàng)目實(shí)訓(xùn)：秋日養(yǎng)生季食品網(wǎng)店移動端首頁設(shè)計(jì)利用提供的素材為某食品網(wǎng)店設(shè)計(jì)秋日養(yǎng)生季移動端首頁。在設(shè)計(jì)過程中，整體風(fēng)格要突出秋日的氛圍，選取黃色作為主色，橘紅色為輔色。首頁布局應(yīng)清晰、合理，需要設(shè)置輪播圖片、優(yōu)惠券、滿額即贈和新品推薦四個(gè)板塊。技能拓展：利用WeShop唯象替換模特和場景在商品推廣過程中，如果發(fā)現(xiàn)現(xiàn)有的模特或場景展示效果不理想，利用AIGC工具可以迅速對其進(jìn)行調(diào)整和優(yōu)化。無須重新組織拍攝等煩瑣流程，只需在工具中修改相關(guān)參數(shù)，更換模特形象，調(diào)整場景氛圍等，就能快速得到新的、更符合預(yù)期的展示效果。以WeShop唯象網(wǎng)站為例，其“模特商店”中提供了100多個(gè)不同風(fēng)格、年齡、國籍的AI模特形象，可以滿足各種品牌的不同需求，無論是時(shí)尚、商務(wù)、休閑等風(fēng)格的品牌，都能找到相匹配的模特。歸納與提高移動端網(wǎng)店可以看作PC端網(wǎng)店的延續(xù)，在進(jìn)行網(wǎng)店裝修時(shí)要把握“用戶體驗(yàn)”這一關(guān)鍵點(diǎn)。移動端網(wǎng)店主要依附于智能手機(jī)平臺，與移動端中的其他應(yīng)用一樣，在設(shè)計(jì)移動端網(wǎng)店頁面時(shí)，要結(jié)合智能手機(jī)平臺的特色，設(shè)計(jì)出更加注重交互體驗(yàn)與友好度的頁面，這樣才能贏得買家的喜愛，從而提高轉(zhuǎn)化率。項(xiàng)目十一新媒體視覺設(shè)計(jì)教學(xué)內(nèi)容一、認(rèn)識新媒體視覺設(shè)計(jì)二、了解新媒體平臺特性與視覺需求三、課堂案例：新媒體平臺海報(bào)視覺設(shè)計(jì)四、課堂案例：新媒體平臺配圖排版設(shè)計(jì)五、課堂案例：女裝新品上市H5設(shè)計(jì)教學(xué)要求【知識目標(biāo)】1．了解新媒體視覺設(shè)計(jì)的基本原則和基本要素。2．熟知新媒體平臺特性與相應(yīng)的視覺需求。3．掌握新媒體平臺海報(bào)、配圖排版和H5的設(shè)計(jì)方法?！灸芰δ繕?biāo)】1．能夠?yàn)樾旅襟w平臺海報(bào)進(jìn)行視覺設(shè)計(jì)。2．能夠?yàn)樾旅襟w平臺配圖進(jìn)行排版設(shè)計(jì)?！舅仞B(yǎng)目標(biāo)】1．培養(yǎng)媒介素養(yǎng)，自覺維護(hù)信息生態(tài)的健康。2．提高信息敏感度，同時(shí)保持對熱點(diǎn)信息的理性分析。教學(xué)重點(diǎn)1．新媒體視覺設(shè)計(jì)的基本原則與基本要素2．新媒體平臺海報(bào)視覺設(shè)計(jì)3．新媒體平臺配圖排版設(shè)計(jì)4．女裝新品上市H5設(shè)計(jì)教學(xué)難點(diǎn)1．新媒體平臺海報(bào)視覺設(shè)計(jì)2．新媒體平臺配圖排版設(shè)計(jì)3．女裝新品上市H5設(shè)計(jì)教學(xué)方法講授法、案例法、實(shí)踐法課時(shí)數(shù)5課時(shí)教學(xué)內(nèi)容任務(wù)一認(rèn)識新媒體視覺設(shè)計(jì)一、了解新媒體視覺設(shè)計(jì)新媒體視覺設(shè)計(jì)是在數(shù)字化的新媒體平臺上進(jìn)行的創(chuàng)意設(shè)計(jì)，涵蓋網(wǎng)站、社交媒體、移動應(yīng)用等的相關(guān)設(shè)計(jì)。它運(yùn)用色彩、圖形、圖像、文字、排版等視覺元素，以實(shí)現(xiàn)信息有效傳達(dá)、品牌塑造、用戶體驗(yàn)提升，以及與用戶互動交流。新媒體視覺設(shè)計(jì)必