网店美工视觉设计教学教案.docx
《网店美工视觉设计教学教案.docx》由会员分享，可在线阅读，更多相关《网店美工视觉设计教学教案.docx（26页珍藏版）》请在冰豆网上搜索。
网店美工视觉设计教学教案
《网店美工视觉设计实战教程》
配套教学教案
第1章
课时内容
网店美工基础
授课时间
135分钟
课时
3
教学目标
þ了解网店美工的基本概念。
þ掌握网店美工必备视觉营销知识。
þ首席PhotoshopCS6的基本操作和抠图技法。
教学重点
þ掌握网店美工的基础技能。
þ掌握色彩搭配及图形元素和文字的应用。
þ掌握色彩和图层的处理，以及图片的调整。
þ掌握基本抠图和毛发、半透明等复杂抠图技巧。
教学难点
þ熟练使用技能扣取复杂图片。
教学设计
1、教学思路：
（1）介绍网店美工的基础知识，使读者掌握网店美工的基础和技能要求；
（2）着重讲解网店美工在视觉营销方面的知识，掌握时下最时尚的设计效果；（3）讲解PhotoshopCS6的基本操作，包括设置前景色和背景色、图层的操作、裁剪图片和批处理图片；（4）讲解常用的抠图技巧，包括规则图形抠图、简单背景抠图、复杂图像抠图、毛发抠图和半透明抠图；（5）最后安排实战演练和课后练习。
2、教学手段：
（1）由浅入深，从基础知识到实际操作；
（2）以实例讲解操作，对设置的方法以及效果均配图讲解。
3、教学资料及要求：
除教材中讲解的知识，学员可以学习关于构成与排版等方面的知识，通过各种模板，提升自己的操作能力和审美能力。
教学内容
讨论问题：
1、网店美工主要做些什么，从事哪些行业？
2、视觉营销对网店的影响力？
内容大纲：
具体可结合本章的PPT课件进行配合讲解。
1.1网店美工概述
1.1.1网店美工的应用范畴
1.1.2网店美工的技能要求
1.2网店美工必备视觉营销知识
1.2.1色彩搭配
1.2.2图形元素的应用
1.2.3文字的应用
1.3PhotoshopCS6基本操作
1.3.1设置前景色与背景色
1.3.2图层的基本操作
1.3.3裁剪并更改图片尺寸
1.3.4批处理图片
1.4PhotoshopCS6抠图
1.4.1规则图形抠图
1.4.2简单背景抠图
1.4.3复杂图像抠图
1.4.4毛发抠图
1.4.5半透明物体抠图
1.5实战演练
1.5.1为沙发更换背景
1.5.2原汁机更换背景
课后练习
小结
1、了解网店美工相关基础和技能知识。
2、能够熟练使用PhotoshopCS6抠图，制作出美观适用的图像。
思考及作业
想一想：
1.网店美工有哪些要求？
2.除了视觉营销知识，网店美工还应掌握哪些方面的知识？
3.网店美工常用的设计元素与设计技巧有哪些？
4.抠图的具体分类有哪些？
练一练：
（1）使用魔棒工具和钢笔工具，将多个素材中的图像扣取到背景图像中，组合成宣传海报。
（2）为颜色相近的图像抠图，使用钢笔工具描绘轮廓，将商品扣取出来并应用于背景中。
第2章
课时内容
图片调色
授课时间
90分钟
课时
2
教学目标
þ熟悉图片调色。
þ掌握修复曝光失调图片的方法。
þ掌握图片的调色处理。
教学重点
þ掌握图片调色的原则和方法。
þ掌握调整图片亮度、对比度、高光、阴影与中间调的方法。
þ掌握偏色校正和特殊调色。
教学难点
þ能够选择合适的调色工具，解决图片问题。
þ能够正确设置适当的数据值，并将不同调整合理搭配，达到最好的处理效果。
教学设计
1、教学思路：
（1）介绍图片调色的原则展开本章关于调色的讲解；
（2）首先讲解使用调整图层对图层进行调色；（3）接对常见的曝光不足或曝光过度的图片进行处理；（4）再对学习图像的特殊调色；（5）最后安排实战演练和课后实训。
2、教学手段：
（1）对于图片调色的常见问题，单独列出来进行讲解；
（2）把不同的调色方法用实例的方式进行展现，读者可快速理解其效果。
3、教学资料及要求：
除教材中讲解的知识，学员可在现实生活中拍摄商品实拍图，试着对图片进行调色处理。
教学内容
知识回顾：
在前面讲解了网店美工的要求和应用范围，以及PhotoshopCS6的基础操作，和图像的扣取技巧。
讨论问题：
1、商品实拍图片常具有的问题有哪些？
2、怎样选择正确适合的调色方式？
内容大纲：
具体可结合本章的PPT课件进行配合讲解。
2.1了解图片调色
2.1.1图片调色的原则
2.1.2使用调整图层调色
2.2处理曝光不足或曝光过度的图片
2.2.1提高亮度与对比度
2.2.2调整高光、阴影与中间调
2.3图片调色
2.3.1图片偏色矫正
2.3.2特殊调色
2.4实战演练
2.4.1童装调色
2.4.2打造街拍图像风格
课后练习
小结
1、根据图片的缺陷，合适地选择有效的处理方法处理图片。
2、掌握使用各种调色命令对图片进行调色。
思考及作业
想一想：
1.使用调整图层调色与直接使用调色命令的区别？
2.调色大致分类为几种？
练一练：
（1）将一张曝光不足、色彩暗淡的咖啡杯图片处理成色泽鲜艳、美观的图片。
（2）为图像增加亮度，并为图像中细节部分的鞋子增加光泽和对绿色进行渲染。
第3章
课时内容
图片修饰
授课时间
90分钟
课时
2
教学目标
þ掌握修饰商品图片的方法。
þ掌握吩咐商品图片内容的方法。
þ掌握为图片添加特效。
教学重点
þ掌握去除商品上污渍、去除背景中多余物体、美化模特和光滑材质表面等的操作。
þ掌握为图像添加和美化文本、形状和图案的方法。
þ掌握添加虚化背景、发光、高光与阴影的方法。
教学难点
þ能够精细地处理图片的细节，是处理后的额图片自然。
þ能够配合使用各种元素，构成美观且适合主题的图像。
教学设计
1、教学思路：
（1）通过案例介绍图片修饰过程中常见的几类处理问题，如去除图片污渍、去除图片多余物品、提高图片清晰度、光滑材质表面等知识；
（2）然后介绍通过添加文字、形状和图案等元素丰富图像；（3）再介绍为图像添加特效美化图像；（4）最后安排实战演练和课后实训。
2、教学手段：
（1）每一个知识点都使用案例的形式讲解；
（2）列举网店美工中经常遇到的情况，与实际相结合，更加实用。
3、教学资料及要求：
除教材中的实例外，学员还需通过其他途径找到网店修图中的其他问题，并掌握其解决方法。
教学内容
知识回顾：
前面讲解了图片的调色等知识。
讨论问题：
1、网店常见的图片问题有哪些？
2、添加元素和特效常用于那种图像的制作？
内容大纲：
具体可结合本章的PPT课件进行配合讲解。
3.1修饰商品图片
3.1.1清除商品上的污迹
3.1.2去除背景中多余的物品
3.1.3美化模特
3.1.4光滑材质表面
3.1.5加强亮部与暗部的对比
3.1.6增加金属质感
3.1.7提高图片清晰度
3.2丰富商品图片内容
3.2.1添加与美化图片文本
3.2.2添加形状与图案
3.3添加图片特效
3.3.1虚化背景
3.3.2添加发光效果
3.3.3添加高光与阴影效果
3.4实战演练
3.4.1修饰空气加湿器
3.4.2修饰羽绒服
课后练习
小结
1、掌握常见图像问题的修饰处理。
2、掌握为图像添加元素和特效的方法。
思考及作业
想一想：
除了文中讲到的知识，图片特效还有那些？
练一练：
（1）将玉佩扣取出来并进行美化处理，添加文字素材和图片特效。
（2）将瓶子扣取出来，并为瓶盖部分制作干净的金属质感。
第4章
课时内容
店铺首页核心模块设计
授课时间
135分钟
课时
3
教学目标
þ掌握店招设计的方法。
þ掌握分类导航设计的方法。
þ掌握海报设计的方法。
þ掌握优惠券的方法。
教学重点
þ学习制作常规店招、通栏店招和动态店招。
þ掌握分类导航设计规范和按钮设计。
þ掌握全屏海报、常规海报的制作。
þ掌握优惠券设计原则与制作技巧。
教学难点
在首页设计中的创新性和美观适用性。
教学设计
1、教学思路：
（1）介绍店招制作的规范，从简单开始，逐步制作常规、通栏和动态店招；
（2）介绍导航设计制作的规范，以及导航按钮的制作；（3）介绍宣传海报的制作；（4）介绍优惠券的设计原则和制作方法；（5）安排实战演练与课后实训。
2、教学手段：
（1）通过案例演示讲解基础知识，讲解结束后进行疑难解答与课后实训；（2内容由浅及深，从基础到制作，制作过程中也是层层递进。
3、教学资料及要求：
除教材中的实例外，学院可以结合淘宝、天猫中真实的网店首页，参考其设计方法，尝试做一个完整的网店首页。
教学内容
知识回顾：
在前面讲解了修饰图片内容，以及为图像添加文字、形状、图案和特效等知识。
讨论问题：
1、不同种类的商品，其首页设计风格是否有一定规范？
2、网店首页图片的大小尺寸是否有一定规范？
内容大纲：
具体可结合本章的PPT课件进行配合讲解。
4.1店招设计
4.1.1店招制作规范
4.1.2制作常规店招
4.1.3制作通栏店招
4.1.4制作动态店招
4.2分类导航设计
4.2.1分类导航制作规范
4.2.2设计分类导航按钮
4.3海报设计
4.3.1制作全屏海报
4.3.2制作常规海报
4.4优惠券设计
4.4.1优惠券设计原则
4.4.2制作优惠券
4.5实战演练
4.5.1制作女装店招
4.5.2制作女装海报
课后练习
小结
1、掌握店招、导航、海报和优惠券的设计规范与设计原则。
2、掌握制作店招、导航、海报和优惠券的操作方法。
思考及作业
想一想：
店铺首页突出的核心重点是什么？
练一练：
（1）利用耳机素材，制作耳机专卖店的常规店招，制作要求为要体现简约大气的感觉。
（2）使用素材制作两张女款包包的全屏海报，要求突出“寒冷冬季与你相依”的主题。
第5章
课时内容
详情页视觉设计
授课时间
135分钟
课时
3
教学目标
þ学会制作商品详情页。
þ学会店铺核心模块设计。
教学重点
þ制作商品详情页。
þ制作宝贝焦点图。
þ制作功能描述图。
þ制作信息展示图。
þ宝贝卖点说明设计。
教学难点
制作商品详情页与核心模块设计。
教学设计
1、教学思路：
（1）介绍商品详情页的制作方法，让学员可以掌握店铺详情页的制作方法和技巧；
（2）介绍核心模块的制作方法，让学员学会其构成与技巧；（3）安排实战演练和课后实训。
2、教学手段：
（1）通过对话框项目分析详情页的内容与要点；
（2）通过实例的制作，以步骤的形式讲解网店的设计与装修的具体方法。
3、教学资料及要求：
除讲解教材中的知识外，结合课堂实时练习，让学员熟练掌握详情页设计与宝贝描述核心模块设计的方法。
教学内容
知识回顾：
前面讲解了店铺首页的制作等知识。
讨论问题：
1、如何展示商品的重点？
2、如何制作更美观合理的商品详情页？
内容大纲：
具体可结合本章的PPT课件进行配合讲解。
5.1详情页设计要点
5.1.1商品详情页制作规范
5.1.2商品详情页的内容分析与策划要点
5.2宝贝描述核心模块设计
5.2.1宝贝焦点图设计
5.2.2功能描述图设计
5.2.3信息展示图设计
5.2.4卖点说明设计
5.3实战演练
5.3.1制作四件套焦点图
5.3.2制作四件套描述图
课后练习
小结
1、掌握详情页的制作方法。
2、掌握详情页各组成部分的作用，在促成买家下单过程中产生的价值。
思考及作业
想一想：
在制作商品详情页时，怎样对图文进行合理排列和布局？
练一练：
（1）利用素材制作婚纱焦点图。
（2）利用素材制作棉袜的详情页。
第6章
课时内容
页面装修
授课时间
90分钟
课时
2
教学目标
þ学会图片空间的使用。
þ掌握使用模块装修店铺。
教学重点
þ掌握图片的切片技巧。
þ掌握上传图片至图片空间。
þ掌握编辑空间图片。
þ掌握页头和热点+原代码等装修技巧。
教学难点
图片的上传与编辑；使用模块装修。
教学设计
1、教学思路：
（1）首先介绍图片的上传，让学员学习包括图片切片、图片保存、上传图片、移动图片和删除替换图片的操作；
（2）然后介绍使用模块装修店铺；（3）安排实战演练和课堂练习。
2、教学手段：
（1）先来介绍该功能的基础与技巧，让读者有一个简单的认识，接着层层递增，直到完成案例的制作；
（2）相关操作与效果配图讲解。
3、教学资料及要求：
除讲解教材中的知识外，还可以让学员了解店铺使用的图片像素和尺寸要求，以及模块的一般大小。
教学内容
知识回顾：
在前面讲解了网店详情页设计的相关知识。
讨论问题：
1、图片空间对于存储的图片有没有什么要求？
2、如何使模块间的搭配更合理？
内容大纲：
具体可结合本章的PPT课件进行配合讲解。
6.1使用图片空间
6.1.1切片技巧
6.1.2图片切片与保存
6.1.3上传图片到图片空间
6.1.4移动空间图片
6.1.5删除与替换空间图片
6.2使用模块装修店铺
6.2.1认识装修模块
6.2.2装修页头
6.2.3热点+源代码装修
6.2.4其他模块装修
6.3实战演练
6.3.1装修宝贝描述页
6.3.2装修分类导航按钮
课后练习
小结
1、掌握图片空间的使用和编辑方法。
2、掌握使用模块的方法。
思考及作业
想一想：
装修网店还有哪些元素和模块？
练一练：
（1）装修耳机店铺的页头。
（2）将下图的详情页切片上传至店铺空间中，将其装饰至网店中。
第7章
课时内容
视觉营销推广图制作
授课时间
90分钟
课时
2
教学目标
þ掌握制作高点击率主图的方法。
þ掌握智钻图设计的方法。
þ掌握直通车推广图设计的方法。
教学重点
þ掌握优质商品主图的而设计技巧。
þ掌握智钻图的设计要点和构图方式。
þ掌握直通车图的展现方式、设计要点和引流。
教学难点
þ掌握主图的设计思想，达到吸引顾客的目的。
þ掌握制作能吸引客流的智钻图和直通车推广图的方法。
教学设计
1、教学思路：
（1）介绍主图的制作技巧和规范，并通过综合案例介绍制作主图的方法；
（2）介绍智钻图的设计要点和构图方式，并通过综合案例介绍制作首焦智钻图的方法；（3）通过案例介绍直通车对打造爆款、提高销量的重要推动作用展开本章的讲解；（4）安排实战演练和课后实训。
2、教学手段：
（1）主要通过技巧要点加综合案例的形式讲解本章的知识；
（2）通过综合案例操作，引导学生快速熟悉并掌握相关知识。
3、教学资料及要求：
除讲解教材中的知识外，还可结合课堂讨论，对制作过程中问题进行总结，并不断积累设计思路。
教学内容
知识回顾：
前面讲解了使用图片和模块装修页面等内容。
讨论问题：
1、如何使用直通车推广店铺？
2、如何组织主图、智钻图、直通车推广图的设计思路和方法？
内容大纲：
具体可结合本章的PPT课件进行配合讲解。
7.1制作高点击率的主图
7.1.1宝贝主图规范
7.1.2制作优质商品主图的技巧
7.1.3数据线主图设计
7.2智钻图设计
7.2.1智钻图设计要点
7.2.2智钻图的构图方式
7.2.3制作淘宝首焦智钻图
7.3直通车推广图设计
7.3.1直通车展现方式
7.3.2直通车图设计要点
7.3.3直通车图引流的关键
7.3.4设计扳手直通车图
7.4实战演练
7.4.1设计唇彩直通车图
7.4.2设计家纺智钻图
课后练习
小结
1、掌握直通车、智钻等推广淘宝店铺图片的制作方法。
2、掌握主图的设计方法。
思考及作业
想一想：
1.什么是直通车关键词的质量分？
2.不适合使用直通车推广的情况有哪些？
3.直通车的竞价技巧有哪些？
4.智钻投放有哪些注意事项？
练一练：
（1）使用素材制作播放器的直通车推广图。
（2）使用素材制作水杯推广图。
第8章
课时内容
无线端首页设计与装修
授课时间
90分钟
课时
2
教学目标
þ了解无线端首页设计基础。
þ掌握无线端首页关键模块视觉设计。
þ掌握无线端装修设计。
教学重点
þ认识无线端首页，以及其模块组成和装修注意。
þ掌握无线端店招设计、轮播图设计、优惠券设计、分类设计和商品展示设计的方法。
þ掌握无线端模块和模板的装修方法。
教学难点
þ掌握无线端页面的装修方法
þ掌握无线端效果展示界面的设计方法
教学设计
1、教学思路：
（1）通过与电脑段对比、组成和装修注意事项，让学员了解无线端首页；
（2）介绍无线端各个关键模块的视觉设计效果；（3）然后介绍无线端页面的装修，包括模块装修、模板装修；（4）最后安排实战演练和课后实训。
2、教学手段：
（1）通过装修案例详解讲解无线端端页面设计与装修的方法；
（2）适用性强，融入了当前流行的无线端推广方式。
3、教学资料及要求：
除讲解教材中的知识外，可搜集无线端装修的模板，并分析优秀的网上店铺的无线端装修效果，总结无线端装修与推广要点。
教学内容
知识回顾：
前面讲解了主图、智钻图和直通车推广图的制作等相关知识。
讨论问题：
1、如何进入无线端装修页面？
2、如何应用模板快速实现无线端的装修？
内容大纲：
具体可结合本章的PPT课件进行配合讲解。
8.1无线端首页设计基础
8.1.1无线端与电脑端的不同
8.1.2无线端首页模块组成
8.1.3首页装修注意事项
8.2无线端首页关键模块视觉设计
8.2.1店招设计
8.2.2轮播图设计
8.2.3优惠券设计
8.2.4分类设计
8.2.5宝贝展示设计
8.3无线端装修
8.3.1模块装修
8.3.2模板装修
8.4实战演练——制作沙发无线端首页
课后练习
小结
1、了解无线端店铺基础知识。
2、掌握无线端页面的装修与设计操作。
思考及作业
想一想：
1.怎么保证无线端的安全？
2.如何推广无线端店铺？
练一练：
（1）利用素材制作中国特色小吃店铺的无线端首页效果。
（2）理由素材制作坚果无线端首页效果。
第9章
课时内容
无线端详情页视觉设计与装修
授课时间
90分钟
课时
2
教学目标
þ了解无线端详情页设计基础。
þ掌握无线端详情页设计与装修的方法。
þ掌握无线端自定义页面的装修方法。
教学重点
þ掌握无线端详情页的设计要点。
þ掌握无线端详情页及其模板设计与装修的方法。
þ掌握无线端详情页的自定义。
教学难点
þ能够抓住无线端详情页设计的要点。
þ能够应用无线端模板和其页面的自定义。
教学设计
1、教学思路：
（1）首先讲解无线端详情页的基础，包括其特征和设计要点；
（2）通过案例介绍无线端详情页的设计与制作，以及装修的方法；（3）然后介绍无线端页面和菜单的自定义；（4）最后安排实战演练和课后实训。
2、教学手段：
（1）通过设计思路和知识要点的分析，再结合步骤的方式讲解实例；
（2）采用小标题或项目符号对涉及的数据进行详细讲解。
3、教学资料及要求：
除讲解教材中的知识外，学员可多积累和参考网店中的详情页设计，总结无线端详情页的设计风格与技巧。
教学内容
知识回顾：
前面讲解了无线端首页的设计与装修等知识。
讨论问题：
1、详情页可以讲的内容有哪些？
2、无线端自定义有什么要求吗？
内容大纲：
具体可结合本章的PPT课件进行配合讲解。
9.1无线端详情页设计基础
9.1.1无线端详情页的特征
9.1.2无线端详情页设计的要点
9.2无线端详情页的设计与装修
9.2.1榨汁机无线端详情页设计
9.2.2装修无线端详情页
9.2.3无线端模板装修
9.3无线端自定义页面装修
9.3.1自定义页面装修要点
9.3.2自定义菜单
9.3.3自定义页面装修
9.4实战演练
9.4.1制作沙发凳无线端详情页
9.4.2制作返场活动页
课后练习
小结
1、认识无线端详情页。
2、掌握无线端详情页的设计、无线端详情页的装修和无线端模板装修。
3、熟悉自定义页面的装修技巧。
思考及作业
想一想：
1.详情页制作前的准备有哪些？
2.自定义页面的利弊？
练一练：
根据素材，为棉袜制作其适合风格的无线端详情页。
升级会员 