网店视觉设计与制作教学教案

网店视觉设计与制作（全彩慕课版）电子教案

任课教师专业日期年月日

教学课题认识网店视觉设计与制作课时2课时

所选教材《网店视觉设计与制作《全彩慕课版）》教学班级

一、教学目标

1.知识目标

（1）:解网店视觉设计与制作；

（2）熟悉网店视觉设计与制作的相关岗位职责与能力。

2.技能目标

（1）能够通过各种途径了解网店视觉设计知识；

（2）能够鉴赏各种风格的网点视觉设计；

（3）能够登录并浏览各个网店平台”

3.职业素养

（1）引导学生对本课程的学习兴趣和职业兴趣；

（2）培养动手能力、鉴赏能力、自学意识。

二、教学方法与资源

教学方法：讲授法、案例分析法、分组学习法

教学资源（媒体和平台）：一体化教室、PPT、淘宝、京东、拼多多、速卖通

三、教学重难点

教学重点：网店设计的相关理论知识；

教学难点：网店设计与制作包含的各人部分。

四、教学问题预测及方案

问题预测：内容比较理论，介绍比较广泛，学生不易理解；

解决方案：准备网店视觉设计案例，通过图片展示吸引学生兴趣，同时介绍工作岗位中比较有意

思的部分，加强学生对岗位的兴趣。

五、教学结构流程设计

教学过程教师活动学生活动

【课前准备】（5分钟）考勤问好

1.课前三件事：点名；检查卫生和物品摆放；检查学生精神状态；检查卫生卫生整理

2.安全教育清点学生人数准备书本

上交手机

【教学实施】老师介绍本节学生接收

1.教学导入（5分钟）学习的知识

介绍本节将要学习的内容点，并板书老

2.提问引入（15分钟）

是否听说过网店视觉设计？师提问学生回答

是否了解过运营岗位和设计岗位？老师发布任务

3.本节内容介绍（60分钟）

（1）:解网店视觉设计与制作

网店视觉设计融了合平面设计行业和电商行业，主要为线老师讲解知识学生认真听讲

上店铺（网店）进行视觉设计，是连接网店与消费者的桥梁能够点

达到促销与推广的目的。网店视觉设计与制作的内容主要如下。

①设计人员需要选择合适的图像处理软件，通过调整商品

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

②商品主图和主图视频是消费者首先看到的部分，视觉效

果优秀的商品主图和主图视频吸引消费者，从而为商品带来更多

的流量，提高商品的成交量和竞争力。

③制作商品详情页要懂得挖掘消费者对商品的真实需求，

给消费者构建一个清晰的商品印象。

④网店首页是网店的“门面”，会直接影响网店的流量。

用心策划和设计的网店首页能够使消费者产生点击的欲望。老师讲解知识学生认真听讲

⑤商品短视频是目前较热门且能有效提高商品转化率的点

方式。常见的商品短视频有商品详情页短视频、网店首页短视频，

以及在自媒体平台上传播的商品或品牌宣传短视频等。

（2）网店视觉设计与制作的相关岗位

分别介绍运营岗位和设计岗位的相关知识。

①运营人员负责是为网店视觉设计与制作做前期准备，为

网店美工进行网店视觉设计与制作提供基础支持。老师讲解知识学生认真做笔

②网店视觉设计就是网店运营的视觉呈现，网店美工需根点记

据运营要求，结合自身的设计品位，设计出既符合运营要求又具

有良好视觉效果的作品。要成为一名合格的网店美工，至少要具

有艺术表现的能力和适应消费者的能刀。老师讲解知识

点学生听讲

【课后作业】（5分钟）

1.本小节学习体会布置作业完成作业

2.下一堂课的预习

六、课后教学反思（教师填写）

网店视觉设计与制作（全彩慕课版）电子教案

任课教师专业日期年月日

教学课题了解网店视觉设计与制作的要素课时2课时

所选教材《网店视觉设计与制作《全彩慕课版）》教学班级

一、教学目标

1.知识目标

（1）〕解网店视觉设计风格；

（2）熟悉网店视觉设计中的构图与布局原则；

（3）熟悉色彩搭配相关知识；

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

2.技能目标

（1）能够按照构图与布局原则进行网店视觉设计；

（2）能够在网店视觉设计中合理运用色彩；

