聯成電腦-讓你價值連城

文、吳文華老師

很多學員在問Photoshop cs4及cs3版本找不到如何進入ImageReady 工作環境，以至動畫檔(gif)不知如何去完成，其實在cs3版後，只要把動畫面板叫出，以及搭配上圖層面板，最後再利用檔案->儲存為網頁與裝置用，就可輕鬆的完成一個gif 動畫了，以下針對文字動畫來說明製作的方式：

1.首先開一個新檔，大小格式為 400*150 像素

2.接著按視窗->動畫面版，這時螢幕上會出現動畫的面板圖示(如下)

 

 3.再來請用文字工具，在輸入單一文字 聯 (本次我們以聯成電腦四個字來做一個gif 動畫檔)

4.把聯這個圖層複製(直接拉至下方的建立新圖層的按鈕上，或是按右鍵->選擇複製圖層皆可)

5．接著輸入成字

 

6.重覆上面的步驟，一直完成輸入聯成電腦四個字，其圖層顯示為下圖。

    

7．接著刪除背景層，讓文字產生透明的背景。

8．這時順便注意一下動畫面板，只會出現一張影格。

 

9.按下動畫面板上的複製選取的影格三下(因為有四個圖層)

 

10．點取第一個動畫影格，把圖層關閉，只打開第一個(聯這個圖層，如下圖)

 

11．點取第二個動畫影格，把圖層關閉，只打開第二個(聯成這個圖層，如下圖)

 

12．點取第三個動畫影格，把圖層關閉，打開第三個(聯成電這個圖層，如下圖)

 

13．點第四動畫影格，把圖層關閉，打開第四個(聯成電拷類這個圖層，如下圖)

 

14．選取所有影格(點第一個影格，shift 按著點第四個影格)，按右鍵，選擇適當的播放秒數(這裡我們選擇0.5秒)

 

15．附帶一點，如果想要有透明的動畫效果，那麼可以點第四個影格後，按下補間動畫影格的按鈕，選擇要增加的影格數(內定為5格，這裡我們改為3 格)，如下圖：

 

16．這時會在動畫面板上自動再增加3 個影格出來，而且這三個影格的內容會有不同透明度的變化。(如下圖)

 

17. 選擇檔案功能表上的->儲存為網頁與裝置用，在右方的選項上選擇 gif(如下圖)

 

18．按下儲存按鈕，若是儲存位置選擇在桌面上的話，會出現下圖的警告畫面，因為檔名和路徑有中文的字樣，(因為我們存在桌面上，而在網頁設計的應用上路徑及檔名儘量不要有中文的文字，以免到時無法使用)

 

19．以上為文字動畫的介紹，若要用許多張圖片來做成gif 檔的話，只要把這些圖片檔放在不同的圖層上，再利用上述從第10 個步驟做起也可以完成。

20．若是覺得把圖片拷貝在不同的圖層上的方式太麻煩的話，也可以利用檔案功能表上的->指令碼->將檔案載入堆疊=>選擇要做動畫的圖片，按下確定

21．接著按下動畫面板選項鈕->選擇從圖層製作影格，再來從第14 個步驟開始做起，也可快速的完成動化製作了。