三個(gè)做Gif 動(dòng)畫(huà)軟件比較

編輯：山間溪流

　　我們?cè)诨ヂ?lián)網(wǎng)上經(jīng)?？吹礁魇礁鳂予蜩蛉缟膭?dòng)畫(huà)，這些動(dòng)態(tài)顯示的圖片吸引了瀏覽者的注意力，也給原本較呆板的頁(yè)面增加了不少生機(jī)?，F(xiàn)在一般使用較多的有g(shù)if動(dòng)畫(huà)和Flash動(dòng)畫(huà)，雖然現(xiàn)在Flash動(dòng)畫(huà)迅速崛起，但gif動(dòng)畫(huà)以其簡(jiǎn)易的制作、廣泛的適用性體現(xiàn)著很高的實(shí)用價(jià)值，在網(wǎng)頁(yè)動(dòng)畫(huà)中的地位依舊不容動(dòng)搖。

　　動(dòng)畫(huà)的形成是由連續(xù)顯示數(shù)張圖片所造的視覺(jué)效果，其原理與卡通影片是一樣的。做gif動(dòng)畫(huà)的軟件很多，比較典型常用的有Ulead的Gif
Animator，MicroMedia的Fireworks，Adobe的ImageReady。
　　gif格式動(dòng)畫(huà)的制作需要注意的無(wú)非是圖片、幀速、效果三個(gè)要素。這里我們著重從軟件的易用程度、效果實(shí)現(xiàn)、大小以及人性化設(shè)計(jì)等幾個(gè)方面來(lái)具體比較這幾個(gè)軟件。

     Gif Animator是一種專(zhuān)門(mén)的動(dòng)畫(huà)制作程序，利用它可以很輕松方便地制作出自己需要的動(dòng)畫(huà)。最新版本5.0又添加了不少的可以即時(shí)套用的特效以及優(yōu)化gif動(dòng)畫(huà)圖片的選項(xiàng)的，最令人驚喜是目前常見(jiàn)的圖像格式均能夠被順利的導(dǎo)入，并能夠存成時(shí)下最流行的Flash文件。另外Gif Animator還有很多經(jīng)典的動(dòng)畫(huà)效果濾鏡，只要輸入一張圖片，Gif Animator即可自動(dòng)套用動(dòng)畫(huà)模式將其分解成數(shù)張圖片，制作出動(dòng)畫(huà)。
　　
     ImageReady是基于圖層來(lái)建立的gif動(dòng)畫(huà)的，它能自動(dòng)劃分動(dòng)畫(huà)中的元素，并能將Photoshop中的圖像用于動(dòng)畫(huà)幀。它具有非常強(qiáng)大的web圖像處理能力，可以創(chuàng)作富有動(dòng)感的gif動(dòng)畫(huà)，有趣的動(dòng)態(tài)按鍵，甚至漂亮的網(wǎng)頁(yè)。所以，ImageReady完全有能力獨(dú)立完成從制圖到動(dòng)畫(huà)的過(guò)程，它與Photoshop的緊密結(jié)合更能顯示出它的優(yōu)勢(shì)。
　
     Fireworks有強(qiáng)大的矢量圖制作能力，通過(guò)動(dòng)畫(huà)符號(hào)(symbol)在不同影格的不同設(shè)置，造成我們視覺(jué)上的變化。影像隨著影格播放就形成了動(dòng)畫(huà)。Fireworks對(duì)創(chuàng)建的任何對(duì)象或?qū)氲膶?duì)象都可以作為動(dòng)畫(huà)符號(hào)，每一個(gè)符號(hào)都有自己獨(dú)立的屬性，所以你可以針對(duì)不同的對(duì)象創(chuàng)建不同的動(dòng)畫(huà)形式，例如移動(dòng)、淡入淡出等。因?yàn)樵撥浖谱鲃?dòng)畫(huà)隨意性和技巧性比較強(qiáng)，所以你的動(dòng)畫(huà)制作過(guò)程可以更加自由、富有創(chuàng)意。

     總的來(lái)說(shuō)：Gif Animator無(wú)論從易用度，功能方面都是相當(dāng)出色的，并且軟件不大。

