《淘宝天猫网店美工实战视觉设计+店铺装修+移动端店铺》教学教案Word文档下载推荐.docx

《淘宝天猫网店美工实战视觉设计+店铺装修+移动端店铺》教学教案Word文档下载推荐.docx

《《淘宝天猫网店美工实战视觉设计+店铺装修+移动端店铺》教学教案Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《《淘宝天猫网店美工实战视觉设计+店铺装修+移动端店铺》教学教案Word文档下载推荐.docx（28页珍藏版）》请在冰豆网上搜索。

1.2熟悉网店美工工作流程

1.2.1素材搜集与整合

1.2.2处理与设计

1.2.3页面设计与制作

1.2.4图片切片与管理

1.2.5网店的装修

1.3课堂实训——分析Wanlima网店首页的设计

1.4课后练习——赏析ESEDO网店首页的设计

1.5拓展知识

小结

1、掌握网店美工的工作范畴。

2、掌握网店美工需要遵循的设计原则。

3、掌握网店美工工作流程。

课后练习

课后练习——赏析ESEDO网店首页的设计

本练习要求以如图所示的网店首页为例，赏析其页面风格、色彩搭配、商品图片展现、设计手法等。

第2章

网店美工设计要领

180分钟

4

熟悉色彩的相关知识。

掌握版式布局的相关知识。

掌握文字的相关知识。

掌握文案的相关知识。

掌握色彩的搭配技巧。

掌握版式布局的知识。

掌握文字的运用原则。

掌握文案设计与编写。

（1）讲解色彩的知识，包括色彩的构成、搭配原理、色彩对比及搭配技巧；

（2）通过讲解3大基本构图元素、页面布局的基本原则、常见构图方式等知识的讲解，让学生掌握合理的版式布局；

（3）讲解文字运用原则、字体、对比技巧和布局技巧等；

（4）讲解文案的重要性、文案的策划、文案的前期准备和文案的写作要点等知识。

通过理论带图例的方式，让学生加深理论知识理解的同时，掌握其操作方法。

除教材中讲解的知识，可以在网络中查看更多成功案例，以供参考。

前面讲解了网店美工的基础知识与网店美工工作流程，下面介绍网店美工设计要领。

1、说说色彩对商品图片的影响有哪些？

2、什么样的商品图片可以提高消费者的兴趣？

2.1色彩

2.1.1构成色彩的3要素——色相、明度、纯度

2.1.2色彩搭配的原理

2.1.3色彩的对比

2.1.4色彩的搭配技巧

2.2版式布局

2.2.1认识3大基本构图元素

2.2.2页面布局的基本原则

2.2.3常见构图方式

2.3文字

2.3.1文字的运用原则

2.3.2文字的字体

2.3.3文字的对比技巧

2.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、掌握文案设计与编写。

如图所示为戈美琪女鞋旗舰店首屏效果，要求对页面的设计元素、色彩搭配与字体搭配进行分析。

如图所示为森马官方旗舰店首页，要求对首页的颜色、风格、搭配、构图方式、网页元素等进行分析。

第3章

商品图片的基本处理

135分钟

3

掌握商品图片尺寸的修改方法。

熟悉商品图片画面的优化方法。

掌握商品图片抠取与合成的方法。

掌握修改商品图片尺寸及校正方法。

掌握优化图片的方法。

掌握抠取图片并合成的方法。

（1）主要讲解修改商品图片尺寸与校正倾斜的商品图片；

（2）通过讲解商品图片清晰度处理、降噪优化处理和去除商品图片中的多余对象，达到优化商品图片目的；

（3）通过讲解抠取、替换、图层的叠加，达到增强商品美观度并突出商品特点的目的；

（4）最后运用本章所学知识修改运动商品图片尺寸、处理菠萝商品图片效果、抠取耳机图片并合成，达到学以致用的目的。

通过理论带案例步骤的方式，让学生加深理论知识理解的同时，掌握其操作方法。

