1

「 G 」 o ！「 IF 」 you do —

製作 gif 動畫好簡單

國立台南第二高級中學涂益郎

2

學習目標• 對應課綱範圍：電腦軟體 - 應用軟體

1、瞭解創用 CC的授權機制，進行搜尋網路資源取得合法授權的圖片來製作 GIF動畫。

2 、學會利用影像處理軟體 Photo Impact 將圖片去背。

3、學會以影像處理軟體 Ulead GIF Animator變更影像方位，得以在動畫製作過程中產生錯位效果。

4、學會如何將不同方位之影像匯入動畫製作軟體中，並透過調整影像之錯位效果與時間差產生 GIF動畫。

3

教學規劃• 教案規劃之課程節數為兩節：

第 1 節：介紹 GIF動畫原理、簡介並示範如何使用創用 CC資源、讓學生進行影像素材之蒐集。接著介紹如何運用 Photo Impact以達到影像去背及產生錯位效果之功能。

第 2 節：介紹如何將前置完成之影像匯入動畫製作軟體 Ulead GIF Animator中，並且學會調整影像間的錯位效果及時間差，最後匯出GIF動畫成果。

4

評量方式• 課堂觀察與互動問答。• 學習單（內容如下圖）。• 學生製作之 GIF作品。

5

評量方式• 學習單（內容如下圖）。

6

動機• 在網路上瀏覽網頁時，時常會看到網頁中呈現許多動態影像，除了以影像軟體 Flash（副檔名為「 .swf 」 ） 製 作 外 ， 大 部 分 都 是 以「GIF（Graphics Interchange Format）」所製成。

7

創用 CC 授權概念介紹• 什麼是「創用 CC」？

CC（ Creative Commons）：一套簡便、彈性的開放性著作權授權契約，希望藉由個人自願分享，打造知識的共用資源。

「 CC」的概念起源在 2002年由美國的非營利組織 Creative Commons提出，台灣版創用 CC在2003年由中研院資訊科學研究所引進。

8

創用 CC 授權概念介紹• 創用 CC授權的特色：

一套對不特定人授權的開放性授權契約，減少觸法風險，只要遵循著作人所設的條件，即可自由利用。

簡化授權過程：均無須一一取得著作人的授權，除非是要做超過授權條件的使用，例如：想要將設定「非商業性」使用的作品商品化。

著作人並未喪失著作權，而是設定授權條件，保留自己真正需要的部份權利，其餘釋出給公眾使用。

創用 CC 授權概念介紹• 創用 CC的四種核心授權要素： 創用 CC 的四種核

心授權要素組合出各種不同的授權方式，但觀察各種授權要素的組合後，發現其中有兩種核心授權要素不能夠同時存在，請問是哪 兩種？原因為何？

9

此題需搭配學習單 Part 1

10

現存好用的創用 CC 資源• 創用 CC整合搜尋引擎： CC Search。

• 插圖素材資料庫： Open Clip Art Library。• 音樂素材資料庫： jamendo。

• 音效素材資料庫： FreeSound。

以上資源擷取自教育部創用 CC資訊網 https://isp.moe.edu.tw/ccedu/

• 本次 GIF動畫製作分為兩階段進行：

圖片編輯：•使用軟體： PhotoImpact

動畫製作：•使用軟體：Ulead GIF Animator

GIF 動畫製作

• 初階版：–背景簡單，容易去除背景圖像，僅留主要目標圖像。

• 進階版：–背景複雜，需有一定熟練度才可勝任。

今日目標

圖片編輯步驟一：挑選圖片

• 開啟 PhotoImpact 後，可將目標圖片「拖曳」至編輯畫面中。

圖片編輯步驟二：在 PhotoImpact 中插入圖片檔

• 圖片插入 PhotoImpact 後會被 視為「基 底 影像」且無法被修改，因此圖片要去背景前先複製相同圖片並貼上。

• 複製的檔案就是用來進行去背景之用途。也就是兩張一樣的圖片疊在一起。

複製貼上後，圖層數目會增加。

圖片編輯步驟三：在圖片去背景前先複製

• 先至編輯視窗右方找到「圖層管理員」，接著將「基底影像」隱藏起來。

隱藏前 隱藏後

圖片編輯步驟四：隱藏基底影像

• 利用「物件神奇橡皮擦工具」將背景圖像進行清除。

去背前 去背後

圖片編輯步驟五：去除圖片背景

• 有時候背景比較複雜，可搭配「物件繪圖橡皮擦工具」進行細節作業。

利用物件繪圖橡皮擦工具修飾圖片的細節。

圖片編輯步驟五：去除圖片背景

• 將左方去背後的圖片以拖曳方式拉至右方圖片中進行合成。可以透過「變形工具」進行大小調整。

變形工具調整大小

圖片編輯步驟六：圖片合成

圖片編輯步驟七：另存新檔將圖片存成 PNG 格式

分解動作

動畫成果

分解動作 1 分解動作 2 分解動作 3

每旋轉完一次請記得另存新檔，將檔案保留起來

作業規定：請至少準備三張不同旋轉角度的圖片

圖片編輯步驟八：旋轉圖片製造動畫效果

動畫製作步驟一：開啟ga_main.exe

• 選擇「開啟現有的影像檔」，將先前編輯完成的圖片匯入。

動畫製作步驟二：匯入影像檔

• 以「拖曳」方式將其他需要加入動畫的圖片匯入。

• 匯入時選擇「插成新的畫格」。

插入後畫格就增加了

動畫製作步驟三：匯入其他影像檔

• 可以利用下方播放鍵「 」檢查動畫效果。

1 2 3 4

動畫製作步驟四：插入畫格後檢查動畫效果

再看一個例子的編排

• 單一個畫格調整時間的方式就是用滑鼠左鍵點選單一個畫格兩下，就會出現調整時間的視窗。

• 若要一次調整多個畫格的顯示時間，可利用「 Ctrl」鍵輔助，一次點選多個畫格進行調整。

動畫製作步驟五：調整時間

動畫製作步驟六：匯出動畫

29

反思與分享• 製作 GIF動畫是著重在操作面的課程，雖然操作步驟不算繁複，但在編輯過程中仍有需多細節需要注意。

• 對授課教師而言，與其說利用學習單輔助教學，倒不如說是提供學生一份檢核表，讓學生檢核自己的編輯內容是否切合教師課程教學的進度。

檢核項目□ 01 、蒐集影像資料 □ 07 、儲存影像編輯檔「 .UFO 」

□02 、 匯 入 影 像 至 Photo

Impact□

08 、以「 .PNG 」格式儲存多張動畫影像素

材

□ 03 、複製影像圖層 □ 09 、匯入影像至 GIF Animator

□ 04 、隱藏基底影像 □ 10 、調整影像顯示時間及位置等相關屬性

□ 05 、去除影像背景 □ 11 、輸出 GIF 動畫

□ 06 、合成影像 □ 12 、上傳繳交成果作品

30

學生作品成果分享與評量• 除了教師評分外，還可以採學生互評的方式。

31

學生作品成果分享與評量• 學生作品：