《网店装修与美工》教案

教 案

2019-2020学年_上_学期

课程名称：__网店美工__

课程类别： 实 训 __

教师姓名：__ ___

教 研 室：_

2019年 9 月 15 日

【课题】：情境一 图像合成基础

【教学目标】

认识图像合成

熟悉Ps 工作界面及各工具

合成制作海报

【教学重难点】

认识图像合成

熟悉Ps 工作界面及各工具

【教学方法】

讨论法

【教具】

计算机，多媒体

【教学课时】

4

【教学过程】

情境一图像合成基础

子情境1 认识图像合成

什么是图像合成

子情境2 熟悉Ps工作界面及各工具

1.Ps工作界面

（1）A区域称为菜单栏，在菜单栏里可找到工具中所有功能对应的选项。

（2）B区域称为选项栏，每个工具都有自己属性方面的选项，可以进行图片属性参数的调整。

（3）C区域称为图形窗口栏，可以单击切换显示或关闭图片。

（4）D区域称为工具箱，这里有图片编辑处理中常用到的工具，当鼠标移动到某个工具上悬停2秒左右会有这个工具的快捷键提示，也就是按下某个字母就可以选择这个工具。

（5）E区域称为编辑区，图片编辑显示的区域。

2.常用工具介绍

（1）选择工具的使用

（2）绘图工具的使用

（3）渐变工具和油漆桶工具

（4）擦除工具

（5）绘制和选取路径

（6）文字工具

3.Photoshop的几个重要概念

（1）图层

①背景图层

②普通图层

③文字图层

④调整图层

（2）位图与矢量图

①什么是位图

②什么是矢量图

（3）像素与分辨率

①什么是分辨率

（4）RGB与CMYK模式

子情境3 合成制作海报

单元1 新建文件

单元2 打开文件

单元3 移动工具

单元4 保存文件

【课后反思】

教师针对各小组交流计划情况进行分析总结，学生在实践中得到提升自我，完成自己的任务。

教研室主任审阅：杨晓飞 教务处复查：

【课题】：情境二如何进行抠图

【教学目标】

子情境1 认识抠图

子情境2 规则形状抠图

子情境3 简单背景抠图

子情境4 透明物体抠图

子情境5 毛发抠图

【教学重难点】

规则形状抠图

简单背景抠图

透明物体抠图

毛发抠图

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

情境二如何进行抠图

子情境1 认识抠图

1.什么是抠图

抠图是把图片或影像中的某一部分从原始图片或者影像中分离出来，成为独立的图片或者影像。

2.常用抠图工具

魔棒工具和快速选择工具、套索、多边形套索、磁性套索工具、钢笔工具

子情境2 规则形状抠图

子情境3 简单背景抠图

子情境4 透明物体抠图

子情境5 毛发抠图

【课后反思】

简要将本项目相关内容进行总结，将所学知识与操作归纳整理

【课后反思】

对学生来说，透明物体抠图和毛发抠图理解起来难度较大，需要教师在示范时放慢速度，详细讲解。

教研室主任审阅：杨晓飞 教务处复查：

【课题】：情境三修复图片污点

【教学目标】

子情境1 认识图片修复

子情境2 修复水印

子情境3 修复人像

【教学重难点】

修复水印

修复人像

【教学方法】

讨论法、案例法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

情境三修复图片污点

子情境1 认识图片修复

1.修图概念

修图可以对图片进行更好地美化，改善图片的细节、色调、曝光以及色彩的饱和度。在淘宝商家的作用是是产品更加地完美，更好地展现在买家面前。

2.常用污点修图工具

（1）仿制图章工具

可以从图像中拷贝信息，将其应用到其他区域或者其他图像中。改工具常用于复制图像内容或去除照片的缺陷。

（2）污点修复画笔工具

与修复画笔的工作方式类似，也是使用图像或图案中的样本像素进行绘画，并将样本像素的纹理、光照、透明度和阴影与所修复的像素相匹配。但修复画笔要求指定样本，而污点修复画笔可以自动从所修饰区域的周围取样。

