中职网店美工全套教案整本书电子教案完整版教学设计最新电子讲义.docx
《中职网店美工全套教案整本书电子教案完整版教学设计最新电子讲义.docx》由会员分享，可在线阅读，更多相关《中职网店美工全套教案整本书电子教案完整版教学设计最新电子讲义.docx（95页珍藏版）》请在冰点文库上搜索。
中职网店美工全套教案整本书电子教案完整版教学设计最新电子讲义
XX学校
学科教案本
TeachingPlan
XX 一 学期
XX
学校（School）
学科（Subject）
年级（Grade）
_____________________
教师（Teacher）
《网店美工》目录
注意：
①按住Ctrl键后单击每个任务即可跳转到对应的教案
②单击
按钮可返回目录
③页面设置参数为：
纸张：
B5
页边距左：
1.5
页边距右：
1.5
项目一 Photoshop基础操作
任务一商品照片裁剪
任务二商品照片抠图
任务三商品照片调试
任务四商品照片修图
教学
课题
任务一商品照片裁剪
课题
类型
理论+实作
课时
安排
4
上课
时间
教
学
目
标
1.掌握商品照片裁剪的方法
2.掌握校正透视、定重心及大小
3.掌握校正倾斜重构图的方法
教学
重点
1、2
教学
难点
3
辅助
资源
课件、多媒体、网络
复习引入
1你曾经玩过修理照片吗？
2你利用什么软件美化或者校正照片？
3你对那些软件还知道哪些功能？
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一:
了解Photoshop界面
二：
校正倾斜重构图案例任务具体解说及操作
1、在拍摄商品时，有时因产品透视太夸张，拍摄时因相机离的太近，角度过高过低，拍摄出来的产品出现扭曲变形。
比如这张图片
在拍摄时因角度没调整好，导致拍摄出来的商品头重脚轻，严重失真。
接下来，我将用PhotoshopCS6软件来处理。
2、在PhotoshopCS6中打开【任务一原始图.jpg】，点击工具栏【裁剪工具】右下角箭头处，选择【透视裁剪工具】，此刻画布中出现裁剪框。
然后我们根据透视学的原理调整裁剪框的控制点，当裁剪框的虚线与物品边缘处于同一平行线，然后按下回车确定。
3、拍摄照片的光轴与主题的视平线未能形成平行状态时，两者间形成一定的夹角，便会致使拍摄出的照片出现一定程度的倾斜。
我们来比较下面两副图。
其中图1由于:
拍摄照片的光轴与主题的视平线未能形成平行状态时，相机不水平，产品拍摄时倾斜。
图2：
是经过photoshop校正倾斜重构图后的效果图。
4、在PhotoshopCS6中，打开素材【任务一活动2原始图.jpg】为了有利于裁剪和产品的展示，把图片裁剪成正方形。
画布大小调整正方形，大小设置为：
宽13.98CM，高13.98CM。
5、单击工具栏【裁剪工具】这个时候箭头光标就会变成裁剪图标。
根据需要拉出裁剪框，可以通过裁剪框周围的控制点拉伸裁剪框的大小，拉伸好了之后，将鼠标移动出裁剪框后，靠近矩形控制点光标变成拐角的双向箭头时，可以任意旋转拐角的方向，使裁剪框的其中一条边与产品的一条边达成平行，然后按回车键确定。
三：
教学总结反思
本次任务是正对拍摄过程中，由于角度的问题，导致产品倾斜，不利于产品展示，通过photoshop的裁剪工具，调整好产品的角度，使其重新构图，达到更好的展示效果。
阅读知识窗：
Photoshop的产生和发展
提问或讨论：
商品照片出现什么问题
讨论：
用什么方法可以校正
网络搜索：
裁剪工具的使用案例视频
小组合作
实训活动：
实践演示及点评
作业
布置
填写提交实训报告和实训表格
预习作业：
观看下一节微课内容
教学
后记
教学
课题
任务二商品照片抠图
课题
类型
理论+实作
课时
安排
4
上课
时间
教
学
目
标
1.掌握钢笔抠图的方法
2.掌握其他方法抠图
教学
重点
1、2
教学
难点
2
辅助
资源
课件、多媒体、网络
复习引入
4你曾经玩过照片抠图吗？
5你利用什么软件进行抠图照片？
6你会用Photoshop软件抠图吗？
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一:
了解Photoshop抠图工具
二：
具体解说及操作流程
（一）钢笔抠图
1、抠图在网店美工中是一项重要的环节，通过抠图可以使不美的图片经过处理后看上去美观大方亮堂，也可以使本来很美的图片更加锦上添花。
图片是网店的灵魂，好的图片则完全可以带动交易的成功率，下面，我们看这两张图片：
图1
和图2
，我们将使用钢笔工具扣取人物的外轮廓，对产品的背景进行置换，然后做成图3
的效果。
2、在photoshopCS6中，打开钢笔抠图素材.jpg，为了抠图更精确，按“ctrl+“+””把画布放大显示，将画面窗口移至合适的位置。
3、单击工具栏【转换点工具】
或者按“Alt”键,将鼠标光标移动至节点，按下鼠标左键并拖拽，此时将出现两条调节柄。
分别调整两端的调节柄的角度和方向，使其紧贴于商品的轮廓位置。
用相同的方法把剩余的部分加入进来。
4、单击【路径】面板底部<将路径作为选区载入>按钮，将路径转换为选区，或者按“ctrl+enter”。
5、在选择菜单中，【选择】-【修改】-【平滑】命令，弹出【平滑选区】对话框设置“取样半径为1像素”。
6、选择菜单栏中【编辑】-【拷贝】命令，复制选区内的产品。
7、打开素材2.jpg，按ctrl+V组合键粘贴产品，并按ctrl+T组合键调整到合适的大小和位置。
（二）其他方法抠图
1、钢笔抠图有时候不是特别适用，比如这张蕾丝衣服图片
要抠出裙边蕾丝，用【钢笔工具】抠，效果不好。
要结合其他方法才能抠出来。
2、在PhotoshopCS6中，打开素材文件，利用【钢笔工具】把衣服没有蕾丝的部分勾勒出来。
3、按下Ctrl+Enter组合键将路径转换为选区，再按下Ctrl+J组合键复制图层1，单击选择背景层。
4、打开通道面板，复制红色通道“红副本”，按下【Ctrl+L】组合将调整色阶设置为（120,1.0,255）。
5、按【ctrl+shift+alt】组合键，单击通道“红副本”，可以得到选区的交集，并按下【ctrl+J】组合键复制图层2。
6、回到背景层，重复刚才的步骤，把两臂衣袖的蕾丝部分复制出来，形成图层3和图层4。
7、最后把图层1、2、3、4合并成图层1，然后用【移动工具】把图层1移到素材2中，按【ctrl+T】调整好图层1的大小和位置。
三：
教学总结反思
整个抠图过程，难点是钢笔使用不熟练，在建路径和转弧形时难以把握，容易出错。
通过其他方法抠图掌握了更细节更难抠图的方法和技，但是在选择通道时，难于辨别最佳通道，在色阶调整时也比较难调节，要想做得更佳作品，需多加练习
阅读知识窗：
Photoshop抠图工具
提问或讨论：
商品照片出现什么问题
讨论：
用什么方法可以抠图
网络搜索：
抠图工具的使用或者看微视频
小组合作
实训活动：
实践演示及点评
作业
布置
填写提交实训报告和实训表格
预习作业：
观看下一节微课内容
教学
后记
教学
课题
任务三活动一曲线工具调色
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.了解曲线工具基本知识
2.通过曲线工具对曝光不足的照片进行调色
教学
重点
1、2
教学
难点
2
辅助
资源
课件、多媒体、网络
复习引入
1曾经对商品进行拍照过吗？
2有无出现商品色差？
3认为如何对商品进行调色？
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
1.活动实训
4人为一组，选出小组代表，用数码相机给商品进行拍照。
对于有过网购经验的人一定都知道，商品色差是一件很令人头疼的事，因为灯光、拍摄环境等原因造成的色差很难避免，但是却会给买家带来错误的引导，因此造成的退换货和差评纠纷也是最多的。
2．曲线工具基本知识
（1）图像中所有对比度、亮度、色戒等参数都可以通过曲线工具进行调色
快捷键ctrl+J可以打开曲线工具
3．利用曲线工具
这张照片里裙子不够突出，画面很暗，阴影区域细节非常少，接下来看通过曲线工具调色后的照片，明显亮色许多，突出裙子重点。
原图修正后
阅读知识窗：
曲线工具知识
讨论：
对于曝光不足，如何对照片进行调整
实训活动：
利用曲线工具进行调色
作业
布置
填写提交实训报告和实训表格
预习作业：
利用修正白平衡调色
教学
后记
教学
课题
活动二修正白平衡
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.了解白平衡
2.通过修正白平衡对照片进行调色
教学
重点
1、2
教学
难点
2
辅助
资源
课件、多媒体、网络
复习引入
1上节课的曲线工具修复照片
2还有其他方法对照片进行调色
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
1．白平衡基本知识
白平衡是描述显示器中红、绿、蓝三色混合生成后白色精确度的一项指标。
许多人在使用数码相机拍摄的时候都会遇到这样的问题：
在日光灯的房间拍摄的影像会显得发绿，在室内钨丝灯光下拍摄出来的景物就会偏黄，而在日光阴影处拍摄到的照片则偏蓝，原因在于白平衡。
2．利用曲线工具
拍摄商品时，物体颜色会因投射光线的颜色产生变化，在不同光线的场合下拍摄出的照片会有色温。
先来看一张需要处理的照片，这张照片偏白冷色调。
接下来看通过照片滤镜后的效果，明显偏黄，暖色调。
原图修正后
阅读知识窗：
白平衡基本知识
讨论：
对于曝光不足，如何对照片进行调整
实训活动：
利用白平衡进行调色
作业
布置
填写提交实训报告和实训表格
预习作业：
利用图片亮度和鲜艳度对照片调色
教学
后记
教学
课题
活动三调整图片亮度和鲜艳度
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.图片对比度知识
2.通过调整图片亮度和鲜艳度对照片进行调色
教学
重点
1、2
教学
难点
2
辅助
资源
课件、多媒体、网络
复习引入
1上节课的修正白平衡修复照片
2利用调整图片亮度和鲜艳度进行调色
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
1．色彩平衡基本知识
色彩平衡是图像处理的一个重要环节。
通过对图像的色彩平衡处理，可以校正图像色偏，过饱和或饱和度不足的情况下，也可以根据自己的喜好和制作需要，调制需要的色彩。
2.亮度/对比度基本知识
亮度是指画面的明亮程度。
对比度是画面黑与白的比值，也就是从
黑到白的渐变层次。
比值越大，从黑到白的渐变层次越多，从而色彩表现越丰富。
2．利用色彩平衡、亮度/对比度进行调色
今天我们来学习如何通过色彩平衡来调整图片亮度与鲜艳度。
先来看一张需要处理的图片，这张图片里的商品亮度偏暗，与背景颜色对比度不强。
接下来看通过调整色彩平衡后的效果，明显亮色许多，下面我们来看具体的操作过程。
原图修正后
阅读知识窗：
色彩平衡；亮度/对比度基本知识
讨论：
如何利用色彩、亮度/对比度对照片进行调整
实训活动：
利用曲线工具进行调色
作业
布置
填写提交实训报告和实训表格
预习作业：
照片修图
教学
后记
教学
课题
任务四商品照片修图
课题
类型
理论+实作
课时
安排
4
上课
时间
教
学
目
标
1.掌握PhotoshopCs5快去水印修补与内容识别的方法
2.掌握图章工具修图的方法
教学
重点
1、2
教学
难点
2
辅助
资源
课件、多媒体、网络
复习引入
7你曾经看过有水印的照片吗？
8你利用想把水印照片删除掉吗？
9你会用Photoshop软件删除水印吗？
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
一:
了解Photoshop修补工具
二：
具体解说及操作流程
（一）快去水印修补与内容识别
1、有时在拍摄过程中由于背景、灯光、拍摄角度等原因，拍摄出来的商品图片存在严重的色差，或者有瑕疵，这样就需要对它进行修饰，从而达到理想效果。
2、在PhotoshopCS5中，打开素材文件，先复制一个背景图层，避免在背景层直接修改素材，便于修改。
3、在背景副本图层上，点击【套索】工具，把需要处理的水印部分圈出来。
4、选择【编辑】-【填充】或者直接按【shift+F5】，在填充对话框内容选项，使用【内容识别】，点击【确定】。
5、重复刚才的步骤，可以快速把图片中水印去除。
（二）图章工具修图
1、【图章工具】在处理拍摄过程中因背景、灯光、拍摄角度等原因，出现的色差，或者有瑕疵方面会比较好用，也比较方便。
2、在PhotoshopCS6中，打开图章修复.jpg素材，单击工具栏【仿制图章】工具，按住【Alt】键，光标为“靶”状，意味着可取色样，选取颜色相近的地方，然后松开【Alt】键，在目标处慢慢涂抹。
3、利用【修复画笔】工具，把素材中桌子进行修改，达到桌子的真实性。
4、打开蝴蝶.jpg素材，选择【魔术棒】工具，选定图片的白色背景，属性【容差】设置为“20像素”，按【Delete】键，删除选定选区的像素，选择菜单栏【编辑】-【定义图案】命令，将图片定义为图案。
选择工具栏【图案图章】工具，把刚才新建的蝴蝶图案，在图片上涂抹，多余的部分可用橡皮擦擦除，直至最佳效果。
三：
教学总结反思
本节【图章工具】的使用，在选举色样时比较难把握，特别是色样比较复杂的更难抓准。
阅读知识窗：
Photoshop修补工具
提问或讨论：
商品照片中水印如何处理
讨论：
用什么方法可以快速删除
网络搜索：
观看微课视频
小组合作
实训活动：
实践演示及点评
作业
布置
填写提交实训报告和实训表格
预习作业：
观看下一节微课内容
教学
后记
惠州城市职业学院
学科教案本
TeachingPlan
20年———20 年学年度 学期
The（1st/2na）SemesteroftheAcademicYearfrom20to20
_____________________
网店美工
学校（School）
学科（Subject）
_____________________
年级（Grade）
教师（Teacher）
《网店美工》目录
注意：
①按住Ctrl键后单击每个任务即可跳转到对应的教案
②单击
按钮可返回目录
③页面设置参数为：
纸张：
B5
页边距左：
1.5
页边距右：
1.5
项目二 商品照片处理
教学
课题
活动一制作白底文字主图
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.熟练使用自由变换工具、多边形套索工具、填充、文字工具
2.能制作清爽、简单的主图，使用文字突出商品卖点
教学
重点
熟练使用自由变换工具、多边形套索工具、填充、文字工具
教学
难点
制作清爽、简单的主图，使用文字突出商品卖点
辅助
资源
课件、多媒体、网络
复习引入
①通过上一章内容的学习，你掌握了使用哪些PHOTOSHOP软件的工具？
②你在网上购物的时候，打开商品详情页第一眼看到的什么？
③你了解宝贝主图吗？
想知道主图是怎么做出来的吗？
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
活动实施：
1、用PhotoshopCS6打开素材“T恤.jpg”，:
点击菜单图像—图像大小或按“Ctrl+Alt+I”快捷键，调出图像大小对话框，查看图像大小是否大于800*800像素。
如下图图2.3-11。
如果小于800*800像素，则可在图像菜单里调出“画布大小”对话框扩展画布。
2、按“Ctrl+T”快捷键，对T恤进行自由变换
3、调整T恤到适当位置。
新建图层，使用矩形选框工具，高度为100像素，填充颜色灰蓝色（R：
0，G：
47，B：
100）
4、新建图层，使用多边形套索工具，建立多边形，填充橙黄色（R：
247，G：
211，B：
9）
5、使用文字工具，输入文字“潮牌设计修身T恤”，文字设置如下图2.3-16，按调出“切换字符和段落面板”，调整文字位置
6、再输入文字：
“只售68元”，在切换字符和段落面板调整参数，完成白底文字主图制作。
怎么安装文字字体？
一般在主图使用兰亭雅黑字体，字体和颜色均不超过3种
作业
布置
填写提交实训报告和实训表格
作业：
利用素材图片“钢笔”绘制3款主图。
教学
后记
教学
课题
活动二制作功能场景主图
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.熟练使用色阶、羽化、图案填充、蒙版工具
2.能制作背景立体感强、层次丰富，营造潮酷风格的主图
教学
重点
熟练使用色阶、羽化、图案填充、蒙版工具
教学
难点
能制作背景立体感强、层次丰富，营造潮酷风格的主图
辅助
资源
课件、多媒体、网络
复习引入
①制作白底文字主图需要注意哪些问题？
②白底文字主图是否能用来做所有商品的主图？
③功能场景主图怎么做？
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
活动实施：
1、打开素材“T恤.psd”文件，新建图层，命名为黑条纹。
选择油漆桶工具，设置参数如图2.3-22，填充“灰色犊皮纸”图案。
2、按“Ctrl+L”快捷键，调出色阶对话框，设置参数，把“黑条纹”图层下移一层。
3、新建图层，命名为“大白圈”。
使用椭圆选框工具，设置羽化：
100像素，样式：
固定大小，宽度：
900像素，高度900像素。
建立选区，填充白色（（R：
255，G：
255，B：
255）。
取消选区，把图层下移一层。
4、新建图层，命名为“黑框”。
使用矩形选框工具，建立高100像素，等图像宽度的选区，填充黑色（R：
0，G：
0，B：
0）。
取消选区。
新建图层，命名为“小白圈”使用椭圆选框工具，设置羽化：
50像素，样式：
固定大小，宽度：
340像素，高度210像素。
建立选区，填充白色（R：
255，G：
255，B：
255）。
5、自由变换“小白圈”放大到适当大小，移动到黑框中间。
调整图层顺序。
6、复制T恤图层，命名为“倒影”。
按“Ctrl+T”快捷键进行自由变换，右键选择“垂直翻转”。
按“V”快捷键使用移动工具，下移倒影图案7、在“倒影”图层上添加蒙版，做黑白渐变，渐变大小和位置如图2.3-29。
调整“倒影”图层不透明度为29%。
制作完成时各个图层上下顺序，完成功能场景主图制作。
引入：
分组讨论：
怎么样的商品需要什么样的功能场景主图？
你绘制的白圈是否使图片达到了立体的效果？
有使此功能场景主图更好的改进方法和途径吗？
作业
布置
填写提交实训报告和实训表格
作业：
利用提供的素材绘制两个不同背景的功能场景主图。
教学
后记
教学
课题
活动三批量添加LOGO
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.熟练动作工具、批处理工具、填充工具；
2.掌握批处理的基本知识；
3.能批量添加商品LOGO；
教学
重点
熟练动作工具、批处理工具、填充工具
教学
难点
能批量添加商品LOGO
辅助
资源
课件、多媒体、网络
复习引入
①如何给商品主图添加水印？
②如何一次性批量给商品添加LOGO？
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
活动实施：
1、建立一个文件夹命名为“主图”，把要添加LOGO的主图放入到该文件夹。
然后新建一个文件夹，命名为“已加LOGO主图”，用于等一下存放。
2、选择菜单：
窗口—动作。
调出“动作”调板，按“新建动作”。
3、在“新建动作”对话框中命名新建动作为“加LOGO”，按“记录”。
则开始记录动作。
红色园按钮表示记录中。
4、打开预先准备好的文件，通过操作选区-填充前景色-建立文本-设置文本-移动等步骤，在文件中绘制店铺LOGO，保存文件。
按停止键停止录制动作。
。
5、选择菜单：
文件—自动—批处理。
调出批处理对话框，进行设置，完成批量添加LOGO。
注意：
所有需要添加LOGO的主图必须尺寸一致
作业
布置
填写提交实训报告和实训表格
作业：
利用提供的素材给两张主图批量添加LOGO。
教学
后记
教学
课题
活动一直通车广告创意
课题
类型
理论+实作
课时
安排
2
上课
时间
教
学
目
标
1.熟练使用魔棒工具、径向渐变、曲线工具、图层样式工具；
2.了解广告创意图制作的基本知识；
3.能按要求制作直通车广告创意图。
教学
重点
熟练使用魔棒工具、径向渐变、曲线工具、图层样式工具；
教学
难点
能按要求制作直通车广告创意图。
辅助
资源
课件、多媒体、网络
复习引入
①什么是直通车广告？
②如何设计、制作直通车广告？
③制作直通车广告需要准备什么？
教学
手段
教学过程
师生互动
活动设计
课件
讨论
实作
课件
举例
讨论
课件
实作
活动实施：
1、启动Photoshop程序，新建一个宽度为800像素，高度为800像素的图片文件：
（此尺寸为淘宝店的标准尺寸）。
2、打开素材文件“T恤.JPG”，把图片中的T恤去底后再根据实物适当的调整图片的亮度跟色彩，让T恤接近实物的颜色；调整完以后把去底的图片拖至到新建的文件中去。
3、为了突出产品的又不让底图看上去太单调，我们为底色添加一个由白色向浅灰色的径向渐变。
4、新建一个图层，用矩形选框工具画一个长条形的方框填充成红色到深红色的渐变色；复制该图层用自由变换适当调整大小放置左上角的位置。
5、同样用复制图层和自由变化制作右下角的菱形，调整位置后用曲线功能把红色的渐变色颜色加深，接着在给该图层添加图层式样—投影,；为了增加菱形的立体折叠的感觉，在菱形和下面红色长条形交接的位置在制作一个深红色的三角形让整个图形看上去比较整体。
6、根据文字的数量重要程度调整文字的字体大小位置，这个画面我重点突出了价钱优势“79”采用了大而粗的字体，其次再是“全国包邮”；字体的颜色选择也是跟底色红色有着很大色差的白色和黄色，既突出又不会觉得刺眼最终达到最终效果。
分组讨论：
还有其他方式使地图显得不单调吗？
作业
布置
填写提交实训报告和实训表格
作业：
按要求制作一副直通车广告创意图。
升级会员 