网店美工教案.doc

《网店美工与视觉设计》
教学教案
第1章
课时内容
网店美工和基本技能
讲课时间

课时
8
教学目的
þ 熟知网店美工的技能规定和理解常用美工软件；
þ 理解网店美工中需要注意的问题；
þ 掌握电商视觉设计黄金构图法；
þ 掌握适合自己网店美工风格确实定措施；
þ 理解网店美工的概念。
教学重点
þ 掌握适合自己网店美工风格确实定措施。
教学难点
þ 掌握适合自己网店美工风格确实定措施。
教学设计
1.教学思绪：
（1）网店美工的工作范围与设计规定；
（2）网店美工常用的图像制作与处理软件；
（3）网店美工与店铺装修风格。
2.教学手段：
（1）通过现场演示引起学生们对设计的爱好，并带动课堂气氛；
（2）通过大量优秀案例欣赏，加强视觉冲击，提高鉴赏辨别能力。
教学资料及规定：
教学过程中除了讲解必备的理论知识外，还可列举某些比较有代表性的案例，提高学生的学习爱好。
教学内容
内容大纲：
1.1∣网店美工的工作范围与设计规定
1.1.1 网店美工概述
1.1.2 网店美工人员的工作内容与技能规定
1.2∣网店美工常用的图像制作与处理软件
1.2.1 Photoshop
1.2.2 电商图片助手
1.2.3 Dreamweaver
1.2.4 Flash
1.2.5 Illustrator
1.2.6 Fireworks
1.3∣网店美工与店铺装修风格
1.3.1 确定店铺装修风格的重要性
1.3.2 确定店铺装修风格的措施
1.3.3 不一样店铺装修风格欣赏
课后练习
小结
1、 网店美工应具有的基本技能规定；
2、 网店美工设计常用的几种软件；
3、 网店装修风格确实定与赏析。
课后习题
（1）请列举网店美工常用的软件及它们之间的区别。
（2）请为一种商品确定店铺装修风格。

《网店美工与视觉设计（视频指导版）》
配套教学教案
第2章
课时内容
网店配色与图片素材搜集
讲课时间

课时
6
教学目的
þ 熟悉并掌握店铺色彩搭配技巧措施；
þ 理解网店美工色彩心理应用；
þ 掌握店铺掌握网店图片素材搜集技巧
教学重点
þ 能独立设计制作出符合店铺风格的店铺颜色搭配。
教学难点
þ 掌握色彩基础知识原理。
教学设计
1.教学思绪：
（1）讲解色彩基础知识原理以及设计要点；
（2）讲解店铺店铺色彩搭配技巧措施；
（3）讲解网店美工色彩心理应用以及图片素材搜集技巧。
2.教学手段：
（1）通过更多实例引起学生们对设计的爱好；
（2）任务式教学手段，增长师生互动。
教学资料及规定：
教学过程中除了讲解必备的理论知识外，还可列举某些比较有代表性的案例，提高学生的学习爱好。
教学内容

内容大纲：
2.1 理解店铺装修必备的色彩知识
2.1.1构成色彩的三要素——色相、明度、纯度
2.1.2店铺色彩心理应用
2.2 店铺色彩搭配技巧
2.2.1色相对比与调和的搭配技巧
2.2.2明度对比与调和的搭配技巧
2.2.3纯度对比与调和的搭配技巧
2.3 挑选合适店铺的色彩搭配
2.3.1 根据店铺特点选择主色
2.3.2 店铺的主色、辅助色、点缀色搭配
2.4 图片素材规划与搜集
2.4.1图片色彩属性概述
2.4.2选择图片格式
2.4.3选择图片筛选规划技巧
本章小结
课后练习
小结
4、 掌握店铺色彩搭配技巧措施；
5、 掌握网店美工色彩心理应用以及图片素材搜集技巧；
课后习题
（1） 请搜集5组不一样主色风格的店铺图片。
（2） 请分析小朋友用品店铺的用色规律。

《网店美工与视觉设计（视频指导版）》
配套教学教案
第3章
课时内容
网店商品图片美化
讲课时间

课时
6
教学目的
þ 能运用Photoshop CS6图像处理软件进行基本的图片处理。
能运用Photoshop CS6图像处理软件进行图片的美化。
教学重点
þ 能掌握Photoshop CS6图像处理软件各工具的基本操作以及快键键；掌握网店图片裁剪、污点处理、抠图、以及调色的基本操作。
教学难点
þ 掌握抠图的基本操作
教学设计
1.教学思绪：
（1）讲解工具的基本使用方法；
（2）讲解配合快捷键的使用措施；
（3）讲解店铺图片处理的基本思绪。
2.教学手段：
（1）通过更多实例引起学生们对设计的爱好；
（2）任务式教学手段，增长师生互动。
教学资料及规定：
教学过程中除了讲解必备的理论知识外，还可列举某些比较有代表性的案例，提高学生的学习爱好。
教学内容

内容大纲：
3.1 Photoshop图像处理软件
3.1.1 认识Photoshop的界面
3.1.2 Photoshop常用工具
3.1.3 Photoshop图层的基本操作
3.2 网店图片裁剪
3.2.1 固定尺寸裁剪
3.2.2 调整图片大小
3.3 网店图片污点处理
3.3.1 使用污点修复工具美化图片
3.3.2 使用图章工具美化图片
3.4 抠图技巧
3.4.1 使用魔术棒工具抠图
3.4.2 使用迅速选择工具抠图
3.4.3 使用套索工具抠图
3.4.3 使用钢笔工具抠图
3.5商品图调色处理
3.5.1 使用“色阶”命令调整图片
3.5.2 使用“曲线”命令调整图片
3.5.3 调整图片的亮度与对比度
3.5.4 调整图片的色相与饱和度
3.5.5 使用“色彩平衡”命令调整图片
本章小结
课后练习
小结
1、 能运用Photoshop CS6图像处理软件进行基本的图片处理。
2、能运用Photoshop CS6图像处理软件进行图片的美化。
课后习题
（1） 对网店图片进行基本编辑处理；
（2） 对素材图片进行裁剪、污点处理、抠图、以及调色的基本操作

《网店美工与视觉设计（视频指导版）》
配套教学教案
第4章
课时内容
店铺LOGO与店招视觉设计
讲课时间

课时
4
教学目的
þ 熟悉并掌握店铺LOGO的含义、常见类型、设计方略及设计环节；
þ理解导航栏的参数设置以及设计环节；
þ掌握店招的设计要点及详细环节。
教学重点
þ 能独立设计制作出符合店铺风格的店铺LOGO、导航栏及店招。
教学难点
þ 能根据需要对店铺进行装修。
教学设计
1.教学思绪：
（1）讲解店铺LOGO与店招视觉设计的设计要点及重要内容；
（2）讲解店铺LOGO与店招视觉设计的常见布局；
（3）详细演示店铺LOGO与店招的设计制作的详细操作环节。
2.教学手段：
（1）通过现场演示引起学生们对设计的爱好，并带动课堂气氛；
（2）任务式教学手段，增长师生互动。
教学资料及规定：
教学过程中除了讲解必备的理论知识外，还可列举某些比较有代表性的案例，提高学生的学习爱好。
教学内容

内容大纲：
4.1 店铺LOGO视觉设计
4.1.1 什么是店铺LOGO
4.1.2 店铺LOGO的常用位置
1．店铺左上角
2．店铺正中央
4.1.3 店铺LOGO的重要类型
1．中文文字型
2．英文文字型
3．中英文结合型
4．图形型
5. 图文结合型
4.1.4 店铺LOGO的设计方略
4.1.5 店铺LOGO的设计制作
4.2 店铺导航栏视觉设计
4.2.1 认识导航栏
4.2.2 导航栏的设计展示
4.3 店招视觉设计
4.3.1 店招的视觉设计要点
4.3.2 店招的设计展示