（3）修复画笔工具

与仿制图章工具类似，也可以利用图像或图案的样本像素来绘画。该工具可以从被修饰区域的周围取样，并将样本的纹理、光照、透明度和阴影等于所修复的像素匹配，从而去除照片中的污点和划痕，修复结果人工痕迹不明显。

（4）修补工具

可以用其它区域或图案中的像素来修复选中的区域，并将样本像素的纹理光照、透明度和阴影与源像素进行匹配，该工具的特别之处是需要用选区来定位修补范围。

（5）红眼工具

可以去除用闪光灯拍摄的人物照片中的红眼，以及动物照片中的白色或绿色反光。

子情境2 修复水印

子情境3 修复人像

修复工具：通过污点修复、修复画笔、修补工具的使用对脸上的瑕疵简单的修复。

【课后反思】

学生对于实操课比较有兴趣，通过课堂的实际动手操作，学生的动手能力得到很大提升。

教研室主任审阅：杨晓飞 教务处复查：

【课题】：情境四校正产品色差

【教学目标】

子情境1 认识色彩

子情境2 替换服装颜色

【教学重难点】

替换服装颜色

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

情境四校正产品色差

子情境1 认识色彩

1.了解色彩关系

2.常用三种色彩搭配

（1）相邻色搭配

（2）间隔色搭配

（3）互补色搭配

3.快速的色彩调整

（1）亮度/对比度

（2）自动色阶

（3）自动颜色

4.精确的色彩调整

（1）色阶

（2）曲线

（3）色彩平衡

（4）色相/饱和度

（5）匹配颜色

（6）替换颜色

5.精确的色彩调整

（1）去色

（2）反相

（3）色调均化

子情境2 替换服装颜色

单元1 替换裤子颜色

单元2 替换衣服颜色

【课后反思】

学生在理论学习的基础上，通过自己动手，替换服装颜色颜色，加强对色彩的认识，增强自己的审美意识。

教研室主任审阅： 杨晓飞 教务处复查：

【课题】：情境五设计一张促销优惠券

【教学目标】

子情境1 认识优惠券设计

子情境2 设计优惠券

【教学重难点】

设计优惠券

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

情境五设计一张促销优惠券

子情境1 认识优惠券设计

1.优惠券的类型

2.优惠券主题分类

3.优惠券带来的作用

4.优惠券的内容

5.优惠券制作常用的工具

（1）文字工具

（2）形状工具

子情境2 设计优惠券

【课后反思】

绝大部分学生能够较好地完成优惠券的设计，并且学会教材上的方法，进行灵活运用。在以后的教学中，以教材为依据，鼓励学生发挥自己的创造力。

教研室主任审阅：杨晓飞 教务处复查：

【课题】：情境六制作金属质感文字

【教学目标】

子情境1 认识字体效果设计

子情境2 制作金属质感文字

【教学重难点】

制作金属质感文字

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

情境六制作金属质感文字

子情境1 认识字体效果设计

1.字体与字形

（1）无衬线字体

（2）衬线字体

（3）手写字体

（4）装饰字体

2.文字组合

（1）文字的可读性

（3）字体的种类

（4）字体的颜色

3.字体设计方法

（1）替代法

（2）共用法

（3）叠加法

（4）分解重构法

（5）俏皮设计法

（6）断肢法

（7）减细法

（8）尖角法

（9）卷叶法

（10）错落摆放法

（11）方方正正法

（12）横细竖粗法

【课后反思】

对于一些在操作中遇到问题的学生，可以采取“同学互教”的方法，让熟练的学生指导困难学生，既加深学习，又提高学生积极性。

教研室主任审阅：杨晓飞 教务处复查：

【课题】：情境七给人物增加自然的投影

【教学目标】

子情境1 认识光影

子情境2 给人物添加投影

【教学重难点】

给人物添加投影

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

情境七给人物增加自然的投影

子情境1 认识光影

1.光影

（1）概念

（2）光对物体的影响

①顺光

②侧光

③逆光

④顶光和低光

