自己動手做gif動圖 │ Photoshop CS5 與 KMP截圖 │ 上傳Tumblr與部落格教學

TUMBLR03

玩膩了Facebook與Instagram嗎?那就替自己申請Tumblr吧! 

TUMBLR  

將將  這就是Tumblr

我想應該滿多人都在用了,所以不多作介紹。基本上它就跟Facebook與Instagram一樣,有網頁Blog與APP。我喜歡它的原因是,上面有好多動圖喔!好多動圖都好有趣又漂亮!於是我就瘋狂follow了一堆人 (笑)。但是follow別人的動圖還是覺得有點寂寞… … 人家也想自己做動圖啦!因此這兩天,我總算研究出來要如何使用Photoshop製作動圖,等不及要分享給大家!因此這篇,就要來教大家如何自己做動圖囉!我所使用的方法是最原始也最笨的,那就是先截圖再用Photoshop製作。但這是最能夠控制速度與自己想要的畫面的不二法門 (應該是)。其實有個App也可以「快速」製作動圖,那就是photobucket

photopuket  

這個程式也非常好用,雖然要註冊比較麻煩,但可以使用Facebook帳號登入。

不過我個人沒有很喜歡Photobucket製作的動圖,除了完成品上面會有Photobucket的Logo之外,動圖時間也較難掌控。如果你沒有Photoshop的話,那麼可以考慮使用這套APP來製作動圖,在此簡單說明Photobucket製作方法!

首先登錄 (註冊) Photobucket,上傳你想要做成動圖的照片。接著進入你的相簿。

photopuket02  

上方圖片中粉紅色圈起來的地方就是Gif (動圖) 製作,點進去後就可以篩選照片,「快速製作」動圖囉!霸特…你要這麼容易就屈服於一個App嗎?各位鄉親父老啊!要不要試著自己做動圖呢?接下來S.Wan就要教大家使用KM Player截圖以及photoshop製作動圖。

首先,你必須有兩套軟體,一個是KM Player,另一個是photoshop。我的photoshop版本還是CS5,比較舊,下面的教學示範圖就先將就一點看吧!至於KM Player是免費軟體,載點很多請自行下載。

 

  如何使用KM Player連續截圖?  

步驟一、 打開你的KM Player 並打開影片資料夾

下方圖片中,粉紅色圈圈的地方就是開啟影片資料夾的位置。選擇你要製作的影片按下確定,KM Player就會開始播放了。接著選擇你想要製作動圖的段落,在段落前的地方按下暫停鍵。

步驟一  

步驟二、 在影片處的螢幕上按右鍵

下方圖片中就是按右鍵會跳出來的視窗,選擇「擷取」—> 「畫面:進階擷取」

IMG_5541  

步驟三、 選擇秒數與畫格

想要「連續截圖不中斷」的話,就必須選擇「在一秒內 ( ) 畫格」。像下方圖片粉紅色圈圈的地方那樣。可以自行設定要擷取多少畫格。

步驟二  

步驟四、 選擇存放資料夾

要記得先設定你的存放資料夾喔!在下方圖片中粉紅色圈圈的地方,可以選擇存取位置。

步驟三  

步驟五、 開始擷取畫面

哈哈哈,大家有發現我的範例圖片是電影《雲端情人》嗎?(這是題外話)。

開始擷取畫面時,要記得按下play鍵喔!此時你的KM Player就會開始連續截圖囉!在下方圖片中,粉紅色圈圈的地方,有個「Time」的地方就會開始跑秒數。「停止」的地方就是你可以選擇截圖完成的按鍵。

步驟四  

步驟六、 完成截圖

下圖中,粉紅色圈圈的地方會顯示你總共擷取了幾張圖片,此時就已經完成截圖動作囉!

步驟五  

步驟七、 打開存取資料夾

其實這個步驟可有可無,這裡只是check你剛才截圖的成品而已。上面步驟都完成以後,你所擷取的畫面就全部都在你選擇存放的資料夾裡面囉!OK…那麼截圖的部分已經大功告成了!耶呼!

步驟六  

 

  如何使用Photoshop製作動圖?  

接著要教大家如何使用photoshop製作Gif (動圖),首先打開你的photoshop。

步驟一、在下圖左上角粉紅色圈圈的地方按下檔案。另外,同一排的「視窗」選項裡記得勾選「動畫」。

