Banner设计与制作——设计与制作Banner图片教案-2022-2023学年度高一下学期中国工信出版集团中等专业学校Flash CS6动画制作

中等专业学校2022-2023-2教案 编号： 备课组别 计算机 课程名称 Flash CS6 动画制作 所在 年级 一年级 主备 教师 授课教师 授课系部 授课班级 授课 日期 课题 项目一Banner设计与制作 任务2 设计与制作Banner图片 教学 目标 1.了解Banner图片设计版式 2.熟悉Banner图片设计排版原则 3.掌握Banner图片特效动画制作 重点 掌握绘图工具的基本操作方法，理解图层的基本概念 难点 熟悉颜色填充方法 教法 直观演示法、任务驱动法、讲解法 教学设备 计算机机房 教 学 环 节 教 学 环 节 教 学 环 节 教 学 环 节 教学活动内容及组织过程 个案补充 【新课引入】 教师和学生分享几张图片，并让学生观察他们之间的不同。总结学生答案，并导入今天的课程。 【教学过程及内容】 一、了解Banner图片设计版式 图片设计的版式包括主题形象的体现、整体的布局、视觉元素的大小和数量、图片与文字的关系等。根据不同的组织形式，可以将图片的版式大致划分为以下几种： （1）两栏式 这种版式布局采用的是左文右图或者左图右文的形式。一般表现主题内容的图片占大部分区域，配以补充说明性的文字用于进一步表达主题，如图2-2-1所示。 图2-2-1 两栏式版式示例 （2） 三栏式 这种版式布局采用的是中间文字两边是图片的形式，主次关系明确，如图2-2-2所示。 图2-2-2 三栏式版式示例 （3）上下式 这种版式布局采用的是上面文字下面图片的形式，首先由上方的文字引导用户的阅读视线，再由下方的图片更好的表现主题内容，图文相结合，如图2-2-3所示。 图2-2-3 上下式版式示例 （4）组合式1 这种版式布局采用的是一边是展示产品的模特人物，另一边是文字加图片的形式，在表现形式上更加灵活，如图2-2-4所示。 （5）组合式2 （6）文字+背景 二、熟悉Banner图片设计排版原则 排版就是把可视化信息如文字、图片等元素在整体布局上调整位置、大小、方向，使版面达到美观的画面效果。在Banner中图片设计遵循以下原则： 对齐原则 集中原则 留白原则 降噪原则 重复原则 对比原则 三、掌握Banner图片特效动画制作 Banner中图片特效动画，是在实现动画的基础上，大大提升动画本身的可观 赏性。下面通过两个案例来学习一下图片特效动画的制作方法。 案例 2-2-1 格子切换图片 本例设计的是格子切换图片效果，画面通过线条分隔成格子，当鼠标滑离格子时 显示另一张图片，整体设计风格简洁大方，效果如图2-2-7所示。 图2-2-7 格子切换图片动画效果 案例 2-2-2 点按式像册 本例设计的是电子婚纱相册，通过鼠标单击左侧的缩略图，在右边可以查看放大的相册图片，效果如图2-2-8所示。 【课堂小结】 在本节里主要学习了Banner图片设计的相关知识，熟悉几类Banner图片设计的版式应用以及图片设计的六大排版原则，最后结合实际案例讲解了Banner图片设计动画的制作方法。希望读者通过学习可以设计制作简单的Banner图片动画。 【作业布置】 一、作业目的 1．了解Banner图片设计排版样式。 2．熟悉Banner图片设计排版原则。 3．能够制作简单的图片特效动画。 二、作业内容 1．制作“隐藏的图像”动画效果，效果如图2-2-9所示。（提示：遮罩动画和隐形按钮的应用） 图2-2-9 隐藏的图像动画效果 板 书 设 计 项目一Banner设计与制作 任务2 设计与制作Banner图 1. 了解Banner图片设计版式 2. 熟悉Banner图片设计排版原则 3. 掌握Banner图片特效动画制作 教后札记 学科网（北京）股份有限公司 $