（3）光对投影的影响

子情境2 给人物添加投影

【课后反思】

通过足够多的案例，让学生感受到投影对于图片的重要性，在完成作业后，各小组成员根据本组最后交流结果发言，更能加深学生印象。

教研室主任审阅： 杨晓飞 教务处复查：

【课题】：情境八制作GIF动图

【教学目标】

子情境1 认识GIF 动图制作

子情境2 制作一张动态店标

【教学重难点】

制作一张动态店标

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

情境八制作GIF动图

子情境1 认识GIF动图制作

1.GIF动画的应用

子情境2 制作一张动态店标

淘宝店招，是指虚拟店铺的招牌，店铺第一屏中最为醒目的位置。。一般都有统一的大小要求，以淘宝网来说，店招为950x150。格式为jpg、gif（淘宝网自身有flash的店招）。

【课后反思】

除了教会学生教材上的案例，更要强调网店美工在淘宝上的真实应用，学生在学习的过程中能够感受到自己的进步，更有学习兴趣。

教研室主任审阅： 杨晓飞 教务处复查：

【课题】：情境九产品精修

【教学目标】

子情境1 认识产品精修

子情境2 制作化妆品精修

【教学重难点】

子情境2 制作化妆品精修

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

子情境1 认识产品精修

单元1 认识产品精修

1.产品精修作用

（1）增加店铺里的产品被潜在顾客发现的概率；

（2）影响买家购买决策；

（3）提高自己在同类商品卖家中的竞争力；

（4）提升销量，引起供货商的重视，得到更好的服务以及更优惠的条件。

2.产品分析

3.常见圆柱光影表现

单元2 产品精修要点

1.产品的光影

（1）光影的构成关系

（2）光影的构成原理

2.产品的结构

3.产品的材质

（1）塑料材质

（2）金属材质

（3）玻璃材质

【课后反思】

在本章节的学习中，让学生了解淘宝产品精修的实例。根据学生基础，调整教学难度，未使用教材素材，而由学生自己绘制产品图片，学生既感到挑战，又很有成就感。

教研室主任审阅： 杨晓飞 教务处复查：

【课题】：情境十人像精修

【教学目标】

子情境1 认识人像精修

子情境2 人像精修实例

【教学重难点】

子情境2 人像精修实例

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

子情境1 认识人像精修

单元1 认识人像精修

1.目的

2.人像精修的作用

（1）修饰皮肤

（2）调整色彩

（3）调整形体

（4）调整五官

单元2 人像精修要点

1.面部比例

（1）头骨结构

（2）三庭五眼

2.形体塑造

（1）人体比例结构

（2）男性与女性的差别

①男性的特征

②女性的特征

子情境2 人像精修实例

单元1 基础修饰

单元2 整体修饰

单元3 光影调整

单元4 背景添加

【课后反思】

学生通过自己的操作，让人像更加精致，感受到PS的神奇技术，教师针对各小组交流计划情况进行分析总结，学生在讨论实操中收获很多。

教研室主任审阅： 杨晓飞 教务处复查：

【课题】：情境十一制作一张高点击率的主图

【教学目标】

子情境1 认识主图设计

子情境2 制作一张化妆品主图

【教学重难点】

子情境2 制作一张化妆品主图

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

子情境1 认识主图设计

单元1 主图设计概述

单元2 主图的视觉要点

1.主图组成要素

（1）构图

①直线式构图

②三角式构图

③对角线构图

④渐次式构图

⑤辐射式构图

（2）背景

①纯颜色背景

②场景背景

③渐变背景

④材质背景

⑤图形背景

（3）文字排版

（4）字体

①楷体

②宋体

③仿宋体

④黑体

（5）字号

（6）行距

（7）字间距

2.主图设计注意事项

3.设计实施

（1）了解产品卖点

（2）确定主图风格

（3）借鉴参考

子情境2 制作一张化妆品主

图单元1 制作前的准备

1.了解产品卖点，设计主图文案

2.找相关参考

单元2 打造背景

【课后反思】