步驟七  

步驟二、 打開檔案 —> 指令碼 —> 將檔案載入堆疊

IMG_5544  

步驟三、 載入圖層

在下圖中,按下瀏覽就可以選擇資料夾。上面使用KM Player擷取的圖片,還記得放在哪個資料夾嗎?打開它就對了。

步驟八  

步驟四、 選擇截圖 —> 確定

步驟九  

步驟五、 跑出圖層

在下圖中,右下角粉紅色圈起來的部分就是圖層,也就是你選擇製作動圖的素材。

步驟十  

步驟六、 從圖層製作影格

下圖中,右下角有個粉紅色小圈圈的地方按下去。

步驟十一  

步驟七、 選擇「從圖層製作影格」

IMG_5545   

步驟八、 跑出影格

下圖中,正下方就會有一排「影格」。注意!此時的影格順序是「相反」的喔!他會從最後一個檔案開始排,很機歪!也就是說你的動畫會是「倒著走」。沒關係,下面教大家如何反轉!

步驟十二  

步驟九、 選取全部影格

一樣按步驟六的那個粉紅色小圈圈位置,會跑出視窗,選擇「選取全部影格」。

IMG_5546  

步驟十、 反向影格

同樣位置選擇「反向影格」,順序就會反過來回復正常了!

IMG_5548  

步驟十一、 調整秒數

依照個人喜好調整動圖快慢

IMG_5549  

步驟十二、 記得「永遠」

下圖中,左下角的粉紅色圈圈有個「永遠」,代表動圖會無限重覆動作。

步驟十四  

步驟十三、 存取檔案

製作完成的動圖要記得「儲存為網頁與裝置用」,如下圖。

IMG_5551  

將將  動圖完成囉!

以下是我做的完成品 Lovefool (笑)

圖片來源:電影《雲端情人》(Her)

你以為結束了嗎? NO…NO…NO…步驟還沒完成哩!

要怎麼把製作完成的動圖上傳到網頁呢?上面提過的Photobucket就是很好的存放點,請趕快去建立相簿吧!用Photobucket就可以直接傳到Tumblr囉!真的很方便啊!

上傳二  

如上圖,左上角的選項就有Tumblr囉!

其實在Tumblr上面可以「偷圖」說,我也是最近才發現 (羞)。發現可以偷圖以後,才驚覺……那我做動圖幹嘛?哈哈哈…不過多一項才華也好啦 (笑)。

如果想在Tumblr上面「偷圖」的話,如下圖,在粉紅色圈圈的地方點一下即可。那個符號其實是轉貼!這樣別人的照片或動圖,亦或者是youtube都會跑到你的頁面上囉!

tumble02  

 

  如何貼到痞客邦?  

如果你使用痞客邦的Blog,想在文章中插入動圖的話,必須先上傳到你的相簿。接著複製語法。

上傳三  

如上圖,選擇右下方的「語法」。

上傳四  

如上圖,選擇「語法」後按下「複製」。

上傳五  

複製成功後回到文章編輯,選擇左上角的「HTML」

上傳六  

貼上語法,然後更新,大功告成!

yeahhhhhhhh… 灑花 + 轉圈

很簡單吧!雖然看起來很複雜,但連我這個電腦白癡都會了,你一定也會 (笑)!!

最後送給大家「全英格蘭最髒的廁所」跟大家說晚安!!!!哈哈哈哈!!! 估奈 

 

 

 

 

喜歡這篇文章的你,歡迎加入粉絲團! 

S.Wan

也可以宣傳你的粉絲專頁

 

上 / 下一篇文章

一般留言

  1. Tumblr上面真的好多photographer或fashion的資訊 他們的作品一個比一個驚人的美XDD小琬感覺好會後製軟體哦我現在才在邊看書邊學><
    版主回覆:(09/08/2014 07:36:39 PM)
    我沒有很厲害啦
    覺得好玩而已:)

  2. 太適合我這新手了,我要學起來,謝謝版主!
    版主回覆:(07/16/2014 08:11:52 PM)
    希望對你有幫助 😀
    Btw 我也很喜歡Tom (笑)

  3. 好有才華喔!
    版主回覆:(07/15/2014 03:47:19 PM)
    因為老娘不能去德國
    也不能去荷蘭
    唉…只好在家做做動圖囉 (攤手)
    哈哈哈哈哈哈

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *