《圖形圖像處理項(xiàng)目式教程網(wǎng)店美工方向》 項(xiàng)目八

圖形圖像處理項(xiàng)目式教程網(wǎng)店美工簽到0102掃碼下載文旌課堂APP掃碼簽到（2022.3.2515:00至2022.3.2515:10）簽到方式教師通過“文旌課堂APP”生成簽到二維碼，并設(shè)置簽到時(shí)間，學(xué)生通過“文旌課堂APP”掃描“簽到二維碼”進(jìn)行簽到。。綜合設(shè)計(jì)【項(xiàng)目八】項(xiàng)目本項(xiàng)目將帶領(lǐng)大家學(xué)習(xí)網(wǎng)店的整體設(shè)計(jì)，包括PC端和手機(jī)端，以提升對Photoshop各項(xiàng)技能的綜合運(yùn)用能力，進(jìn)一步掌握網(wǎng)店中各主要元素的設(shè)計(jì)方法。項(xiàng)目導(dǎo)讀項(xiàng)目八

綜合設(shè)計(jì)010203任務(wù)一

設(shè)計(jì)乳膠制品類網(wǎng)店首頁任務(wù)二

設(shè)計(jì)乳膠床墊詳情頁任務(wù)三

設(shè)計(jì)手機(jī)端獼猴桃詳情頁項(xiàng)目導(dǎo)航項(xiàng)目八

綜合設(shè)計(jì)01知識目標(biāo)?掌握網(wǎng)店首頁的設(shè)計(jì)方法。?掌握PC端商品詳情頁的設(shè)計(jì)方法。?掌握手機(jī)端商品詳情頁的設(shè)計(jì)方法。02技能目標(biāo)?能根據(jù)店鋪的經(jīng)營品類和商品特性，綜合運(yùn)用圖層、文字、色彩、濾鏡等工具，設(shè)計(jì)各具特色的網(wǎng)店首頁和商品詳情頁，展示店鋪形象和商品特點(diǎn)，提高商品點(diǎn)擊率和轉(zhuǎn)化率。03思政目標(biāo)?不斷練習(xí)，在實(shí)踐中提高自己的專業(yè)技能，做到舉一反三，靈活運(yùn)用。?養(yǎng)成嚴(yán)謹(jǐn)認(rèn)真的工作態(tài)度和精益求精的工匠精神。項(xiàng)目目標(biāo)項(xiàng)目八

綜合設(shè)計(jì)設(shè)計(jì)乳膠制品類網(wǎng)店首頁

任務(wù)

1項(xiàng)目八

綜合設(shè)計(jì)

本任務(wù)設(shè)計(jì)乳膠制品類網(wǎng)店首頁，畫面主體色調(diào)為白色，呈現(xiàn)出清新自然的視覺效果。此外，整個(gè)頁面使用矩形元素進(jìn)行模塊化布局，使內(nèi)容一目了然，具有很高的視覺辨識度。任務(wù)分析任務(wù)一

設(shè)計(jì)乳膠制品類網(wǎng)店首頁項(xiàng)目八

綜合設(shè)計(jì)項(xiàng)目八

綜合設(shè)計(jì)任務(wù)一

設(shè)計(jì)乳膠制品類網(wǎng)店首頁

使用快速選擇工具摳出所需圖案，并使圖案和背景融合。

使用“剪貼蒙版”功能對模特及產(chǎn)品圖片進(jìn)行修飾。

使用形狀工具繪制所需圖形，并在屬性面板中對繪制的圖形進(jìn)行相關(guān)設(shè)置。一、設(shè)計(jì)要點(diǎn)

項(xiàng)目八

綜合設(shè)計(jì)任務(wù)一

設(shè)計(jì)乳膠制品類網(wǎng)店首頁

本案例中的店鋪主營乳膠制品主打純天然材質(zhì)，以“提供一個(gè)健康干凈的睡眠環(huán)境”為店鋪?zhàn)谥迹虼艘园咨珵橹饕{(diào)，以綠色和干凈的淺灰色為輔色，以棕色為點(diǎn)綴，如圖所示。綠色象征著生機(jī)勃勃，體現(xiàn)出人類向往自然，崇尚自然的美好追求。因此，使用白色和綠色的搭配不僅可以傳達(dá)出店鋪的宗旨，還符合店鋪風(fēng)格，使顧客可以一眼看出本店鋪的主打產(chǎn)品為天然制品。二、配色分析

項(xiàng)目八

綜合設(shè)計(jì)任務(wù)一

設(shè)計(jì)乳膠制品類網(wǎng)店首頁

本案例中頁面的組成元素基本都是矩形，這樣的設(shè)計(jì)使畫面內(nèi)容更加規(guī)整。另外，在布局設(shè)計(jì)中通過讓兩種不同方向的矩形交替出現(xiàn)，呈現(xiàn)出多樣化的視覺效果，消除了畫面過于規(guī)整導(dǎo)致的沉悶、呆板的弊端，同時(shí)表現(xiàn)出很強(qiáng)的穩(wěn)定性。

此外，通過產(chǎn)品圖片和文字的合理搭配，讓布局符合力學(xué)原理，表現(xiàn)出強(qiáng)烈的視覺空間感和重量感，對產(chǎn)品的主次表現(xiàn)有非常重要的推動(dòng)作用。三、布局分析

項(xiàng)目八

綜合設(shè)計(jì)任務(wù)一

設(shè)計(jì)乳膠制品類網(wǎng)店首頁

任務(wù)實(shí)施課堂小結(jié)（1）用矩形元素模塊化布局方法（2）乳膠制品網(wǎng)店首頁設(shè)計(jì)要點(diǎn)有哪些？項(xiàng)目八

綜合設(shè)計(jì)設(shè)計(jì)乳膠床墊詳情頁

任務(wù)

2項(xiàng)目八

綜合設(shè)計(jì)

本任務(wù)設(shè)計(jì)乳膠床墊詳情頁，該頁面通過整體展示、賣點(diǎn)說明、細(xì)節(jié)展示等方式介紹乳膠床墊的特點(diǎn)和信息，體現(xiàn)其專業(yè)化、高品質(zhì)。任務(wù)分析任務(wù)二

設(shè)計(jì)乳膠床墊詳情頁項(xiàng)目八

綜合設(shè)計(jì)項(xiàng)目八

綜合設(shè)計(jì)

通過形狀工具和繪圖工具繪制所需圖形，并在屬性面板中對繪制的圖形進(jìn)行相關(guān)設(shè)置。

使用文字工具添加相應(yīng)文本，并將其與圖形進(jìn)行組合。

使用調(diào)整面板中的調(diào)整命令對商品圖片的色彩進(jìn)行調(diào)整，使商品圖片更加美觀，并符合商品詳情頁的整體風(fēng)格。一、設(shè)計(jì)要點(diǎn)

任務(wù)二

設(shè)計(jì)乳膠床墊詳情頁項(xiàng)目八

綜合設(shè)計(jì)

本案例以綠色為主色，以干凈的淺灰色為輔色，配色方案如圖8-33所示。綠色是生命的顏色，蘊(yùn)藏著無限生機(jī)，象征著生命與希望。現(xiàn)今綠色生活的意識已逐漸深入人心，滲透到人們的日常生活中。本案例以綠色為主色，不僅可以體現(xiàn)床墊材質(zhì)為天然乳膠，能給人天然健康的賣點(diǎn)，還可以與店鋪首頁中的色調(diào)進(jìn)行呼應(yīng)。此外，綠色和灰色搭配，給人以鎮(zhèn)靜、安寧、清爽的感覺，充分表現(xiàn)出商品特性，同時(shí)使整個(gè)頁面層次豐富。二、配色分析

任務(wù)二

設(shè)計(jì)乳膠床墊詳情頁項(xiàng)目八

綜合設(shè)計(jì)

任務(wù)實(shí)施任務(wù)二

設(shè)計(jì)乳膠床墊詳情頁課堂小結(jié)（1）詳情頁的痛點(diǎn)怎樣展示？（2）乳膠床墊詳情頁設(shè)計(jì)要點(diǎn)有哪些？項(xiàng)目八

綜合設(shè)計(jì)設(shè)計(jì)手機(jī)端獼猴桃詳情頁

任務(wù)

3項(xiàng)目八

綜合設(shè)計(jì)任務(wù)三

設(shè)計(jì)手機(jī)端獼猴桃詳情頁項(xiàng)目八

綜合設(shè)計(jì)

隨著人們生活節(jié)奏的不斷加快和移動(dòng)電子商務(wù)的迅猛發(fā)展，越來越多的人趨向于使用手機(jī)購物。下面簡單介紹設(shè)計(jì)手機(jī)端詳情頁需要注意的問題

（1）手機(jī)端商品詳情頁的寬度一般是750像素，高度自定；一張圖片的大小最好不要超過200KB，以免影響加載速度。

（2）受手機(jī)屏幕大小的影響，商品詳情頁的內(nèi)容不宜太多，要有序呈現(xiàn)且簡潔明了，讓消費(fèi)者對商品特性一目了然。

（3）當(dāng)商品說明文字較多時(shí)，可對關(guān)鍵字進(jìn)行放大、變色等處理，讓消費(fèi)者迅速了解商品特性。

（4）選擇商品圖片時(shí)，既要有表現(xiàn)商品外觀信息的整體展示，又要有表現(xiàn)商品特性、賣點(diǎn)等的細(xì)節(jié)項(xiàng)目八綜合設(shè)計(jì)190展示，以方便消費(fèi)者全面了解商品。

本案例設(shè)計(jì)手機(jī)端獼猴桃詳情頁，該頁面通過整體展示、賣點(diǎn)說明、細(xì)節(jié)展示、售后服務(wù)等方式介紹獼猴桃的賣點(diǎn)和信息，體現(xiàn)其風(fēng)味和口感。任務(wù)分析任務(wù)三

設(shè)計(jì)手機(jī)端獼猴桃詳情頁項(xiàng)目八

綜合設(shè)計(jì)項(xiàng)目八

綜合設(shè)計(jì)

使用形狀工具和繪圖工具繪制所需圖形，并在屬性面板中對繪制的圖形進(jìn)行相關(guān)設(shè)置。

使用文字工具添加相應(yīng)文本，并將其與圖形進(jìn)行組合。

對文本應(yīng)用圖層樣式，豐富頁面效果。一、設(shè)計(jì)要點(diǎn)

任務(wù)三

設(shè)計(jì)手機(jī)端獼猴桃詳情頁項(xiàng)目八

綜合設(shè)計(jì)

本案例以綠色為主要色調(diào)，以橙紅色為點(diǎn)綴色，配色方案如圖8-53所示。綠色是健康的顏色，也是本款商品果肉特有的顏色，整個(gè)頁面以綠色為主色，可以體現(xiàn)本款商品無公害的農(nóng)產(chǎn)品形象。此外，對圖形圖像處理項(xiàng)目式教程（網(wǎng)店美工方向）191不同元素使用不同深淺的綠色，可以豐富畫面效果。二、配色分析

任務(wù)三

設(shè)計(jì)手機(jī)端獼猴桃詳情頁項(xiàng)目八

綜合設(shè)計(jì)

任務(wù)實(shí)施任務(wù)三

設(shè)計(jì)手機(jī)端獼猴桃詳情頁課堂小結(jié)（1）移動(dòng)端商品詳情頁的寬度一般是多少？（2）移動(dòng)端商品詳情頁設(shè)計(jì)要點(diǎn)有哪些？項(xiàng)目八

綜合設(shè)計(jì)項(xiàng)目八

綜合設(shè)計(jì)青春風(fēng)采

工匠精神是我們國家民族精神