学生能够完成主图的制作，但是在整体设计上还存在一定的欠缺，主要问题是创新意识不够和审美水平不高，在以后的教学中需要不断加强。

教研室主任审阅： 杨晓飞 教务处复查：

【课题】：情境十二设计一张海报

【教学目标】

子情境1 认识海报设计

子情境2 海报设计

【教学重难点】

子情境2 海报设计

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

子情境1 认识海报设计

1.海报组成要素

（1）背景

（2）文案

2.版式参考和风格参考

（1）版式参考

①左右式

②上下式

③中轴式

④左中右式

⑤自由式

（2）风格参考

3.素材来源推荐

4.设计实施

（1）尺寸

（2）文案策划

（3）借鉴参考

（4）素材准备

子情境2 海报设计

淘宝海报是淘宝专门为淘宝店铺以及天猫店铺的卖家打造的创意广告推广工具。

1.人物抠图

2.打造背景

3.文字背景

4.添加装饰物体

【课后反思】

海报设计是重点也是难点，学生在设计方面任然需要更多练习，提高自己的审美水平，能够创新，不能照搬守旧，要有设计的新颖性。

教研室主任审阅： 杨晓飞 教务处复查：

【课题】：情境十三设计钻展图片

【教学目标】

子情境1 认识钻石展位

子情境2 制作一张钻展图片

【教学重难点】

子情境2 制作一张钻展图片

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

子情境1 认识钻石展位

钻石展位是淘宝网图片类广告位竞价投放平台，简称钻展，钻展是为淘宝卖家提供的一种营销工具。钻石展位依靠图片创意吸引买家点击，获取巨大流量。

范围广：覆盖全国80%的网上购物人群，每天超过15亿次展现机会。

定向准：目标定向性强，可定向21类主流购物人群，直接生成订单。

实时竞价：投放计划随时调整，并实时生效参与竞价。

1.钻展图特点

2.钻展与海报的差别

3、钻展图类型

（1）品牌宣传

（2）店铺宣传

（3）单品推广

（4）活动引流

3.钻展图设计要点

（1）突出主题

（2）目标明确

（3）信息分层

4.钻展图设计流程

（1）整理需求

（2）逻辑分析

①目标用户定位

②产品卖点分析

③促销信息策划

（3）内容表达

A.图片的整体风格符合店铺的定位

B.图片的模特动作和表情很有张力和感染力

C.突出海量上新/切合买家的需求/店铺同期配合上新并优惠折扣

（4）策划验证

子情境2 制作一张钻展图片

单元1 设置背景

单元2 模特抠图

单元3 文案排版

【课后反思】

钻展图片的制作相对简单，但是有一部分学生在细节方面存在着马虎的问题，抠图不细致，文字排版不合理，需要教师多加提醒。

教研室主任审阅： 杨晓飞 教务处复查：

【课题】：情境十四 详情页设计

【教学目标】

子情境1 认识详情页设计

子情境2 制作详情页

【教学重难点】

子情境2 制作详情页

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

子情境1 认识详情页设计

单元1 认识详情页

1.宝贝详情页的定义

2.宝贝详情页的作用

3.详情页尺寸和图片分辨率

单元2 详情页设计方法

1.分析调查

（1）产品定位

（2）目标人群

2.参考模仿

单元3 详情页模块介绍及排序说明

1.详情页包含内容

2.详情页模块介绍

3.详情页排序

子情境2 制作详情页

单元1 关联推广标题条制作

单元2 关联推广产品排版制作

单元3 宝贝页头介绍

单元4 标题条制作

单元5 宝贝介绍制作

单元6 宝贝信息制作

单元7 尺码表制作

单元8 宝贝展示制作

【课后反思】

商品的详情页是整个淘宝装修的难点，难点在详情页的排版以及文案的构思，学生在这些方面需要着重练习。

教研室主任审阅： 杨晓飞 教务处复查：

【课题】：情境十五 制作一枚女装店铺标志

【教学目标】

子情境1 认识店铺标志设计

子情境2 设计店铺标志

【教学重难点】

