close

  文/董亮


  如果你的電腦中安裝著5.5以上版本的Photoshop,你一定會發現,還有另一個叫做ImageReady的軟件隨同Photoshop一起被安裝到瞭你的計算機中。那麼,你知道它是用來做什麼的嗎?


  ImageReady是一款專門用來編輯動畫的軟件,它彌補瞭Photoshop在編輯動畫以及網頁素材方面的不足。ImageReady中包含瞭大量制作網頁圖像和動畫的工具,甚至可以產生部分
html代碼,可以說是功能強大。下面我們就來學習一下它的兩項基本動畫處理功能。


  在正式開始之前讓我們先來看一段搞笑動畫“彈指神功”(www.haha365.com/default.asp﹖classid=4)。將圖片的六種變化一一抓下保存為JPEG格式圖片(小編註:抓圖的方法本報以前有過很多介紹,這裡不再贅述。),將大小均調整為244×277像素,依次命名為t1.jpgt6.jpg(如圖1)。



圖1準備好動畫所需要的6張圖片


  一、制作GIF動畫


  動畫實際上就是一系列連續出現的靜態圖像,每一幅靜態圖像稱為一幀,當這些幀連續、快速地顯示時就會形成動畫效果。用ImageReady編輯動畫其實也就是對幀的操作。


  1、創建新幀


  打開ImageReady,新建一個244×277像素大小的名為“彈指神功”的新文件,在“窗口”菜單中點擊“顯示圖層”以及“顯示動畫”命令,使圖層面板與動畫面板出現在軟件界面中。打開t1.jpg,按Ctrl+A將圖片內容全部選中,復制粘貼到新圖片中,這是動畫的第一幀,也是程序默認的圖片正常狀態。


  單擊動畫面板下方的“復制當前幀”按鈕,建立第2幀。同樣將t2.jpg的內容全選復制到新文件“彈指神功”中。


  接下來用上述辦法將t3.jpg、t4.jpg、t5.jpg、t6.jpg分別粘貼到各自的新幀中,一共建立6幀。


  2、圖層與幀的配合


  在圖層面板中選中“背景”層,按圖層面板右下角的“刪除圖層”按鈕(小垃圾桶符號),將背景層刪除。


  單擊選中動畫面板中的第1幀,在圖層面板中隱藏圖層2、3、4、5、6(就是將這些圖層左邊的“小眼睛”點掉)。


  然後單擊選中動畫面板中的第2幀,在圖層面板中隱藏圖層1、3、4、5、6,使之僅顯示圖層2的內容。


  同理,再分別將第3到第6幀中的其他圖層隱藏,使每一幀僅顯示與其關的圖層內容。處理結果如圖2所示。


  3、預覽與存儲


  在動畫面板每一幀的下部單擊“秒”字右邊的小倒三角,選擇希望每一幀顯示的時間(0240秒,你可以自己調整)。最後,單擊動畫面板中的播放按鈕,就可以直接測試動畫效果瞭。如果你還滿意的話,可以在“文件”菜單中選擇“存儲優化結果”,將我們的成果保存為“彈指神功.gif”,就完成制作瞭。


  順便提一句,你也可以用ImageReady打開任意一幅GIF動畫圖片,對每一幀進行編輯修改。我感覺與另一著名動畫編輯軟件FireWork比較起來,ImageReady的界面更加友好,操作更加簡便。


  二、制作翻轉圖片


  在網頁中,經常遇到鼠標事件導致的不同動態效果的情況,比如最常見的鼠標移到圖片上、單擊以及移開時,圖片內容發生變化。如果用網頁html代碼編輯這種效果是很麻煩的,而用ImageReady就簡單多瞭。


  制作這種圖片翻轉效果的方法與上面制作動畫的方法基本差不多,惟一不同的是我們這次不是打開動畫面板來編輯各個幀,而是打開翻轉面板來編輯各個不同的鼠標狀態。


  使用“窗口→顯示翻轉”命令打開翻轉面板,點擊面板下方的“創建新翻轉狀態”按鈕可以創建不同的翻轉狀態,這裡一共可以有6種狀態,分別是:正常、Over、Down、Click、Out和Up。其他的步驟就不多說瞭,同樣是建立各個狀態與各圖層之間的對應關系,最後選擇“將優化結果存儲為...”,保存為HTML格式即可。



圖2使各幀僅顯示相關圖層內容


  關於ImageReady的使用,今天我就向大傢介紹到這裡,當然這隻能算是一瞥,更多功能還有待大傢繼續探索。






arrow
arrow
    全站熱搜
    創作者介紹
    創作者 itest8 的頭像
    itest8

    itest8的部落格

    itest8 發表在 痞客邦 留言(0) 人氣()