《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》—教学教案

1、淘宝天猫网店美工实战-视觉设计+店铺装修+移动端店铺教学教案第章课时内容网店关工初体验授课时间90分钟课时2教学目标0 了解网店美工的基础知识。0熟悉网店美工工作流程。0课堂实训。教学重点0掌握网店美工的基础知识。0掌握网店美工工作流程。教学难点0掌握网店美工的工作范畴。0掌握网店美工需要遵循的设计原则。0掌握网店美工工作流程。教学设计1、教学思路：（I）主要讲解网店美工的泄义、工作范畴及需要遵循的设计原则等知识点；<2）主要讲解网店美工工作流程，包括素材搜集与整合、处理与设计、页而设讣与制 作、图片切片与管理、网店的装修等知识点。2、教学手段：通过理论知识带图例的方式，让学生加深理论知

2、识理解的同时，掌握苴设 计方法。3、教学资料及要求：除教材中讲解的知识外，可在网络中査看更多成功案例，以供参考。教学内容知识回顾：卜而首先讲解网店美工，以及网店美工工作流程。讨论问题：1、你知道网店美工的主要工作范畴有哪些方而？2、你知道一个优秀的网店美工，在进行网店页而设计前，首先要做什么工作？ 内容大纲：具体可结合本章的PPT课件进行配合讲解。1了解网店美工1.1.1网店美工的定义1.1.2网店美工的工作范畴1.1.3网店美工需要遵循的设计原则1.2熟悉网店美工工作流程1.2.1素材搜集与整合1.2.2处理与设计1.2.3页而设计与制作1.2.4图片切片与管理1.2.5网店的装修沐工XUl

3、lJ Vl VVdllnHld mU4 H VU L< H1.4课后练习一一赏析ESEDO网店首页的设计1.5拓展知识1、掌握网店美工的工作范畴。小结2、掌握网店美工需要遵循的设计原则。3、掌握网店美工工作流程。课后练AI一赏析ESEDO网店首页的设计本练习要求以如图所示的网店首页为例，赏析其页面风格、色彩搭配、商品图片展现、 设计手法等。课后练习课时内容网店美工设计要领授课时间180分钟课时4教学目标0熟悉色彩的相关知识。0掌握版式布局的相关知识。0掌握文字的相关知识。0掌握文案的相关知识。0课堂实训。教学重点0掌握色彩的搭配技巧。0掌握版式布局的知识。0掌握文字的运用原则。0掌握文案

4、设计与编写。教学难点0掌握色彩的搭配技巧。0掌握版式布局的知识。0掌握文字的运用原则。0掌握文案设计与编写。教学设计1、教学思路：（1）讲解色彩的知识，包括色彩的构成、搭配原理、色彩对比及搭配技巧：（2）通过讲解3大基本构图元素、页而布局的基本原则、常见构图方式等知识的讲解， 让学生掌握合理的版式布局：（3）讲解文字运用原则、字体、对比技巧和布局技巧等；（4）讲解文案的重要性、文案的策划、文案的前期准备和文案的写作要点等知识。2、教学手段：通过理论带图例的方式，让学生加深理论知识理解的同时，掌握其操作方 法。3、教学资料及要求：除教材中讲解的知识，可以在网络中査看更多成功案例，以供参考。教学内

5、容知识回顾：前而讲解了网店美工的基础知识与网店美工工作流程，下而介绍网店美工设计要领。 讨论问题：1、说说色彩对商品图片的影响有哪些？2、什么样的商品图片可以提高消费者的兴趣？内容大纲：具体可结合本章的PPT课件进行配合讲解。2色彩«-> 1 1 1：右出“強砧 圭/A Hnnrr Mi nV. TFRXtu>杉口T n *示匚4口、又、2.1.2色彩搭配的原理2.1.3色彩的对比2.1.4色彩的搭配技巧2.2版式布局221认识3大基本构图元素2.2.2页而布局的基本原则2.2.3常见构图方式2.3文字2.3.1文字的运用原则2.3.2文字的字体2.3.3文字的对比技巧2

