網(wǎng)店視覺設計與制作教學教案

網(wǎng)店視覺設計與制作（全彩慕課版）電子教案

任課教師專業(yè)日期年月日

教學課題認識網(wǎng)店視覺設計與制作課時2課時

所選教材《網(wǎng)店視覺設計與制作《全彩慕課版）》教學班級

一、教學目標

1.知識目標

（1）:解網(wǎng)店視覺設計與制作；

（2）熟悉網(wǎng)店視覺設計與制作的相關崗位職責與能力。

2.技能目標

（1）能夠通過各種途徑了解網(wǎng)店視覺設計知識；

（2）能夠鑒賞各種風格的網(wǎng)點視覺設計；

（3）能夠登錄并瀏覽各個網(wǎng)店平臺”

3.職業(yè)素養(yǎng)

（1）引導學生對本課程的學習興趣和職業(yè)興趣；

（2）培養(yǎng)動手能力、鑒賞能力、自學意識。

二、教學方法與資源

教學方法：講授法、案例分析法、分組學習法

教學資源（媒體和平臺）：一體化教室、PPT、淘寶、京東、拼多多、速賣通

三、教學重難點

教學重點：網(wǎng)店設計的相關理論知識；

教學難點：網(wǎng)店設計與制作包含的各人部分。

四、教學問題預測及方案

問題預測：內容比較理論，介紹比較廣泛，學生不易理解；

解決方案：準備網(wǎng)店視覺設計案例，通過圖片展示吸引學生興趣，同時介紹工作崗位中比較有意

思的部分，加強學生對崗位的興趣。

五、教學結構流程設計

教學過程教師活動學生活動

【課前準備】（5分鐘）考勤問好

1.課前三件事：點名；檢查衛(wèi)生和物品擺放；檢查學生精神狀態(tài)；檢查衛(wèi)生衛(wèi)生整理

2.安全教育清點學生人數(shù)準備書本

上交手機

【教學實施】老師介紹本節(jié)學生接收

1.教學導入（5分鐘）學習的知識

介紹本節(jié)將要學習的內容點，并板書老

2.提問引入（15分鐘）

是否聽說過網(wǎng)店視覺設計？師提問學生回答

是否了解過運營崗位和設計崗位？老師發(fā)布任務

3.本節(jié)內容介紹（60分鐘）

（1）:解網(wǎng)店視覺設計與制作

網(wǎng)店視覺設計融了合平面設計行業(yè)和電商行業(yè)，主要為線老師講解知識學生認真聽講

上店鋪（網(wǎng)店）進行視覺設計，是連接網(wǎng)店與消費者的橋梁能夠點

達到促銷與推廣的目的。網(wǎng)店視覺設計與制作的內容主要如下。

①設計人員需要選擇合適的圖像處理軟件，通過調整商品

圖片，提升商品的吸引力。

②商品主圖和主圖視頻是消費者首先看到的部分，視覺效

果優(yōu)秀的商品主圖和主圖視頻吸引消費者，從而為商品帶來更多

的流量，提高商品的成交量和競爭力。

③制作商品詳情頁要懂得挖掘消費者對商品的真實需求，

給消費者構建一個清晰的商品印象。

④網(wǎng)店首頁是網(wǎng)店的“門面”，會直接影響網(wǎng)店的流量。

用心策劃和設計的網(wǎng)店首頁能夠使消費者產(chǎn)生點擊的欲望。老師講解知識學生認真聽講

⑤商品短視頻是目前較熱門且能有效提高商品轉化率的點

方式。常見的商品短視頻有商品詳情頁短視頻、網(wǎng)店首頁短視頻，

以及在自媒體平臺上傳播的商品或品牌宣傳短視頻等。

（2）網(wǎng)店視覺設計與制作的相關崗位

分別介紹運營崗位和設計崗位的相關知識。

①運營人員負責是為網(wǎng)店視覺設計與制作做前期準備，為

網(wǎng)店美工進行網(wǎng)店視覺設計與制作提供基礎支持。老師講解知識學生認真做筆

②網(wǎng)店視覺設計就是網(wǎng)店運營的視覺呈現(xiàn)，網(wǎng)店美工需根點記

據(jù)運營要求，結合自身的設計品位，設計出既符合運營要求又具

有良好視覺效果的作品。要成為一名合格的網(wǎng)店美工，至少要具

有藝術表現(xiàn)的能力和適應消費者的能刀。老師講解知識

點學生聽講

【課后作業(yè)】（5分鐘）

1.本小節(jié)學習體會布置作業(yè)完成作業(yè)

2.下一堂課的預習

六、課后教學反思（教師填寫）

網(wǎng)店視覺設計與制作（全彩慕課版）電子教案

任課教師專業(yè)日期年月日

教學課題了解網(wǎng)店視覺設計與制作的要素課時2課時

所選教材《網(wǎng)店視覺設計與制作《全彩慕課版）》教學班級

一、教學目標

1.知識目標

（1）〕解網(wǎng)店視覺設計風格；

（2）熟悉網(wǎng)店視覺設計中的構圖與布局原則；

