1、网店装修之banner设计 高等教育出版社高等教育出版社 赵志军主编赵志军主编 图图 片拍摄与处理片拍摄与处理 模块五模块五 网店装修网店装修-巧饰“庙宇巧饰“庙宇 添“香火添“香火 任务二任务二 导航栏制作导航栏制作 ( (2 2课时课时) ) 教材的地位与作用 总结归纳 能力欠缺 基础知识薄弱 喜实践厌理论 好奇心求知欲 学情分析 教学对象：教学对象： 中等职业技术学中等职业技术学校二年校二年级学生级学生，学习过，学习过photoshop、fireworks、电子商务相关课、电子商务相关课 程。程。具备一定的探究知识能力，乐于接受感性的、直观的学习方式。 1、引导引导学学生生从静态从静态b
2、anner设计提升为动态。设计提升为动态。 2、领悟专业知识、领悟专业知识，实现实现学生探究性学习的欲望。学生探究性学习的欲望。 情感 态度 与价 值观 过程 与 方法 1、能利用所学软件如、能利用所学软件如ps进行进行banner设计。设计。 2、掌握、掌握banner的图片、文字等表现手法。的图片、文字等表现手法。 知识 与 技能 1、了解、了解banner的定义、特点、应用领域的定义、特点、应用领域； 2、了解、了解banner的构成元素及设计方法；的构成元素及设计方法； 教学目标 教学重点和难点 1.掌握banner设计方法， 及为突出主体而进行文 字、图片等的表现手法。 2.了解网店
3、装修岗位的职 业技能。 教学重点教学重点 1.根据banner设计需要进行 图片、文字素材合理加工处 理。 2.掌握banner的结构、色彩 和动态效果的搭配。 教学难点教学难点 内容内容 1 创设情境 内容内容 2 自主探究 内容内容 3 小组讨论 内容内容 4 讲解演示 内容内容 4 仸务驱动 内容内容 4 知识扩展 探究式教学 内容内容 4 问题驱动 内容内容 3 总结提升 做中教、做中学 教学工具准备 软件软件 信息化教学信息化教学资源资源 模拟 设计器 设计 banner 阿里 妈妈 在线 发布 网络 平台 广播教学系统广播教学系统 Banner Maker 阿里妈妈阿里妈妈 Pho
4、toshop Banner模拟设计模拟设计 创设情境 分析引导 提升设计 任务驱动 归纳总结 发布评比 探索环节 分析环节 练习环节 总结环节 提升环节 评比环节 创设情境 分析引导 提升设计 任务驱动 归纳总结 发布评比 创设情境 分析引导 提升设计 任务驱动 归纳总结 发布评比 1、淘宝网店装修包括哪些装修？ 2、请你从浏览网店中的banner，选择最喜爱的 banner，上交给老师 设计意图设计意图 根据学生专业特点和兴趣，让学生自行浏览网店banner资源。教师通 过问题，引导学生自主探究，总结banner包含的元素。 创设情境 分析引导 提升设计 任务驱动 归纳总结 发布评比 分析组
5、成元素分析组成元素 分析图文排版分析图文排版 分析色彩应分析色彩应用用 创设情境 提升设计 任务驱动 归纳总结 发布评比 分析引导 分析用户习惯分析用户习惯 分析视觉效果分析视觉效果 BannerBanner 创设情境 提升设计 任务驱动 归纳总结 发布评比 分析引导 色彩 情感 抓住 关键字 顺应浏 览习惯 辅助 视觉 主标 与副标 网店产 品定位 如：色彩的情感联想 色彩的情感色彩的情感联联想，主要想，主要从从具体具体联联想和抽象想和抽象联联想想两个维两个维度度划划分：分： 验证 仸务 仸务三：对比所学banner设计要点，你设计的 banner是否通情达情呢？。 创设情境 提升设计 任务
6、驱动 归纳总结 发布评比 分析引导 升华 仸务 仸务二：根根据样例和提供的素材，完成一个静态据样例和提供的素材，完成一个静态 banner设计。设计。 导入 仸务 仸务一：根根据要求，选择自已最熟悉的软件，据要求，选择自已最熟悉的软件，如如 Photoshop/firework/imageready/coreldraw等等 （1）根据要求，选择自已最熟悉的软件根据要求，选择自已最熟悉的软件，如，如 Photoshop/firework/imageready/coreldraw等等 。 （2）各软件的设计步骤总结 观看观看视频视频 内容内容 1 Photoshop 探究知识探究知识 内容内容 2
7、 探究步骤 尝试提炼尝试提炼 内容内容 3 发现规律 内容内容 4 验证新知验证新知 尝试验证 Banner模拟设计模拟设计 以以photoshop为例，简要演示制作方法。为例，简要演示制作方法。 学生设计banner 学生banner设计作品 设计意图 设计意图 提高学生的自我学习意识，加强知识的理解，锻炼学生的问题分析能提高学生的自我学习意识，加强知识的理解，锻炼学生的问题分析能 力力。得出静态。得出静态banner的不足，软件操作对初学者的不易。的不足，软件操作对初学者的不易。 展示学生作品展示学生作品 提问：提问：banner设计难不难？有什么不足？设计难不难？有什么不足？ （1）必须
8、熟悉图形编辑软件操作必须熟悉图形编辑软件操作 （2）图片输出大部分都是静态图片）图片输出大部分都是静态图片 （3）难以制作动态）难以制作动态banner 创设情境 提升设计 发布评比 分析引导 归纳总结 任务驱动 创设情境 提升设计 发布评比 分析引导 任务驱动 归纳总结 （1）简要介绍阿里妈妈简要介绍阿里妈妈bannermaker在线在线 banner设计设计。 （2）了解阿里妈妈了解阿里妈妈bannermaker的使用方的使用方 法法。 个性banner随心变 创设情境 发布评比 分析引导 任务驱动 归纳总结 提升设计 创设情境 发布评比 分析引导 任务驱动 归纳总结 提升设计 静态静态b
9、anner 动动态态banner 设计步骤整理设计步骤整理 （1）结合网店经营产品或品牌，确定结合网店经营产品或品牌，确定banner设计主题设计主题 、表现手法等。、表现手法等。 （2）选定）选定banner主体、文字等主体、文字等 （3）选择色彩、背景、搭配图等。）选择色彩、背景、搭配图等。 （4）对图文位置、大小进行调整，重点突出主体视觉效）对图文位置、大小进行调整，重点突出主体视觉效 果，体现广告宣传理念。果，体现广告宣传理念。 创设情境 发布评比 分析引导 任务驱动 归纳总结 提升设计 创设情境 发布评比 分析引导 任务驱动 归纳总结 提升设计 以某一女鞋网店以某一女鞋网店banner为例，为例， 1、在、在photoshop或其它图片编辑软件中处理好素材图片，如抠或其它图片编辑软件中处理好素材图片，如抠 图、裁剪等，输出图、裁剪等，输出png图片格式。图片格式。 创设情境 发布评比 分析引导 任务驱动 归纳总结 提升设计 比拼评价、人气，比拼评价、人气， 谁获得点赞数多谁获得点赞数多 为赢为赢 探究学习，做中教、做中学 演示或引导 生活实例激发学趣 探究banner设计 图片引入探究 提升设计能力 演示对比分析 Banner多元化设计 总结提炼技巧 谢 谢！