6、.4文案2.4.1文案在网店美工中的重要性2.4.2文案的策划2.4.3文案的前期准备2.4.4文案的写作要点2.4.5主图文案的设计与编写2.4.6详情页文案的设汁与编写2.4.7海报文案的设计与编写2.5课堂实训一一鉴赏森林大叔旗舰店的首页2.6课后练习练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配练习2：赏析森马官方旗舰店首页的布局2.7拓展知识1、掌握色彩的搭配技巧。小结2、掌握版式布局的知识。3、掌握文字的运用原则。4、掌握文案设计与编写。练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配如图所示为戈美琪女鞋旗舰店首屏效果，要求对页而的设计元素、色彩搭配与字体搭 配进行分析。课后练习练习

7、2：赏析森马官方旗舰店首页的布局如图所示为森马官方旗舰店首页，要求对首页的颜色、风格、搭配、构图方式、网页 元素等进行分析。第4章课时内容商品图片的基木处理授课时间135分钟课时3教学目标0掌握商品图片尺寸的修改方法。0熟悉商品图片画而的优化方法。0掌握商品图片抠取与合成的方法。0课堂实训。教学重点0掌握修改商品图片尺寸及校正方法。0掌握优化图片的方法。0掌握抠取图片并合成的方法。教学难点0掌握修改商品图片尺寸及校正方法。0掌握优化图片的方法。0掌握抠取图片并合成的方法。教学设计1、教学思路：（1）主要讲解修改商品图片尺寸与校正倾斜的商品图片：（2）通过讲解商 品图片淸晰度处理、降噪优化处理和

8、去除商品图片中的多余对象，达到优化商品图片 目的：（3）通过讲解抠取、替换、图层的叠加，达到增强商品美观度并突出商品特点 的目的；（4）最后运用本章所学知识修改运动商品图片尺寸、处理菠萝商品图片效果、 抠取耳机图片并合成，达到学以致用的目的。2、教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握苴操 作方法。3、教学资料及要求：除教材中的实例外，学员还需对本书所讲的图像处理技巧和方法多 加练习，达到能随心运用的目的。教学内容知识回顾：前而介绍了网店美工设计要领的知识，下而具体讲解商品图片的基本处理。 讨论问题：1、如果拍摄出的商品图片尺寸不符合模块尺寸时，我们可以进行什么操

9、作？2、摄影师提供的商品图片并不一定都是完美的，说说该如何处理？内容大纲：具体可结合本章的PPT课件进行配合讲解。3.1修改商品图片构图3.1.1修改商品图片尺寸3.1.2校正倾斜的商品图片3.2商品图片画而的优化3.2.1商品图片淸晰度优化处理3.2.2商品图片降噪优化处理3.2.3去除商品图片中的多余对象3.2.4虚化商品图片背景以突出商品3.3抠取并合成商品图片3.3.1抠取单色背景商品图片并合成3.3.2抠取精细商品图片并合成3.3.3抠取半透明商品图片并合成3.4课堂实训实训1：修改运动商品图片尺寸实训2：处理菠萝商品图片效果实训3：抠取耳机图片并合成3.5课后练习练习1：处理红毛丹

10、污点练习2：抠取红洒商品图片并合成3.6拓展知识1、掌握修改商品图片尺寸及校正方法。小结2、掌握优化图片的方法。3、掌握抠取图片并合成的方法。练习1：处理红毛丹污点本例将打开“红毛丹.jpg”素材文件，处理英中的污点并加深红毛丹的色泽。处理前后 的对比效果如图所示。其具体要求如下。熟练掌握商品图片的优化方法。分别使用污点修复画笔工具、海绵工具、模糊工具对图片进行处理，使整个红毛丹更加美 观。练习2：抠取红洒商品图片并合成课后练习本例将对“红酒jpg”素材文件进行抠图，将其抠取出来的红酒瓶应用到其他背景中, 调整大小和位置后合成为更具有营销表现力的效果图片。处理前后的对比效果如图所示。 其具体要