（3）熟悉色彩搭配相關知識；

（4）掌握合理的文字搭配。

2.技能目標

（1）能夠按照構圖與布局原則進行網(wǎng)店視覺設計；

（2）能夠在網(wǎng)店視覺設計中合理運用色彩；

（3）能夠應用適合網(wǎng)店風格的字體。

3.職業(yè)素養(yǎng)

（1）提升個人網(wǎng)店視覺設計審美能力；

（2）培養(yǎng)不同色彩搭配方案的應用能力。

二、教學方法與資源

教學方法：講授法、案例分析法、分組學習法；

教學資源（媒體和平臺）：一體化教室、PPT、淘寶、京東、拼多多、速賣通。

三、教學重難點

教學重點：中國風、構圖方式、頁面布局方式；

教學難點：頁面布局原則、色彩搭配、文字的布局技巧。

四、教學問題預測及方案

問題預測：學生對網(wǎng)店視覺設計沒有深入的了解，無法應用好網(wǎng)店視覺設計與制作的各要素；

解決方案：準備大量案例讓學生觀看并學習，讓學生自行搜索收集課程內容相關的優(yōu)秀案例。

五、教學結構流程設計

教學過程教師活動學生活動

【課前準備】（5分鐘）考勤問好

1.課前三件事：點名；檢查衛(wèi)生和物品擺放；檢查學生精神狀態(tài)；檢查衛(wèi)生衛(wèi)生整理

2.安全教育清點學生人數(shù)準備書本

上交手機

【教學實施】老師介紹本節(jié)學生接收

1.教學導入（5分鐘）學習的知識

介紹本節(jié)將要學習的內容點，并板書老

2.提問引入（15分鐘）

當前有哪些流行的視覺設計風格？各有什么特點？師提問學生回答

常用的構圖方式有哪些？老師發(fā)布任務

3.本節(jié)內容介紹（60分鐘）

（1）視覺設計風格

準確定位網(wǎng)店視覺設計風格有助于提高網(wǎng)店銷售額。定位

時需要綜合參考網(wǎng)店的各項因素。老師講解知識學生認真聽講

⑥極簡風近幾年較為流行，能夠凸顯出品牌對于質感的追點、

求，常用于調性較高的網(wǎng)店。

⑦中國風源于我國傳統(tǒng)文化，結合現(xiàn)代設計更具有全新的

現(xiàn)代美感。

⑧賽博朋克風具有強烈的科技感和未來感，具有較強的視

覺沖擊力與感染力，常用于新興領域。

⑨插畫風豐富多彩、充滿趣味，應用領域和受眾非常廣泛。

⑩C4D具有獨特的立體渲染效果，能夠增加趣味性。

（2）構圖與布局

合理的構圖與布局能讓消費者賞心悅目，凸顯網(wǎng)店商品。

①構圖方式包括橫向構圖、豎向構圖、三角形構圖、疏密老師講解知識學生認真聽講

相間構圖等。點

②頁面布局規(guī)則包括主次分明、中心突出；大小搭配、相

互呼應；區(qū)域劃分明確；保持一致性；合理使用頁面元素。

③設計時需要根據(jù)網(wǎng)店整體氛圍排列布局圖像和文本。

（3）色彩

色彩在網(wǎng)店視覺設計中尤為重要，網(wǎng)點視覺設計與制作時

不能忽略色彩搭配問題。老師講解知識學生認真做筆

①需要理解色彩屬性與色彩對比。點記

②理解主色、輔助色與點綴色的應用。遵循一定的比例與

步驟使用色彩。

（4）文字

選擇合適的文字搭配能夠增強網(wǎng)店的視覺效果，直觀傳遞

商品信息，引導消費者完成商品的瀏覽與購買。

①根據(jù)頁面特征可以選擇書法體、宋體、黑體、藝術體等

字體。

②文字布局時需要注意文字統(tǒng)一、字體的搭配與變化、文老師講解知識

字的層次布局，使畫面更加美觀。點學生聽講

【課后作業(yè)】（5分鐘）

1.本小節(jié)學習體會布置作業(yè)完成作業(yè)

2.下一堂課的預習

六、課后教學反思（教師填寫）

網(wǎng)店視覺設計與制作（全彩慕課版）電子教案

任課教師專業(yè)日期年月日

教學課題同步實訓一一鑒賞網(wǎng)店首頁的視覺設計課時2課時

所選教材《網(wǎng)店視覺設計與制作〔全彩慕課版）》教學班級

一、教學目標

1.知識目標

（1）:解并分析網(wǎng)店首頁；

（2）熟悉網(wǎng)店首頁的配色、內容、布局等。

2.技能目標

（1）能夠分析網(wǎng)店的配色特點和作用；

（2）能夠分析板塊的布局及其作用；

（3）能夠分析圖片的構圖方式。

3.職業(yè)素養(yǎng)

（1）提升網(wǎng)店首頁視覺設計的審美意識；

（2）培養(yǎng)學習并分析案例的能力。

二、教學方法和資源

教學方法：實例分析、操作和演示；

教學資源（媒體和平臺）：一體化教空、淘寶網(wǎng)、筆記本、筆。