（3）能够应用适合网店风格的字体。

3.职业素养

（1）提升个人网店视觉设计审美能力；

（2）培养不同色彩搭配方案的应用能力。

二、教学方法与资源

教学方法：讲授法、案例分析法、分组学习法；

教学资源（媒体和平台）：一体化教室、PPT、淘宝、京东、拼多多、速卖通。

三、教学重难点

教学重点：中国风、构图方式、页面布局方式；

教学难点：页面布局原则、色彩搭配、文字的布局技巧。

四、教学问题预测及方案

问题预测：学生对网店视觉设计没有深入的了解，无法应用好网店视觉设计与制作的各要素；

解决方案：准备大量案例让学生观看并学习，让学生自行搜索收集课程内容相关的优秀案例。

五、教学结构流程设计

教学过程教师活动学生活动

【课前准备】（5分钟）考勤问好

1.课前三件事：点名；检查卫生和物品摆放；检查学生精神状态；检查卫生卫生整理

2.安全教育清点学生人数准备书本

上交手机

【教学实施】老师介绍本节学生接收

1.教学导入（5分钟）学习的知识

介绍本节将要学习的内容点，并板书老

2.提问引入（15分钟）

当前有哪些流行的视觉设计风格？各有什么特点？师提问学生回答

常用的构图方式有哪些？老师发布任务

3.本节内容介绍（60分钟）

（1）视觉设计风格

准确定位网店视觉设计风格有助于提高网店销售额。定位

时需要综合参考网店的各项因素。老师讲解知识学生认真听讲

⑥极简风近几年较为流行，能够凸显出品牌对于质感的追点、

求，常用于调性较高的网店。

⑦中国风源于我国传统文化，结合现代设计更具有全新的

现代美感。

⑧赛博朋克风具有强烈的科技感和未来感，具有较强的视

觉冲击力与感染力，常用于新兴领域。

⑨插画风丰富多彩、充满趣味，应用领域和受众非常广泛。

⑩C4D具有独特的立体渲染效果，能够增加趣味性。

（2）构图与布局

合理的构图与布局能让消费者赏心悦目，凸显网店商品。

①构图方式包括横向构图、竖向构图、三角形构图、疏密老师讲解知识学生认真听讲

相间构图等。点

②页面布局规则包括主次分明、中心突出；大小搭配、相

互呼应；区域划分明确；保持一致性；合理使用页面元素。

③设计时需要根据网店整体氛围排列布局图像和文本。

（3）色彩

色彩在网店视觉设计中尤为重要，网点视觉设计与制作时

不能忽略色彩搭配问题。老师讲解知识学生认真做笔

①需要理解色彩属性与色彩对比。点记

②理解主色、辅助色与点缀色的应用。遵循一定的比例与

步骤使用色彩。

（4）文字

选择合适的文字搭配能够增强网店的视觉效果，直观传递

商品信息，引导消费者完成商品的浏览与购买。

①根据页面特征可以选择书法体、宋体、黑体、艺术体等

字体。

②文字布局时需要注意文字统一、字体的搭配与变化、文老师讲解知识

字的层次布局，使画面更加美观。点学生听讲

【课后作业】（5分钟）

1.本小节学习体会布置作业完成作业

2.下一堂课的预习

六、课后教学反思（教师填写）

网店视觉设计与制作（全彩慕课版）电子教案

任课教师专业日期年月日

教学课题同步实训一一鉴赏网店首页的视觉设计课时2课时

所选教材《网店视觉设计与制作〔全彩慕课版）》教学班级

一、教学目标

1.知识目标

（1）:解并分析网店首页；

（2）熟悉网店首页的配色、内容、布局等。

2.技能目标

（1）能够分析网店的配色特点和作用；

（2）能够分析板块的布局及其作用；

（3）能够分析图片的构图方式。

3.职业素养

（1）提升网店首页视觉设计的审美意识；

（2）培养学习并分析案例的能力。

二、教学方法和资源

教学方法：实例分析、操作和演示；

教学资源（媒体和平台）：一体化教空、淘宝网、笔记本、笔。

三、教学重难点

教学重点：打开网店首页查看视觉设计、鉴赏网店的首页；

教学难点：鉴赏网店的首页。

四、教学问题预测及方案