除教材中的实例外，学员还需对本书所讲的图像处理技巧和方法多加练习，达到能随心运用的目的。

前面介绍了网店美工设计要领的知识，下面具体讲解商品图片的基本处理。

1、如果拍摄出的商品图片尺寸不符合模块尺寸时，我们可以进行什么操作？

2、摄影师提供的商品图片并不一定都是完美的，说说该如何处理？

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课后练习

处理红毛丹污点

抠取红酒商品图片并合成

3.6拓展知识

1、掌握修改商品图片尺寸及校正方法。

2、掌握优化图片的方法。

3、掌握抠取图片并合成的方法。

本例将打开“红毛丹.jpg”素材文件，处理其中的污点并加深红毛丹的色泽。

处理前后的对比效果如图所示。

其具体要求如下。

熟练掌握商品图片的优化方法。

分别使用污点修复画笔工具、海绵工具、模糊工具对图片进行处理，使整个红毛丹更加美观。

本例将对“红酒.jpg”素材文件进行抠图，将其抠取出来的红酒瓶应用到其他背景中，调整大小和位置后合成为更具有营销表现力的效果图片。

熟练掌握抠取商品图片的方法。

使用魔棒工具抠取红酒瓶并应用到背景中。

第4章

商品图片光影与色调的调整

学会商品图片光影调整的方法。

熟悉商品图片色调调整的方法。

掌握修复曝光不足、曝光过度、逆光的商品图片。

掌握商品图片色调调整的方法。

（1）主要讲解光影调整方法，包括修复曝光不足的商品图片、修复曝光过度的商品图片、修复逆光光影的商品图片；

（2）通过讲解调出暖色调、冷色调、校正偏色商品的方法，学会商品图片的调整；

（3）最后运用本章所学知识校正偏色的T恤商品图片、处理冰糖橙商品图片色调、调整茶叶包装效果，达到学以致用的目的。

前面讲解了商品图片的基本处理方法，下面来具体讲解商品图片光影与色调的调整。

1、说说如果商品图片过暗或过亮该怎么处理？

2、我们如何简单快速的用PS改变商品的冷暖色调？

4.1调整商品图片光影

4.1.1修复曝光不足的商品图片

4.1.2修复曝光过度的商品图片

4.1.3修复逆光的商品图片

4.2商品图片色调调整

4.2.1调出暖色调商品图片

4.2.2调出冷色调商品图片

4.2.3校正偏色商品图片

4.3课堂实训

校正偏色的T恤商品图片

处理冰糖橙商品图片色调

调整茶叶包装效果

4.4课后练习

调整童装的色调

美化沐浴露效果

4.5拓展知识

1、如何修复曝光不足、曝光过度、逆光光影的商品图片？

2、如何调整图片冷暖色调？

本练习将对实拍童装图片进行色调调整，并抠取图片更换背景，处理后的童装更加粉嫩可爱，充满童趣，参考效果如图所示。

打开“沐浴露.jpg”素材文件，先抠取图片到新的图层，然后调整图片亮度、对比度、颜色的饱和度，完成后打开“沐浴露背景.psd”素材文件，将抠取的沐浴露图片拖动到背景中，查看完成后的效果，参考效果如图所示。

熟练掌握商品图片色调的调整方法。

分别使用亮度/对比度、自然饱和度对图片进行处理，使整个效果更加美观。

第5章

制作商品推广图

掌握制作高点击率主图的方法。

掌握制作更具营销性的直通车推广图的方法。

掌握制作更具有吸引力钻展图的方法。

掌握制作牛油果主图。

掌握制作柠檬直通车推广图。

掌握制作水果钻展图。

（1）通过讲解主图的制作技巧、常见的主图类型、主图制作的要点、制作牛油果主图，来学习制作高点击率主图；

（2）通过讲解制作更具营销性的直通车推广图，学习包括什么是直通车、制作原则及制作方法；

