《网店美工》项目4--网店常用图片设计制作

×××××职业技术学校《网店美工》课程标准×××××学校《网店美工》课程标准一、课程名称《网店美工》二、适用专业中职：电子商务专业三、课程性质中等职业院校电子商务专业核心课程四、课程设计一个优秀的网店美工除了会使用Photoshop、Coreldraw等图片处理工具之外，还需要对消费者购物心理有一定了解，能用精美的图文表达产品的卖点；对网页布局有丰富经验，对色彩敏感，能处理各种视觉冲突，有良好的审美观；能够根据公司产品的上架情况和促销信息制作促销广告；能够通过网站后台数据，挖掘消费者的浏览习惯和点击需求。

本课程按照网店美工岗位从业人员的典型工作任务，总结细化再现出5个学习项目，从简单修图到商品主辅图制作，进阶到广告制作和店铺装修及商品描述，最后进行数据分析和网店装修诊断，通过实际案例讲解，充分体现了“做中学”的思想，在保证基本知识能力的基础上，重点培养学生分析问题、解决问题的能力,让学生毕业后能尽快进入美工岗位，顺利投入岗位工作。

五、课程教学目标本课程的教学目标是以现代职业教育理念为指导，通过先进的教学手段，使学生充分掌握网店设计中平面构成、色彩搭配、字体设计、排版与布局多个方面的理论知识并结合实例进行设计，使学生具备开放的专业思维，树立牢固的专业信心，培养学生具备独立从事网店页面设计的能力。

素质目标（1）培养学生的审美及色彩辨别能力；（2）培养细致耐心的工作态度；（3）培养基本审美意识和审美观；（4）倡导网络文明，使学生自觉抵制低俗营销；（5）培养诚信经营的意识，做到商品如实描述，不欺骗消费者；（6）培养法律意识，不用没有授权的图片和资料，合法经营，不恶意攻击竞争对手；（7）培养商业机密保密意识，防止网店经营数据泄露。

知识目标（1）认识商品照片裁剪、抠图的方法；（2）了解照片调色的方法；（3）学习商品照片的修图方法；（4）知道商品主副图的尺寸版面要求、商品照片背景的处理方法和步骤；（5）知道商品图片美化的主要方法；（6）学习不同网店装修配色、排版知识；（7）了解买家购物认知规律；（8）了解网店美工不同岗位工作内容；（9）了解数据分析指标含义和基本原理；（10）学习店铺装修诊断基础知识。

***学校《网店美工》教案第 1 页有兴趣的设计师们可以利用业余时间多进行了解。

如果能够成为集设计与文案才能于一身的高级人才，可想而知，你将备受青睐。

商品详情页设计是直接决定交易能否成功的其中一个重要因素，如何去构思使之更具有吸引力，更能抓住消费者的心理是关键。

我们需要收集和了解买家需要看什么，不需要看什么：图6-1 详情页所需内容板块示意接着，在再构思宝贝页面需要放置什么内容：图6-2 详情内容要点示意任务23 商品功能性介绍区域设计在做商品详情页规划前，清楚商品详情页每个区域的功能性，对后期布局设计起到相当重要的作用。

一般来说，商品详情页分三大区域：商品营销区、产品展示区、品牌包装区。

而三大区域则又细分成以下6个展现区，并形成商品描述的布局图：突出卖点：提炼商品的主要功能利益进行重点表现，吸引买家关注并进行浏览由整体到细节：先进行商品的整体展现，再进行商品的细节描述，这也是买家在购买商品时的浏览顺序情感联想：针对商品提炼情感利益，激发买家的感性购买需求导购服务：针对买家关注的商品问题进行导购式解答，逐步打消买家的购买疑虑售前售后：对买家进行购买后的一系列服务，从包装、物流到售后服务进行描述实力呈现：商品的质量认证、企业的实力展示、品牌介绍、荣誉等体现店铺实力的内容关联销售：关联销售区域，以便买家跳出前有更多商品选择图6-3 详情页个区域内容细分示意另外，除了基础功能区域版块，为了提高买家逛店体验度以及店铺成交转化率，我们建议增加一些额外的版块，来为商品详情页的功能加分：1.增加买家购买欲望—促销活动区：在商品描述中加进给力的促销信息，让买家了解商品的同时清楚可以享受的促销优惠，让促销优惠来刺激买家的购买欲望。

2.增加客单价—商品推荐：商品推荐有两种，分为同类商品推荐，设计必须要突出同类商品中不同商品的优势。

告诉买家可以如何进行商品选择，如可以的话还可以体现出购买咨询和导购信息。

另一类则是搭配商品推荐：设计中要突出不同商品搭配的艺术，或功能或效果或视理念或促销导购写到这里来，但是文案不宣过长。

电子商务《网店美工》微课版课程教学标准一、课程的性质与任务《网店美工》课程是电子商务专业的必修课程，旨在进一步提升学生对网店的美化和设计能力。

