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

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

綜合設計010203任務一

設計乳膠制品類網(wǎng)店首頁任務二

設計乳膠床墊詳情頁任務三

設計手機端獼猴桃詳情頁項目導航項目八

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

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

任務

1項目八

綜合設計

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

設計乳膠制品類網(wǎng)店首頁項目八

綜合設計項目八

綜合設計任務一

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

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

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

使用形狀工具繪制所需圖形，并在屬性面板中對繪制的圖形進行相關設置。一、設計要點

項目八

綜合設計任務一

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

本案例中的店鋪主營乳膠制品主打純天然材質，以“提供一個健康干凈的睡眠環(huán)境”為店鋪宗旨，因此以白色為主要色調，以綠色和干凈的淺灰色為輔色，以棕色為點綴，如圖所示。綠色象征著生機勃勃，體現(xiàn)出人類向往自然，崇尚自然的美好追求。因此，使用白色和綠色的搭配不僅可以傳達出店鋪的宗旨，還符合店鋪風格，使顧客可以一眼看出本店鋪的主打產(chǎn)品為天然制品。二、配色分析

項目八

綜合設計任務一

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

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

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

項目八

綜合設計任務一

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

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

綜合設計設計乳膠床墊詳情頁

任務

2項目八

綜合設計

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

設計乳膠床墊詳情頁項目八

綜合設計項目八

綜合設計

通過形狀工具和繪圖工具繪制所需圖形，并在屬性面板中對繪制的圖形進行相關設置。

使用文字工具添加相應文本，并將其與圖形進行組合。

使用調整面板中的調整命令對商品圖片的色彩進行調整，使商品圖片更加美觀，并符合商品詳情頁的整體風格。一、設計要點

任務二

設計乳膠床墊詳情頁項目八

綜合設計

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

任務二

設計乳膠床墊詳情頁項目八

綜合設計

任務實施任務二

設計乳膠床墊詳情頁課堂小結（1）詳情頁的痛點怎樣展示？（2）乳膠床墊詳情頁設計要點有哪些？項目八

綜合設計設計手機端獼猴桃詳情頁

任務

3項目八

綜合設計任務三

設計手機端獼猴桃詳情頁項目八

綜合設計

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

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

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

（3）當商品說明文字較多時，可對關鍵字進行放大、變色等處理，讓消費者迅速了解商品特性。

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

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

設計手機端獼猴桃詳情頁項目八

綜合設計項目八

綜合設計

使用形狀工具和繪圖工具繪制所需圖形，并在屬性面板中對繪制的圖形進行相關設置。

使用文字工具添加相應文本，并將其與圖形進行組合。

對文本應用圖層樣式，豐富頁面效果。一、設計要點

任務三

設計手機端獼猴桃詳情頁項目八

綜合設計

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

任務三

設計手機端獼猴桃詳情頁項目八

綜合設計

任務實施任務三

設計手機端獼猴桃詳情頁課堂小結（1）移動端商品詳情頁的寬度一般是多少？（2）移動端商品詳情頁設計要點有哪些？項目八

綜合設計項目八

綜合設計青春風采

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