我们在互联网上经常看到各式各样栩栩如生的动画,这些动态显示的图片吸引了浏览者的注意力,也给原本较呆板的页面增加了不少生机。现在一般使用较多的有gif动画和Flash动画,虽然现在Flash动画迅速崛起,但gif动画以其简易的制作、广泛的适用性体现着很高的实用价值,在网页动画中的地位依旧不容动摇。
动画的形成是由连续显示数张图片所造的视觉效果,其原理与卡通影片是一样的。做gif动画的软件很多,比较典型常用的有Ulead的Gif Animator,MicroMedia的Fireworks,Adobe的ImageReady。 gif格式动画的制作需要注意的无非是图片、帧速、效果三个要素。这里我们着重从软件的易用程度、效果实现、大小以及人性化设计等几个方面来具体比较这几个软件。
Gif Animator是一种专门的动画制作程序,利用它可以很轻松方便地制作出自己需要的动画。最新版本5.0又添加了不少的可以即时套用的特效以及优化gif动画图片的选项的,最令人惊喜是目前常见的图像格式均能够被顺利的导入,并能够存成时下最流行的Flash文件。另外Gif Animator还有很多经典的动画效果滤镜,只要输入一张图片,Gif Animator即可自动套用动画模式将其分解成数张图片,制作出动画。 "
ImageReady是基于图层来建立的gif动画的,它能自动划分动画中的元素,并能将Photoshop中的图像用于动画帧。它具有非常强大的web图像处理能力,可以创作富有动感的gif动画,有趣的动态按键,甚至漂亮的网页。所以,ImageReady完全有能力独立完成从制图到动画的过程,它与Photoshop的紧密结合更能显示出它的优势。 "
Fireworks有强大的矢量图制作能力,通过动画符号(symbol)在不同影格的不同设置,造成我们视觉上的变化。影像随着影格播放就形成了动画。Fireworks对创建的任何对象或导入的对象都可以作为动画符号,每一个符号都有自己独立的属性,所以你可以针对不同的对象创建不同的动画形式,例如移动、淡入淡出等。因为该软件制作动画随意性和技巧性比较强,所以你的动画制作过程可以更加自由、富有创意。 "
以上对这几个软件做了大体的介绍,下面我们作一个具体总结比较:
软件Gif Animator FireworksImageReady 易用性 非常简便,提供了动画制作向导,最后的优化效果对比,特别适合新手 稍复杂,适用于习惯MicroMedia公司软件的用户
比较方便,易于修改,适用于熟悉PS用户
个性功能 强大的内置效果器 矢量做图功能强,可以满足喜欢创作和随意发挥的朋友 和PS的超强结合 软件大小10M 18M12M实用功能 可以随时的调用外部图象编辑器,比如PS,FW,PhotoImpact,这里推荐使用PhotoImpact,毕竟是同一个公司出品的,在界面上和功能上都比较方便 强大的矢量作图功能
面板功能尤其强大,多利用FW面板会达到意想不到的效果 强大的图像处理功能
层的灵活运用缺点 以前的版本中gif文件一经保存便很难再修改,新版本中增加了object,类似于层的概念,方便不少。
图像制作和处理功能比较差。 FW在gif动画制作方面的内置效果器不多,所以有些使用Gif Animator很方便达到的效果,使用FW却稍嫌繁琐。
要想利用FW制作出理想的效果,除了需要掌握必须得技术之外,灵感和经验也是不可缺少的。 正因为该软件的主要优势是与PS的紧密结合,故内存占用较大。
尽管该软件自带的不少styles相当不错,但对于gif动画的制作好像没有特别出色的帮助。总体评价 定位于傻瓜式gif动画制作软件,但依然可以作为专业人士的首选 给了设计者更高的自由发挥空间 它与PS的结合是最大的卖点
总的来说:Gif Animator无论从易用度,功能方面都是相当出色的,并且软件不大。
ImageReady和PS的结合是大家有目共睹,记得PS的官方网页上赫然写着“世界标准的图象编辑解决方案”,虽然稍显霸气,可是我们不得不承认PS这个强大后盾确实让ImageReady增色不少。
Fireworks对于专业程度度要求更高,设计者的灵感可以得到更好的发挥,所以使用这个软件创作gif动画会取得更好的效果。同时,Fireworks和MicroMedia公司的另外两个网页设计软件DW和Flash的紧密结合也是很大的优势。
其实,当Ulead GIF Animator,Fireworks和ImageReady都发展到现今版本,基本上可以说它们并没有特别明显的短处,而是各有各的特色和长处。至于到底选择哪个软件比较好,读者可以根据它们的特长加以选择,也可以由自己的喜好、习惯或者使用的情况、用途去选择它们。
【责任编辑:Shiny】
自从Ulead公司1992年发布Ulead Gif Animator 1.0以来,Ulead Gif Animator一直是制作gif动画的工具中功能强大、操作使用最简单的动画制作软件之一。利用这种专门的动画制作程序,大家可以轻松方便地制作出自己需要的动画来。你甚至不需要引入外部图片,也可利用它做一些较为简单的动画,如跑马灯的动画讯息显示;另外如果只输入一张图片,Gif Animator即可自动将其分解成数张图片,制作出该图片特殊显示效果的动画,可说是功能超强,值得推荐。最新版本5.0又添加了不少的可以即时套用的特效,优化gif动画图片的选项的添加和对该过程的控制也更强大了,最令人惊喜是Ulead Gif Animator 5.0的新的导入导出,导入的图像不止是单一的gif,目前常见的图像格式均能够被顺利的导入,影像文件的导入也有所增加 。
启动软件后,会有一个动画向导来引导我们制作gif动画。向导包含两个部分:新建栏和打开栏。在新建栏中包含有“使用动画向导创建图像”和“创建一个空白的动画文档”,“在打开栏中有打开已存在的图像"、“打开已存在的视频文件"和“打开示例文件"。(当然如果你觉得在下一次打开软件的时候,不需要启动向导的导引,你可以选中下面的“下次不在显示”选项)其实使用向导来制作动画是相当方便的(为新手用户考虑得很周到)。
下面我们一起来看看怎样利用动画向导来创建一个动画。
1. 设置动画大小(长,高)。
2. 接着选择动画所需要的图片,同时可以设置延迟时间,和帧的速率(注意对话框左下脚的帧速预览,非常体贴的设计)。
3. 作完了上一步,动画中的各个文件将会出现在下方的帧面板中(Frame Panel)。此时已经可以点击“Preview”标签预览动画了。
4. 一个精彩的动画banner就做好了,注意如果这样直接保存生成的动画文件会比较大,影响在网络上的传播,所以需要对动画进行优化。在菜单中选择File(文件)->Optimization Wizard(优化向导),从而在优化向导中对优化的参数进行设置(一般取默认即可)。使用的颜色数越少文件越小,同时效果也越差。点击“完成”按钮,Gif Animator将对动画文件进行优化。
5. 向导完成后,弹出 gif Optimization 面板(如图f),列出原文件大小、优化后文件大小、节省了多少字节、下载时间等参数,如果对刚才的设置不满意,你可以选 Another Try 来重新设置优化向导,或预览、保存,同时也可以取消优化操作。
制作过程:设置――选择――预览――优化――保存,简单直观不繁琐。
另外Ulead的动画效果滤镜是值得强烈推荐的。像 Gate-3D(3D过渡),Diagonal-Build(倾斜过渡),Sweep Clock(时钟式过渡),Diamond A-F/X(菱形动画)、Iris-F/X(彩虹动画)、Mosaic-F/X(马赛克动画)、Power Off-F/X(关机动画),Flap B-Film(分割倾斜翻页)、Progressive Film(前进式翻页)都是比较经典的。同时值得一提的是Ulead Gif Animator 5.0能够保存成为时下最流行的Flash文件,而且在选择保存成SWF的时候,还可以选择图像的质量是BMP,还是JPEG格式。可以说是相当的体贴。
现在让我们看看号称webPhotoshop的ImageReady。之所以把它称为webPhotoshop,就是表明它不仅有Photoshop强大的图形处理能力,而且还有非常强大的web图像处理能力,还可以创作富有动感的gif动画,有趣的动态按键,甚至漂亮的网页。所以,ImageReady完全有能力独立完成从制图到动画的过程。但它与Photoshop的紧密结合更能显示出它的优势。ImageReady是基于图层来建立的gif动画的,它能自动划分动画中的元素,并能将Photoshop中的图像用于动画帧。
在Photoshop里处理好等会所需要的图片。保存图像,点击Photoshop工具面板最下方跳转按钮直接转换到ImageReady的编辑环境。
在ImageReady的编辑环境,我们主要使用到的是Animation面板,开始时,该面板上默认只有一帧,点击面板下方添加按钮 ,插入新的图片可以新增加一帧。该新加入的帧其实复制前一帧的内容,只要通过层面板改变显示和隐藏的层,就产生了局部发生了变化的帧,这就象我们在复制一本书,一页一页地复制,直到这本书的封底。当完成所有帧的设置,再依次播放这些帧时,动画就产生了。
在每一个帧的下方,都显示着一个数字标记,这是表示在动画完成之后,本帧所代表的画面将迟延几秒。当然,数字越大,表示该画面停留的时间就越长,一般将重要的页面设置比较大的数值,便于引起别人的注意,一些效果过渡的画面可以取较小的值,这样可以增加动感效果。在设置完成以后,可以点击该面板下的播放按钮来对动画进行预览,通过预览,可以发现你不满意的地方,这样再修改,直到你满意为止。
作为在网页上使用的动画,在文件输出前对其进行优化处理是必不可少的,ImageReady在这方面也提供了比较出色的支持。Optimize面板可以让你对你的作品进行压缩优化设置设置,可以将动画输出格式设置为gif格式,尽量减少颜色数量可以很大程度上的减小生成的文件大小。 在完成所有设置后,记得保存好PSD格式的文件,便于以后必要的时候进行改动(其实这点是需要养成的好习惯)。到了最后时刻了,打开File菜单,选择SaveOptimized将文件保存成gif格式的动画文件。
如果你是一个PS高手的话,相信可以利用ImageReady制作出更经典gif动画。
Fireworks4.0是Macromedia公司推出的一款编辑矢量和位图的综合工具。与Dreamweaver和Flash合为网页制作三剑客。在Fireworks中,您可以创建动画广告条,动画标志,动画卡通等多种类型的动画图像.和其他一些动画编辑软件差不多,它是通过动画符号(symbol)在不同影格的不同设置,造成我们视觉上的变化。当影像随着影格播放,就形成了动画.因为该软件制作动画随意性比较大,所以下面用具体的步骤来说明。
1. 步骤一:新建一个文件,定义好长和宽,导入所需图片。
2. 步骤二:选中图片,选择modify菜单Animate->Animated selection,进入动画参数设置。
3. 步骤三:在frame 框中输入10,说明这个动画将由10个帧组成,帧数越多,动画越细腻,但是会加大文件大小。
4. 步骤四:在move框中输入200,这是设定移动的距离像素。
5. 步骤五:在direction中输入45,设定移动的角度,你可以点击工作区上的symbol,用鼠标拖动路径上的第一帧(绿色的点)和最后一帧(红色的点),来改变它们的位置。也可以拖动中间的帧(蓝色的点),改变整条路径(w)。
6. 步骤六:单击ok,Fireworks 将会问你是否添加新的frame(帧)。单击ok,将会自动添加新的帧,步骤同上。
现在图中的矩形上的右下角就会加上一个小小的箭头,表示这是一个动画符号(animation symbol),一条线表示这个符号的移动路径,线上的每一个点表示一帧。用鼠标拖动路径上的第一帧(绿色的点)和最后一帧(红色的点),来改变它们的位置。也可以拖动中间的帧(蓝色的点),改变整条路径。
你可以直接在工作区内预览这个动画。点击画布下方的播放/停止按钮,就可以播放动画。在frames面板上你可以看到每一帧的动画(如果frames面板不可见,选择window -> frames。)。
要在浏览器中看到这个动画,就必须输出成gif动画格式或swf格式。
1) 打开optimize(优化)面板。
2) 选择输出格式设为animated gif(必须的)。
3) 单击菜单上file -> export命令。
4) 保存类型选择 HTML and images就可以输出一个HTML文件。
Fireworks对创建的任何对象或导入的对象都可以作为动画符号。每一个符号都有自己独立的属性。所以你可以针对不同的对象创建不同的动画形式,例如移动,淡入淡出等。
利用Fireworks你的创作可以更自由,更有创意。