11、求如下。熟练掌握抠取商品图片的方法。使用魔棒工具抠取红酒瓶并应用到背景中。SSTCRZ厂家亘销货源充足SSTCRZ经I典|诱|惑Rf*个人属于两个人的芬芳第5章课时内容商品图片光影与色调的调整授课时间90分钟课时2教学目标0 学会商品图片光影调整的方法。0熟悉商品图片色调调整的方法。0课堂实训。教学重点0 掌握修复曝光不足、曝光过度、逆光的商品图片。0掌握商品图片色调调整的方法。教学难点0 掌握修复曝光不足、曝光过度、逆光的商品图片。0掌握商品图片色调调整的方法。教学设计1、教学思路：（I）主要讲解光影调整方法，包括修复曝光不足的商品图片、修复曝光过 度的商品图片、修复逆光光影的商品图片；（2

12、）通过讲解调岀暖色调、冷色调、校正 偏色商品的方法，学会商品图片的调整：（3）最后运用本章所学知识校正偏色的T恤 商品图片、处理冰糖橙商品图片色调、调整茶叶包装效果，达到学以致用的目的。2、教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握苴操 作方法。3、教学资料及要求：除教材中的实例外，学员还需对本书所讲的图像处理技巧和方法多 加练习，达到能随心运用的目的。教学内容知识回顾：前而讲解了商品图片的基本处理方法，下而来具体讲解商品图片光影与色调的调整。 讨论问题：1、说说如果商品图片过暗或过亮该怎么处理？2、我们如何简单快速的用PS改变商品的冷暧色调？内容大纲：具体可结合本

13、章的PPT课件进行配合讲解。4.1调整商品图片光影4.1.1修复曝光不足的商品图片4.1.2修复曝光过度的商品图片4.1.3修复逆光的商品图片4.2商品图片色调调整4.2.1调岀暧色调商品图片4.2.2调岀冷色调商品图片4.2.3校正偏色商品图片4.3课堂实训实训1：校正偏色的T恤商品图片实训2：处理冰糖橙商品图片色调实训3：调整茶叶包装效果4.4课后练习练习1：调整童装的色调练习2：美化沐浴霸效果4.5拓展知识小结1、如何修复曝光不足、曝光过度、逆光光影的商品图片？2、如何调整图片冷暧色调？练习1：调整童装的色调本练习将对实拍童装图片进行色调调整，并抠取图片更换背景，处理后的童装更加粉 嫩可

14、爱，充满童趣，参考效果如图所示。I SUMMER练习2：美化沐浴露效果课后练习打开"沐浴露.jpg”素材文件，先抠取图片到新的图层，然后调整图片亮度、对比度、 颜色的饱和度，完成后打开“沐浴履背景psd”素材文件，将抠取的沐浴需图片拖动到背 景中，査看完成后的效果，参考效果如图所示。英具体要求如下。熟练掌握商品图片色调的调整方法。分别使用亮度/对比度、自然饱和度对图片进行处理，使整个效果更加美观。温和a?干裂就发沐浴露第6章课时内容制作商品推广图授课时间135分钟课时3教学目标0掌握制作髙点击率主图的方法。0掌握制作更具营销性的直通车推广图的方法。0掌握制作更具有吸引力钻展图的方法。

15、0课堂实训。教学重点0掌握制作牛油果主图。0掌握制作柠掾直通车推广图。0掌握制作水果钻展图。教学难点0掌握制作牛油果主图。0掌握制作柠掾直通车推广图。0掌握制作水果钻展图。教学设计1、教学思路：（1）通过讲解主图的制作技巧、常见的主图类型、主图制作的要点、制作 牛油果主图，来学习制作高点击率主图：（2）通过讲解制作更具营销性的直通车推广 图，学习包括什么是直通车、制作原则及制作方法；（3）通过讲解钻展图的位置及尺 寸、钻展图制作标准、钻展图的排版方式，学习制作更具有吸引力的钻展图；（4）最 后运用本章所学知识制作儿童水杯主图和奶瓶直通车推广图，达到学以致用的目的。2、教学手段：通过理论带案例步

