网店美工教案

网店美工教案(总-本页仅作为预览文档封面，使用时请删除本页-

4页)1

《网店美工与视觉设计》

教学教案

第1章

课时内容 教学目标 教学重点 教学难点 网店美工和基本技能 授课时间 课时 8 ? 熟知网店美工的技能要求和了解常用美工软件； ? 了解网店美工中需要注意的问题； ? 掌握电商视觉设计黄金构图法； ? 掌握适合自己网店美工风格的确定方法； ? 理解网店美工的概念。 ? 掌握适合自己网店美工风格的确定方法。 ? 掌握适合自己网店美工风格的确定方法。 1.教学思路： （1）网店美工的工作范畴与设计要求； （2）网店美工常用的图像制作与处理软件； （3）网店美工与店铺装修风格。 2.教学手段： （1）通过现场演示引起学生们对设计的兴趣，并带动课堂氛围； （2）通过大量优秀案例欣赏，加强视觉冲击，提高鉴赏辨别能力。 教学资料及要求： 教学过程中除了讲解必备的理论知识外，还可列举一些比较有代表性的案例，提高学生的学习兴趣。 教学内容 教学设计 内容大纲： ∣网店美工的工作范畴与设计要求 网店美工概述 网店美工人员的工作内容与技能要求 ∣网店美工常用的图像制作与处理软件 Photoshop 电商图片助手 Dreamweaver Flash Illustrator Fireworks ∣网店美工与店铺装修风格 确定店铺装修风格的重要性 确定店铺装修风格的方法 不同店铺装修风格欣赏 课后练习 2

小结 1、 2、 3、 网店美工应具备的基本技能要求； 网店美工设计常用的几种软件； 网店装修风格的确定与赏析。 课后习题 （1）请列举网店美工常用的软件及它们之间的区别。 （2）请为一个商品确定店铺装修风格。

《网店美工与视觉设计（视频指导版）》

配套教学教案

第2章

课时内容 教学目标 教学重点 教学难点 网店配色与图片素材收集 授课时间 课时 6 ? 熟悉并掌握店铺色彩搭配技巧方法； ? 了解网店美工色彩心理应用； ? 掌握店铺掌握网店图片素材收集技巧 ? 能设计制作出符合店铺风格的店铺颜色搭配。 ? 掌握色彩基础知识原理。 3

教学设计 1.教学思路： （1）讲解色彩基础知识原理以及设计要点； （2）讲解店铺店铺色彩搭配技巧方法； （3）讲解网店美工色彩心理应用以及图片素材收集技巧。 2.教学手段： （1）通过更多实例引起学生们对设计的兴趣； （2）任务式教学手段，增加师生互动。 教学资料及要求： 教学过程中除了讲解必备的理论知识外，还可列举一些比较有代表性的案例，提高学生的学习兴趣。 教学内容 内容大纲： 了解店铺装修必备的色彩知识 构成色彩的三要素——色相、明度、纯度 店铺色彩心理应用 店铺色彩搭配技巧 色相对比与调和的搭配技巧 明度对比与调和的搭配技巧 纯度对比与调和的搭配技巧 挑选合适店铺的色彩搭配 根据店铺特点选择主色 店铺的主色、辅助色、点缀色搭配 图片素材规划与收集 图片色彩属性概述 选择图片格式 选择图片筛选规划技巧 本章小结 课后练习 小结 4、 5、 掌握店铺色彩搭配技巧方法； 掌握网店美工色彩心理应用以及图片素材收集技巧； 课后习题 （1） 请收集5组不同主色风格的店铺图片。 （2） 请分析儿童用品店铺的用色规律。

4

《网店美工与视觉设计（视频指导版）》

配套教学教案

第3章

课时内容 教学目标 教学重点 教学难点 网店商品图片美化 授课时间 课时 6 ? 能利用Photoshop CS6图像处理软件进行基本的图片处理。 能利用Photoshop CS6图像处理软件进行图片的美化。 ? 能掌握Photoshop CS6图像处理软件各工具的基本操作以及快键键；掌握网店图片裁剪、污点处理、抠图、以及调色的基本操作。 ? 掌握抠图的基本操作 1.教学思路： （1）讲解工具的基本用法； （2）讲解配合快捷键的使用方法； （3）讲解店铺图片处理的基本思路。 2.教学手段： （1）通过更多实例引起学生们对设计的兴趣； （2）任务式教学手段，增加师生互动。 教学资料及要求： 教学过程中除了讲解必备的理论知识外，还可列举一些比较有代表性的案例，提高学生的学习兴趣。 教学内容 教学设计 5