问题预测：学生对网店首页视觉设计入熟悉，不知道以什么方式去鉴赏，难以掌握分析方法；

解决方案：教师首先讲解鉴赏方法，然后安排学生自己鉴赏，并在教室巡视指导。

五、教学结构流程设计

教学过程教师活动学生活动

【课前准备】（5分钟）考勤问好

1.课前三件事：点名；检查卫生和物品摆放；检查学生精神状态；检查卫生卫生整理

2.安全教育清点学生人数准备书本

上交手机

【教学实施】

1.教学导入（5分钟）老师讲解学生听讲

介绍本次实训的目的和重要性。

2.开展实训（60分钟）

（1）分析网站整体配色老师提醒，展学生接收并学

通过浏览器访问淘宝网，打开“美的空调旗舰店”首页。观示案例习分析方法

察整体配色并分析所使用颜色的用途。

（2）分析分类导航

通过位置与颜色分析分类导航。

（3）分析网店促销海报

通过构图、颜色、字体分析网店促销海报的视觉设计。

（4）分析其余8个板块

通过布局分析其余板块的视觉效昊。老师讲解学生听讲

（5）分析商品图片

通过图片构图方式、色彩分析商品图片的效果和作用。

（6）分析页尾

通过颜色、展示内容分析页尾的作用。

3.实训评价（15分钟）老师收取实训学生上交实训

老师根据学生上交的作业，对学生的实训结果进行打分。成果并进行评作业并进行总

价结

【课后作业】（5分钟）

1.本小节学习体会布置作业完成作业

2.下一堂课的预习

六、课后教学反思（教师填写）

网店视觉设计与制作（全彩慕课版）电子教案

任课教师专业日期年月日

教学课题掌握基础技法课时2课时

所选教材《网店视觉设计与制作〔全彩慕课版）》教学班级

一、教学目标

1.知识目标

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

（2）熟悉调整图片色彩的方式；

（3）掌握存储图片的方法。

2.技能目标

（1）能够按要求裁剪图片大小；

（2）能够根据网店视觉设计与制作需要按照调色原则调色；

（3）能够按照格式要求存储图片。

3.职业素养

（1）挎掘学生对图片制作与调色的兴趣与潜力；

（2）巩固学生的基础能力。

二、教学方法与资源

教学方法：讲授法、案例分析法、分组学习法、同步演练；

教学资源（媒体和平台）：一体化教室、外网、PPT、photoshopo

三、教学重难点

教学重点：常见的图片类型及其尺寸、按照规定比例裁剪图片、图片调色原则、调整偏色图片、

调整曝光不足的商品图片、替换商品图片颜色、切片优化储存；

教学难点：常见的图片类型及其尺寸、图片调色原则、调整偏色图片、替换商品图片颜色。

四、教学问题预测及方案

问题预测：学生缺少实际图片处理经验，无法上手操作；

解决方案：安排上手实操，让学生实际进行图片基础操作，加深知识理解。

五、教学结构流程设计

教学过程教师活动学生活动

【课前准备】（5分钟）考勤问好

1.课前三件事：点名；检查卫生和物品摆放；检查学生精神状态；检查卫生卫生整理

2.安全教育清点学生人数准备书本

上交手机

【教学实施】老师介绍本节学生接收

1.教学导入（5分钟）学习的知识

介绍本节将要学习的内容点，并板书老

2.提问引入（15分钟）

是否了解过图片大小和格式？师提问学生回答

是否动手调整过图片色调？老师发布任务

3.本节内容介绍（60分钟）

（1）调整图片大小

网店视觉设计与制作相关的图片对尺寸有固定的要求，需

要按照尺寸要求来调整图片大小。

①不同的平台以及网店的不同模块的图片格式和尺寸要

求不同，制作前需要提前了解。老师举例讲解学生认真听讲

②按照符合主图要求的长宽比例裁剪图片。知识点

③应用“图像大小”命令调整图片至合适大小。

（2）调整图片色彩

拍摄时容易因为各种客观原因无法展现商品真实颜色，就

需要后期调整商品色彩。

①为图片调色时需遵循感情色彩调色、整体色调自然、色

彩不失真调色原则，使图片满足网店视觉设计与制作需要。

②使用“色彩平衡”“色相/饱和度”“可选颜色”等命

令调整偏色商品，使商品恢复本身颜色。