16、骤的方式，让学生加深理论知识理解的同时，掌握其操 作方法。3、教学资料及要求：除教材中的实例外，学员还需对本书所讲的图像处理技巧和方法多 加练习，达到能随心运用的目的。教学内容知识回顾：前而讲解了商品图片光影与色调的调整方法, 讨论问题：1、说说你对商品主图的了解有哪些？2、说说什么是直通车？3、你认为什么样的钻展图更吸引人？内容大纲：具体可结合本章的PPT课件进行配介讲解。 5.1制作高点击率主图5.1.1主图的制作技巧5.1.2常见的主图类型5.1.3主图制作的要点5.1.4制作牛油果主图5.2制作更具营销性的直通车推广图5.2.1什么是直通车5.2.2直通车推广图的制作原则5.2.3制作

17、柠椽直通车推广图5.3制作更具有吸引力的钻展图5.3.1钻展图的位苣及尺寸5.3.2钻展图的制作标准5.3.3钻展图的排版方式5.3.4制作水果钻展图5.4课堂实训下而具体讲解制作商品推广图的方法。实训1：制作儿童水杯主图 实训2：制作奶瓶直通车推广图5.5课后练习练习1：制作爆米花主图练习2：制作520X280像素泳镜钻展图 5.6拓展知识小结1、掌握制作牛油果主图。2、掌握制作柠掾直通车推广图。3、掌握制作水果钻展图。练习1：制作爆米花主图本练习将制作更具促销性的爆米花主图，在制作时不但要体现岀“6.18爆米花5折” 的卖点，还要将活动价等内容展现出来。完成后的参考效果如图所示。课后练习练

18、习2：制作520X280像素泳镜钻展图本练习将制作520×280像素泳镜钻展图，在制作时以蓝色为背景，用于凸显海水的颜 色，然后在中间区域通过黄色的不规则形状，让文字和泳镜在中间进行展现，使整个效果 居中显示。完成后的参考效果如图所示。第7章课时内容制作PC端网店首页授课时间135分钟课时3教学目标0认识网店首页。0掌握制作网店店招与导航条的方法。0掌握制作全屏海报的方法。0掌握制作优惠券的方法。0掌握制作商品分类的方法。0掌握制作网店商品展示和页尾的方法。0课堂实训。教学重点0 掌握制作网店LogO和通栏店招的方法。0掌握全屏海报的制作方法。0掌握制作网店优惠券的方法。0掌握制作商

19、品分类的方法。0掌握网店商品展示和页尾的制作方法。教学难点0 掌握制作网店LOgO和通栏店招的方法。0掌握全屏海报的制作方法。0掌握制作网店优惠券的方法。0掌握制作商品分类的方法。0掌握网店商品展示和页尾的制作方法。教学设计1、教学思路：（1）主要讲解认识网店首页的构成要素和设汁规范：（2）先讲解店招和导 航条制作要点，再通过案例讲解店招与导航条的制作；（3）先讲解全屏海报的组成要 点、设计要点，再通过案例讲解全屏海报的制作方法；（4）主要讲解优惠券的制作， 包括优惠券的类型、制作要点、制作技巧和制作方法；（5）通过讲解商品分类的制作 要点和制作方法，学习商品分类的制作；（6）通过先讲解学习制

