|
首页 | 名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash |
|
Banner,一般翻译为旗帜广告、横幅广告等。Banner是网站用来作为盈利或者是发布一些重要的信息的工具。Banner在设计上应该要做到制作美观、方便点击、与网页协调和整体构成合理。
完成效果如下:
Banner制作详细过程
(1)首先我们新建一个大小为468×60的文件,并设置画布颜色为黑色,如图1所示。
(2)然后我们导入一个要进行变色效果的位图文件,如图2所示。当然我们同样可以使用绘图工具绘制这个图像,这里是为了方便讲解选用外部图像的。
(4)选中其中的一个图片如左边的紫色图片,按快捷键F8或者右键在弹出菜单中选择Convert to Symbol预备将图像转变为符号。在弹出的对话框内为符号命名并选择动画符号(Animation),如图5所示。
(5)点击“OK”之后会弹出动画设置的对话框,如图6所示。我们暂时对它不做设置。
(7)我们再在Banner的左边加些图片并做适当调整使Banner更加生动,如图8所示。
(8)接着我们点击“Window”菜单,分别把“Layers”、“Frames”和“Library”三个面板打开,为了我们将来创建动画服务。在Layers(层)面板中选中Layer 1图层双击鼠标给图层命名为Background,并选中“Share across frames”复选框即共享这个图层,如图9所示。
(9)单击层面板右下角的按钮新建一个图层。然后将如图10所示的Library(库)面板中的Symbol 1拖到画布中去,并放置到Banner的最右角,如图11所示。同时记住它属性面板中的位置信息(X:282,Y:0)。
(11)单击OK,这时弹出图13所示的对话框,询问是否要自动添加帧。
(12)选择OK这时候我们发现帧面板中出现了10个帧,如图14所示。
(13)接着使用同样方法新建一个图层3,并将Symbol 2拖到场画布中,符号的位置应当Symbol 1的位置相同,即都为X:282,Y:0。点击 “Modify”菜单,选择“Animation”>>“Settings... ”,在弹出的对话框设置动画同样是10帧,但是将透明度由0变到100,如图15所示。
(14)点击“OK”即可。我们这时候发现第一帧的层面板如图16所示。图像效果如图17所示,一种渐变效果已经形成了。
(15)下面我们就来制作第二个渐变效果了。也就是由红色变成绿色的了。在帧面板中选择第10帧,这时我们发现画布右边的图像是红色的,如图18所示。
(16)单击帧面板右上角的按钮,在弹出菜单中选择“Duplicate Frame”,这时弹出了复制帧对话框,我们在其中选择After current frame单选框将复制的帧放置到当前帧之后,如图19所示。
(17)选择“OK”回到画布,出现第11帧的图像,这时后我们发现画布变为背景图了,如图20所示。
(18)此时在层面板中选中Layer 2,将绿色的Symbol 3拖到画布中,在属性面板中设置与前面一样的XY坐标。点击“Modify”菜单,选择“Animation”>>“Settings... ”,在弹出的对话框设置动画同样是10帧,这时同样会弹出图25所示的提示对话框。选择“OK”这样新的帧就被添加到了帧面板之上了,如图21所示。
(19)接着选择Layer 3,将红色的Symbol 2拖到画布中,在属性面板中设置与前面一样的XY坐标。点击“Modify”菜单,选择“Animation”>>“Settings... ”,设置其不透明度由100到0,帧数为10,如图22所示,使得红色逐渐淡去,绿色显示出来。
(20)接着便是由绿色再变回紫色的了。同上,在帧面板中选中20帧,再添加一帧,选中Layer 3,将紫色符号拖到画布中,设置透明由0到100,选中Layer 2,拖入绿色符号,透明度不变,帧数也是10帧。点击播放按钮浏览,发现速度快了一些,按住Shift键选择帧面板上的所有帧,双击鼠标,设置帧延时为15/100 sec即可。下面来为Banner添加文字效果。 (21)在帧面板中选择第1帧,然后在层面板中选择Layer 3,接着新建一个Layer 4,选择工具箱上的文本工具为图像添加“天极软件网”文字,如图23所示。
(22)选中文本然后按F8键将文本转变为符号,在符号属性中为其命名为nuoli,选择转变为动画符号,如图24所示。由于要将文本保持静止状态5帧,所以在设置动画时和前面不变色的图片符号相同,只输入帧数就可以了,其他的设置不变,如图25。
(23)同理添加诺利网的网址“http://soft.yesky.com/”这个文本,并将其转变为符号,设置动画属性如图26所示。选择“OK”回到画布中,如图27所示。其中绿色点为动画起始位置,红色点为终止位置。然后在帧面板中选中第5帧,双击后面的数字,将帧速设为200。
(24)下面来实现一个“动感模糊”效果。选中第6帧,这时我们发现所做的前5帧动画看不到了。点击工具箱上的矩形工具绘制一个矩形,将矩形填充设为Folds填充,如图28所示。
(25)在折叠填充浮动框中设置第一个颜色块为白色,第二个颜色块为黑色,如图29所示,最终得到图30所示的图像效果。
(26)使用鼠标调整折叠填充的控制柄,得到图31所示的图像效果。
(27)选中这个矩形,点击属性面板上的按钮,在弹出菜单中选择“Eye Candy 4000LE”>>“Motion Trail”,设置Motion Trail属性如图32所示。
(28)再一次使用Motion Trail特效,不过将方向设为180度,其他的设置和上面相同,得到图33所示的图像效果。
(29)然后打开库面板,将“天极软件网”字样的符号拖到场景中,右击鼠标选择“Symbol”>>“Break Apart”,断开和库的联系,然后选中文字,点击属性面板上的按钮,在弹出菜单中选择“Blur”>>“Gaussian Blur”对其进行高斯模糊,模糊度设置为2.0就可以了,然后将处理好的矩形放到模糊文字的上面,适当调节透明度,这样两个文字过渡时候的动感模糊效果就实现了,如图34所示效果。
(30)选中第7帧,输入文字“真诚为您服务”,转化为动画符号,也设置5帧的动画,设置不同的动画属性,如图47所示。得到图35所示的图像。
(31)选中第12帧,输入文字“设计在线”,复制一下,然后在14帧粘贴,然后在16帧也粘贴,并将该帧帧速改为100,这样文字就有闪烁的效果了,如图37所示。
(32)选择第17帧,将文字复制一个,选中后再用Motion Blur特效,设置其属性如图38所示。然后按F8将其转化为动画符号,设置其属性如图39所示。
(33)选择“OK”回到工作区,得到第17帧图像如图40所示。然后选择第30帧,设置帧延时为200/100 second即可。
(34)回到图像第1帧,点击下面工作区状态栏的图标就可以预览图像效果了。适当进行调整然后就可以选择导出向导,在导出向导对话框中选择导出类型为GIF动画,如图41所示,这样就可以将图像导出为GIF动画了。
小结:在上面的这个例子中,我们主要学会了渐变颜色动画的制作。在这个Banner的制作过程中,我们通过使用层面板、帧面板和库面板进一步认识Fireworks MX 2004中这些面板的使用方式。 返回类别: Fireworks教程 上一教程: 在fireworks中建立自己的Command 下一教程: 巧用Fireworks设计印章 您可以阅读与"Fireworks轻松绘制banner广告动画"相关的教程: · Fireworks轻松制作眨眼睛动画 · Fireworks制作GIF动画Banner · Fireworks绘制愚人节Gif动画小贺卡 · Fireworks绘制飞舞蝴蝶动画 · Fireworks 绘制立体文字图标 |
快精灵印艺坊 版权所有 | 首页会员中心在线印刷在线编辑付款方式索取样品设计指南连锁门店 |