③使用“亮度/对比度”“曲线”“色阶”等命令来调整老师展示案例学生认真做笔

图片亮度与曝光。记

④备使用“替换颜色”命令替换不满意的颜色。

（3）存储图片

根据不同电商平台的要求，使用Photoshop存储图片。

①常见的图片存储格式有RAW格式、JPEG格式、PNG格

式等。

②选择“文件”/“存储”命令或按【Ctrl+S】组合键，可

以直接存储文件。老师展示案例学生认真听讲

③直接制作的图片尺寸过大，无法直接上传并应用于电商做笔记

平台，需要根据具体情况进行切片处理再使用。

【课后作业】（5分钟）

1.本小节学习体会布置作业完成作业

2.下一堂课的预习

六、课后教学反思（教师填写）

网店视觉设计与制作（全彩慕课版）电子教案

任课教师专业日期年月日

教学课题掌握基础技法课时2课时

所选教材《网店视觉设计与制作〔全彩慕课版）》教学班级

一、教学目标

1.知识目标

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

（2）熟悉调整图片色彩的方式；

（3）掌握存储图片的方法。

2.技能目标

（1）能够按要求裁剪图片大小；

（2）能够根据网店视觉设计与制作需要按照调色原则调色；

（3）能够按照格式要求存储图片。

3.职业素养

（1）挎掘学生对图片制作与调色的兴趣与潜力；

（2）巩固学生的基础能力。

二、教学方法与资源

教学方法：讲授法、案例分析法、分组学习法、同步演练；

教学资源（媒体和平台）：一体化教室、外网、PPT、photoshopo

三、教学重难点

教学重点：常见的图片类型及其尺寸、按照规定比例裁剪图片、图片调色原则、调整偏色图片、

调整曝光不足的商品图片、替换商品图片颜色、切片优化储存；

教学难点：常见的图片类型及其尺寸、图片调色原则、调整偏色图片、替换商品图片颜色。

四、教学问题预测及方案

问题预测：学生缺少实际图片处理经验，无法上手操作；

解决方案：安排上手实操，让学生实际进行图片基础操作，加深知识理解。

五、教学结构流程设计

教学过程教师活动学生活动

【课前准备】（5分钟）考勤问好

1.课前三件事：点名；检查卫生和物品摆放；检查学生精神状态；检查卫生卫生整理

2.安全教育清点学生人数准备书本

上交手机

【教学实施】老师介绍本节学生接收

1.教学导入（5分钟）学习的知识

介绍本节将要学习的内容点，并板书老

2.提问引入（15分钟）

是否了解过图片大小和格式？师提问学生回答

是否动手调整过图片色调？老师发布任务

3.本节内容介绍（60分钟）

（1）调整图片大小

网店视觉设计与制作相关的图片对尺寸有固定的要求，需

要按照尺寸要求来调整图片大小。

④不同的平台以及网店的不同模块的图片格式和尺寸要

求不同，制作前需要提前了解。老师举例讲解学生认真听讲

⑤按照符合主图要求的长宽比例裁剪图片。知识点

⑥应用“图像大小”命令调整图片至合适大小。

（2）调整图片色彩

拍摄时容易因为各种客观原因无法展现商品真实颜色，就

需要后期调整商品色彩。

⑤为图片调色时需遵循感情色彩调色、整体色调自然、色

彩不失真调色原则，使图片满足网店视觉设计与制作需要。

（§）使用“色彩平衡”“色相/饱和度”“可选颜色”等命

令调整偏色商品，使商品恢复本身颜色。

⑦使用“亮度/对比度”“曲线”“色阶”等命令来调整老师展示案例学生认真做笔

图片亮度与曝光。记

⑧备使用“替换颜色”命令替换不满意的颜色。

（3）存储图片

根据不同电商平台的要求，使用Photoshop存储图片。

④常见的图片存储格式有RAW格式、JPEG格式、PNG格

式等。

⑤选择“文件”/“存储”命令或按【Ctrl+S】组合键，可

以直接存储文件。老师展示案例学生认真听讲

⑥直接制作的图片尺寸过大，无法直接上传并应用于电商做笔记

平台，需要根据具体情况进行切片处理再使用。

【课后作业】（5分钟）

1.本小节学习体会布置作业完成作业

2.下一堂课的预习