子情境2 设计店铺标志

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

子情境1 认识店铺标志设计

1.店标尺寸

2.店标的作用

3.店标的分类

（1）图形标志

（2）文字标志

（3）形式标志

4.店标设计流程

（1）分析和定位

①LOGO应该体现出行业特性

②能表达客户的意愿

③考虑最终受众群体

（2）头脑风暴确定方案

①头脑风暴过程

②头脑风暴的时候需要记住的几点

（3）设计执行

5.店标设计要点

（1）色彩搭配

（2）构思与创意

①对象特征

②对象名称字首

③对象的全名组合

④形象化

⑤联想

⑥经营内容

⑦企业精神和文化理念

⑧历史、典故和地域性

子情境2 设计店铺标志

单元1 设计字体笔画

单元2 整体调整

【课后反思】

店标的设计与制作在整个淘宝装修的过程中起着画龙点睛的作用，学生的作品太过呆板。

教研室主任审阅： 杨晓飞 教务处复查：

【课题】：情境十六 店铺首页视觉设计

【教学目标】

子情境1 认识首页设计

子情境2 店招设计

子情境3 导航设计

子情境4 海报设计

子情境5 页面背景

子情境6 宝贝陈列展示设计

子情境7 页尾设计

【教学重难点】

子情境2 店招设计

子情境3 导航设计

子情境4 海报设计

子情境5 页面背景

子情境6 宝贝陈列展示设计

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

子情境1 认识首页设计

单元1 首页设计概述

1.首页展示效果

2.首页展示方式

首页的装修决定了店铺的整体形象。店铺首页设计是引导卖家、提高转化的重要手段，同时也是店铺的风格体现之处。好的网店装修像专卖店，没装修的像摆地摊，首页就相当于线下店铺的门面，使买家对整个店铺产生一种直观感受，是决定客户对店铺产生信任的关键。

单元2 首页设计要点

1.颜色与营销

（1）店铺配色误区

①背景和文字内容对比不强烈

②色彩过多

③过分强调色彩的刺激度

（2）主色、辅助色、点缀色

①主色决定店铺风格

②辅助色使页面丰富多彩

③点缀色有画龙点睛的效果

（3）首页色彩搭配技巧

①使用单色

②邻近色搭配

③对比色搭配

2.配色与信息传达

（1）白色

（2）黑色

（3）灰色

（4）蓝色

（5）黄色

子情境2 店招设计

店招 顾名思义是店铺的招牌，一般展示的内容是店铺的名称 logo标志 、口号等，详细一些的也可以展示1-2张主推的产品在店招上，还有领取优惠券的设计，收藏店铺的图标。（备注：店招是店铺上唯一各个页面都能展示出现的模块，所以一些重点推广信息可以设计在店招上）店招的尺寸为950*150像素含自定义导航部分，950*120像素导航为系统自带。

单元1 店招的视觉要点

1.店招风格

2.店招背景

3.店招内容

单元2 店招制作

单元3 装修店招

单元4 页头背景制作

单元5 页头装修

子情境3 导航设计

导航条 导航条可分为淘宝系统自带和自定义导航条设计，主要功能是可以快速链接到相应的指定页面。一般内容为所有分类 首页等，丰富一些的有会员制度 购物须知 品牌故事等等，具体可根据自己店铺内容而定。

单元1 导航制作要点

1.导航不等于分类

2.理性分类

3.感性分类

4.默认导航

5.导航清晰度

6.导航颜色

单元2 导航基本分类设置

单元3 导航自定义链接设置

子情境4 海报设计

全屏海报是主要用于店铺重大公告，折扣优惠 主打产品推荐，让客户一点进首页就能看到我们店铺的重点，一般全屏海报尺寸 1920*600像素（建议高度在400-600像素间较好）。

产品促销轮播海报，主要用于推广产品的促销内容可以做成促销海报吸引买家。尺寸为950*500像素（建议高度在00-500像素间较好）

单元1 海报制作要点

1.海报主题

2.海报组成部分

3.海报的构图

4.配色

单元2 海报的制作