（3）通过讲解钻展图的位置及尺寸、钻展图制作标准、钻展图的排版方式，学习制作更具有吸引力的钻展图；

（4）最后运用本章所学知识制作儿童水杯主图和奶瓶直通车推广图，达到学以致用的目的。

前面讲解了商品图片光影与色调的调整方法，下面具体讲解制作商品推广图的方法。

1、说说你对商品主图的了解有哪些？

2、说说什么是直通车？

3、你认为什么样的钻展图更吸引人？

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制作柠檬直通车推广图

5.3制作更具有吸引力的钻展图

5.3.1钻展图的位置及尺寸

5.3.2钻展图的制作标准

5.3.3钻展图的排版方式

5.3.4制作水果钻展图

5.4课堂实训

制作儿童水杯主图

制作奶瓶直通车推广图

5.5课后练习

制作爆米花主图

制作520×

280像素泳镜钻展图

5.6拓展知识

1、掌握制作牛油果主图。

2、掌握制作柠檬直通车推广图。

3、掌握制作水果钻展图。

本练习将制作更具促销性的爆米花主图，在制作时不但要体现出“6.18爆米花5折”的卖点，还要将活动价等内容展现出来。

完成后的参考效果如图所示。

本练习将制作520×

280像素泳镜钻展图，在制作时以蓝色为背景，用于凸显海水的颜色，然后在中间区域通过黄色的不规则形状，让文字和泳镜在中间进行展现，使整个效果居中显示。

第6章

制作PC端网店首页

认识网店首页。

掌握制作网店店招与导航条的方法。

掌握制作全屏海报的方法。

掌握制作优惠券的方法。

掌握制作商品分类的方法。

掌握制作网店商品展示和页尾的方法。

掌握制作网店Logo和通栏店招的方法。

掌握全屏海报的制作方法。

掌握制作网店优惠券的方法。

掌握网店商品展示和页尾的制作方法。

（1）主要讲解认识网店首页的构成要素和设计规范；

（2）先讲解店招和导航条制作要点，再通过案例讲解店招与导航条的制作；

（3）先讲解全屏海报的组成要点、设计要点，再通过案例讲解全屏海报的制作方法；

（4）主要讲解优惠券的制作，包括优惠券的类型、制作要点、制作技巧和制作方法；

（5）通过讲解商品分类的制作要点和制作方法，学习商品分类的制作；

（6）通过先讲解学习制作商品展现图，学习页尾的制作方法；

（7）最后运用本章所学知识制作女包PC端网店首页，达到学以致用的目的。

前面讲解了制作商品推广图的方法，下面讲解制作PC端网店首页的方法。

1、说说PC端网页首页都有什么？

2、你认为PC端网页首页有哪些重要组成部分？

6.1认识PC端网店首页

6.1.1PC端网店首页的构成要素

6.1.2PC端网店首页制作规范

6.2网店店招与导航条的制作

6.2.1店招的制作要点

6.2.2店招风格的确定与选择

6.2.3导航条的制作原则

6.2.4制作网店Logo

6.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端网店首页

6.9拓展知识

1、掌握制作网店Logo和通栏店招的方法。

2、掌握全屏海报的制作方法。

3、掌握制作网店优惠券的方法。

4、掌握制作商品分类的方法。

5、掌握网店商品展示和页尾的制作方法。

课后练习——制作大米PC端网店首页

本练习将制作大米PC端网店首页，在制作时可先制作水墨背景的全屏海报，再对大米商品进行依次展现，完成后的效果如图所示。

第7章

制作PC端商品详情页

认识商品详情页。

掌握焦点图、卖点图、信息展示图、细节图的制作方法。

掌握制作焦点图。

掌握制作卖点图。

掌握制作信息展示图。

掌握制作细节图。

（1）通过讲解商品详情页的制作要点、制作思路及准备工作，认识商品详情页；

