[公告] 痞客豐年終!萬元禮券限量送~[公告] 第一屆痞客邦金點賞登場!2014年最有影響力的部落格即將揭曉[公告] 痞客邦新服務上線 每日星座運勢測算【得獎名單公佈】[公告] 痞客邦應用市集全新改版![公告] 痞客邦「應用市集」新 App 上架-iFontCloud Professional

很久之前 (四年前……) 曾經寫過一篇用 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移動工具 (Move Tool)。你可以利用圖層的透明度 (Opacity) 屬性,來調整兩張超人的位置;也可以自由移動各圖層以方便排位置,反正我們之後會再全部一起移動。我排好位置後長這樣:

181739612

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

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

教學

每新增一個影格,我們就全選所有圖層,並切換至move移動工具 (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 真的是越變越萬能了呀~


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

他踢超人飛慢點  

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

Posted by 他踢 at 痞客邦 PIXNET 留言(5) 引用(0) 人氣()

open trackbacks list Trackbacks (0)

留言列表 (5)

Post Comment
  • Man
  • 謝謝!!
    這篇真的很實用又很詳細! GOOD~
    我自己做的他踢超人也很成功噢!
  • 很高興你喜歡喔~
    希望你也可以做出屬於自己的動畫^_^

    他踢 replied in 2012/10/27 11:45

  • sexqn
  • 我補圖拖曳到PS中,會有個框線是為什麼阿,要叫我置入的意思,圖層那邊的會有個灰色的小圖案。http://i.imgur.com/ueKXB.png
  • 這代表該圖層是動態嵌入圖層,也就是它的內容會隨著你的原始檔案變動。
    例如:你在「超人1.png」的臉上加痣,
    那在製作的PSD檔案中,「超人1」的動態置入圖層也會多個痣。
    這樣講不知道清不清楚呢@_@

    他踢 replied in 2012/10/28 21:10

  • 訪客
  • 想請問一下,我製作完後,在預覽的部份看也是正常的速度,但儲存後再打開來看,
    他變的很慢,好像慢動作一樣,這是為什麼? 我影格速度試過多種,但結果都會變
    這樣
  • 想請問你儲存後,是用什麼軟體打開呢?
    最快的方法是請您將該動畫的 PSD 和輸出的 GIF 一併寄給我,
    我可以比較快幫您發現問題:)
    tatit@tatit.net

    他踢 replied in 2012/12/04 17:33

  • Private Comment
  • Jian  Fu
  • 把視頻轉換為 GIF 動畫的免費軟體 Youtube2GIF maker
    參考 http://tw.youtube2gif.com

    簡單易用,畫質好。

    我自信它是最好最方便的軟體。

    是的,我就是這個軟體的作者了 :)
  • 開發者給推推!!!

    他踢 replied in 2013/12/23 10:55

You haven’t logged in yet, please use guest status to leave message. You can also log in with above service account and leave message

other options