六、课后教学反思（教师填写）

网店视觉设计与制作（全彩慕课版）电子教案

任课教师专业日期年月日

教学课题同步实训---创作新品宣传Banner课时2课时

所选教材《网店视觉设计与制作〔全彩慕课版）》教学班级

一、教学目标

1.知识目标

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

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

2.技能目标

（1）能够使用“魔棒工具”完成抠图；

（2）能够使用“污点修复画笔工具”修复污渍；

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

3.职业素养

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

（2）提高对Banner的审美素养与鉴赏能力。

二、教学方法和资源

教学方法：实例分析、操作和演示；

教学资源（媒体和平台）：一体化教空、PPT、Photoshopx笔记本、笔。

三、教学重难点

教学重点：扣取耳机素材、修复污渍、调整图片大小、按要求格式存储图片；

教学难点：扣取耳机素材、修复污渍。

四、教学问题预测及方案

问题预测：学生动手能力较弱，无法掌握具体操作方法；

解决方案：教师首先讲解制作方法，然后安排学生实操，并在教室巡视指导。

五、教学结构流程设计

教学过程教师活动学生活动

【课前准备】（5分钟）考勤问好

1.课前三件事：点名；检查卫生和物品摆放；检查学生精神状态；检查卫生卫生整理

2.安全教育清点学生人数准备书本

上交手机

【教学实施】

1.教学导入（5分钟）老师讲解学生听讲

介绍本次实训的目的和重要性。

2.开展实训（60分钟）

（1）扣取耳机素材老师提醒，展学生接收并学

打开耳机素材后，发现有纯白背景，无法直接使用，进行抠示制作案例习制作方法

图处理。

（2）修复污渍

使用“污点修复画笔工具”修复耳机图像上的瑕疵。

（3）调整图片大小

按照网站要求的Banner图片大小调整图片大小。

（4）输入文字

使用“横排文字工具”输入宣传文字。老师讲解学生听讲

（5）按要求格式存储图片

按【CtH+S】组合键存储图片为要求的格式。

3.实训评价（15分钟）老师收取实训学生上交实训

老师根据学生上交的作业，对学上的实训结果进行打分。成果并进行评作业并进行总

价结

【课后作业】（5分钟）

1.本小节学习体会布置作业完成作业

2.下一堂课的预习

六、课后教学反思（教师填写）

电子教案

任课教师专业日期年月日

教学课题认识主图与主图视频课时2课时

所选教材《网店视觉设计与制作〔全彩慕课版）》教学班级

一、教学目标

1.知识目标

（1）:解主图和主图视频的规范；

（2）熟悉设计主图背景的方式；

（3）掌握主图背景的设计要点。

2.技能目标

（1）能够设置主图和主图视频的从尺寸和格式等；

（2）能够把握主图设计的创意卖点；

（3）能够掌握主图的使用场景。

3.职业素养

（1）激发学生对设计主图的兴趣与创新精神；

（2）培养对主图设计的洞察力。

二、教学方法与资源

教学方法：讲授法、案例分析法、分组学习法、同步演练；

教学资源（媒体和平台）：一体化教室、PPT、淘宝网、京东、拼多多、速卖通。

三、教学重难点

教学重点：主图的规范、主图视频的规范、主图的设计要点、主图视频的设计要点；

教学难点：主图的设计要点、主图视频的设计要点。

四、教学问题预测及方案

问题预测：比较理论，学生不易了解；

解决方案：准备主图和主图视频案例，启发学生理解，同时详细介绍优秀的设计案例，提升学习

兴趣。

五、教学结构流程设计

教学过程教师活动学生活动

【课前准备】（5分钟）考勤问好

1.课前三件事：点名；检查卫生和物品摆放；检查学生精神状态；检查卫生卫生整理

2.安全教育清点学生人数准备书本

上交手机

【教学实施】老师介绍本节学生接收

1.教学导入（5分钟）学习的知识

介绍本节将要学习的内容。点，并板书老

2.提问引入（15分钟）

是否了解过主图的设计规范？师提问学生回答

是否了解过主图视频的设计要点？老师发布任务

3.本节内容介绍（60分钟）

（1）:解主图和主图视频的规范

主图和主图视频通常是商品详情页的第一屏，是消费者第

一时间看到的商品图像。