内容大纲： Photoshop图像处理软件 认识Photoshop的界面 Photoshop常用工具 Photoshop图层的基本操作 网店图片裁剪 固定尺寸裁剪 调整图片大小 网店图片污点处理 使用污点修复工具美化图片 使用图章工具美化图片 抠图技巧 使用魔术棒工具抠图 使用快速选择工具抠图 使用套索工具抠图 使用钢笔工具抠图 商品图调色处理 使用“色阶”命令调整图片 使用“曲线”命令调整图片 调整图片的亮度与对比度 调整图片的色相与饱和度 使用“色彩平衡”命令调整图片 本章小结 课后练习 小结 1、 能利用Photoshop CS6图像处理软件进行基本的图片处理。 2、能利用Photoshop CS6图像处理软件进行图片的美化。 课后习题 （1） 对网店图片进行基本编辑处理； （2） 对素材图片进行裁剪、污点处理、抠图、以及调色的基本操作 6

《网店美工与视觉设计（视频指导版）》

配套教学教案

第4章

课时内容 教学目标 教学重点 教学难点 店铺LOGO与店招视觉设计 授课时间 课时 4 ? 熟悉并掌握店铺LOGO的含义、常见类型、设计策略及设计步骤； ?了解导航栏的参数设置以及设计步骤； ?掌握店招的设计要点及具体步骤。 ? 能设计制作出符合店铺风格的店铺LOGO、导航栏及店招。 ? 能根据需要对店铺进行装修。 1.教学思路： （1）讲解店铺LOGO与店招视觉设计的设计要点及主要内容； （2）讲解店铺LOGO与店招视觉设计的常见布局； （3）具体演示店铺LOGO与店招的设计制作的具体操作步骤。 2.教学手段： （1）通过现场演示引起学生们对设计的兴趣，并带动课堂氛围； （2）任务式教学手段，增加师生互动。 教学资料及要求： 教学过程中除了讲解必备的理论知识外，还可列举一些比较有代表性的案例，提高学生的学习兴趣。 教学内容 教学设计 7

内容大纲： 店铺LOGO视觉设计 什么是店铺LOGO 店铺LOGO的常用位置 1．店铺左上角 2．店铺正 店铺LOGO的主要类型 1．中文文字型 2．英文文字型 3．中英文结合型 4．图形型 5. 图文结合型 店铺LOGO的设计策略 店铺LOGO的设计制作 店铺导航栏视觉设计 认识导航栏 导航栏的设计展示 店招视觉设计 店招的视觉设计要点 店招的设计展示 本章小结 课后练习 小结 6、 7、 掌握店铺LOGO的设计要点； 掌握店铺导航栏及店招的设计流程； 课后习题 （1）请设计并制作出一个食品店的店铺LOGO. （2）请设计制作出一个小清新风格的女装店店招。

《网店美工与视觉设计（视频指导版）》

配套教学教案

第5章

课时内容 店铺首页视觉设计 授课时间 课时 8 8

教学目标 教学重点 教学难点 ? 熟悉并掌握店铺首页各个模块的设计要点及主要内容； ?了解店铺首页的页面结构及常见布局； ?掌握店铺首页的设计制作流程。 ? 能设计制作出符合店铺风格的店铺首页。 ? 能根据需要对店铺首页进行装修。 1.教学思路： （1）讲解店铺首页各个模块的设计要点及主要内容； （2）讲解店铺首页的页面结构及常见布局； （3）具体演示店铺首页每一个模块的设计制作的具体操作步骤。 2.教学手段： （1）通过现场演示引起学生们对设计的兴趣，并带动课堂氛围； （2）任务式教学手段，增加师生互动。 教学资料及要求： 教学过程中除了讲解必备的理论知识外，还可列举一些比较有代表性的案例，提高学生的学习兴趣。 教学内容 教学设计 内容大纲： 店铺首页布局 店铺首页制作规范 店铺首页的常见布局 1．店铺定位 2．用户的浏览模式 3．了解客户的需求及行为 店铺首页海报的视觉设计 首页海报的设计要点 1．主题 2．构图 3．配色 4．轮播海报的设计流程 首页海报的设计制作 宝贝陈列区的设计要点 1．商品类别要明确 2．要突出商品的价格和购买按钮 3．要让产品主次分明 宝贝陈列区的设计制作 收藏区及客服区的视觉设计 收藏区的设计制作 客服区的设计制作 本章小结 课后练习 小结 8、 9、 掌握店铺首页各个模块的设计要点； 掌握店铺首页各个模块的设计流程； 9

课后习题 （1）现有一个经营女性护肤品的网络店铺，请为其量身打造一个首页海报。 （2）现有一个经营女鞋的店铺，请按照平底鞋、高跟鞋和运动鞋三个类别为其设计 制作宝贝陈列区。 （3）现有一个经营儿童玩具的店铺，请为其设计制作适合其特点的收藏区及客 服区。 《网店美工与视觉设计（视频指导版）》

配套教学教案

第6章