　　ImageReady和PS的結(jié)合是大家有目共睹，記得PS的官方網(wǎng)頁(yè)上赫然寫(xiě)著“世界標(biāo)準(zhǔn)的圖象編輯解決方案”，雖然稍顯霸氣，可是我們不得不承認(rèn)PS這個(gè)強(qiáng)大后盾確實(shí)讓ImageReady增色不少。

　　Fireworks對(duì)于專(zhuān)業(yè)程度度要求更高，設(shè)計(jì)者的靈感可以得到更好的發(fā)揮，所以使用這個(gè)軟件創(chuàng)作gif動(dòng)畫(huà)會(huì)取得更好的效果。同時(shí)，F(xiàn)ireworks和MicroMedia公司的另外兩個(gè)網(wǎng)頁(yè)設(shè)計(jì)軟件DW和Flash的緊密結(jié)合也是很大的優(yōu)勢(shì)。

　　其實(shí)，當(dāng)Ulead GIF Animator，fireworks和ImageReady都發(fā)展到現(xiàn)今版本，基本上可以說(shuō)它們并沒(méi)有特別明顯的短處，而是各有各的特色和長(zhǎng)處。至于到底選擇哪個(gè)軟件比較好，讀者可以根據(jù)它們的特長(zhǎng)加以選擇，也可以由自己的喜好、習(xí)慣或者使用的情況、用途去選擇它們。

　   一：Ulead Gif Animator5.0

     自從Ulead公司1992年發(fā)布Ulead Gif Animator 1.0以來(lái)，Ulead Gif Animator一直是制作gif動(dòng)畫(huà)的工具中功能強(qiáng)大、操作使用最簡(jiǎn)單的動(dòng)畫(huà)制作軟件之一。利用這種專(zhuān)門(mén)的動(dòng)畫(huà)制作程序，大家可以輕松方便地制作出自己需要的動(dòng)畫(huà)來(lái)。你甚至不需要引入外部圖片，也可利用它做一些較為簡(jiǎn)單的動(dòng)畫(huà)，如跑馬燈的動(dòng)畫(huà)訊息顯示；另外如果只輸入一張圖片，Gif Animator即可自動(dòng)將其分解成數(shù)張圖片，制作出該圖片特殊顯示效果的動(dòng)畫(huà)，可說(shuō)是功能超強(qiáng)，值得推薦。最新版本5.0又添加了不少的可以即時(shí)套用的特效，優(yōu)化gif動(dòng)畫(huà)圖片的選項(xiàng)的添加和對(duì)該過(guò)程的控制也更強(qiáng)大了，最令人驚喜是Ulead Gif Animator 5.0的新的導(dǎo)入導(dǎo)出，導(dǎo)入的圖像不止是單一的gif，目前常見(jiàn)的圖像格式均能夠被順利的導(dǎo)入，影像文件的導(dǎo)入也有所增加 。
　　啟動(dòng)軟件后，會(huì)有一個(gè)動(dòng)畫(huà)向?qū)?lái)引導(dǎo)我們制作gif動(dòng)畫(huà)。向?qū)О瑑蓚€(gè)部分：新建欄和打開(kāi)欄。在新建欄中包含有“使用動(dòng)畫(huà)向?qū)?chuàng)建圖像”和“創(chuàng)建一個(gè)空白的動(dòng)畫(huà)文檔”，“在打開(kāi)欄中有打開(kāi)已存在的圖像"、“打開(kāi)已存在的視頻文件"和“打開(kāi)示例文件"。（當(dāng)然如果你覺(jué)得在下一次打開(kāi)軟件的時(shí)候，不需要啟動(dòng)向?qū)У膶?dǎo)引，你可以選中下面的“下次不在顯示”選項(xiàng)）其實(shí)使用向?qū)?lái)制作動(dòng)畫(huà)是相當(dāng)方便的（為新手用戶考慮得很周到）。
　　下面我們一起來(lái)看看怎樣利用動(dòng)畫(huà)向?qū)?lái)創(chuàng)建一個(gè)動(dòng)畫(huà)。
　　1. 設(shè)置動(dòng)畫(huà)大?。ㄩL(zhǎng)，高）。
　　2. 接著選擇動(dòng)畫(huà)所需要的圖片，同時(shí)可以設(shè)置延遲時(shí)間，和幀的速率（注意對(duì)話框左下腳的幀速預(yù)覽，非常體貼的設(shè)計(jì)）。
　　3. 作完了上一步，動(dòng)畫(huà)中的各個(gè)文件將會(huì)出現(xiàn)在下方的幀面板中（Frame Panel）。此時(shí)已經(jīng)可以點(diǎn)擊“Preview”標(biāo)簽預(yù)覽動(dòng)畫(huà)了。
　　4. 一個(gè)精彩的動(dòng)畫(huà)banner就做好了，注意如果這樣直接保存生成的動(dòng)畫(huà)文件會(huì)比較大，影響在網(wǎng)絡(luò)上的傳播，所以需要對(duì)動(dòng)畫(huà)進(jìn)行優(yōu)化。在菜單中選擇File（文件）－>Optimization Wizard（優(yōu)化向?qū)В瑥亩趦?yōu)化向?qū)е袑?duì)優(yōu)化的參數(shù)進(jìn)行設(shè)置（一般取默認(rèn)即可）。使用的顏色數(shù)越少文件越小，同時(shí)效果也越差。點(diǎn)擊“完成”按鈕，Gif Animator將對(duì)動(dòng)畫(huà)文件進(jìn)行優(yōu)化。
　　5. 向?qū)瓿珊?，彈?gif Optimization 面板（如圖f），列出原文件大小、優(yōu)化后文件大小、節(jié)省了多少字節(jié)、下載時(shí)間等參數(shù)，如果對(duì)剛才的設(shè)置不滿意，你可以選 Another Try 來(lái)重新設(shè)置優(yōu)化向?qū)В蝾A(yù)覽、保存，同時(shí)也可以取消優(yōu)化操作。
　　制作過(guò)程:設(shè)置――選擇――預(yù)覽――優(yōu)化――保存，簡(jiǎn)單直觀不繁瑣。
　　另外Ulead的動(dòng)畫(huà)效果濾鏡是值得強(qiáng)烈推薦的。像 Gate-3D（3D過(guò)渡），Diagonal-Build（傾斜過(guò)渡），Sweep Clock（時(shí)鐘式過(guò)渡），Diamond A-F/X（菱形動(dòng)畫(huà)）、Iris-F/X（彩虹動(dòng)畫(huà)）、Mosaic-F/X（馬賽克動(dòng)畫(huà)）、Power Off-F/X（關(guān)機(jī)動(dòng)畫(huà)），F(xiàn)lap B-Film（分割傾斜翻頁(yè)）、Progressive Film（前進(jìn)式翻頁(yè)）都是比較經(jīng)典的。同時(shí)值得一提的是Ulead Gif Animator 5.0能夠保存成為時(shí)下最流行的Flash文件，而且在選擇保存成SWF的時(shí)候，還可以選擇圖像的質(zhì)量是BMP，還是JPEG格式?？梢哉f(shuō)是相當(dāng)?shù)捏w貼。

   二：Fireworks4.0

     Fireworks4.0是Macromedia公司推出的一款編輯矢量和位圖的綜合工具。與Dreamweaver和Flash合為網(wǎng)頁(yè)制作三劍客。在Fireworks中,您可以創(chuàng)建動(dòng)畫(huà)廣告條,動(dòng)畫(huà)標(biāo)志,動(dòng)畫(huà)卡通等多種類(lèi)型的動(dòng)畫(huà)圖像.和其他一些動(dòng)畫(huà)編輯軟件差不多，它是通過(guò)動(dòng)畫(huà)符號(hào)(symbol)在不同影格的不同設(shè)置，造成我們視覺(jué)上的變化。當(dāng)影像隨著影格播放,就形成了動(dòng)畫(huà).因?yàn)樵撥浖谱鲃?dòng)畫(huà)隨意性比較大，所以下面用具體的步驟來(lái)說(shuō)明。