三、教學重難點

教學重點：打開網(wǎng)店首頁查看視覺設計、鑒賞網(wǎng)店的首頁；

教學難點：鑒賞網(wǎng)店的首頁。

四、教學問題預測及方案

問題預測：學生對網(wǎng)店首頁視覺設計入熟悉，不知道以什么方式去鑒賞，難以掌握分析方法；

解決方案：教師首先講解鑒賞方法，然后安排學生自己鑒賞，并在教室巡視指導。

五、教學結構流程設計

教學過程教師活動學生活動

【課前準備】（5分鐘）考勤問好

1.課前三件事：點名；檢查衛(wèi)生和物品擺放；檢查學生精神狀態(tài)；檢查衛(wèi)生衛(wèi)生整理

2.安全教育清點學生人數(shù)準備書本

上交手機

【教學實施】

1.教學導入（5分鐘）老師講解學生聽講

介紹本次實訓的目的和重要性。

2.開展實訓（60分鐘）

（1）分析網(wǎng)站整體配色老師提醒，展學生接收并學

通過瀏覽器訪問淘寶網(wǎng)，打開“美的空調旗艦店”首頁。觀示案例習分析方法

察整體配色并分析所使用顏色的用途。

（2）分析分類導航

通過位置與顏色分析分類導航。

（3）分析網(wǎng)店促銷海報

通過構圖、顏色、字體分析網(wǎng)店促銷海報的視覺設計。

（4）分析其余8個板塊

通過布局分析其余板塊的視覺效昊。老師講解學生聽講

（5）分析商品圖片

通過圖片構圖方式、色彩分析商品圖片的效果和作用。

（6）分析頁尾

通過顏色、展示內容分析頁尾的作用。

3.實訓評價（15分鐘）老師收取實訓學生上交實訓

老師根據(jù)學生上交的作業(yè)，對學生的實訓結果進行打分。成果并進行評作業(yè)并進行總

價結

【課后作業(yè)】（5分鐘）

1.本小節(jié)學習體會布置作業(yè)完成作業(yè)

2.下一堂課的預習

六、課后教學反思（教師填寫）

網(wǎng)店視覺設計與制作（全彩慕課版）電子教案

任課教師專業(yè)日期年月日

教學課題掌握基礎技法課時2課時

所選教材《網(wǎng)店視覺設計與制作〔全彩慕課版）》教學班級

一、教學目標

1.知識目標

（1）:解圖片類型以及尺寸和格式要求；

（2）熟悉調整圖片色彩的方式；

（3）掌握存儲圖片的方法。

2.技能目標

（1）能夠按要求裁剪圖片大小；

（2）能夠根據(jù)網(wǎng)店視覺設計與制作需要按照調色原則調色；

（3）能夠按照格式要求存儲圖片。

3.職業(yè)素養(yǎng)

（1）挎掘學生對圖片制作與調色的興趣與潛力；

（2）鞏固學生的基礎能力。

二、教學方法與資源

教學方法：講授法、案例分析法、分組學習法、同步演練；

教學資源（媒體和平臺）：一體化教室、外網(wǎng)、PPT、photoshopo

三、教學重難點

教學重點：常見的圖片類型及其尺寸、按照規(guī)定比例裁剪圖片、圖片調色原則、調整偏色圖片、

調整曝光不足的商品圖片、替換商品圖片顏色、切片優(yōu)化儲存；

教學難點：常見的圖片類型及其尺寸、圖片調色原則、調整偏色圖片、替換商品圖片顏色。

四、教學問題預測及方案

問題預測：學生缺少實際圖片處理經(jīng)驗，無法上手操作；

解決方案：安排上手實操，讓學生實際進行圖片基礎操作，加深知識理解。

五、教學結構流程設計

教學過程教師活動學生活動

【課前準備】（5分鐘）考勤問好

1.課前三件事：點名；檢查衛(wèi)生和物品擺放；檢查學生精神狀態(tài)；檢查衛(wèi)生衛(wèi)生整理

2.安全教育清點學生人數(shù)準備書本

上交手機

【教學實施】老師介紹本節(jié)學生接收

1.教學導入（5分鐘）學習的知識

介紹本節(jié)將要學習的內容點，并板書老

2.提問引入（15分鐘）

是否了解過圖片大小和格式？師提問學生回答

是否動手調整過圖片色調？老師發(fā)布任務

3.本節(jié)內容介紹（60分鐘）

（1）調整圖片大小

網(wǎng)店視覺設計與制作相關的圖片對尺寸有固定的要求，需

要按照尺寸要求來調整圖片大小。

①不同的平臺以及網(wǎng)店的不同模塊的圖片格式和尺寸要

求不同，制作前需要提前了解。老師舉例講解學生認真聽講

②按照符合主圖要求的長寬比例裁剪圖片。知識點

③應用“圖像大小”命令調整圖片至合適大小。

（2）調整圖片色彩

拍攝時容易因為各種客觀原因無法展現(xiàn)商品真實顏色，就

需要后期調整商品色彩。

①為圖片調色時需遵循感情色彩調色、整體色調自然、色