①主图一般有5张，搜索结果页面默认展示第一张主图图

片，第五张主图必须为商品白底图，有大小、尺寸、格式、内容老师举例讲解学生认真听讲

等要求；知识点

②主图视频主要以视频的形式补充展示商品，通常显示在

商品页面的第一张主图之前，有大小、尺寸、时长、格式、内容

等要求。

（2）掌握主图和主图视频的设计要点老师展示案例学生认真做笔

主图和主图视频是展示商品的第一扇窗，需要在短时间内记

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

①主图图片场景、商品清晰度、主图颜色、创意卖点、辅助

展示等因素都是设计主图时需要注意的要点。老师展示案例学生认真听讲

②主图视频主要为了使消费者快速了解商品。应该结合消做笔记

费者对商品的实际需求，以展示商品或商品的设计理念为主。

【课后作业】（5分钟）

1.本小节学习体会布置作业完成作业

2.下一堂课的预习

六、课后教学反思（教师填写）

网店视觉设计与制作（全彩慕课版）电子教案

任课教师专业日期年月日

教学课题设计与制作主图课时2课时

所选教材《网店视觉设计与制作〔全彩慕课版）》教学班级

一、教学目标

1.知识目标

（1）:解设计主图背景的步骤；

（2）熟悉抠取商品图片的方式；

（3）掌握为主图添加文字的方法。

2.技能目标

（1）能够按要求设计主图图片；

（2）能够使用“魔棒工具”抠取图片；

（3）能够绘制圆角矩形并设置颜色、渐变样式等属性。

3.职业素养

（1）物掘学生使用多种设计表现方式的能力；

（2）提升学生动手操作的兴趣。

二、教学方法与资源

教学方法：讲授法、案例分析法、分组学习法、同步演练；

教学资源（媒体和平台）：一体化教室、外网、PPT、photoshopo

三、教学重难点

教学重点：设计主图背景、抠取商品图像、绘制标签并添加文字；

教学难点：设计主图背景、抠取商品图像。

四、教学问题预测及方案

问题预测：学生缺少实际图片制作经验，无法上手操作；

解决方案：安排上手实操，让学生实际进行图片基础操作，加深知识理解。

五、教学结构流程设计

教学过程教师活动学生活动

【课前准备】（5分钟）考勤问好

1.课前三件事：点名；检查卫生和物品摆放；检查学生精神状态；检查卫生卫生整理

2.安全教育清点学生人数准备书本

上交手机

【教学实施】老师介绍本节学生接收

1.教学导入（5分钟）学习的知识

介绍本节将要学习的内容点，并板书老

2.提问引入（15分钟）

是否设计过主图背景？师提问学生回答

是否动手抠取过商品图像？老师发布任务

3.本节内容介绍（60分钟）

（1）设计主图背景

玉米主图需要展现玉米的特点、价格和优惠活动。主图背景老师讲解知识学生认真听讲

需要突显玉米并使得配色和谐，可选择玉米绿叶颜色相近的绿点并操作

色设计主图背景中的渐变色块，再添加黄色点缀。

（2）抠取商品图像

玉米图片带有原始背景，需要先取抠玉米图像。

（3）绘制标签并添加文字

玉米主图中的文字主要有标题、宣传语、价格、促销信息等。老师展示案例学生认真听讲

为区分信息可先绘制装饰标签再添加文字。做笔记

【课后作业】（5分钟）

1.本小节学习体会布置作业完成作业

2.下一堂课的预习

六、课后教学反思（教师填写）

网店视觉设计与制作（全彩慕课版）电子教案

任课教师专业日期年月日

教学课题设计与制作主图视频课时2课时

所选教材《网店视觉设计与制作〔全彩慕课版）》教学班级

一、教学目标

1.知识目标

（1）:解设计主图视频的步骤；

（2）熟悉剪映专业版的操作界面；

（3）掌握使用剪映专业版基本功能的方法。

2.技能目标

（1）能够按设计要求设计主图视频；

（2）能够将主图视频素材导入剪映专业版；

（3）能够使用剪映专业版分割视频素材。

3.职业素养

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

（2）积极了解新兴的设计工具，开阔眼界。

二、教学方法与资源

教学方法：讲授法、案例分析法、分组学习法、同步演练；

教学资源（媒体和平台）：一体化教室、PPT、剪映专业版。