通过该课程的学习，使学生在原先已掌握的电子商务基础上，进一步掌握视觉营销的理念、美工设计的思路，美工中常用的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.具有较强的图像处理创意思维和健康的审美意识，以及较高的艺术设计鉴赏能力。

第一节首焦轮播区及其设计思路一、认识首焦轮播区网店的首焦轮播区主要用于告知买家网店在某个时间段有广告商品或促销活动，其位于网店导航的下方位置，其主要作用就是告知买家网店在某个特定时间段的一些动态信息，帮助买家快速了解网店的活动或商品信息。

首焦轮播区根据设计的内容可以分为新品上架、网店动态、活动促销等，不同的内容其设计的重点是不同的。

另外，在首焦轮播区中通常情况下会使用字号较大的文字来突出主要信息,同时搭配字号较小的文字来进行补充说明，并利用文字之间的组合编排来突出艺术感。

二、首焦轮播区的设计思路首焦轮播区在设计时用来搭配的图片不能太复杂，这样才能突出主题。

同时，要采用符合网店商品形象的文字，以避免产生凌乱的感觉。

常见的商品陈列区布局方式有3种，包括方块式布局，以及下面将要介绍的折线型布局与随意型布局。

1.折线型布局折线型布局就是将商品图片按照错位的方式进行排列。

在这种布局中，买家的视线会沿着商品图片做折线运动。

这样的设计可以给人一种清爽、利落的感觉，具有韵律感。

2.随意型布局随意型布局就是将商品图片随意地放置在页面中。

这种随意往往需要营造出一种特定的氛围和感觉,让这些商品之间产生一种联系，否则画面中的商品会由于缺乏联系而显得突兀。

随意型布局在女装搭配、组合销售中使用得较多，是一种灵活性较强的布局方式。

第四节课堂案例：当季热卖商品陈列区设计一、设计理念•在色彩搭配上，颜色对比要强烈，以增强视觉冲击力。

画面主色调采用鲜艳的红色和蓝色进行对比，营造出明亮、大气的视觉效果，这样的颜色设计很容易吸引买家的注意力。

•使用蓝色矩形图案进行修饰，使画面看起来更加和谐。

•使用同色系的价格标签作为点缀，增强画面的设计感。

二、技术要点•使用翦贴蒙版来控制图像的显示部分。

•使用矩形工具绘制图像的背景及修饰形状，并应用图层样式进行修饰。

三、实操演练略第五节综合实训以提供的图片为素材，为某男装网店设计新品上架的首焦轮播区。

×××××职业技术学校《网店美工》课程标准二O一七年四月修订×××××学校《网店美工》课程标准一、课程名称《网店美工》二、适用专业中职：电子商务专业三、课程性质中等职业院校电子商务专业核心课程四、课程设计一个优秀的网店美工除了会使用Photoshop、Coreldraw等图片处理工具之外，还需要对消费者购物心理有一定了解，能用精美的图文表达产品的卖点；对网页布局有丰富经验，对色彩敏感，能处理各种视觉冲突，有良好的审美观；能够根据公司产品的上架情况和促销信息制作促销广告；能够通过网站后台数据，挖掘消费者的浏览习惯和点击需求。

本课程按照网店美工岗位从业人员的典型工作任务，总结细化再现出5个学习项目，从简单修图到商品主辅图制作，进阶到广告制作和店铺装修及商品描述，最后进行数据分析和网店装修诊断，通过实际案例讲解，充分体现了“做中学”的思想，在保证基本知识能力的基础上，重点培养学生分析问题、解决问题的能力,让学生毕业后能尽快进入美工岗位，顺利投入岗位工作。

五、课程教学目标本课程的教学目标是以现代职业教育理念为指导，通过先进的教学手段，使学生充分掌握网店设计中平面构成、色彩搭配、字体设计、排版与布局多个方面的理论知识并结合实例进行设计，使学生具备开放的专业思维，树立牢固的专业信心，培养学生具备独立从事网店页面设计的能力。

素质目标（1）培养学生的审美及色彩辨别能力；（2）培养细致耐心的工作态度；（3）培养基本审美意识和审美观；（4）倡导网络文明，使学生自觉抵制低俗营销；（5）培养诚信经营的意识，做到商品如实描述，不欺骗消费者；（6）培养法律意识，不用没有授权的图片和资料，合法经营，不恶意攻击竞争对手；（7）培养商业机密保密意识，防止网店经营数据泄露。

知识目标（1）认识商品照片裁剪、抠图的方法；（2）了解照片调色的方法；（3）学习商品照片的修图方法；（4）知道商品主副图的尺寸版面要求、商品照片背景的处理方法和步骤；（5）知道商品图片美化的主要方法；（6）学习不同网店装修配色、排版知识；（7）了解买家购物认知规律；（8）了解网店美工不同岗位工作内容；（9）了解数据分析指标含义和基本原理；（10）学习店铺装修诊断基础知识。