彩不失真調色原則，使圖片滿足網(wǎng)店視覺設計與制作需要。

②使用“色彩平衡”“色相/飽和度”“可選顏色”等命

令調整偏色商品，使商品恢復本身顏色。

③使用“亮度/對比度”“曲線”“色階”等命令來調整老師展示案例學生認真做筆

圖片亮度與曝光。記

④備使用“替換顏色”命令替換不滿意的顏色。

（3）存儲圖片

根據(jù)不同電商平臺的要求，使用Photoshop存儲圖片。

①常見的圖片存儲格式有RAW格式、JPEG格式、PNG格

式等。

②選擇“文件”/“存儲”命令或按【Ctrl+S】組合鍵，可

以直接存儲文件。老師展示案例學生認真聽講

③直接制作的圖片尺寸過大，無法直接上傳并應用于電商做筆記

平臺，需要根據(jù)具體情況進行切片處理再使用。

【課后作業(yè)】（5分鐘）

1.本小節(jié)學習體會布置作業(yè)完成作業(yè)

2.下一堂課的預習

六、課后教學反思（教師填寫）

網(wǎng)店視覺設計與制作（全彩慕課版）電子教案

任課教師專業(yè)日期年月日

教學課題掌握基礎技法課時2課時

所選教材《網(wǎng)店視覺設計與制作〔全彩慕課版）》教學班級

一、教學目標

1.知識目標

（1）:解圖片類型以及尺寸和格式要求；

（2）熟悉調整圖片色彩的方式；

（3）掌握存儲圖片的方法。

2.技能目標

（1）能夠按要求裁剪圖片大?。?/p>

（2）能夠根據(jù)網(wǎng)店視覺設計與制作需要按照調色原則調色；

（3）能夠按照格式要求存儲圖片。

3.職業(yè)素養(yǎng)

（1）挎掘學生對圖片制作與調色的興趣與潛力；

（2）鞏固學生的基礎能力。

二、教學方法與資源

教學方法：講授法、案例分析法、分組學習法、同步演練；

教學資源（媒體和平臺）：一體化教室、外網(wǎng)、PPT、photoshopo

三、教學重難點

教學重點：常見的圖片類型及其尺寸、按照規(guī)定比例裁剪圖片、圖片調色原則、調整偏色圖片、

調整曝光不足的商品圖片、替換商品圖片顏色、切片優(yōu)化儲存；

教學難點：常見的圖片類型及其尺寸、圖片調色原則、調整偏色圖片、替換商品圖片顏色。

四、教學問題預測及方案

問題預測：學生缺少實際圖片處理經(jīng)驗，無法上手操作；

解決方案：安排上手實操，讓學生實際進行圖片基礎操作，加深知識理解。

五、教學結構流程設計

教學過程教師活動學生活動

【課前準備】（5分鐘）考勤問好

1.課前三件事：點名；檢查衛(wèi)生和物品擺放；檢查學生精神狀態(tài)；檢查衛(wèi)生衛(wèi)生整理

2.安全教育清點學生人數(shù)準備書本

上交手機

【教學實施】老師介紹本節(jié)學生接收

1.教學導入（5分鐘）學習的知識

介紹本節(jié)將要學習的內容點，并板書老

2.提問引入（15分鐘）

是否了解過圖片大小和格式？師提問學生回答

是否動手調整過圖片色調？老師發(fā)布任務

3.本節(jié)內容介紹（60分鐘）

（1）調整圖片大小

網(wǎng)店視覺設計與制作相關的圖片對尺寸有固定的要求，需

要按照尺寸要求來調整圖片大小。

④不同的平臺以及網(wǎng)店的不同模塊的圖片格式和尺寸要

求不同，制作前需要提前了解。老師舉例講解學生認真聽講

⑤按照符合主圖要求的長寬比例裁剪圖片。知識點

⑥應用“圖像大小”命令調整圖片至合適大小。

（2）調整圖片色彩

拍攝時容易因為各種客觀原因無法展現(xiàn)商品真實顏色，就

需要后期調整商品色彩。

⑤為圖片調色時需遵循感情色彩調色、整體色調自然、色

彩不失真調色原則，使圖片滿足網(wǎng)店視覺設計與制作需要。

（§）使用“色彩平衡”“色相/飽和度”“可選顏色”等命

令調整偏色商品，使商品恢復本身顏色。

⑦使用“亮度/對比度”“曲線”“色階”等命令來調整老師展示案例學生認真做筆

圖片亮度與曝光。記

⑧備使用“替換顏色”命令替換不滿意的顏色。

（3）存儲圖片

根據(jù)不同電商平臺的要求，使用Photoshop存儲圖片。

④常見的圖片存儲格式有RAW格式、JPEG格式、PNG格

式等。

⑤選擇“文件”/“存儲”命令或按【Ctrl+S】組合鍵，可

以直接存儲文件。老師展示案例學生認真聽講

⑥直接制作的圖片尺寸過大，無法直接上傳并應用于電商做筆記

平臺，需要根據(jù)具體情況進行切片處理再使用。

【課后作業(yè)】（5分鐘）

1.本小節(jié)學習體會布置作業(yè)完成作業(yè)

2.下一堂課的預習

六、課后教學反思（教師填寫）

網(wǎng)店視覺設計與制作（全彩慕課版）電子教案

任課教師專業(yè)日期年月日

教學課題同步實訓---創(chuàng)作新品宣傳Banner課時2課時

所選教材《網(wǎng)店視覺設計與制作〔全彩慕課版）》教學班級

一、教學目標

1.知識目標

（1）掌握Banner的使用場景；

（2）掌握Baaner的制作流程。

2.技能目標

（1）能夠使用“魔棒工具”完成摳圖；

（2）能夠使用“污點修復畫筆工具”修復污漬；

（3）能夠按照需求的格式保存制作好的Banner圖片。

3.職業(yè)素養(yǎng)

（1）深入探索Banner制作的相關技法；

（2）提高對Banner的審美素養(yǎng)與鑒賞能力。

二、教學方法和資源

教學方法：實例分析、操作和演示；

教學資源（媒體和平臺）：一體化教空、PPT、Photoshopx筆記本、筆。

三、教學重難點

教學重點：扣取耳機素材、修復污漬、調整圖片大小、按要求格式存儲圖片；

教學難點：扣取耳機素材、修復污漬。

四、教學問題預測及方案

問題預測：學生動手能力較弱，無法掌握具體操作方法；

解決方案：教師首先講解制作方法，然后安排學生實操，并在教室巡視指導。

五、教學結構流程設計

教學過程教師活動學生活動

【課前準備】（5分鐘）考勤問好

1.課前三件事：點名；檢查衛(wèi)生和物品擺放；檢查學生精神狀態(tài)；檢查衛(wèi)生衛(wèi)生整理

2.安全教育清點學生人數(shù)準備書本

上交手機

【教學實施】

1.教學導入（5分鐘）老師講解學生聽講

介紹本次實訓的目的和重要性。

2.開展實訓（60分鐘）

（1）扣取耳機素材老師提醒，展學生接收并學

打開耳機素材后，發(fā)現(xiàn)有純白背景，無法直接使用，進行摳示制作案例習制作方法

圖處理。

（2）修復污漬

使用“污點修復畫筆工具”修復耳機圖像上的瑕疵。

（3）調整圖片大小

按照網(wǎng)站要求的Banner圖片大小調整圖片大小。

（4）輸入文字

使用“橫排文字工具”輸入宣傳文字。老師講解學生聽講

（5）按要求格式存儲圖片

按【CtH+S】組合鍵存儲圖片為要求的格式。

3.實訓評價（15分鐘）老師收取實訓學生上交實訓

老師根據(jù)學生上交的作業(yè)，對學上的實訓結果進行打分。成果并進行評作業(yè)并進行總

價結

【課后作業(yè)】（5分鐘）

1.本小節(jié)學習體會布置作業(yè)完成作業(yè)

2.下一堂課的預習

六、課后教學反思（教師填寫）

電子教案

任課教師專業(yè)日期年月日

教學課題認識主圖與主圖視頻課時2課時

所選教材《網(wǎng)店視覺設計與制作〔全彩慕課版）》教學班級

一、教學目標

1.知識目標

（1）:解主圖和主圖視頻的規(guī)范；

（2）熟悉設計主圖背景的方式；

（3）掌握主圖背景的設計要點。

2.技能目標

（1）能夠設置主圖和主圖視頻的從尺寸和格式等；

（2）能夠把握主圖設計的創(chuàng)意賣點；

（3）能夠掌握主圖的使用場景。

3.職業(yè)素養(yǎng)

（1）激發(fā)學生對設計主圖的興趣與創(chuàng)新精神；

（2）培養(yǎng)對主圖設計的洞察力。

二、教學方法與資源

教學方法：講授法、案例分析法、分組學習法、同步演練；

教學資源（媒體和平臺）：一體化教室、PPT、淘寶網(wǎng)、京東、拼多多、速賣通。

三、教學重難點

教學重點：主圖的規(guī)范、主圖視頻的規(guī)范、主圖的設計要點、主圖視頻的設計要點；

教學難點：主圖的設計要點、主圖視頻的設計要點。

四、教學問題預測及方案

問題預測：比較理論，學生不易了解；

解決方案：準備主圖和主圖視頻案例，啟發(fā)學生理解，同時詳細介紹優(yōu)秀的設計案例，提升學習

興趣。

五、教學結構流程設計

教學過程教師活動學生活動

【課前準備】（5分鐘）考勤問好

1.課前三件事：點名；檢查衛(wèi)生和物品擺放；檢查學生精神狀態(tài)；檢查衛(wèi)生衛(wèi)生整理

2.安全教育清點學生人數(shù)準備書本

上交手機

【教學實施】老師介紹本節(jié)學生接收

1.教學導入（5分鐘）學習的知識

介紹本節(jié)將要學習的內容。點，并板書老

2.提問引入（15分鐘）

是否了解過主圖的設計規(guī)范？師提問學生回答

