Animate动画制作案例教程 课件 项目二 Banner设计与制作.ppt

1.了解Banner主题设计风格2．复古风复古风的特点是传统元素和复古图案，图2-4-2所示的左边的Banner中文字使用了水墨感觉的书法字体，右边的Banner则是包含了传统的赛龙舟剪纸元素，非常切合端午节的主题。

图2-4-2复古风示例1.了解Banner主题设计风格3．清新风清新风的特点就是画面清爽、唯美，色彩搭配清新自然，图2-4-3所示的banner，就给人十分清丽和透亮的感觉。

图2-4-3清新风示例4．炫酷风这种风格通常比较多的使用深色背景，常用有质感的元素与光影特效，图2-4-4所示的Banner色彩华丽，引人入胜。图2-4-4炫酷风示例1.了解Banner图片设计版式图片设计的版式包括主题形象的体现、整体的布局、视觉元素的大小和数量、图片与文字的关系等。根据不同的组织形式，可以将图片的版式大致划分为以下几种：（1）两栏式这种版式布局采用的是左文右图或者左图右文的形式。一般表现主题内容的图片占大部分区域，配以补充说明性的文字用于进一步表达主题，如图2-2-1所示。

图2-2-1两栏式版式示例1.了解Banner图片设计版式（2）三栏式这种版式布局采用的是中间文字两边是图片的形式，主次关系明确，如图2-2-2所示。

（3）上下式这种版式布局采用的是上面文字下面图片的形式，首先由上方的文字引导用户的阅读视线，再由下方的图片更好的表现主题内容，图文相结合，如图2-2-3所示。

图2-2-2三栏式版式示例

图2-2-3上下式版式示例1.了解Banner图片设计版式（4）组合式1这种版式布局采用的是一边是展示产品的模特人物，另一边是文字加图片的形式，在表现形式上更加灵活，如图2-2-4所示。

图2-2-4组合式1版式示例（5）组合式2这种版式布局采用的是两边是模特人物，中间是文字加图片的形式，在用于展示类的Banner图片中使用此版式的居多，例如服饰，潮流单品等，如图2-2-5所示。

图2-2-5组合式2版式示例1.了解Banner图片设计版式（6）文字+背景这种版式布局采用的是纯文字加背景的图片形式，在背景的衬托下，突出文字主题的内容，重点鲜明，如图2-2-6所示。

图2-2-6文字+背景版式示例2.熟悉Banner图片设计排版原则

排版就是把可视化信息如文字、图片等元素在整体布局上调整位置、大小、方向，使版面达到美观的画面效果。在Banner中图片设计遵循以下原则：对齐原则集中原则留白原则降噪原则重复原则对比原则案例2-2-1格子切换图片2.掌握Banner图片特效动画制作

Banner中图片特效动画，是在实现动画的基础上，大大提升动画本身的可观赏性。下面通过两个案例来学习一下图片特效动画的制作方法。本例设计的是格子切换图片效果，画面通过线条分隔成格子，当鼠标滑离格子时显示另一张图片，整体设计风格简洁大方，效果如图2-2-7所示。图2-2-7格子切换图片动画效果案例2-2-2点按式像册3.掌握Banner图片特效动画制作

本例设计的是电子婚纱相册，通过鼠标单击左侧的缩略图，在右边可以查看放大的相册图片，效果如图2-2-8所示。

图2-2-8点按式相册动画效果强化案例图片幻灯片3.掌握Banner图片特效动画制作

本案例是网站Banner中经常出现的图片幻灯片动画效果，图片渐渐淡出显示，当鼠标经过右下角图片缩略图时切换大图显示，效果如图2-2-9所示。

图2-2-9图片幻灯片效果本节小结在本节里主要学习了Banner图片设计的相关知识，熟悉几类Banner图片设计的版式应用以及图片设计的六大排版原则，最后结合实际案例讲解了Banner图片设计动画的制作方法。希望读者通过学习可以设计制作简单的Banner图片动画。模拟实训一、实训目的1．了解Banner图片设计排版样式。2．熟悉Banner图片设计排版原则。3．能够制作简单的图片特效动画。二、实训内容1．制作“隐藏的图像”动画效果，效果如图2-2-9所示。（提示：遮罩动画和隐形按钮的应用）

图2-2-9隐藏的图像动画效果项目二Banner设计与制作

任务3设计制