本章小结
课后练习
小结
6、 掌握店铺LOGO的设计要点；
7、 掌握店铺导航栏及店招的设计流程；
课后习题
（1）请设计并制作出一种食品店的店铺LOGO.
（2）请设计制作出一种小清新风格的女装店店招。

《网店美工与视觉设计（视频指导版）》
配套教学教案
第5章
课时内容
店铺首页视觉设计
讲课时间

课时
8
教学目的
þ 熟悉并掌握店铺首页各个模块的设计要点及重要内容；
þ理解店铺首页的页面构造及常见布局；
þ掌握店铺首页的设计制作流程。
教学重点
þ 能独立设计制作出符合店铺风格的店铺首页。
教学难点
þ 能根据需要对店铺首页进行装修。
教学设计
1.教学思绪：
（1）讲解店铺首页各个模块的设计要点及重要内容；
（2）讲解店铺首页的页面构造及常见布局；
（3）详细演示店铺首页每一种模块的设计制作的详细操作环节。
2.教学手段：
（1）通过现场演示引起学生们对设计的爱好，并带动课堂气氛；
（2）任务式教学手段，增长师生互动。
教学资料及规定：
教学过程中除了讲解必备的理论知识外，还可列举某些比较有代表性的案例，提高学生的学习爱好。
教学内容

内容大纲：
5.1 店铺首页布局
5.1.1 店铺首页制作规范
5.1.2 店铺首页的常见布局
1．店铺定位
2．顾客的浏览模式
3．理解客户的需求及行为
5.2 店铺首页海报的视觉设计
5.2.1 首页海报的设计要点
1．主题
2．构图
3．配色
4．轮播海报的设计流程
5.2.2 首页海报的设计制作
5.3.1 宝贝陈列区的设计要点
1．商品类别要明确
2．要突出商品的价格和购置按钮
3．要让产品主次分明
5.3.2 宝贝陈列区的设计制作
5.4 收藏区及客服区的视觉设计
5.4.1 收藏区的设计制作
5.4.2 客服区的设计制作
本章小结
课后练习
小结
8、 掌握店铺首页各个模块的设计要点；
9、 掌握店铺首页各个模块的设计流程；
课后习题
（1）既有一种经营女性护肤品的网络店铺，请为其量身打造一种首页海报。
（2）既有一种经营女鞋的店铺，请按照平底鞋、高跟鞋和运动鞋三个类别为其设计
制作宝贝陈列区。
（3）既有一种经营小朋友玩具的店铺，请为其设计制作适合其特点的收藏区及客
服区。

《网店美工与视觉设计（视频指导版）》
配套教学教案
第6章
课时内容
推广图片视觉设计
讲课时间

课时
4
教学目的
þ 熟悉并掌握直通车图的设计要点
þ 熟悉并掌握聚划算主图的设计要点
þ 掌握钻石展位图的设计制作流程
教学重点
þ 能独立设计制作钻石展位图，能根据需要设计制作直通车图及聚划算主图。
教学难点
þ 设计要点及制作流程的掌握
教学设计
1. 教学思绪：
（1）讲解直通车图、聚划算图以及钻石展位图的设计要点；
（2）讲解直通车图、聚划算图以及钻石展位图的制作流程；
（3）详细演示操作环节。
2. 教学手段：
（1）通过现场演示引起学生们对设计的爱好，并带动课堂气氛；
（2）任务式教学手段，增长师生互动。
3. 教学资料及规定：
教学过程中除了讲解必备的理论知识外，还可列举某些比较有代表性的案例，提高学生的学习爱好。
教学内容

6.1 直通车图的视觉设计
6.1.1直通车图的视觉设计要点
1. 颜色差异化
2.巧用卡通人物和形象
3. 卖点深挖
4．脑洞大开
6.2 聚划算图的视觉设计
6.2.1 聚划算主图的制作规范
6.2.2 聚划算主图的制作案例
6.3 钻石展位图的视觉设计
6.3.1 钻石展位图的设计要点
1. 主题突出
2. 目的明确
3. 形式美观
本章小结
课后练习
小结
1、 掌握直通车图、聚划算图、钻石展位的设计要点；
2、 掌握直通车图、聚划算图、钻石展位的设计制作流程。
课后习题