（2）通过先讲解焦点图的设计要点，再通过案例讲解制作焦点图的方法；

（3）先讲解卖点图的制作要点，再通过案例讲解学习制作卖点图；

（4）先讲解信息展示图的设计要点，再讲解制作信息展示图；

（5）先讲解细节图的制作要点，再通过案例讲解制作细节图的制作要点；

（6）最后运用本章所学知识制作女包的商品详情页，达到学以致用的目的。

前面讲解了制作PC端网店首页的方法，下面具体讲解制作PC端商品详情页。

1、说说商品详情页中有哪些内容？

2、你认为什么样的商品详情页能更好的展现出商品特点？

7.1认识商品详情页

7.1.1商品详情页的制作要点

7.1.2商品详情页的制作思路及准备工作

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、掌握制作细节图。

课后练习——制作开心果的商品详情页

本练习将通过提供的素材文件制作开心果的商品详情页，完成后的参考效果如图所示。

第8章

制作PC端其他页面

掌握专题页的制作方法。

掌握活动页的制作方法。

掌握制作圣诞节专题页。

掌握制作11.11活动页。

（1）主要讲解专题页的制作，包括专题页的作用、分类、制作圣诞节专题页；

（2）通过讲解活动页的主题风格、制作11.11活动页的方法，学习活动页的制作；

（3）最后运用本章所学知识制作护肤品春节活动页，达到学以致用的目的。

前面讲解了制作PC端商品详情页方法，下面具体讲解制作PC端其他页面。

1、你了解哪些专题页？

说说他们分别有什么特点？

2、什么样的活动页更具吸引力？

8.1专题页的制作

8.1.1专题页的作用

8.1.2专题页的分类

8.1.3制作圣诞节专题页

8.2活动页的制作

8.2.1动页的主题风格

8.2.2制作11.11活动页

8.3课堂实训——制作护肤品春节活动页

8.4课后练习——制作开学季专题页

8.5拓展知识

1、掌握专题页的制作方法。

2、掌握活动页的制作方法。

课后练习——制作开学季专题页

利用收集的素材制作开学季主题页。

在制作时，先制作焦点图，再制作优惠券，最后根据商品内容制作活动页面。

完成后的效果如图所示。

第9章

制作移动端网店页面

掌握移动端网店首页的制作方法。

掌握移动端商品详情页的制作方法。

掌握制作移动端网店首页。

掌握制作移动端商品详情页。

（1）通过讲解移动端网店首页设计与制作、注意事项、设计要点以及制作移动端网店首页，来学习制作移动端网店页面；

（2）主要讲解移动端商品详情页的特征和制作移动端商品详情页；

（3）最后运用本章所学知识制作移动端家具网店首页，达到学以致用的目的。

前面讲解了制作PC端其他页面的方法，下面具体讲解制作移动端网店页面。

1、说说你对移动端首页有哪些认识？

2、说说如何让移动端中的网店变得更具有吸引力？

9.1移动端网店首页设计与制作

9.1.1移动端网店首页设计的注意事项

9.1.2移动端网店首页的设计要点

9.1.3制作移动端网店首页

9.2移动端商品详情页特征与制作

9.2.1移动端商品详情页的特征

9.2.2制作移动端商品详情页

9.3课堂实训——制作移动端家具网店首页

9.4课后练习——制作移动端水蜜桃商品端详情页

9.5拓展知识

1、掌握移动端网店首页的制作方法。

2、掌握移动端商品详情页的制作方法。

课后练习——制作移动端水蜜桃商品详情页

利用收集的素材制作水蜜桃商品移动端详情页。

在制作时，先制作水蜜桃焦点图，再根据商品内容制作水蜜桃详细介绍的内容。

第10章

装修网店

了解装修前的准备工作。

掌握装修PC端网店的方法。

掌握装修移动端网店的方法。

掌握装修PC端网店。

掌握装修移动端网店。

掌握装