上篇：美工设计之“道”第1章走进视觉美学（3学时）一、教学目的及要求通过本章的学习，使学生了解视觉美学的基础知识、色彩心理，掌握色彩的搭配与黄金分割、冷暖色调及网店设计的颜色效应。

二、教学重点及难点教学重点：色彩的搭配与黄金分割，色彩心理与网店设计。

教学难点：视觉营销在网店商品中的运用。

三、教学手段多媒体（投影仪、计算机），板书。

四、教学方法课堂演讲、头脑风暴、提问、讨论、启发、案例分析。

五、作业1、了解视觉美学发展历程。

2、列出视觉营销运用较好的3个以上天猫店铺。

六、参考资料1.《网店美工实操》，淘宝大学编著，电子工业出版社，2013年。

2.《电子商务网页设计与制作》，徐峰主编，浙江大学出版社，2013年。

3.《网店美工宝典》，王楠编著，电子工业出版社，2015年。

七、教学内容与教学设计1.1 视觉美学1.2 色彩心理1.2.1色彩的分类与属性1.2.2色彩的搭配与黄金分割1.2.3色彩心理与冷暖色调1.2.4色彩心理与网店设计1.3 视觉营销1.3.1视觉营销1.3.2视觉营销与商品八、课后小结第2章入门网店美工（3学时）一、教学目的及要求使学生了解网店美工在店铺运营中的位置和优秀美工的成长路径。

二、教学重点及难点教学重点：网店美工运营之手，美工在店铺运营中的位置。

教学难点：网店美工成长路径及日常工作。

三、教学手段多媒体（投影仪、计算机），板书。

四、教学方法课堂讲授、提问、讨论、启发、案例分析。

五、作业1、网店美工的岗位介绍及岗位要点？2、网店美工的日常工作有哪些？六、参考资料1.《网店美工实操》，淘宝大学编著，电子工业出版社，2013年。

2.《电子商务网页设计与制作》，徐峰主编，浙江大学出版社，2013年。

3.《网店美工宝典》，王楠编著，电子工业出版社，2015年。

七、教学内容与教学设计2.1网店美工2.1.1美工分类2.1.2网店美工简介2.2网店美工运营之手2.3优秀网店美工成长之路2.3.1网店美工成长路径2.3.2网店美工日常工作2.3.3网店美工工资待遇2.4网店美工新手建议八、课后小结中篇：美工设计之“器第3章学会宝贝拍照（3学时）一、教学目的及要求通过本章的学习，使学生了解相机的选择和网拍的注意事项、掌握宝贝拍照场景的布置、光线的角度、拍照的流程。

网店美工 _______________________________________________________________ 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、抠图在网店美工中是一项重要的环节，通过抠图可以使不美的图片经过处理后看上去美观大方亮堂，也可以使本来很美的图片更加锦上添花。

二、网店的LOGO设计要点3连连看——LOGO 设计方法4、任务实施任务2：LOGO 设计制作一—乐乐包袋(1) 设计尺寸：淘宝官方的建议尺寸为80PX*80PX 或100PX*100PX (正方形)，大小V80KB,格式:jpg、gif、pngo(2) Log。

的设计技巧(3) logo设计中的色彩运用技巧三、常见设计思路(1) 以对象全名进行字体设计。

(2) 以对象名称字首为主的创意设计。

(3) 以对象性质进行象征设计(4) 抽象符号。

(5) 以历史、典故、社会特性、地域性特征等进行创意设计任务一、根据LOGO设计方法选择恰当的LOGO案例，进行连线。

乐乐效果图任务二、乐乐包袋LOGO设计制作。

微课视频：观看“乐乐包袋LOGO设计制作”视频，完成LOGO设计制作设计思路：以对象性质进行象征设计。

通过适合公司的性质、经【师】1. 讲解LOGO的设计尺寸要求，提炼设计的技巧要点和色彩运用技巧。

2. 通过案例分析，展示5个LOGO常见的设计创作思路。

引出要进行的实训任务。

【生】1. 学习优秀LOGO设计，掌握5个常见的LOGO设计创作思路。

2. 认真聆听老师对于相关知识的巩固讲解【师】1. 设置i博导平台“连连看”拖拽题目，引导学生完成任务一。

2. 实训完成后，老师进行题目讲解。

【生】1. 学生登录i博导平台，完成任务2. 查看答案，分析答案。

【师】1. 布置实训任务二。

2. 根据学生的学习情况，实时的点拨、引导启发学生遇到的因难问题。

注意尽量让学生独立自主的完成学习任务。

3. 实训完成后，老师结合操作过程中的问题进行总结和知识点讲解。

通过优秀案例分析，了解LOGO设计的方法，归纳总结了解logo设计的要点，解决教学的重点。

(10分钟)通过连连看的题日，强化学生对LOGO设计常见方法的理解和运用，吸引学生学习的兴趣。

信息化的手段可以辅助教师及时掌握学生对重难点掌握程度，突破重点。

(5分钟)I.店铺Logo是结合内容做创意，内容是基础，创意作为加分项。