(中职)网店美工全套教案整本书电子教案完整版教学设计最新电子讲义
网店美工教案
第1章网店装修美工设计快速入门教学内容一、初步了解网店装修二、网店装修的风格定位三、网店装修中需要注意的问题教学要求【知识目标】1．理解网店装修的作用和重要性。
2．明白网店装修与转化率的关系。
3．学会用有效的方法确定网店的装修风格。
4．注意网店装修细节问题，避免客流量的流失。
【技能目标】1．能够结合实例简述网店装修的重要性。
2．能够分析品牌店铺的装修风格。
3．能够分析品牌店铺在网店装修上的优势。
教学重点1．网店装修的作用和重要性。
2．学会用有效的方法确定网店的装修风格。
教学难点1．网店装修与转化率的关系。
2．能够确定网店的装修风格。
教学方法讲授法、案例法课时数3课时教学内容第一节初步了解网店装修一、什么是网店装修判定一个网店的好坏，首先要看的就是店铺的装修，没有一个进行专业、恰当的装修，哪怕店铺中的商品质量再好，也不一定能销售出去。
二、网店装修的重要性网店经营者对于如何开网店都是在不断的摸索中前进的，大家越来越意识到网店装修的重要性。
因此，需要对网店进行美化，以吸引更多的买家，而网店装修是提高网店销售额的法宝，所以一定要重视这个问题。
三、网店装修与转化率的关系网店首先需要装修，当店铺的准备工作做到一定程度后，就可以进行宣传和推广了。
在宣传和经营的过程中，再逐步地去完善。
既不能一味地装修，也不能一味地宣传。
网店的销售量高低直接与转化率相关，而影响转化率的主要因素包括商品的图片、买家的评价、卖家的促销活动等。
在这些因素中，无疑都会涉及网店装修，可见网店装修与网店的营销推广是密不可分的。
第二节网店装修的风格定位一、如何确定网店装修的风格确定店铺的风格就是将头脑中的思维具体化。
想要抓住店铺的灵魂，不能只靠网店经营者或美工的个人品位，它需要一个系统的方法。
二、不同行业的网店装修风格根据店铺销售商品的不同，对商品进行了有效的包装和设计，使各自所呈现出来的视觉效果独具特色，也因此让买家更加容易区分，形成特定的记忆，有助于自身店铺形象的树立。
《网店美工》教案--商品详情页设计
***学校《网店美工》教案第 1 页有兴趣的设计师们可以利用业余时间多进行了解。
如果能够成为集设计与文案才能于一身的高级人才，可想而知，你将备受青睐。
商品详情页设计是直接决定交易能否成功的其中一个重要因素，如何去构思使之更具有吸引力，更能抓住消费者的心理是关键。
我们需要收集和了解买家需要看什么，不需要看什么：图6-1 详情页所需内容板块示意接着，在再构思宝贝页面需要放置什么内容：图6-2 详情内容要点示意任务23 商品功能性介绍区域设计在做商品详情页规划前，清楚商品详情页每个区域的功能性，对后期布局设计起到相当重要的作用。
一般来说，商品详情页分三大区域：商品营销区、产品展示区、品牌包装区。
而三大区域则又细分成以下6个展现区，并形成商品描述的布局图：突出卖点：提炼商品的主要功能利益进行重点表现，吸引买家关注并进行浏览由整体到细节：先进行商品的整体展现，再进行商品的细节描述，这也是买家在购买商品时的浏览顺序情感联想：针对商品提炼情感利益，激发买家的感性购买需求导购服务：针对买家关注的商品问题进行导购式解答，逐步打消买家的购买疑虑售前售后：对买家进行购买后的一系列服务，从包装、物流到售后服务进行描述实力呈现：商品的质量认证、企业的实力展示、品牌介绍、荣誉等体现店铺实力的内容关联销售：关联销售区域，以便买家跳出前有更多商品选择图6-3 详情页个区域内容细分示意另外，除了基础功能区域版块，为了提高买家逛店体验度以及店铺成交转化率，我们建议增加一些额外的版块，来为商品详情页的功能加分：1.增加买家购买欲望—促销活动区：在商品描述中加进给力的促销信息，让买家了解商品的同时清楚可以享受的促销优惠，让促销优惠来刺激买家的购买欲望。
2.增加客单价—商品推荐：商品推荐有两种，分为同类商品推荐，设计必须要突出同类商品中不同商品的优势。
告诉买家可以如何进行商品选择，如可以的话还可以体现出购买咨询和导购信息。
另一类则是搭配商品推荐：设计中要突出不同商品搭配的艺术，或功能或效果或视理念或促销导购写到这里来，但是文案不宣过长。
《网店美工案例教程》课程教案
1.制作跨境端游泳镜Banner本练习将制作跨境端游泳镜Banner,在制作时先绘制Banner背景，再添加游泳镜图像效果，并在左侧输入文本内容，效果如图所示。
2.制作移动端篮球Banner本练习将制作移动端篮球Banner,在制作时先绘制Barmer背景，再输入文本内容，并对文本进行编辑，完成后在右侧添加篮球素材，效果如图所示。
举一反三3.制作PC端瑜伽垫主图本练习将制作PC端瑜伽垫主图，先制作主图背景，再输入文本内容，并对文本进行编辑, 完成后的效果如图所示。
4.制作跨境端摇摆驼鹿Banner本练习将制作跨境端摇摆驼鹿Banner,在制作时先绘制Banner背景，再添加摇摆驼鹿图像效果，并在左侧输入文本内容，效果如图所示，5.制作移动端毛绒玩具Banner本练习将制作移动端毛绒玩具Banner,在制作时先绘制Banner背景，再输入文本内容, 并对文本进行编辑，完成后在右侧添加毛绒玩具素材，效果如图所示。
葫鼠当造鼠6.制作PC端魔方主图本练习将制作PC端魔方主图，先制作主图背景，再输入文本内容，并对文本进行编辑, 完成后的部分主图效果如图所示。
滑灵活旋转第4章3.制作PC 端笔记本主图本练习将制作PC 端笔记本主图，先制作主图背景，再输入文本内容，并对文本进行编辑, 完成后的部分主图效果如图所示。
小结 4.3.2 设计店标4.3.3 设计店招 4.3.4 设计Banner 4.3.5 设计主图 4.3.6 设计详情页43.7 举一反三1、掌握办公用品类网店设计的方法。
2、掌握数码配件类网店设计的方法。
3、掌握手机配件类网店设计的方法。
1.制作跨境端LED 日历Banner本练习将制作跨境端LED 日历Banner,在制作时先绘制Banner 背景，再添加LED 日历图 像效果，并在左侧输入文本内容，效果如图所示。
I1Alarm Clock Numeral WoodenLED Tim© TemperatureCalendarBU Y$25.992.制作移动端办公桌Banner本练习将制作移动端办公桌Banner,在制作时先绘制Banner 背景，再输入文本内容，并 对文本进行编辑，完成后在左侧添加办公桌素材，效果如图所示。
网店美工设计-教学教案
《网店美工设计(项目式全彩微课版)》
配套教学教案
第1讲
第2讲
第3讲
3.4.2设计理念
小结1、掌握主图的设计基础。
2、掌握直通车图的设计基础。
3、掌握钻展图的设计基础。
作业
3.4项目演练-设计居家大衣橱直通车图
本任务通过设计居家大衣橱直通车图，明确当下家居产品行业直通车图的设计风格并掌握直通车图的设计要点与制作方法。
第4讲
4.3项目演练-设计果汁饮品海报
本任务通过设计果汁饮品海报，明确当下饮品行业海报的设计风格并掌握海报的设计
要点与制作方法。
作业
第5讲
5.3项目演练-设计PC端数码产品首页
本任务通过设计PC端数码产品首页，明确当下数码产品行业PC端首页的设计风格并掌握PC端首页的设计要点与制作方法。
作业
第6讲
6.3项目演练-设计PC端运动鞋品详情页设计
本任务通过设计PC端运动鞋品详情页，明确当下鞋品行业PC端详情页的设计风格并掌握PC端详情页的设计要点与制作方法。
作业
第7讲
7.3项目演练-设计无线端数码产品首页
本任务通过设计无线端数码产品首页，明确当下数码产品行业无线端首页的设计风格并掌握无线端首页的设计要点与制作方法。
作业
第8讲
8.3项目演练-制作花艺活动宣传视频
本任务通过制作花艺活动宣传视频，明确当下花艺行业宣传视频的后期风格并掌握宣传视频的后期处理要点与后期处理方法。
作业。
网店美工 教案全套 第1--9章 网店美工的基础知识---网店场景化美工
《网店美工》配套教学教案第1章第2章2.4.1 画笔2.4.2 修复工具组2.4.3仿制图章2.4.4 蒙版2.4.5 渐变小结1.掌握商品图片的拍摄技巧。
2.掌握商品图片的尺寸调整和裁剪方法。
3.熟练掌握商品图片的抠图方法。
4.熟练掌握商品图片的瑕疵去除方法。
课后练习【课后实战】实训内容：用本章节所学的相关工具和命令完成酒瓶的抠图，打开“配套资源/第二章/课后实战素材.jpg”图片。
如图2-88所示。
图2-88“酒瓶抠图”素材实训要求：用Photoshop cs6制作完成，效果如图2-89所示，保存png.格式提交，由教师测评。
图2-89“酒瓶抠图”效果实训检测与评价：序号项目标准分值1 选区建立情况熟练运用建立选区的工具（40分）2 抠图处理情况橡皮擦、色彩范围和快速选择等工具使用恰当（30分）3 整体效果主体突出、层次分明，无瑕疵（30分）第3章3.4 调整商品图片的特殊效果3.4.1 特殊滤镜3.4.2 滤镜组小结1.熟练掌握商品图片明暗、对比度问题。
2.熟练掌握商品图片色彩、色调处理方法。
3.熟练运用“图层混合及样式”进行图片美化的方法。
课后练习【课后实战】实训内容：运用所学知识，为模特衣服改色，打开“配套资源/第三章/课后实战素材.jpg”图片，如7-52所示。
7-52 素材图实训要求：用Photoshop cs6制作完成，并排成一排，保存jpg.格式提交，如7-53所示，由同学互评。
7-53 效果图实训检测与评价：序号项目标准分值1 选区建立情况熟练运用建立选区的工具（30分）2 调色命令使用情况色相/饱和度、色彩平衡等命令运用恰当（30分）3 整体效果颜色排列正确、人物边缘清晰，无缺损（40分）第4章课后练习【课后实战】实训内容：用本章节所学的“文字”和“矢量绘图”知识完成促销标签图的制作。
实训要求：用Photoshop cs6制作完成，保存jpg.格式提交，效果如图4-55所示。
网店美工教案
网店美工教案2）通过PPT、视频等多媒体手段，生动形象地展示教学内容；3）通过小组讨论、案例分析等互动方式，激发学生思考和创造能力。
教学资料及要求：教学过程中需准备相关色彩搭配案例、图片素材收集网站等资料，以便学生进行实际操作和练。
教学设计教学内容内容大纲：2.1∣色彩基础知识原理2.1.1色彩的基本概念2.1.2色彩的分类和特点2.1.3色彩搭配的基本原则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图片素材的应用和处理课后练小结1、掌握色彩基础知识原理；2、了解店铺色彩搭配技巧方法；3、了解网店美工色彩心理应用和图片素材收集技巧。
课后（1）请设计一组符合店铺风格的色彩搭配方案；（2）请收集一组适合网店美工应用的图片素材。
任务式教学手段可以增加师生互动，提高学生的研究兴趣。
教学过程中除了讲解必备的理论知识外，还可以列举一些比较有代表性的案例。
教学内容大纲如下：2.1 了解店铺装修必备的色彩知识，包括构成色彩的三要素——色相、明度、纯度，以及店铺色彩心理应用。
2.2 研究店铺色彩搭配技巧，包括色相、明度、纯度对比与调和的搭配技巧。
2.3 挑选合适店铺的色彩搭配，包括根据店铺特点选择主色，以及店铺的主色、辅助色、点缀色搭配。
2.4 研究图片素材规划与收集，包括图片色彩属性概述、选择图片格式以及选择图片筛选规划技巧。
本章小结包括掌握店铺色彩搭配技巧方法，掌握网店美工色彩心理应用以及图片素材收集技巧。
课后练包括收集5组不同主色风格的店铺图片，以及分析儿童用品店铺的用色规律。
在网店商品图片美化方面，教学目标是能利用Photoshop CS6图像处理软件进行图片的美化。
《网店美工案例教程》—教学教案
《网店美工案例教程》教学教案第1章举一反三1. 制作跨境端游泳镜Banner本练习将制作跨境端游泳镜Banner，在制作时先绘制Banner背景，再添加游泳镜图像效果，并在左侧输入文本内容，效果如图所示。
2. 制作移动端篮球Banner本练习将制作移动端篮球Banner，在制作时先绘制Banner背景，再输入文本内容，并对文本进行编辑，完成后在右侧添加篮球素材，效果如图所示。
3. 制作PC端瑜伽垫主图本练习将制作PC端瑜伽垫主图，先制作主图背景，再输入文本内容，并对文本进行编辑，完成后的效果如图所示。
4. 制作跨境端摇摆驼鹿Banner本练习将制作跨境端摇摆驼鹿Banner，在制作时先绘制Banner背景，再添加摇摆驼鹿图像效果，并在左侧输入文本内容，效果如图所示。
5. 制作移动端毛绒玩具Banner本练习将制作移动端毛绒玩具Banner，在制作时先绘制Banner背景，再输入文本内容，并对文本进行编辑，完成后在右侧添加毛绒玩具素材，效果如图所示。
6. 制作PC端魔方主图本练习将制作PC端魔方主图，先制作主图背景，再输入文本内容，并对文本进行编辑，完成后的部分主图效果如图所示。
第4章4.3.2设计店标4.3.3设计店招4.3.4设计Banner 4.3.5设计主图4.3.6设计详情页4.3.7举一反三小结1、掌握办公用品类网店设计的方法。
2、掌握数码配件类网店设计的方法。
3、掌握手机配件类网店设计的方法。
举一反三1. 制作跨境端LED日历Banner本练习将制作跨境端LED日历Banner，在制作时先绘制Banner背景，再添加LED日历图像效果，并在左侧输入文本内容，效果如图所示。
2. 制作移动端办公桌Banner本练习将制作移动端办公桌Banner，在制作时先绘制Banner背景，再输入文本内容，并对文本进行编辑，完成后在左侧添加办公桌素材，效果如图所示。
3. 制作PC端笔记本主图本练习将制作PC端笔记本主图，先制作主图背景，再输入文本内容，并对文本进行编辑，完成后的部分主图效果如图所示。
《网店美工》教学大纲
《网店美工》课程教学大纲一、课程基本信息1．课程编号：090912502．课程名称：网店美工3．英文名称：Shop Artist (Wang Dian Mei Gong)4．课程简介：网店美工是一门培养淘宝、天猫、京东、亚马逊等网店页面编辑美化工作者的课程，熟悉平面设计软件Photoshop、Illustrator、美图秀秀、光影魔术手和网页设计Dreamweaver等软件将网店的视觉效果，排版等工作呈现出来。
二、课程说明1．教学目的和要求：网店美工是一门培养淘宝、天猫、京东、亚马逊等网店页面编辑美化工作者的课程。
通过对该课程的教学，使学生系统学习网店美工设计之“道”“器”“术”三个层面的知识体系，掌握商品拍照技巧，Photoshop（美图、光影）图形图像处理的图文设计能力，详情页的设计思路及网店的装修设计等能力。
要求学生对美工设计之“道”“器”“术”三个层面的知识原理做到理解，熟练掌握各种美工设计软件的使用方法，以培养学生的设计思维和能力为主，为学生日后成为专业的电子商务人才奠定坚实的基础。
2．先行课程：无。
3．周课时、总学时：6学时*8周（3学时*16周）、共48学时,理论教学24学时、实践教学24学时。
4．开课学期：第二学期（或第三学期）。
5．教学方法：讲授法、头脑风暴法、分组讨论法、任务驱动法、案例讨论法等直观教学法。
6．考试方法：平时作业、考勤占50%，期末上机考试占50%。
7．实验、实习、作业：为了培养学生的实践动手能力，本课程主要以上机实践为主，理论教学为辅，基本上每次课都会配备相应的实操、实习作业，要求学生在课堂内完成。
8．教材：《网店美工》（第1版），童海君主编，北京理工大学出版社，2016年2月版。
9．教学参考资料：《网店美工实操》，淘宝大学编著，电子工业出版社，2013年。
《电子商务网页设计与制作》，徐峰主编，浙江大学出版社，2013年。
《网店美工宝典》，王楠编著，电子工业出版社，2015年。
中职网页设计与实训整套课件完整版ppt教学教程最全电子讲义教案最新
黄 色
#FFFF00
yellow
白 色
#FFFFFF
white
任务3.2 网页的基本制作
知识3.2.1 页面属性
建立网页时，需要对网页的“外观”、“链接”、“标题”等进行基本的设置，这些设置需要在“页面属性”中完成。
页面属性对话框
知识3.2.2 META标记
知识2.1.2 网站规划
一 ．确定目标群体
在创建一个站点之前，首先要确定站点是给什么人访问的，即确定站点的用户群体，以便于确定在站点内添加的内容、为网站设计不同的视觉内格、色彩效果等。
化妆品网
二 ．确定站点功能
确定了站点的目标群体后，就要设计网站需要为这些用户实现哪些愿望和功能，以确定网站各方面的内容及效果要求，例如如果是企业网站，就应立足于企业形象来展开，如果是购物网站，就要强化网站的在线购物等功能。
任务4.1 文本基本操作
文本作为网页中最基本的信息载体，以最直接、最直观的方式使用户获取信息，在网页中有着不可替代的地位与作用，它涵盖的信息量大，插入、编辑操作简便，容易被浏览器下载，不会像图片一样占用太长的等待时间，因此掌握好文本的操作，对于网页制作是最基本的技能。
知识4.1.1 选择性粘帖
Dreamweaver 8网页设计与实训
走进Dreamweaver8
创建本地站点
网页基础知识和基本制作
文本编辑
图像与多媒体的应用
网站链接
表格和布局
框架
表单
模板和库
CSS样式
行为和JavaScript
层和时间轴
整站建设、测试与上传
动态网站制作
项目一 —走进Dreamweaver 8
《网店美工》教案-详情页设计
最后利用广告区制作背景的方法制作彩色背景，调整不透明度，黄色部分为“61%”，红色部分为“31%”，至此本例制作完毕。
6.合成详情页操作
将之前制作的详情页各个区域储存为.jpg格式的图片，将各个高度相加。新建一个“宽度”为750像素、“高度”为2444像素、“分辨率”为72像素/英寸的空白文档，将各个区域拖曳到合成详情页文档中。
步骤6新建图层，在底部中间位置绘制一个粉红色圆角矩形，在上面输入文字“色彩展示”，在底部中间位置绘制白色圆角矩形，调整不透明效果为“38%”，至此色彩展示区制作完毕。
3、细节展示区操作
步骤1启动Photoshop，新建一个750像素×600像素，分辨率为72像素/英寸的空白文档，用制作广告区相同的方法制作背景。
三、课堂练习
根据所学的详情页设计方法，根据商品特性完成详情页设计。
四、归纳小结
本项目主要学习了网店美工详情页的视觉设计包括详情页的文案设计、详情页的整体布局、详情页的整体效果设计。通过对详情页的综合设计，让学生熟知详情页设计的方法要领，从而更好地设计出具有吸引力的详情页，体现出了详情页设计的丰富性和灵活性。
4.上身效果操作
步骤1启动Photoshop，新建一个750像素×600像素，分辨率为72像素/英寸的空白文档，用制作广告区相同的方法制作背景并降低不透明度，红色部分为“31%”，黄色部分为“61%”。
步骤2打开“素材”文件夹，在“项目二素材”文件夹中找到“上身001” “上身002” “上身003” “上身004” “上身005”，将图片拖曳到“上身效果”文档中，将圆角矩形的两个素材的“混合模式”设置为“正片叠底”。
网店美工全书电子教案完整版课件全书教学课件
一、网店图片文件的类型
1. JPEG 格式 JPEG 是最常见的一种图片格式，文件的扩展名为 . jpg 或 . jpeg。
2. PNG 格式 PNG 是可移植的网络图形格式。
3. GIF 格式 GIF 是图形交换格式。
二、网店图片编辑软件
Photoshop CS6 是一款用于图像制作和处理的专业软件，具有 强大的功能，利用这些功能，可以有效地进行商品图片的编辑，是 网店美工必备的软件工具。
1. 文字编辑工具 2. “段落”调板
第 4 节 商品分类设计
一、商品类目的分类原则 二、商品类目的分类方式
1. 按商品种类按商品风格分类
三、商品类目导航条 四、商品分类设计的相关工具
1. 图层工具 2. 绘画工具 3. 图案图章工具 4. 切片工具
课件 制作
“动作”控制面板可以 对图像进行批量处理，避免 重复操作，提高处理图片的 效率。
课件 制作
第 2 章 网店图片设计
第 1 节 网店促销图设计 第 2 节 商品主图设计 第 3 节 商品详情页设计
第 1 节 网店促销图设计
一、促销图的类型
网店促销图一般分为整店促销图、单品促销图和活动推广促销图三种 类型。
一、色彩的分类
1. 无彩色
2. 有彩色 3. 特殊色
二、色彩的三要素
1. 色相：是区别不同色彩的名称。 2. 明度：是指色彩的明暗程度。 3. 纯度：是指色彩鲜艳的程度。
三、颜色的模式
1. RGB 模式 2. CMYK 模式 3. HSB 模式 4. Lab 模式
四、网店色彩的搭配
1. 同一色调搭配
文字栅格化后加滤镜的效果
2. 文字转换为形状 在图层面板中选择文字图层，右击鼠标转换为形状，可将文字转换为形
(中职)网店美工全套教案整本书电子教案完整版教学设计最新电子讲义
网店美工 _______________________________________________________________ XX 学校学科教案本Teaching PlanXX 一 学期XX学校（School ）学科（Subject ）年级（Grade ） 教师（Teacher ）注意：①按住Ctrl 键后单击每个任务即可跳转到对应的教案 ②单击按钮可返回目录 ③页面设置参数为： 纸张：B5 页边距左：1.5 页边距右：1.5《网店美工》目录项目一 Photoshop 基础操作任务一 商品照片裁剪 任务二 商品照片抠图 任务三 商品照片调试 任务四 商品照片修图教学课题任务一商品照片裁剪课题类型理论+实作课时安排4上课时间教学目标1.掌握商品照片裁剪的方法2.掌握校正透视、定重心及大小3.掌握校正倾斜重构图的方法教学重点1、2教学难点3辅助资源课件、多媒体、网络复习引入①你曾经玩过修理照片吗？②你利用什么软件美化或者校正照片？③你对那些软件还知道哪些功能？教学手段教学过程师生互动活动设计课件讨论实作一:了解Photoshop界面二：校正倾斜重构图案例任务具体解说及操作1、在拍摄商品时，有时因产品透视太夸张，拍摄时因相机离的太近，角度过高过低，拍摄出来的产品出现扭曲变形。
比如这张图片在拍摄时因角度没调整好，导致拍摄出来的商品头重脚轻，严重失真。
接下来，我将用Photoshop CS6软件来处理。
2、在Photoshop CS6中打开【任务一原始图.jpg】，点击工具栏【裁剪工具】右下角箭头处，选择【透视裁剪工具】，此刻画布中出现裁剪框。
然后我们根据透视学的原理调整裁剪框的控制点，当裁剪框的虚线与物品边缘处于同一平行线，然后按下回车确定。
阅读知识窗：Photoshop的产生和发展提问或讨论：商品照片出现什么问题讨论：用什么方法可以校正网络搜索：裁剪工具的使用案例视频小组合作教学课题任务二商品照片抠图课题类型理论+实作课时安排4上课时间教学目标1.掌握钢笔抠图的方法2.掌握其他方法抠图教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入④你曾经玩过照片抠图吗？⑤你利用什么软件进行抠图照片？⑥你会用Photoshop软件抠图吗？教学手段教学过程师生互动活动设计课件讨论实作一:了解Photoshop抠图工具二：具体解说及操作流程（一）钢笔抠图1、抠图在网店美工中是一项重要的环节，通过抠图可以使不美的图片经过处理后看上去美观大方亮堂，也可以使本来很美的图片更加锦上添花。
网店美工教案
网店美工教案(总14页) -本页仅作为预览文档封面，使用时请删除本页-
《网店美工与视觉设计》
教学教案
第1章
《网店美工与视觉设计（视频指导版）》
配套教学教案
第2章
《网店美工与视觉设计（视频指导版）》
配套教学教案
第3章
《网店美工与视觉设计（视频指导版）》
配套教学教案
第4章
《网店美工与视觉设计（视频指导版）》
配套教学教案
第5章
《网店美工与视觉设计（视频指导版）》
配套教学教案
第6章
《网店美工与视觉设计（视频指导版）》
配套教学教案第7章
《网店美工与视觉设计（视频指导版）》
配套教学教案
第8章。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网店美工 _______________________________________________________________ XX 学校学科教案本Teaching PlanXX 一 学期XX学校（School ）学科（Subject ）年级（Grade ） 教师（Teacher ）注意：①按住Ctrl 键后单击每个任务即可跳转到对应的教案 ②单击按钮可返回目录 ③页面设置参数为： 纸张：B5 页边距左：1.5 页边距右：1.5《网店美工》目录项目一 Photoshop 基础操作任务一 商品照片裁剪 任务二 商品照片抠图 任务三 商品照片调试 任务四 商品照片修图教学课题任务一商品照片裁剪课题类型理论+实作课时安排4上课时间教学目标1.掌握商品照片裁剪的方法2.掌握校正透视、定重心及大小3.掌握校正倾斜重构图的方法教学重点1、2教学难点3辅助资源课件、多媒体、网络复习引入①你曾经玩过修理照片吗？②你利用什么软件美化或者校正照片？③你对那些软件还知道哪些功能？教学手段教学过程师生互动活动设计课件讨论实作一:了解Photoshop界面二：校正倾斜重构图案例任务具体解说及操作1、在拍摄商品时，有时因产品透视太夸张，拍摄时因相机离的太近，角度过高过低，拍摄出来的产品出现扭曲变形。
比如这张图片在拍摄时因角度没调整好，导致拍摄出来的商品头重脚轻，严重失真。
接下来，我将用Photoshop CS6软件来处理。
2、在Photoshop CS6中打开【任务一原始图.jpg】，点击工具栏【裁剪工具】右下角箭头处，选择【透视裁剪工具】，此刻画布中出现裁剪框。
然后我们根据透视学的原理调整裁剪框的控制点，当裁剪框的虚线与物品边缘处于同一平行线，然后按下回车确定。
阅读知识窗：Photoshop的产生和发展提问或讨论：商品照片出现什么问题讨论：用什么方法可以校正网络搜索：裁剪工具的使用案例视频小组合作教学课题任务二商品照片抠图课题类型理论+实作课时安排4上课时间教学目标1.掌握钢笔抠图的方法2.掌握其他方法抠图教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入④你曾经玩过照片抠图吗？⑤你利用什么软件进行抠图照片？⑥你会用Photoshop软件抠图吗？教学手段教学过程师生互动活动设计课件讨论实作一:了解Photoshop抠图工具二：具体解说及操作流程（一）钢笔抠图1、抠图在网店美工中是一项重要的环节，通过抠图可以使不美的图片经过处理后看上去美观大方亮堂，也可以使本来很美的图片更加锦上添花。
图片是网店的灵魂，好的图片则完全可以带动交易的成功率，下面，我们看这两张图片：图1和图2阅读知识窗：Photoshop抠图工具提问或讨论：商品照片出现什么问题讨论：用什么方法可以抠图网络搜索：抠图工具的使用或者看微课件举例讨论课件实作，我们将使用钢笔工具扣取人物的外轮廓，对产品的背景进行置换，然后做成图3的效果。
2、在photoshop CS6中，打开钢笔抠图素材.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的大小和位置。
三：教学总结反思整个抠图过程，难点是钢笔使用不熟练，在建路径和转弧形时难以把握，容易出错。
通过其他方法抠图掌握了更细节更难抠图的方法和技，但是在选择通道时，难于辨别最佳通道，在色阶调整时也比较难调节，要想做得更佳作品，需多加练习作业布置填写提交实训报告和实训表格预习作业：观看下一节微课内容教学后记教学课题任务三活动一曲线工具调色课题类型理论+实作课时安排2上课时间教学目标1.了解曲线工具基本知识2. 通过曲线工具对曝光不足的照片进行调色教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入①曾经对商品进行拍照过吗？②有无出现商品色差？③认为如何对商品进行调色？教学手段教学过程师生互动活动设计课件讨论实作1.活动实训4人为一组，选出小组代表，用数码相机给商品进行拍照。
对于有过网购经验的人一定都知道，商品色差是一件很令人头疼的事，因为灯光、拍摄环境等原因造成的色差很难避免，但是却会给买家带来错误的引导，因此造成的退换货和差评纠纷也是最多的。
2．曲线工具基本知识（1）图像中所有对比度、亮度、色戒等参数都可以通过曲线工具进行调色快捷键ctrl+J 可以打开曲线工具3．利用曲线工具这张照片里裙子不够突出，画面很暗，阴影区域细节非常少，接下来看通过曲线工具调色后的照片，明显亮色许多，突出裙子重点。
阅读知识窗：曲线工具知识讨论：对于曝光不足，如何对照片进行调整实训活动：利用曲线工具进行调色原图 修正后作业 布置 填写提交实训报告和实训表格 预习作业：利用修正白平衡调色 教学后记原图 修正后作业 布置 填写提交实训报告和实训表格预习作业：利用图片亮度和鲜艳度对照片调色 教学后记原图修正后作业布置填写提交实训报告和实训表格预习作业：照片修图教学后记教学课题任务四商品照片修图课题类型理论+实作课时安排4上课时间教学目标1.掌握PhotoshopCs5快去水印修补与内容识别的方法2.掌握图章工具修图的方法教学重点1、2教学难点2网店美工_____________________惠州城市职业学院学科教案本Teaching Plan20 年———20 年学年度 学期The (1st/2na)Semester of the Academic Year from 20 to 20学校（School ）_____________________学科（Subject）年级（Grade）教师（Teacher）《网店美工》目录项目二商品照片处理注意：①按住Ctrl键后单击每个任务即可跳转到对应的教案②单击按钮可返回目录③页面设置参数为：纸张：B5页边距左：1.5页边距右：1.5教学课题活动一制作白底文字主图课题类型理论+实作课时安排2上课时间教学目标1.熟练使用自由变换工具、多边形套索工具、填充、文字工具2.能制作清爽、简单的主图，使用文字突出商品卖点教学重点熟练使用自由变换工具、多边形套索工具、填充、文字工具教学难点制作清爽、简单的主图，使用文字突出商品卖点辅助资源课件、多媒体、网络复习引入①通过上一章内容的学习，你掌握了使用哪些PHOTOSHOP软件的工具？②你在网上购物的时候，打开商品详情页第一眼看到的什么？③你了解宝贝主图吗？想知道主图是怎么做出来的吗？教学手段教学过程师生互动活动设计课件讨论实作活动实施：1、用Photoshop CS6打开素材“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元”，在切换字符和段落面板调整参数，完成白底文字主图制作。
怎么安装文字字体？一般在主图使用兰亭雅黑字体，字体XX学校网店美工 __________________________________________ 学科教案本Teaching PlanXX 一 学期XX学校（School ）学科（Subject ）年级（Grade ） 教师（Teacher ）注意：①按住Ctrl 键后单击每个任务即可跳转到对应的教案 ②单击按钮可返回目录 ③页面设置参数为： 纸张：B5 页边距左：1.5 页边距右：1.5《网店美工》目录项目三 网上店铺装修任务一 设计店招 任务二 设计制作广告 任务三 设计促销模板 任务四 通栏列表制作任务五 制作拓展版全屏背景教学课题任务一设计店招课题类型实操课时安排2上课时间教学目标1.了解店招的类型2.掌握店招的设计要点教学重点2教学难点2辅助资源课件、多媒体、网络复习引入1.你曾经留意过网店的店招吗？2.你了解店招的类型吗？3.你了解店招设计的要点吗？教学手段教学过程师生互动活动设计实操演示一、启动PHOTOSHOP程序,新建一个宽为950像素,高度为150像素的图片文件。
二、将素材文件“花纹.JPG”、“英雄LOGO.JPG”、“钢笔.JPG”放置到新建文件中并适当调整大小和位置。
三、编辑文字内容：把店铺完整的名称、广告语都输入到页面中去。
四、合理排版：根据内容的重要适当调整文字、图形的大小位置，把重要的内容调整到最大放置在画面最显眼的位置。
五、色彩、细节的处理：为了让文字更加突出，给文字添加描边、渐变叠加和外发光的图层样式。
实训活动：实践演示及点评作业布置填写提交实训报告和实训表格预习作业：观看下一节微课内容教学后记通过这次的店招设计对网店的相关设计有新的认识教学课题任务二设计制作广告课题类型实操课时安排4上课时间教学目标1.了解广告设计的分类2.掌握广告设计的要点教学重点2教学难点2辅助资源课件、多媒体、网络复习引入针对单品的广告，主要是针对产品本身的特征进行构思设计，但又是在公司统一的网站进行销售，所以还必须加上一些跟公司相关的元素。