是否了解過主圖視頻的設計要點？老師發(fā)布任務

3.本節(jié)內容介紹（60分鐘）

（1）:解主圖和主圖視頻的規(guī)范

主圖和主圖視頻通常是商品詳情頁的第一屏，是消費者第

一時間看到的商品圖像。

①主圖一般有5張，搜索結果頁面默認展示第一張主圖圖

片，第五張主圖必須為商品白底圖，有大小、尺寸、格式、內容老師舉例講解學生認真聽講

等要求；知識點

②主圖視頻主要以視頻的形式補充展示商品，通常顯示在

商品頁面的第一張主圖之前，有大小、尺寸、時長、格式、內容

等要求。

（2）掌握主圖和主圖視頻的設計要點老師展示案例學生認真做筆

主圖和主圖視頻是展示商品的第一扇窗，需要在短時間內記

迅速吸引消費者的注意力。

①主圖圖片場景、商品清晰度、主圖顏色、創(chuàng)意賣點、輔助

展示等因素都是設計主圖時需要注意的要點。老師展示案例學生認真聽講

②主圖視頻主要為了使消費者快速了解商品。應該結合消做筆記

費者對商品的實際需求，以展示商品或商品的設計理念為主。

【課后作業(yè)】（5分鐘）

1.本小節(jié)學習體會布置作業(yè)完成作業(yè)

2.下一堂課的預習

六、課后教學反思（教師填寫）

網(wǎng)店視覺設計與制作（全彩慕課版）電子教案

任課教師專業(yè)日期年月日

教學課題設計與制作主圖課時2課時

所選教材《網(wǎng)店視覺設計與制作〔全彩慕課版）》教學班級

一、教學目標

1.知識目標

（1）:解設計主圖背景的步驟；

（2）熟悉摳取商品圖片的方式；

（3）掌握為主圖添加文字的方法。

2.技能目標

（1）能夠按要求設計主圖圖片；

（2）能夠使用“魔棒工具”摳取圖片；

（3）能夠繪制圓角矩形并設置顏色、漸變樣式等屬性。

3.職業(yè)素養(yǎng)

（1）物掘學生使用多種設計表現(xiàn)方式的能力；

（2）提升學生動手操作的興趣。

二、教學方法與資源

教學方法：講授法、案例分析法、分組學習法、同步演練；

教學資源（媒體和平臺）：一體化教室、外網(wǎng)、PPT、photoshopo

三、教學重難點

教學重點：設計主圖背景、摳取商品圖像、繪制標簽并添加文字；

教學難點：設計主圖背景、摳取商品圖像。

四、教學問題預測及方案

問題預測：學生缺少實際圖片制作經(jīng)驗，無法上手操作；

解決方案：安排上手實操，讓學生實際進行圖片基礎操作，加深知識理解。

五、教學結構流程設計

教學過程教師活動學生活動

【課前準備】（5分鐘）考勤問好

1.課前三件事：點名；檢查衛(wèi)生和物品擺放；檢查學生精神狀態(tài)；檢查衛(wèi)生衛(wèi)生整理

2.安全教育清點學生人數(shù)準備書本

上交手機

【教學實施】老師介紹本節(jié)學生接收

1.教學導入（5分鐘）學習的知識

介紹本節(jié)將要學習的內容點，并板書老

2.提問引入（15分鐘）

是否設計過主圖背景？師提問學生回答

是否動手摳取過商品圖像？老師發(fā)布任務

3.本節(jié)內容介紹（60分鐘）

（1）設計主圖背景

玉米主圖需要展現(xiàn)玉米的特點、價格和優(yōu)惠活動。主圖背景老師講解知識學生認真聽講

需要突顯玉米并使得配色和諧，可選擇玉米綠葉顏色相近的綠點并操作

色設計主圖背景中的漸變色塊，再添加黃色點綴。

（2）摳取商品圖像

玉米圖片帶有原始背景，需要先取摳玉米圖像。

（3）繪制標簽并添加文字

玉米主圖中的文字主要有標題、宣傳語、價格、促銷信息等。老師展示案例學生認真聽講

為區(qū)分信息可先繪制裝飾標簽再添加文字。做筆記

【課后作業(yè)】（5分鐘）

1.本小節(jié)學習體會布置作業(yè)完成作業(yè)

2.下一堂課的預習

六、課后教學反思（教師填寫）

網(wǎng)店視覺設計與制作（全彩慕課版）電子教案

任課教師專業(yè)日期年月日

教學課題設計與制作主圖視頻課時2課時

所選教材《網(wǎng)店視覺設計與制作〔全彩慕課版）》教學班級

一、教學目標

1.知識目標

（1）:解設計主圖視頻的步驟；

（2）熟悉剪映專業(yè)版的操作界面；

（3）掌握使用剪映專業(yè)版基本功能的方法。

2.技能目標

（1）能夠按設計要求設計主圖視頻；

（2）能夠將主圖視頻素材導入剪映專業(yè)版；

（3）能夠使用剪映專業(yè)版分割視頻素材。

3.職業(yè)素養(yǎng)

（1）提升動手操作能力；

