下载文档原格式
《网店美工》课程教学大纲一、课程基本信息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年。
电子商务《网店美工》微课版课程教学标准一、课程的性质与任务《网店美工》课程是电子商务专业的必修课程，旨在进一步提升学生对网店的美化和设计能力。
通过该课程的学习，使学生在原先已掌握的电子商务基础上，进一步掌握视觉营销的理念、美工设计的思路，美工中常用的Photoshop技能，网店常用图片设计制作，主图与主图视频设计制作，PC端与移动端详情页设计制作，无线端网店页面装修等知识和操作技能。
本课程在教学过程中强调基础理论知识“必须够用”的原则，以实际项目为载体，采用案例导入任务驱动的教学方法提升学生的实际应用能力。
通过教学与实训，加强学生在电商平台上的操作技能以及在专业上的应用能力，提高学生专业技能和就业竞争力。
二、课程教学目标本课程以学生为主体，以教师为主导，以培养学生的职业行动能力为目标。
即将必要的理论知识融入到相关的案例中，以任务为驱动，以学生动手完成任务为核心教学过程，使每个学生在各个学习案例中学会网店美工的知识与操作技能，从而提升学生的设计能力与效率，提高学生的综合职业能力。
通过协作学习方式提升学生的交流沟通、团队协作、图文共创能力，以及可持续发展的能力与职业迁移能力。
(一) 知识教学目标1.掌握色彩基本理论与视觉营销的概念；2.掌握Photoshop的基本操作、基本概念；3.了解光影魔术手的知识与技能；4.了解图片空间的知识与技能；5.掌握网店常用图片设计的知识与技能；6.掌握主图及主图视频的知识与技能；7.掌握PC端和移动端的知识与技能；8.掌握无线端网店页面装修的知识与技能。
(二) 能力培养目标1.利用PS软件熟练进行图片的排版与设计美化能力；2.利用光影魔术手软件熟练进行图片的排版与设计美化能力；3.利用PS软件进行直通车、钻展、店招图、活动图等的排版与设计能力；4.素材的收集、整理、处理与提炼能力；5.能够策划并设计高转化率主图的能力；6.能够合理布局详情页图文及设计的能力；7.能够规划好无线端店铺页面并合理布局；8.自主应用其它相关设计软件的能力；(三) 素质教育目标1.激励学生探索、分析、归纳和创新；2.利用所学知识分析问题，解决问题；3.具有勤奋学习的态度，严谨求实、创新的工作作风；4.具有良好的心理素质和职业道德素质；5.具有高度责任心和良好的团队合作精神；6.具有一定的科学思维方式和判断分析问题的能力；7.具有较强的图像处理创意思维和健康的审美意识，以及较高的艺术设计鉴赏能力。
《网店美工设计(项目式全彩微课版)》
配套教学教案
第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章小结1、掌握网店美工的工作范畴。
2、掌握网店美工需要遵循的设计原则。
3、掌握网店美工工作流程。
课后练习课后练习——赏析ESEDO网店首页的设计本练习要求以如图所示的网店首页为例，赏析其页面风格、色彩搭配、商品图片展现、设计手法等。
第2章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：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配如图所示为戈美琪女鞋旗舰店首屏效果，要求对页面的设计元素、色彩搭配与字体搭配进行分析。
练习2：赏析森马官方旗舰店首页的布局如图所示为森马官方旗舰店首页，要求对首页的颜色、风格、搭配、构图方式、网页元素等进行分析。
第3章实训3：抠取耳机图片并合成3.5课后练习练习1：处理红毛丹污点练习2：抠取红酒商品图片并合成3.6拓展知识小结1、掌握修改商品图片尺寸及校正方法。
2、掌握优化图片的方法。
3、掌握抠取图片并合成的方法。
课后练习练习1：处理红毛丹污点本例将打开“红毛丹.jpg”素材文件，处理其中的污点并加深红毛丹的色泽。
处理前后的对比效果如图所示。
其具体要求如下。
熟练掌握商品图片的优化方法。
分别使用污点修复画笔工具、海绵工具、模糊工具对图片进行处理，使整个红毛丹更加美观。
练习2：抠取红酒商品图片并合成本例将对“红酒.jpg”素材文件进行抠图，将其抠取出来的红酒瓶应用到其他背景中，调整大小和位置后合成为更具有营销表现力的效果图片。
“新商科”电子商务系列规划教材Copyright@童海君编书团队
Contents
Page 目录页
任务1 店招图设计
任务2 店内海报图设计任务3 直通车图设计任务4
钻展推广图设计任务5 活动图设计
Contents
Page 目录页
任务1 店招图设计4.1.1 店招设计目的4.1.2 店招设计类型4.1.3 店招设计结构任务2 店内海报图设计4.2.1 店内海报图的分类和作用4.2.2 丝巾海报设计案例4.2.3 丝巾海报作业思考任务3 直通车图设计
4.3.1 直通车特点解析
4.3.2 直通车图在搜索页的位置
4.3.3 直通车图在设计的注意要点
4.3.4 直通车图案例分析
4.3.5
老年服直通车图设计案例
Contents
Page 目录页
任务4钻展图设计4.4.1 钻展特点解析4.4.2 钻展图设计技巧4.4.3 审核流程4.4.4 钻展图位置4.4.5 头戴式耳机钻展推广图设计案例任务5 活动图设计4.5.1 活动图设计规范
4.5.2 活动图示例说明
4.5.3
活动图示例说明
【项目重难点】
图片设计中，文字字体的选择、整体颜色的选择及应用；直通车推广图设计时，图文的排版样式、比例分布以及文案应用的精准表达。
【项目导图】
【引例】
35岁的张强是2004年毕业的大学生，老家住在城郊的工业园附近，本身学习的是电子商务专业。
张强毕业后并没有像其他同学那样去找工作，而是自己在淘宝网上开了一个服装网店，平时除了进货发货，晚上也会抽空将图片上传摆好放在自己的店铺上。
经过一年多的发展，张强的生意一天天好起来，忙的不亦乐乎。
但随着时间的推移，张强在网上的店铺人流量却直线下滑到现在的冷清，曾有朋友建议过将店铺的风格和展现形式重新做一下，更符合现代电商的形势。
但张强有自己的理论，他觉得网上图片摆放一下就行，顾客在乎的就是价格，主要是想方设法将价格再降低一些。
大家想一下，张强的网店图片通过摆图片和文字的方式，适应现在电商的发展吗，图片的视觉营销方向在广告及其相关的图片中起到怎样的重要作用。
Contents
Page 目录页
任务1 店招图设计任务2 店内海报图设计任务3 直通车图设计任务4
钻展图设计任务5 活动图设计
4.1.1 店招设计目的
4.1.2 店招设计类型
4.1.3 店招设计结构
4.1.1 店招设计的目的
店招本是由户外的店铺招牌延伸而来。
尺寸1920*150px，面积虽小，却至关重要。
从内容和设计目的角度来说，店招上可展示：
店铺名、店铺Logo、店铺slogan、收藏按钮、关注按钮、促销产品、优惠券、活动信息/时间/倒计时、搜索框、店铺公告、网址、第二导航条、旺旺、电话热线、店铺资质、店铺荣誉等一系列有助于产品销售、网店品牌提升等信息。
店招的本质目的是让顾客看到相关的店铺信息，快速了解店铺的经营特色。
从对店铺定位及功能上讲可以将店招分为4类（随意设计类型暂排除在外）4.1.2 店招设计类型
店招设计类型1
2
4
品牌宣传为主型
产品推广为主型3
活动促销为主型
目录导航为主型
1、品牌宣传为主
图4-1品牌宣传店招
2、活动促销为主
图4-2活动促销店招
3、产品推广为主
图4-3产品推广店招
4、目录导航为主
图4-4产品推广店招
居中型
左右型
左中右型
店招设计常见版面结构1243其他型
图4-5店招居中型结构
图4-6店招左右型结构
图4-7店招左中右型结构
图4-8店招其他形式结构
Contents
Page 目录页
任务1 店招图设计
任务2 店内海报图设计任务3 直通车图设计任务4
钻展图设计任务5 活动图设计
4.2.1 海报图分类和作用4.2.2 丝巾海报设计案例
4.2.1 店内海报图分类和作用
1、店内海报图分类
店内海报大体分为2类：一种是店铺首页的整店海报（如图4-9），一种是店铺内单品详情的单品海报（如图4-10）。
图4-10店内海报之单品海报
2、店内海报图作用
整店海报作用单品海报作用
1）占据首页大面积区域，主要展现店铺风格、产品类型以及活动等整体信息，提高顾客对本店铺的认知度。
2）也可对热销或新推产品进行优先展示，通过海报链接到顾客想了解的产品描述中去。
1）针对具体某一款产品，对其风格、卖点、营销活动等进行展示；
2）或用带模特的场景将买家带入你所要表达的内容中，从而促使买家产生购买的欲望。
1、分析运营部门派发的工作单进行思路整理（如图4-11）
图4-11店内海报设计美工工单
2、准备相关的制图素材
图4-12海报所选模特和春天清新素材
3、确定海报字体和制图颜色
图4-13海报设计所选字体
4、确定海报的主体色调和运用颜色
图4-14海报设计所选颜色
5、确定海报排列版式
图4-15海报设计所用版式
6、最终定稿效果（如图4-16）
图4-16丝巾海报设计最终效果
同步实训：丝巾海报作业思考
图4-17海报练习
我们通过分析下面一款产品（如图4-17），设计首页全屏海报，你会怎样按照之前我们作图的步骤进行制作。
产品关键词--冬季新品、羊绒材质、保暖轻便防风，产品营销词--12月30日前购买送精美手套一副。
Contents
Page 目录页
任务1 店招图设计
任务2 店内海报图设计任务3 直通车图设计任务4
钻展图设计任务5 活动图设计
4.3.1 直通车特点解析4.3.2 直通车图在搜索页的位置4.3.3 直通车图设计要点4.3.4 直通车图案例分析4.3.5 老年服直通车图设计案例
淘宝直通车是专门为淘宝卖家量身定制，按点击付费的CPC 营销推广工具。
CPC ：Cost Per Click （按点击付费）
直通车具有精准推广、智能预测等特点。
给广大卖家带来更多的潜在客户，用一个点击，产生一次或多次的店内转跳。
直通车推广图，也是电商美工经常制作的图片类型。
4.3.1 直通车特点解析直通车扣费公式=下一名出价*下一名质量得分
+ 0.01元
自己质量得分
4.3.2 直通车图在搜索页的位置
女装搜索案例页面-顶端
女装搜索案例页面-底部：
这5个是不是直通车图位置？
直通车图区分方法1：
直通车图区分方法2：标有“掌柜热卖“的是直通车图
1、产品图要清晰
2、产品图占图片面积1/2或2/3
3、不要有多余的文字、营销活动不要太多
4、直通车图尺寸800*800px
5、背景不要太花哨、以免喧宾夺主
6、不要出现标题党，夸大功能等
7、品牌产品直通车图一般采取简洁大气风格、添加商品logo简单信息即可
产品展示不明确、干扰元素太多图4-19直通车推广图案例分析1图4-20直通车推广图案例分析2
图4-21直通车推广图案例分析3
4.3.5 老年服直通车图设计案例1、分析设计工单
图4-23直通车推广图美工工单
2、准备相关素材
图4-23直通车推广图美工工单
3、确定直通车图字体
图4-25直通车推广图字体
4、确定直通车推广图颜色
图4-26直通车推广图用色
5、确定直通车推广图版式
4.3.6 老年服直通车图设计最终成稿
图4-28直通车推广图最终完稿
Contents
Page 目录页
任务1 店招图设计
任务2 店内海报图设计任务3 直通车图设计任务4
钻展图设计任务5 活动图设计 4.4.1 钻展图特点解析4.4.2 钻展图设计技巧4.4.3 审核流程4.4.4 钻展图位置
4.4.5 头戴式耳机钻展图设计案例
4.4.1 钻展特点解析
淘宝的钻石展位推广图简称钻展图，典型的CPM（按展现付费）营销推广工具（钻展也有CPC付费模式）。
钻展的计费模式
钻展是按千次展现收费，单位是CPM。
例：1个CPM8元，就是这个广告展现1000次收费8元，点和不点都进行扣费。
钻展总展现量公式=预算金额
CPM价格
* 1000
题目
A天猫店老板给小彤2000元预算投放钻石展位，愿意为每1000次看到付费1元0（CPM），请问可以获得多少展现量？
总展现量为：2000/10*1000=200000
4.4.2 钻展图设计技巧主题文字信息色彩搭配钻展图设计技巧1
2
43
排版布局主题要突出，主打品牌定位或促销信息。
字体和颜色不能超过3种；信息表
达明确；文字创意与图片相结合。
创意主色不要超过3种。
黄金分割和适当留白。
4.4.3 审核流程
图4-29钻展活动图审核流程。
