2014-05-16

簡易修圖、影像處理入門 - 動態圖篇

網路上常常可以看到像這樣很有趣的動態圖,我們要如何自製動態圖呢?



gif 格式可以製作動態圖,是一種網路上很常見、而且相當簡單的動畫圖檔。接下來就跟大家介紹,如何運用 Pixlr Editor Pixlr Express gifmake 這三個完全免費的線上工具,自製有趣的動態圖。

自製動態圖
下方就是一個動態圖,它其實是由多張一般靜態圖組合而成,以固定的時間間距變換,產生動畫的效果。製作動態圖的重點在腳本的設計,一張一張固定的圖片組合起來,就變成動態(活動)的了,和電影及動畫的原理是完全相同的。

1、開啟 Pixlr Editor 製作第一張圖,點選「創建一張新圖片」。

2、設定檔名 NewGif、寬度 300、高度 80,按「確定」。稍微設定大一點,讓我們有空間放要變化的圖。

3、設置底色,點選下方「調色盤」設定您喜歡的底色,並用「油漆桶工具」點一下背景,加上底色。

4、加上文字,點選「文字工具」,加入文字、選擇字體、大小、文字顏色,用「移動工具」調整到合適的位置。

5、設計文字陰影,在「圖層」視窗中的文字圖層上按滑鼠右鍵,選擇「拷貝圖層」,多複製一個文字圖層出來。

6、點選在下方的文字圖層,先用「文字工具」改變文字顏色,選擇稍淡一點的顏色,再用「移動工具」讓文字稍微錯開,產生文字陰影的效果。

7、貼上要變動的圖案,點選「圖層」-->「打開圖像為圖層」,加入一個綠蘋果,用「移動工具」移至合適的位置。再加入一個紅蘋果,放在相同的位置。

8、現在的圖層包含一個背景、2個文字、2個蘋果圖層,先將紅蘋果圖層的勾勾去掉,只顯示綠蘋果,點選「文件」-->「保存」,存成 NewGif-1.jpg ,當第一張圖。

9、再將紅蘋果圖層勾回來,顯示紅蘋果,點選「文件」-->「保存」,存成 NewGif-2.jpg ,當第二張圖。

10、再將紅、綠蘋果圖層的勾勾都去掉,讓蘋果都不見,點選「文件」-->「保存」,存成 NewGif-3.jpg ,當第三張圖。
11、接下來到 Pixlr Express 開啟 NewGif-3.jpg 加上其他要變動的圖案,先點選「Type」,選擇喜歡的字型,輸入「SALE」,並選擇文字顏色,調整字的大小、角度和位置。按下「Apply-->Save」,存成 NewGif-4.jpg,當第四張圖。

12、再點選「Stickers」,貼上藍色的煙火,調整煙火的大小、角度和位置。按下「Apply-->Save」,存成 NewGif-5.jpg,當第五張圖。
13、再貼上紅色的煙火,調整煙火的大小、角度和位置。按下「Apply-->Save」,存成 NewGif-6.jpg,當第六張圖。

14、現在我們有 NewGif-1 ~ 66張圖,作為動態圖的腳本。接下來開啟免費的線上製作 gif 工具 gifmake.com,按下中間的「選擇檔案」按鈕,將這6張圖依序選進來。

15、依照圖的號碼順序選入,各張圖會在中間排列,6張圖都要依序選入喔!

16、設定動態圖大小,因為我們已經知道每張圖的大小都是 300 x 80,所以點選 Custom,設定 300 x 80

17、再設定變換的時間間距,越往右時間間距越大,變換越慢;越往左,變換越快,如設定為 600ms。按下「Generate Gif」就會產生動態圖在上方,可以檢視效果。如果覺得時間間距不理想,重新調整後再按下「Generate Gif」產生動態圖。若沒問題,就可以按下「Download GIF」將您的成果下載存成 gif 檔,動態圖就作好囉!