（2）積極了解新興的設計工具，開闊眼界。

二、教學方法與資源

教學方法：講授法、案例分析法、分組學習法、同步演練；

教學資源（媒體和平臺）：一體化教室、PPT、剪映專業(yè)版。

三、教學重難點

教學重點：了解剪映專業(yè)版、導入主圖視頻素材、剪輯主圖視頻素材、添加視頻轉場和特效、添

加文字和背景音樂、制作視頻封面并導出視頻；

教學難點：剪輯主圖視頻素材、添加視頻轉場和特效、添加文字和背景音樂。

四、教學問題預測及方案

問題預測：學生缺少實際圖片制作經(jīng)驗，無法上手操作；

解決方案：安排上手實操，讓學生實際進行圖片基礎操作，加深知識理解。

五、教學結構流程設計

教學過程教師活動學生活動

【課前準備】（5分鐘）考勤問好

1.課前三件事：點名；檢查衛(wèi)生和物品擺放；檢查學生精神狀態(tài)；檢查衛(wèi)生衛(wèi)生整理

2.安全教育清點學生人數(shù)準備書本

上交手機

【教學實施】老師介紹本節(jié)學生接收

1.教學導入（5分鐘）學習的知識

介紹本節(jié)將要學習的內容。點，并板書老

2.提問引入（15分鐘）

是否接觸過剪輯軟件？師提問學生回答

是否了解過剪映專業(yè)版？老師發(fā)布任務

3.本節(jié)內容介紹（60分鐘）

（1）講解剪映專業(yè)版工作界面

剪映具有全面的剪輯功能，能夠滿足大部分視頻剪輯新手老師講解知識學生認真聽講

的需求，剪映專業(yè)版工作界面包括素材選項卡組、“播放器”面點并操作

板、功能選項卡組、“時間軸”面板。

（2）導入主圖視頻素材

在剪映專業(yè)版中新建草稿，確定玉米主圖視頻的尺寸規(guī)范，老師講解知識學生認真聽講

然后導入需要的主圖視頻素材。點并操作

（3）剪輯主圖視頻素材

在“時間軸”面板中按照時間順序剪輯主圖視頻素材，并按

照需要調整素材。老師講解知識學生認真聽講

（4）添加視頻轉場和特效點并操作

在不同的視頻場景之間添加轉場和特效。

（5）添加文字和背景音樂

在主圖視頻中添加說明文字，添加舒緩、自然的背景音樂。老師展示案例學生認真聽講

（6）制作視頻封面并導出視頻做筆記

以“瑞農(nóng)玉米”為主題制作視頻封面，完成視頻后導出。

【課后作業(yè)】（5分鐘）

1.本小節(jié)學習體會布置作業(yè)完成作業(yè)

2.下一堂課的預習

六、課后教學反思（教師填寫）

網(wǎng)店視覺設計與制作（全彩慕課版）電子教案

任課教師專業(yè)日期年月日

教學課題同步實訓一一制作家電主圖和主圖視頻課時2課時

所選教材《網(wǎng)店視覺設計與制作〔全彩慕課版）》教學班級

一、教學目標

1.知識目標

（1）:解家電主圖的使用場景；

（2）;解家電主圖視頻的制作流程。

2.技能目標

（1）能夠使用Photoshop新建主圖文件；

（2）能夠使用“畫筆工具”繪制主圖背景；

（3）能夠使用剪映專業(yè)版調整視頻的播放速度。

3.職業(yè)素養(yǎng)

（1）制作符合商業(yè)要求、平臺要求、法律規(guī)范的主圖；

（2）提升學習制作主圖視頻的學習興趣。

二、教學方法和資源

教學方法：實例分析、操作和演示；

教學資源（媒體和平臺）：一體化教空、PPT、Photoshop、剪映專業(yè)版。

三、教學重難點

教學重點：填充背景、繪制圖形、添加圖層樣式、調整視頻播放速度、為視頻添加貼紙；

教學難點：添加圖層樣式、調整視頻播放速度、為視頻添加貼紙。

四、教學問題預測及方案

問題預測：學生動手能力較弱，無法掌握具體操作方法；

解決方案：教師首先講解制作方法，然后安排學生實踐操作。

五、教學結構流程設計

教學過程教師活動學生活動

【課前準備】（5分鐘）考勤問好

1.課前三件事：點名；檢查衛(wèi)生和物品擺放；檢查學生精神狀態(tài)；檢查衛(wèi)生衛(wèi)生整理

2.安全教育清點學生人數(shù)準備書本

上交手機

【教學實施】

1.教學導入（5分鐘）老師講解學生聽講

介紹本次實訓的目的和重要性。

2.開展實訓（60分鐘）

（1）新建圖片文件老師提醒，展學生接收并學

啟動Photoshop,按照主圖大小、分辨率要求新建“電熱示制作案例習方法

鍋主圖”文件。

（2）制作背景

填充背景為漸變紫色，使用形狀工具組和“畫筆工具”繪

制背景所需圖形。

（3）調整素材

置入“電熱鍋.tif”素材，適當增加素材飽和度，并為白