　　1. 步驟一：新建一個(gè)文件，定義好長(zhǎng)和寬，導(dǎo)入所需圖片。
　　2. 步驟二：選中圖片，選擇modify菜單Animate->Animated selection，進(jìn)入動(dòng)畫(huà)參數(shù)設(shè)置。
　　3. 步驟三：在frame 框中輸入10，說(shuō)明這個(gè)動(dòng)畫(huà)將由10個(gè)幀組成，幀數(shù)越多，動(dòng)畫(huà)越細(xì)膩，但是會(huì)加大文件大小。
　　4. 步驟四：在move框中輸入200,這是設(shè)定移動(dòng)的距離像素。
　　5. 步驟五：在direction中輸入45,設(shè)定移動(dòng)的角度，你可以點(diǎn)擊工作區(qū)上的symbol，用鼠標(biāo)拖動(dòng)路徑上的第一幀（綠色的點(diǎn)）和最后一幀（紅色的點(diǎn)），來(lái)改變它們的位置。也可以拖動(dòng)中間的幀（藍(lán)色的點(diǎn)），改變整條路徑(w)。
　　6. 步驟六：?jiǎn)螕鬿k,Fireworks 將會(huì)問(wèn)你是否添加新的frame（幀）。單擊ok，將會(huì)自動(dòng)添加新的幀，步驟同上。
　　現(xiàn)在圖中的矩形上的右下角就會(huì)加上一個(gè)小小的箭頭，表示這是一個(gè)動(dòng)畫(huà)符號(hào)（animation symbol),一條線表示這個(gè)符號(hào)的移動(dòng)路徑，線上的每一個(gè)點(diǎn)表示一幀。用鼠標(biāo)拖動(dòng)路徑上的第一幀（綠色的點(diǎn)）和最后一幀（紅色的點(diǎn)），來(lái)改變它們的位置。也可以拖動(dòng)中間的幀（藍(lán)色的點(diǎn)），改變整條路徑。
　　你可以直接在工作區(qū)內(nèi)預(yù)覽這個(gè)動(dòng)畫(huà)。點(diǎn)擊畫(huà)布下方的播放/停止按鈕，就可以播放動(dòng)畫(huà)。在frames面板上你可以看到每一幀的動(dòng)畫(huà)（如果frames面板不可見(jiàn)，選擇window -> frames。）。
　　要在瀏覽器中看到這個(gè)動(dòng)畫(huà)，就必須輸出成gif動(dòng)畫(huà)格式或swf格式。
　　1) 打開(kāi)optimize(優(yōu)化）面板。
　　2) 選擇輸出格式設(shè)為animated gif（必須的）。
　　3) 單擊菜單上file -> export命令。
　　4) 保存類(lèi)型選擇 html and images就可以輸出一個(gè)html文件。
　　Fireworks對(duì)創(chuàng)建的任何對(duì)象或?qū)氲膶?duì)象都可以作為動(dòng)畫(huà)符號(hào)。每一個(gè)符號(hào)都有自己獨(dú)立的屬性。所以你可以針對(duì)不同的對(duì)象創(chuàng)建不同的動(dòng)畫(huà)形式,例如移動(dòng),淡入淡出等。
　　利用Fireworks你的創(chuàng)作可以更自由，更有創(chuàng)意。

   三：ImageReady

     現(xiàn)在讓我們看看號(hào)稱webPhotoshop的ImageReady。之所以把它稱為webPhotoshop,就是表明它不僅有Photoshop強(qiáng)大的圖形處理能力，而且還有非常強(qiáng)大的web圖像處理能力，還可以創(chuàng)作富有動(dòng)感的gif動(dòng)畫(huà)，有趣的動(dòng)態(tài)按鍵，甚至漂亮的網(wǎng)頁(yè)。所以，ImageReady完全有能力獨(dú)立完成從制圖到動(dòng)畫(huà)的過(guò)程。但它與Photoshop的緊密結(jié)合更能顯示出它的優(yōu)勢(shì)。ImageReady是基于圖層來(lái)建立的gif動(dòng)畫(huà)的，它能自動(dòng)劃分動(dòng)畫(huà)中的元素，并能將Photoshop中的圖像用于動(dòng)畫(huà)幀。