20、作商品展现图，学习 页尾的制作方法：（7）最后运用本章所学知识制作女包PC端网店首页，达到学以致用 的目的。2、教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握其操 作方法。3、教学资料及要求：除教材中的实例外，学员还需对本书所讲的图像处理技巧和方法多 加练习，达到能随心运用的目的。教学内容知识回顾：前而讲解了制作商品推广图的方法，下而讲解制作PC端网店首页的方法。 讨论问题：1、说说Pe端网页首页都有什么？2、你认为PC端网页首页有哪些重要组成部分？内容大纲：具体可结合本章的PPT课件进行配合讲解。6.1认识PC端网店首页6.1.1 PC端网店首页的构成要素6.1.2

21、PC端网店首页制作规范6.2网店店招与导航条的制作6.2.1店招的制作要点6.2.2店招风格的确定与选择6.2.3导航条的制作原则6.2.4制作网店LOgO6.2.5制作通栏店招6.3全屏海报的制作6.3.1全屏海报的组成要点6.3.2全屏海报的设计要点6.3.3制作全屏海报6.4优惠券的制作6.4.1优惠券的类型6.4.2优惠券的制作要点6.4.3优惠券的制作技巧6.4.4制作网店优惠券6.5商品分类的制作6.5.1商品分类的制作要点6.5.2制作商品分类6.6其他板块的制作6.6.1制作商品展示6.6.2制作页尾6.7课堂实训一一制作女包PC端网店首页6.8课后练习一一制作大米PC端网店首

22、页6.9拓展知识小结1、掌握制作网店LOgO和通栏店招的方法。2、掌握全屏海报的制作方法。3、掌握制作网店优惠券的方法。4、掌握制作商品分类的方法。5、掌握网店商品展示和页尾的制作方法。课后练习课后练习一一制作大米PC端网店首页本练习将制作大米PC端网店首页，在制作时可先制作水墨背景的全屏海报，再对大 米商品进行依次展现，完成后的效果如图所示。饭者百味之本 &味老话好纸不対用養Wl五常稻花香青IS建別劲it補24卅立»»15 UTv22E卫常触青无冒（终炊可口 K9*tfi五谷为养V¼m 以补f*At第8章课时内容制作PC端商品详情页授课时间135分钟课时

23、3教学目标0认识商品详情页。0 掌握焦点图、卖点图、信息展示图、细节图的制作方法。0课堂实训。教学重点0掌握制作焦点图。0掌握制作卖点图。0掌握制作信息展示图。0掌握制作细节图。教学难点0掌握制作焦点图。0掌握制作卖点图。0掌握制作信息展示图。0掌握制作细节图。教学设计1、教学思路：（1）通过讲解商品详情页的制作要点、制作思路及准备工作，认识商品详 情页；（2）通过先讲解焦点图的设计要点，再通过案例讲解制作焦点图的方法；（3） 先讲解卖点图的制作要点，再通过案例讲解学习制作卖点图；（4）先讲解信息展示图 的设计要点，再讲解制作信息展示图：（5）先讲解细卩图的制作要点，再通过案例讲 解制作细石图

24、的制作要点；（6）最后运用本章所学知识制作女包的商品详情页，达到 学以致用的目的。2、教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握其操 作方法。3、教学资料及要求：除教材中的实例外，学员还需对本书所讲的图像处理技巧和方法多 加练习，达到能随心运用的目的。教学内容知识回顾：前而讲解了制作PC端网店首页的方法，下而具体讲解制作PC端商品详情页。 讨论问题：1、说说商品详情页中有哪些内容？2、你认为什么样的商品详情页能更好的展现岀商品特点？内容大纲：具体可结合本章的PPT课件进行配合讲解。7.1认识商品详情页7.1.1商品详情页的制作要点7.1.2商品详情页的制作思路及准备

25、工作7.2焦点图的制作7.2.1焦点图的设计要点7.2.2制作焦点图7.3卖点图的制作7.3.1卖点图的制作要点7.3.2制作卖点图7.4信息展示图的制作7.4.1信息展示图的设计要点7.4.2制作信息展示图7.5细节图的制作7.5.1细节图的制作要点7.5.2制作细节图7.6课堂实训一一制作女包的商品详情页7.7课后练习一一制作开心果的商品详情页7.8拓展知识1、掌握制作焦点图的方法。小结2、掌握制作卖点图。3、掌握制作信息展示图。4、掌握制作细节图。课后练AI一制作开心果的商品详情页本练习将通过提供的素材文件制作开心果的商品详情页，完成后的参考效果如图所示。课后练习地节展现=Rf*nfln