色矩形添加需要的圖層樣式。老師講解學生聽講

（4）輸入文字

使用“橫排文字工具”輸入文字，適當調整文字大小和位置。

（5）為文字添加圖層樣式并保存文件

為文字添加需要的圖層樣式，并按【Ctrl+S】組合鍵存儲圖

片為要求的格式。

（6）創(chuàng)建視頻草稿

啟動剪映專業(yè)版，按需求新建草稿。

（7）導入視頻素材

導入電熱鍋視頻素材，適當調整視頻的播放速度。

（8）導出電熱鍋主圖視頻

為視頻添加文字、貼紙和背景音樂，導出電熱鍋主圖視頻。老師收取實訓學生上交實訓

3.實訓評價（15分鐘）成果并進行評作業(yè)并進行總

老師根據(jù)學生上交的作業(yè)，對學生的實訓結果進行打分。價結

【課后作業(yè)】（5分鐘）

1.本小節(jié)學習體會布置作業(yè)完成作業(yè)

2.下一堂課的預習

六、課后教學反思（教師填寫）

網(wǎng)店視覺設計與制作（全彩慕課版）電子教案

任課教師專業(yè)日期年月日

教學課題認識商品詳情頁課時2課時

所選教材《網(wǎng)店視覺設計與制作〔全彩慕課版）》教學班級

一、教學目標

1.知識目標

（1）:解商品詳情頁的概念；

（2）熟悉商品詳情頁包含的內容；

（3）掌握焦點圖的作用。

2.技能目標

（1）能夠區(qū)分商品詳情頁的內容；

（2）能夠應用商品詳情頁的設計思路；

（3）能夠收集并分析優(yōu)秀的商品詳情頁設計。

3.職業(yè)素養(yǎng)

（1）激發(fā)學生對商品詳情頁的設計興趣；

（2）培養(yǎng)分析問題的能力、鑒賞作品的能力。

二、教學方法與資源

教學方法：講授法、案例分析法、分組學習法、同步演練；

教學資源（媒體和平臺）：一體化教室、PPT、淘寶網(wǎng)、京東、拼多多、速賣通。

三、教學重難點

教學重點：商品詳情頁的內容、提煉商品賣點、確定設計風格、準備設計素材、確定配色方案、

選擇合適的字體、制作商品詳情頁；

教學難點：提煉商品賣點、確定設計風格、確定配色方案。

四、教學問題預測及方案

問題預測：比較理論，學生不易了解，無法上手操作；

解決方案：準備商品詳情頁設計案例，啟發(fā)學生理解，提升學習興趣。

五、教學結構流程設計

教學過程教師活動學生活動

【課前準備】（5分鐘）考勤問好

1.課前三件事：點名；檢查衛(wèi)生和物品擺放；檢查學生精神狀態(tài)；檢查衛(wèi)生衛(wèi)生整理

2.安全教育清點學生人數(shù)準備書本

上交手機

【教學實施】老師介紹本節(jié)學生接收

1.教學導入（5分鐘）學習的知識

介紹本節(jié)將要學習的內容。點，并板書老

2.提問引入（15分鐘）

是否仔細閱讀過商品詳情頁？師提問學生回答

商品詳情頁包含哪些內容？老師發(fā)布任務

3.本節(jié)內容介紹（60分鐘）

（1）明確商品詳情頁的內容老師講解知識學生認真聽講

商品詳情頁用于展示商品詳細信息，主要介紹商品的外形、點

尺寸、材質、顏色、功能、使用方法等內容。主要包括：焦

點圖、商品賣點及細節(jié)圖、商品其他信息圖、商品規(guī)格參數(shù)圖、

商品配送及售后圖等。

（2）梳理商品詳情頁的設計思路

商品詳情頁的制作是一項系統(tǒng)且完整的工作，根據(jù)需要梳

理出柑橘詳情頁的整體設計思路。

①提煉商品賣點：新鮮、美味營養(yǎng)、爽口多汁等。

②確定設計風格：與柑橘本身意境匹配的、傳遞清新自然老師展示案例學生認真做筆

之感的風格。記

③準備設計素材：商品的實拍圖、從網(wǎng)絡上下載的符合設

計風格的背景素材、裝飾素材和其他素材等。

④確定配色方案：主色可定為橙色，少量綠色點綴，白色

作為部分文字的顏色來突顯

⑤選擇合適的字體：“思源黑體CN”“思源宋體CN”

⑥制作商品詳情頁：豎向版式，在Photoshop中制作。老師展示案例學生聽講

【課后作業(yè)】（5分鐘）

1.本小節(jié)學習體會布置作業(yè)完成作業(yè)

2.下一堂課的預習

六、課后教學反思（教師填寫）

網(wǎng)店視覺設計與制作（全彩慕課版）電子教案

任課教師專業(yè)日期年月日

教學課題設計與制作商品焦點圖課時2課時

所選教材《網(wǎng)店視覺設計與制作〔全彩慕課版）》教學班級

一、教學目標

1.知識目標

（1）:解合成焦點背景圖的步驟；

（2）熟悉美化商品圖像的方式；

（3）掌握設計文字的