文、吳文華老師

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

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

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

Photoshop cs4 影格動畫(gif 檔)製作方式001.jpg  Photoshop cs4 影格動畫(gif 檔)製作方式002.jpg

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

Photoshop cs4 影格動畫(gif 檔)製作方式003.jpg

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

5.接著輸入

 Photoshop cs4 影格動畫(gif 檔)製作方式004.jpg

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

 Photoshop cs4 影格動畫(gif 檔)製作方式005.jpg   

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

Photoshop cs4 
影格動畫(gif 檔)製作方式006.jpg

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

 Photoshop cs4 影格動畫(gif 檔)製作方式007.jpg

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

 Photoshop cs4 影格動畫(gif 檔)製作方式008.jpg

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

 Photoshop cs4 影格動畫(gif 檔)製作方式009.jpg

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

 Photoshop cs4 影格動畫(gif 檔)製作方式010.jpg

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

 Photoshop cs4 影格動畫(gif 檔)製作方式011.jpg

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

 Photoshop cs4 影格動畫(gif 檔)製作方式012.jpg

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

 Photoshop cs4 影格動畫(gif 檔)製作方式013.jpg

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

 Photoshop cs4 影格動畫(gif 檔)製作方式014.jpg

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

 Photoshop cs4 影格動畫(gif 檔)製作方式015.jpg

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

 Photoshop cs4 影格動畫(gif 檔)製作方式016.jpg

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

 Photoshop cs4 影格動畫(gif 檔)製作方式017.jpg

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

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

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

 

arrow
arrow

    聯成電腦 發表在 痞客邦 留言(1) 人氣()