您现在的位置： 圆点视线 >> 教程 >> 图形图像 >> Fireworks >> 文章正文
[图文]Fireworks 轻松绘制Banner广告动画    热     ★★★
Fireworks 轻松绘制Banner广告动画
作者：hairan 　文章来源：天极 　点击数： 　更新时间：2007-7-30 11:28:19　
　页面功能：【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 【字体：小 大】
　Banner，一般翻译为旗帜广告、横幅广告等。Banner是网站用来作为盈利或者是发布一些重要的信息的工具。Banner在设计上应该要做到制作美观、方便点击、与网页协调和整体构成合理。

　　本文中我们用Fireworks来制作一个变色的Banner，从中我们可以掌握符号（symbol）的使用、补间实例动画（tween instance）的制作、层(Layers)和帧(Frames)的基本用法，结尾进行精彩的技巧总结。

　　完成效果如下：

　　Banner制作具体过程

　　（1）首先我们新建一个大小为468×60的文件，并设置画布颜色为黑色，如图1所示。


图1 新建一个文件

　　（2）然后我们导入一个要进行变色效果的位图文件，如图2所示。当然我们同样可以使用绘图工具绘制这个图像，这里是为了方便讲解选用外部图像的。


图2 导入位图


　　 （3）选中该幅图像按Ctrl＋Shift＋D两次，克隆图像两次。然后选中其中的一幅图像，点击“Filters”，选择“Adjust Color”>>“Hue/Saturation”，这时在弹出对话框中调整色调的值，如图3所示。同样方式调整另外一幅图像的颜色，最终得到图4所示的图像效果。


图3 调整色调


图4 对克隆对象实行变色效果后的图像


　　 （4）选中其中的一个图片如左边的紫色图片，按快捷键F8或者右键在弹出菜单中选择Convert to Symbol准备将图像转换为符号。在弹出的对话框内为符号命名并选择动画符号(Animation)，如图5所示。


图5 将图像转换为符号

　　 （5）点击“OK”之后会弹出动画设置的对话框，如图6所示。我们暂时对它不做设置。


图6 动画设置对话框


　　 （6）单击“OK”，这时回到工作区中，我们在画布上会看到带箭头的虚线边框的符号，如图7所示。使用同样方式将另外两幅图像转换为符号，并分别命名为Symbol 2和Symbol 3，然后将三个符号都删除掉。


图7 位图转换为动画符号的效果

　　（7）我们再在Banner的左边加些图片并做适当调整使Banner更加生动，如图8所示。


图8 在Banner左边添加图片

　　 （8）接着我们点击“Window”菜单，分别把“Layers”、“Frames”和“Library”三个面板打开，为了我们将来创建动画服务。在Layers（层）面板中选中Layer 1图层双击鼠标给图层命名为Background，并选中“Share across frames”复选框即共享这个图层，如图9所示。


图9 命名并共享图层

[1] [2] [3] [4] 下一页

　【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】　文章录入：hairan    责任编辑：hairan 　【字体：小 大】
　
  • 上一篇文章：

    • 　
  • 下一篇文章：
    • 最新文章
    相关文章
    Fireworks绘制精致打印机图标
    详解Fireworks丰富的笔触设置面板
    DIY树叶笔触画一棵树
    Fireworks教程：教你打造可爱卡通QQ表情
    Fireworks教程：利用“建立控点法”绘制炫彩
    从FW的色彩面板看设计软件的色彩管理
    从Fireworks看设计软件的色彩使用方式
    Fireworks 创建残破纹理特效文字
    详解Fireworks MX 2004丰富的图像导出功能
    Fireworks制作极光字体效果
    网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
    发表评论：
    　姓　　名： 评 分： 1分 2分 3分 4分 5分
    　评论内容： ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点，与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门