他踢的

很久之前 (四年前……) 曾經寫過一篇用 Microsoft Gif Animator 製作 GIF 動畫的教學，可是現在這套軟體的載點已經失效了orz 正好最近開始使用 Adobe CS6 系列軟體，所以這次就用靈活度更高的 Photoshop CS6 內建的動畫功能，來做 GIF 動畫的製作教學～

首先，我們先準備好以下素材：

是的，這次製作的是飛天他踢超人！左邊兩張超人的圖，基底是一樣的，但因為風吹的關係，會飄動的頭髮、披風要畫得不一樣；右邊則是超人身後的噴火，為了比較有變化，畫了三種大小來輪替使用。要注意的是，因為製作完成時還會縮小（因應 MSN 限制的尺寸 50x50，或噗浪限制的 48x48），所以線條不能畫太細，否則縮圖後會看不清楚喔！

為了方便練習，各位可以下載我準備好的圖檔，裡面已經把五張圖片分為透明背景的 PNG 圖檔，可以直接拖曳至 Photoshop 中使用。

那麼我們就打開 Photoshop，新增一個 336x336 像素的檔案：（大小不拘，這次開 336 是因為他踢超人的高度為 336 像素）

CS6 系列的介面顏色轉深色系，許多工具圖標也有更換，剛開始還真不習慣呐。

雖然我使用的是英文版，但我都會附上中文的名稱和使用的功能位置圖，無論你使用中文或英文的版本，都不用擔心喔！

為了製作動畫，我們得把時間軸 (Timeline) 面板打開。Photoshop CS6 預設就會顯示這個面板，不過縮的小小小的，要到左下角點他兩下他才會變大：

如果你的 Photoshop 左下角沒有這個面板，可以從上方選單的 視窗 (Window) > 時間軸 (Timeline) 將它打開。面板開啟後，中間會出現一個按鈕：

若按下右方的倒三角形，會有兩個選項：建立視訊時間軸 (Create Video Timeline) 和建立影格動畫 (Create Frame Animation)。我們選擇後者，然後按下中間的按鈕，面板會變成這樣：

如此，工作區的設定就完成了，可以開始把圖片拖曳進 Photoshop，各分為一個圖層。五張 PNG 拖曳進 Photoshop 時，會成為置入圖層，只要在圖面上點擊兩下滑鼠左鍵、按下鍵盤的 Enter 鍵、或是按上方工具列的確認，即可將圖層成功置入。若出現警告視窗詢問是否置入，選擇「置入（Place）」即可。為了避免混淆，可將圖層名稱命名好。

這是我整理好後的樣子：

你會發現圖片的位置會有點差異，此時務必要先調整好位置喔！因為開始製作動畫後，雖然可以自由移動圖層的位置，但是若動到第一個影格的位置，是會影響到之後所有影格的！所以一定要在剛開始，就把各個部件的相對位置排好。

要調整圖層位置，請使用移動工具 (Move Tool)。你可以利用圖層的透明度 (Opacity) 屬性，來調整兩張超人的位置；也可以自由移動各圖層以方便排位置，反正我們之後會再全部一起移動。我排好位置後長這樣：

為了好好安排噴出的火焰，我把超人的兩個圖層對好後，就將兩個圖層一起往左移動 (按住 Ctrl / Shift 可以複選多個圖層)。超人對齊時，只要注意五官有沒有在同一個位置即可；火焰則要靠左對齊，垂直上的話要置中，看起來才會是從同個位置噴出的。準備好後，我們把所有圖層都往右移出畫面外，並把除了超人1以外的圖層都隱藏。(背景圖層可以直接刪除)

好啦，可以開始讓他踢超人動起來了！首先，我們把左下角的動畫播放選項，從僅一次 (Once) 改為永遠(Forever)，並新增一個影格：

每新增一個影格，我們就全選所有圖層，並切換至移動工具 (Move Tool)，利用鍵盤的 Shift + 向左鍵來移動所有圖層，來製作往左飛的效果。不用滑鼠是因為這樣飛起來速度才會一致，我每新增一個影格，大約按 Shift + 向左鍵五次。直到他踢超人飛出畫面外就可以停止新增影格了，大約會有 16 個影格：

有沒有發現各個影格下方的數字不同？那代表每個影格出現的長度，單位是秒，按下數字選其他 (Other...) 就可以設定，建議設為 0.05 秒即可。最後一個影格我設定 2 秒，是為了讓他有一點留白的時間，不然超人一直飛很累，看的人也很累。

接下來，就可以設定各個影格中，圖層出現的狀況了。我們一次設定一個影格，只要在影格上點一下即可。再次提醒，千萬不要動到第一個影格，不然會影響到後面所有影格的狀況！因為超人圖是兩張一組，火則是三張，所以我們可以兩邊分開設定。整理起來，就是這張表格：

影格	顯示的圖層	影格	顯示的圖層	影格	顯示的圖層
2	超人1 + 火1	7	超人2 + 火3	12	超人1 + 火2
3	超人2 + 火2	8	超人1 + 火1	13	超人2 + 火3
4	超人1 + 火3	9	超人2 + 火2	14	超人1 + 火1
5	超人2 + 火1	10	超人1 + 火3	15	超人2 + 火2
6	超人1 + 火2	11	超人2 + 火1	16	無

設定完後，應該會長這樣：

你可以按下方的播放按鈕測試，如果沒有問題的話，就可以按 檔案 (File) > 儲存為網頁與裝置用 (Save for web) 來輸出成 GIF 動畫了。

上面是我的輸出設定，除了選擇 GIF 格式、勾選透明 (Transparency) 外，也要記得將影像尺寸 (Image Size) 設定為 48x48，這樣無論是 MSN 或是噗浪都可以使用。好了就可以按下儲存 (Save) 來存檔囉！製作出來的他踢超人長這樣：

是不是好簡單又好可愛呢～想試試看的捧由，可以到 Adobe 官網下載 Photoshop CS6 Extended 試用看看喔！（可以用 30 天喔是不是很棒呢）而且就像前面提過的，除了製作影格動畫外，Photoshop CS6 新增了非常方便的建立視訊時間軸 (Create Video Timeline) 功能，如果你只是要製作圖片切換、移動、淡入淡出，配上音樂的簡單影片，就可以利用這個功能製作喔！不用再用威力導演或是 Premiere 拿磨複雜的東西了，Photoshop 真的是越變越萬能了呀～

---

後來我又做了一個飛慢一點的版本：

 

其實只要調整每個影格中圖層移動的距離，並增減畫格的數量，就可以達到調整快慢的效果喔！各位可以自己玩玩看!!