三、教学重难点

教学重点：了解剪映专业版、导入主图视频素材、剪辑主图视频素材、添加视频转场和特效、添

加文字和背景音乐、制作视频封面并导出视频；

教学难点：剪辑主图视频素材、添加视频转场和特效、添加文字和背景音乐。

四、教学问题预测及方案

问题预测：学生缺少实际图片制作经验，无法上手操作；

解决方案：安排上手实操，让学生实际进行图片基础操作，加深知识理解。

五、教学结构流程设计

教学过程教师活动学生活动

【课前准备】（5分钟）考勤问好

1.课前三件事：点名；检查卫生和物品摆放；检查学生精神状态；检查卫生卫生整理

2.安全教育清点学生人数准备书本

上交手机

【教学实施】老师介绍本节学生接收

1.教学导入（5分钟）学习的知识

介绍本节将要学习的内容。点，并板书老

2.提问引入（15分钟）

是否接触过剪辑软件？师提问学生回答

是否了解过剪映专业版？老师发布任务

3.本节内容介绍（60分钟）

（1）讲解剪映专业版工作界面

剪映具有全面的剪辑功能，能够满足大部分视频剪辑新手老师讲解知识学生认真听讲

的需求，剪映专业版工作界面包括素材选项卡组、“播放器”面点并操作

板、功能选项卡组、“时间轴”面板。

（2）导入主图视频素材

在剪映专业版中新建草稿，确定玉米主图视频的尺寸规范，老师讲解知识学生认真听讲

然后导入需要的主图视频素材。点并操作

（3）剪辑主图视频素材

在“时间轴”面板中按照时间顺序剪辑主图视频素材，并按

照需要调整素材。老师讲解知识学生认真听讲

（4）添加视频转场和特效点并操作

在不同的视频场景之间添加转场和特效。

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

在主图视频中添加说明文字，添加舒缓、自然的背景音乐。老师展示案例学生认真听讲

（6）制作视频封面并导出视频做笔记

以“瑞农玉米”为主题制作视频封面，完成视频后导出。

【课后作业】（5分钟）

1.本小节学习体会布置作业完成作业

2.下一堂课的预习

六、课后教学反思（教师填写）

网店视觉设计与制作（全彩慕课版）电子教案

任课教师专业日期年月日

教学课题同步实训一一制作家电主图和主图视频课时2课时

所选教材《网店视觉设计与制作〔全彩慕课版）》教学班级

一、教学目标

1.知识目标

（1）:解家电主图的使用场景；

（2）;解家电主图视频的制作流程。

2.技能目标

（1）能够使用Photoshop新建主图文件；

（2）能够使用“画笔工具”绘制主图背景；

（3）能够使用剪映专业版调整视频的播放速度。

3.职业素养

（1）制作符合商业要求、平台要求、法律规范的主图；

（2）提升学习制作主图视频的学习兴趣。

二、教学方法和资源

教学方法：实例分析、操作和演示；

教学资源（媒体和平台）：一体化教空、PPT、Photoshop、剪映专业版。

三、教学重难点

教学重点：填充背景、绘制图形、添加图层样式、调整视频播放速度、为视频添加贴纸；

教学难点：添加图层样式、调整视频播放速度、为视频添加贴纸。

四、教学问题预测及方案

问题预测：学生动手能力较弱，无法掌握具体操作方法；

解决方案：教师首先讲解制作方法，然后安排学生实践操作。

五、教学结构流程设计

教学过程教师活动学生活动

【课前准备】（5分钟）考勤问好

1.课前三件事：点名；检查卫生和物品摆放；检查学生精神状态；检查卫生卫生整理

2.安全教育清点学生人数准备书本

上交手机

【教学实施】

1.教学导入（5分钟）老师讲解学生听讲

介绍本次实训的目的和重要性。

2.开展实训（60分钟）

（1）新建图片文件老师提醒，展学生接收并学

启动Photoshop,按照主图大小、分辨率要求新建“电热示制作案例习方法

锅主图”文件。

（2）制作背景

填充背景为渐变紫色，使用形状工具组和“画笔工具”绘

制背景所需图形。

（3）调整素材

置入“电热锅.tif”素材，适当增加素材饱和度，并为白

色矩形添加需要的图层样式。老师讲解学生听讲