单元3 全屏海报的装修

子情境5 页面背景

一个店铺的风格确立，店铺的背景占据了大部分，背景主要设计的内容 店铺的背景图片，店铺手机二维码或店铺一些重要的折扣信息都可以加入到店铺上。

单元1 页面背景的分类

1.纵向平铺背景

2.全平铺背景

3.不平铺背景

单元2 首页背景的设置

1.纵向平铺背景

2.全平铺背景

3.不平铺设置

子情境6 宝贝陈列展示设计

产品展示 方便买家可根据自己的需求能在您的店铺上快速找到想要的产品。分类主要可按价格分类 产品功能分类 产品属性分类等

单元1 宝贝陈列展示的视觉要点

1.明确商品类目

2.突出产品

3.主次分明

4.图文对应

5.突出价格和购买按钮

6.价格写法统一

单元2 宝贝推荐模块设置

单元3 自定义陈列设计

单元4 宝贝陈列装修

子情境7 页尾设计

优惠券设计 是指淘宝店铺优惠券的一个营销服务，起到主动营销买家，提升回头客的效果。我们所说的设计，是通过平面图片的设计展示在店铺的首页，让买家一目了然的看到。设计尺寸950*200像素内。优惠券的设置可以登录卖家中心-营销中心-促销管理-店铺优惠券

店铺页尾 主要展示的内容如关于快递 包装物流 关于售后等 尺寸950*300像素内

单元1 页尾设计要点

单元2 页尾设计

单元3 装修页尾

【课后反思】

本章内容较多，需要在课下多练习，动手操作，增强实战能力。

教研室主任审阅： 杨晓飞 教务处复查：

【课题】：情境十七 手机淘宝视觉设计

【教学目标】

子情境1 认识手机淘宝装修

子情境2 手机淘宝首页装修

子情境3 手机详情页装修

子情境4 手机店铺其他装修

【教学重难点】

子情境2 手机淘宝首页装修

子情境3 手机详情页装修

子情境4 手机店铺其他装修

【教学方法】

讨论法

【教具】

多媒体，计算机

【教学课时】

4

【教学过程】

子情境1 认识手机淘宝装修

手机在我们生活中有着无法取代的地位，因手机购物的快捷、方便及无处不在，淘宝手机端总流量以超过电脑端，这代表着移动互联时代已经来临，并迅猛发展着，因此手机淘宝的视觉设计必将成为重中之重。

1.手机店铺入口

2.手机店铺首页布局

（1）手机店铺首页构成

①自定义模块专区

②宝贝推荐模块专区

（2）大促结构设计

3.手机店铺装修要点

（1）店标

（2）店名

（3）模块

（4）图片规格

子情境2 手机淘宝首页装修

单元1 首页模块的使用

单元2 店招的设计

单元3 焦点图设计

1.视觉要点

（1）主题突出

（2）色彩鲜明

2.设计制作

单元4 优惠券设计

单元5 自定义模块广告图设置

单元6 首页备份

子情境3 手机详情页装修

手机详情页的制作，是增加无线端宝贝和店铺的加权点之一，为店铺引流的“武器”所向。当查看有没有做手机详情页的宝贝时，因为同步电脑的详情页的原因，会出现字体不整齐，图片动来动去及体验效果不佳等情况。重新做了手机宝贝详情页后，图片和文字将更清晰、有条理，用户体验也会更好。

单元1 导入电脑端详情

单元2 手动制作手机端详情页

子情境4 手机店铺其他装修

单元1 自定义菜单

单元2 自定义页面装修

【课后反思】

手机淘宝视觉设计与制作与学生的实际生活联系紧密，学生的学习兴趣更浓厚，可以对此加以引导，让学生真切感受到网店装修的应用。

可以让学生分享自己喜欢的手机淘宝店铺，分析店铺装修特点，为自己的设计增加思路。

教研室主任审阅： 杨晓飞 教务处复查：

本文来源：https://www.2haoxitong.net/k/doc/2cf215bfc7da50e2524de518964bcf84b8d52d14.html