1.请在淘宝上找出直通车做得好的店铺，并分析其直通车图的优势。
2.请列举几张你认为有设计感的钻展图，并一一阐明它们好在哪里。
3.请根据本章所学知识设计一张家居类的聚划算主图。
4.请根据本章所学知识设计一张女装类的钻石展位图。

《网店美工与视觉设计（视频指导版）》
配套教学教案
第7章
课时内容
详情页视觉设计
讲课时间

课时
8
教学目的

熟悉商品详情页常用尺寸，商品详情页的基本元素。

掌握详情页的参数设置以及设计环节。
理解产品详情页制作的规律性问题。

教学重点
þ 能独立设计产品展示图、产品尺寸图、产品细节图的制作。
教学难点
þ 设计要点及制作流程的掌握
教学设计
4. 教学思绪：
（1） 讲解商品详情页常用尺寸，商品详情页的基本元素；
（2） 讲解商品详情页设计要点；
（3）讲解商品详情页的制作流程；
（4）详细演示操作环节。
5. 教学手段：
（1）通过现场演示引起学生们对设计的爱好，并带动课堂气氛；
（2）任务式教学手段，增长师生互动。
6. 教学资料及规定：
教学过程中除了讲解必备的理论知识外，还可列举某些比较有代表性的案例，提高学生的学习爱好。
教学内容
内容大纲：

7.1 详情页设计
7.1.1 详情页概述
7.1.2 详情页设计思绪
7.1.3 详情页排版
7.2 详情页模块设计
7.2.1 产品展示图设计
7.2.2 产品卖点模块设计
7.2.3 产品细节模块设计
7.2.4 产品售后服务模块设计
7.3 优化产品详情其他设计
7.3.1 产品分类设计
7.3.2 产品搭配区域设计
7.3.3 使用“切片”工具优化展示
本章小结
课后练习
小结
3、 掌握商品详情页的设计要点；
4、 掌握商品详情页的设计制作流程。
课后习题
1.请设计并制作出一种女装店铺的详情页。
2.请分析并总结详情页制作必要构成要素。

《网店美工与视觉设计（视频指导版）》
配套教学教案
第8章
课时内容
无线端店铺视觉设计
讲课时间

课时
8
教学目的
þ 熟知网店美工的技能规定和理解常用美工软件；
þ 理解什么是无线端店铺；
þ 纯熟掌握无线端店铺的装修风格及页面布局；
þ 无线端店铺商品首页及详情页设计技巧；
þ 掌握无线端店铺的特性；
þ 掌握无线端店铺的导购思绪；
þ 掌握无线端店铺模板的参数设置。
教学重点
þ 无线端店铺装修思绪
教学难点
þ 无线端店铺模板参数简介
教学设计
1.教学思绪：
（1）无线端店铺的设计特点；
（2）无线端店铺与PC端店铺的区别；
（3）无线端店铺装修要点；
（4）无线端店铺装修思绪；
（5）无线端店铺模板参数简介。
2.教学手段：
（1）通过比较无线端店铺和pc端店铺区别，理解装修差异；
（2）通过大量优秀案例欣赏，加强视觉冲击，提高鉴赏辨别能力。
教学资料及规定：
教学过程中除了讲解必备的理论知识外，还可列举某些比较有代表性的案例，提高学生的学习爱好。
教学内容
内容大纲：
8.1无线端店铺视觉设计
8.2无线端店铺的设计
8.2.1 无线端店铺装修要点
8.2.2 无线端店铺装修思绪
8.2.3 无线端店铺模板参数简介
课后练习
小结
10、 无线端店铺视觉设计
11、 无线端店铺的设计
课后习题
（1）请设计并制作一种时尚型化妆品的无线端店铺详情页。
（2）请设计并创作一种清爽风格的餐具无线端店铺详情页。