26、afiI t B>3Mjg 1 Bc rtm Ita AIaIMK S3 *ffI*MIM 卡<人工銀迭別隊坏呆第8章课时内容制作PC端其他页而授课时间90分钟课时2教学目标0掌握专题页的制作方法。0掌握活动页的制作方法。0课堂实训。教学重点0掌握制作圣诞节专题页。0掌握制作11.11活动页。教学难点0掌握制作圣诞节专题页。0掌握制作11.11活动页。教学设计1、教学思路：（I）主要讲解专题页的制作，包括专题页的作用、分类、制作圣诞节专题 页；（2）通过讲解活动页的主题风格、制作11.11活动页的方法，学习活动页的制作；（3）最后运用本章所学知识制作护肤品春节活动页，达到学以致用的

27、目的。2、教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的冋时，掌握其操 作方法。3、教学资料及要求：除教材中的实例外，学员还需对本书所讲的图像处理技巧和方法多 加练习，达到能随心运用的目的。教学内容知识回顾：前而讲解了制作PC端商品详情页方法，下而具体讲解制作PC端其他页而。 讨论问题：1、你了解哪些专题页？说说他们分别有什么特点？2、什么样的活动页更具吸引力？内容大纲：具体可结合本章的PPT课件进行配合讲解。专题页的制作&1.1专题页的作用8.1.2专题页的分类8.1.3制作圣诞节专题页8.2活动页的制作&2.1动页的主题风格8.2.2制作11.11活动页8.3

28、课堂实训一一制作护肤品春节活动页8.4课后练习制作开学季专题页8.5拓展知识小结1、掌握专题页的制作方法。2、掌握活动页的制作方法。课后练习课后练习一一制作开学季专题页利用收集的素材制作开学季主题页。在制作时，先制作焦点图，再制作优惠券，最后 根据商品内容制作活动页面。完成后的效果如图所示。月亮与六AbifciIh优恵世¥斗98丸JtlPfilc»" ySICIl>/人九 2EAfftf1«»IC ftfft *28 A 6 4*38.9 ¾1>人扎孙爭IBMii>格列伸潮记第9章课时内容制作移动端网店页而授课时间9

29、0分钟课时2教学目标0掌握移动端网店首页的制作方法。0掌握移动端商品详情页的制作方法。0课堂实训。教学重点0掌握制作移动端网店首页。0掌握制作移动端商品详情页。教学难点0掌握移动端网店首页的制作方法。0掌握移动端商品详情页的制作方法。教学设计1、教学思路：（I）通过讲解移动端网店首页设计与制作、注意事项、设计要点以及制作 移动端网店首页，来学习制作移动端网店页面：（2）主要讲解移动端商品详情页的特 征和制作移动端商品详情页；（3）最后运用本章所学知识制作移动端家具网店首页， 达到学以致用的目的。2、教学手段：通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握其操 作方法。3、教学资料及要求：除教材中的实例外，学员还需对本书所讲的图像处理技巧和方法多 加练习，达到能随心运用的目的。教学内容知识回顾：前而讲解了制作Pe端其他页面的方法，下而具体讲解制作移动端网店页而。 讨论问题：1、说说你对移动端首页有哪些认识？2、说说如何让移动端中的网店变得更具有吸引力？内容大纲：具体可结合本章的PPT课件进行配合讲解。9移动端网店首页设计与制作9.1.1移动端网店首页设计的注意事项9.1.2移动端网店首页的设计要点9.1.3制作移动端网店首页9.2移动端商品详情页特征与制作9.2.1移动端商品详情页的特征9.2.2制