（4）输入文字

使用“横排文字工具”输入文字，适当调整文字大小和位置。

（5）为文字添加图层样式并保存文件

为文字添加需要的图层样式，并按【Ctrl+S】组合键存储图

片为要求的格式。

（6）创建视频草稿

启动剪映专业版，按需求新建草稿。

（7）导入视频素材

导入电热锅视频素材，适当调整视频的播放速度。

（8）导出电热锅主图视频

为视频添加文字、贴纸和背景音乐，导出电热锅主图视频。老师收取实训学生上交实训

3.实训评价（15分钟）成果并进行评作业并进行总

老师根据学生上交的作业，对学生的实训结果进行打分。价结

【课后作业】（5分钟）

1.本小节学习体会布置作业完成作业

2.下一堂课的预习

六、课后教学反思（教师填写）

网店视觉设计与制作（全彩慕课版）电子教案

任课教师专业日期年月日

教学课题认识商品详情页课时2课时

所选教材《网店视觉设计与制作〔全彩慕课版）》教学班级

一、教学目标

1.知识目标

（1）:解商品详情页的概念；

（2）熟悉商品详情页包含的内容；

（3）掌握焦点图的作用。

2.技能目标

（1）能够区分商品详情页的内容；

（2）能够应用商品详情页的设计思路；

（3）能够收集并分析优秀的商品详情页设计。

3.职业素养

（1）激发学生对商品详情页的设计兴趣；

（2）培养分析问题的能力、鉴赏作品的能力。

二、教学方法与资源

教学方法：讲授法、案例分析法、分组学习法、同步演练；

教学资源（媒体和平台）：一体化教室、PPT、淘宝网、京东、拼多多、速卖通。

三、教学重难点

教学重点：商品详情页的内容、提炼商品卖点、确定设计风格、准备设计素材、确定配色方案、

选择合适的字体、制作商品详情页；

教学难点：提炼商品卖点、确定设计风格、确定配色方案。

四、教学问题预测及方案

问题预测：比较理论，学生不易了解，无法上手操作；

解决方案：准备商品详情页设计案例，启发学生理解，提升学习兴趣。

五、教学结构流程设计

教学过程教师活动学生活动

【课前准备】（5分钟）考勤问好

1.课前三件事：点名；检查卫生和物品摆放；检查学生精神状态；检查卫生卫生整理

2.安全教育清点学生人数准备书本

上交手机

【教学实施】老师介绍本节学生接收

1.教学导入（5分钟）学习的知识

介绍本节将要学习的内容。点，并板书老

2.提问引入（15分钟）

是否仔细阅读过商品详情页？师提问学生回答

商品详情页包含哪些内容？老师发布任务

3.本节内容介绍（60分钟）

（1）明确商品详情页的内容老师讲解知识学生认真听讲

商品详情页用于展示商品详细信息，主要介绍商品的外形、点

尺寸、材质、颜色、功能、使用方法等内容。主要包括：焦

点图、商品卖点及细节图、商品其他信息图、商品规格参数图、

商品配送及售后图等。

（2）梳理商品详情页的设计思路

商品详情页的制作是一项系统且完整的工作，根据需要梳

理出柑橘详情页的整体设计思路。

①提炼商品卖点：新鲜、美味营养、爽口多汁等。

②确定设计风格：与柑橘本身意境匹配的、传递清新自然老师展示案例学生认真做笔

之感的风格。记

③准备设计素材：商品的实拍图、从网络上下载的符合设

计风格的背景素材、装饰素材和其他素材等。

④确定配色方案：主色可定为橙色，少量绿色点缀，白色

作为部分文字的颜色来突显

⑤选择合适的字体：“思源黑体CN”“思源宋体CN”

⑥制作商品详情页：竖向版式，在Photoshop中制作。老师展示案例学生听讲

【课后作业】（5分钟）

1.本小节学习体会布置作业完成作业

2.下一堂课的预习

六、课后教学反思（教师填写）

网店视觉设计与制作（全彩慕课版）电子教案

任课教师专业日期年月日

教学课题设计与制作商品焦点图课时2课时

所选教材《网店视觉设计与制作〔全彩慕课版）》教学班级

一、教学目标

1.知识目标

（1）:解合成焦点背景图的步骤；

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

（3）掌握设计文字的