　　在PhotoShop里處理好等會(huì)所需要的圖片。保存圖像，點(diǎn)擊PhotoShop工具面板最下方跳轉(zhuǎn)按鈕直接轉(zhuǎn)換到ImageReady的編輯環(huán)境。
　　在ImageReady的編輯環(huán)境，我們主要使用到的是Animation面板，開(kāi)始時(shí)，該面板上默認(rèn)只有一幀，點(diǎn)擊面板下方添加按鈕 ，插入新的圖片可以新增加一幀。該新加入的幀其實(shí)復(fù)制前一幀的內(nèi)容，只要通過(guò)層面板改變顯示和隱藏的層，就產(chǎn)生了局部發(fā)生了變化的幀，這就象我們?cè)趶?fù)制一本書(shū)，一頁(yè)一頁(yè)地復(fù)制，直到這本書(shū)的封底。當(dāng)完成所有幀的設(shè)置，再依次播放這些幀時(shí)，動(dòng)畫(huà)就產(chǎn)生了。
　　在每一個(gè)幀的下方，都顯示著一個(gè)數(shù)字標(biāo)記，這是表示在動(dòng)畫(huà)完成之后，本幀所代表的畫(huà)面將遲延幾秒。當(dāng)然，數(shù)字越大，表示該畫(huà)面停留的時(shí)間就越長(zhǎng)，一般將重要的頁(yè)面設(shè)置比較大的數(shù)值，便于引起別人的注意，一些效果過(guò)渡的畫(huà)面可以取較小的值，這樣可以增加動(dòng)感效果。在設(shè)置完成以后，可以點(diǎn)擊該面板下的播放按鈕來(lái)對(duì)動(dòng)畫(huà)進(jìn)行預(yù)覽，通過(guò)預(yù)覽，可以發(fā)現(xiàn)你不滿意的地方，這樣再修改，直到你滿意為止。
　　作為在網(wǎng)頁(yè)上使用的動(dòng)畫(huà)，在文件輸出前對(duì)其進(jìn)行優(yōu)化處理是必不可少的，ImageReady在這方面也提供了比較出色的支持。Optimize面板可以讓你對(duì)你的作品進(jìn)行壓縮優(yōu)化設(shè)置設(shè)置，可以將動(dòng)畫(huà)輸出格式設(shè)置為gif格式，盡量減少顏色數(shù)量可以很大程度上的減小生成的文件大小。 在完成所有設(shè)置后，記得保存好PSD格式的文件，便于以后必要的時(shí)候進(jìn)行改動(dòng)（其實(shí)這點(diǎn)是需要養(yǎng)成的好習(xí)慣）。到了最后時(shí)刻了，打開(kāi)File菜單，選擇SaveOptimized將文件保存成gif格式的動(dòng)畫(huà)文件。
　　如果你是一個(gè)PS高手的話，相信可以利用ImageReady制作出更經(jīng)典gif動(dòng)畫(huà)。（作者：木木樹(shù)）

編者說(shuō)明：

　　Photoshop CS3相比其它版本在功能上有了很多改進(jìn)，cs3版本已經(jīng)沒(méi)有了以往的Image Ready附件，在面板的左下方也找不到那個(gè)由photoshop到動(dòng)畫(huà)的切換圖標(biāo)了。在cs3中打開(kāi)動(dòng)畫(huà)面板的方法請(qǐng)參閱以下文章：《在PS CS3中如何打開(kāi)和編輯GIF動(dòng)畫(huà)》