4 课时内容 推广图片视觉设计 授课时间 课时 ? 熟悉并掌握直通车图的设计要点 教学目标 ? 熟悉并掌握聚划算主图的设计要点 ? 掌握钻石展位图的设计制作流程 ? 能设计制作钻石展位图，能根据需要设计制作直通车图及聚划算主教学重点 图。 教学难点 ? 设计要点及制作流程的掌握 1. 教学思路： （1）讲解直通车图、聚划算图以及钻石展位图的设计要点； （2）讲解直通车图、聚划算图以及钻石展位图的制作流程； （3）具体演示操作步骤。 2. 教学手段： 教学设计 （1）通过现场演示引起学生们对设计的兴趣，并带动课堂氛围； （2）任务式教学手段，增加师生互动。 3. 教学资料及要求： 教学过程中除了讲解必备的理论知识外，还可列举一些比较有代表性的案例，提高学生的学习兴趣。 教学内容 直通车图的视觉设计 直通车图的视觉设计要点 1. 颜色差异化 2.巧用卡通人物和形象 3. 卖点深挖 4．脑洞大开 聚划算图的视觉设计 聚划算主图的制作规范 聚划算主图的制作案例 钻石展位图的视觉设计 10

钻石展位图的设计要点 1. 主题突出 2. 目标明确 3. 形式美观 本章小结 课后练习 小结 1、 2、 掌握直通车图、聚划算图、钻石展位的设计要点； 掌握直通车图、聚划算图、钻石展位的设计制作流程。 1.请在淘宝上找出直通车做得好的店铺，并分析其直通车图的优势。 课后习题 2.请列举几张你认为有设计感的钻展图，并一一说明它们好在哪里。 3.请根据本章所学知识设计一张家居类的聚划算主图。 4.请根据本章所学知识设计一张女装类的钻石展位图。

《网店美工与视觉设计（视频指导版）》

11

配套教学教案

第7章

课时内容 详情页视觉设计 熟悉商品详情页常用尺寸，商品详情页的基本元素。 教学目标 掌握详情页的参数设置以及设计步骤。 了解产品详情页制作的规律性问题。 教学重点 ? 能设计产品展示图、产品尺寸图、产品细节图的制作。 教学难点 ? 设计要点及制作流程的掌握 4. 教学思路： （1）讲解商品详情页常用尺寸，商品详情页的基本元素； （2）讲解商品详情页设计要点； （3）讲解商品详情页的制作流程； （4）具体演示操作步骤。 教学设计 5. 教学手段： （1）通过现场演示引起学生们对设计的兴趣，并带动课堂氛围； （2）任务式教学手段，增加师生互动。 6. 教学资料及要求： 教学过程中除了讲解必备的理论知识外，还可列举一些比较有代表性的案例，提高学生的学习兴趣。 教学内容 内容大纲： 详情页设计 详情页概述 详情页设计思路 详情页排版 详情页模块设计 产品展示图设计 产品卖点模块设计 产品细节模块设计 产品售后服务模块设计 优化产品详情其他设计 产品分类设计 产品搭配区域设计 使用“切片”工具优化展示 本章小结 课后练习 授课时间 课时 8 小结 3、 4、 掌握商品详情页的设计要点； 掌握商品详情页的设计制作流程。 12

课后习题 1.请设计并制作出一个女装店铺的详情页。 2.请分析并总结详情页制作必要组成要素。

《网店美工与视觉设计（视频指导版）》

配套教学教案

第8章

课时内容 无线端店铺视觉设计 授课时间 课时 8 教学目标 ? 熟知网店美工的技能要求和了解常用美工软件； ? 了解什么是无线端店铺； ? 熟练掌握无线端店铺的装修风格及页面布局； ? 无线端店铺商品首页及详情页设计技巧； ? 掌握无线端店铺的特征； ? 掌握无线端店铺的导购思路； ? 掌握无线端店铺模板的参数设置。 ? 无线端店铺装修思路 ? 无线端店铺模板参数介绍 教学重点 教学难点 13

教学设计 1.教学思路： （1）无线端店铺的设计特点； （2）无线端店铺与PC端店铺的区别； （3）无线端店铺装修要点； （4）无线端店铺装修思路； （5）无线端店铺模板参数介绍。 2.教学手段： （1）通过比较无线端店铺和pc端店铺区别，了解装修差异； （2）通过大量优秀案例欣赏，加强视觉冲击，提高鉴赏辨别能力。 教学资料及要求： 教学过程中除了讲解必备的理论知识外，还可列举一些比较有代表性的案例，提高学生的学习兴趣。 教学内容 内容大纲： 无线端店铺视觉设计 无线端店铺的设计 无线端店铺装修要点 无线端店铺装修思路 无线端店铺模板参数介绍 课后练习 小结 10、 无线端店铺视觉设计 11、 无线端店铺的设计 课后习题 （1）请设计并制作一个时尚型化妆品的无线端店铺详情页。 （2）请设计并创作一个清爽风格的餐具无线端店铺详情页。

14