插畫2014-07-08 10:51

來用Photoshop做GIF動圖吧！(艦娘島風篇)

各位好我是子貓玲，這次來分享一些GIF動圖的簡易製作法。

本篇是利用Photoshop來製作GIF動圖，的分享文。

首先這次使用的軟體為Photoshop.CS5版。

Photoshop有內建的動畫功能，用來做簡易GIF動圖是很輕鬆的。

使用Photoshop的好處是修改方便，可以做物件順便編輯動圖。

而Photoshop的靈活在加上自己的創意，相信大家都能簡單上手做動圖。

所以這次就用PhotoShop來示範GIF動圖製作吧！

我是這次的示範 倒喵玲~

.....................................................................................................................................................

PhotoShop動圖GIF成品

以下這個GIF動圖，謹使用PhotoShop製作而成。

如看不到下圖，請等一下下喔！ ( 其實檔案也沒多大啦~ )

GIF動圖

.....................................................................................................................................................

一般靜態圖

.....................................................................................................................................................
1.首先先介紹一下如何使用PhotoShop的動畫功能。
在PhotoShop的『視窗(W)』選單下有個『動畫』的指令。
如下圖

.....................................................................................................................................................

.....................................................................................................................................................
2.開啟做動畫最重要的選單吧。
點選『動畫』後下方會開啟『動畫(影格)』界面。
如下圖

這個介面就是編輯GIF動圖最重要的關鍵。時間控制、間補動畫等等都在這裡處理。
.....................................................................................................................................................

.....................................................................................................................................................
3.制訂動圖大小。
再來就是開啟一張預定製作大小的動圖檔案。
『檔案(F)』→『開新檔案(W)』→『輸入預定製作大小』
如下圖

大小請自訂，也可後來在裁切或擴增，開啟檔案後下方的『動畫(影格)』界面，

.....................................................................................................................................................
會出現一個影格，這是基本影格不能刪除喔。
如下圖

.....................................................................................................................................................
.....................................................................................................................................................
4.放入動圖物件。
開始放入基本動圖物件，分別將物件放入各圖層中預備使用。
這裡就讓貓咪島風來示範，分別置入A圖&B圖於圖層中。
如下圖

.....................................................................................................................................................
.....................................................................................................................................................
5.新增影格。
GIF動圖基本上就是由許多影格連結起來的，所以要先增加影格。
新增影格的方式，在『動畫(影格)』界面點選文件符號
或在『動畫(影格)』界面右邊的選單中點選新增影格。
如下圖

這樣就會得到一張新的影格了。( 依照不同的動圖結構自行增加影格數量 )
.....................................................................................................................................................
.....................................................................................................................................................
6.開始動手編輯動圖吧。
首先要理解在PhotoShop的中動圖的概念。
PhotoShop中的每張影格就是當下影格號數的圖層位置與圖層關閉。
所以影格１就是只開啟圖層Ａ的顯示狀態，並關閉其他圖層。
反之影格２就是只顯示圖層Ｂ，並關閉其他圖層。
如下圖

1.點選影格１並且開啟圖層Ａ的顯示狀態，關閉其他圖層。

.....................................................................................................................................................

2.點選影格２並且開啟圖層Ｂ的顯示狀態，關閉其他圖層。

這樣就會得到兩張不同的影格。
( 依照不同的動圖結構自行增加影格數量與圖層顯示 )

.....................................................................................................................................................

再來是影格播放時間控制，主要是控制每張影格在GIF中更換的時間。
每一個影格都可以獨立設定需要的播放秒數，可依動圖結構自行調整。
操作方式為點選影格號數下方的秒數，即可變更。
如下圖

基本上動圖編輯主要在於播放時間與各圖層圖片位置控制與顯示狀態。

.....................................................................................................................................................

播放秒速差異示範A 0.2秒

提──────督～

.....................................................................................................................................................

播放秒速差異示範B 0.05秒

提督! 提督! 提督! 提督! ..........

.....................................................................................................................................................
播放秒速差異示範C 變速版

提督 ! 提督 ! 提督 ! 提 ────督啊～

所以僅用秒數差異就能表現各種手法

.....................................................................................................................................................

形...形象...回....回不去了....

.....................................................................................................................................................
.....................................................................................................................................................
7.播放與選擇播放動作
製作動圖中隨時可以撥放目前的影格動作狀態。
可以按空白鍵或點選『動畫(影格)』界面下的播放鍵。
這樣就能看到動圖的顯示狀態了。
再來選擇播放動作 (次數或永遠)，決定檔案的撥放方式。
如下圖

.....................................................................................................................................................
.....................................................................................................................................................
8.儲存成GIF
影格與播放時間都就緒後，就可以將檔案儲存成GIF了。
『檔案(F)』→『儲存為網頁及裝置用(D)』→『選擇GIF』→『儲存』
如下圖

完成

.....................................................................................................................................................
.....................................................................................................................................................
基本的PhotoShop動圖GIF製作方式大約如此，是不是很簡單呢？
GIF的重點在於創意與運用，希望大家都能輕鬆快樂的玩GIF動圖。
進階的PhotoShop動圖GIF製作方式，子貓有機會在PO，手好痠...
最後子貓感謝各位觀看，還請多多指教。

.....................................................................................................................................................

子貓小屋會不定期上傳各種東西
所以有興趣的朋友可以多來我的小屋逛逛。
感謝您的支持，才有我創作的動力！謝謝大家！

.....................................................................................................................................................

※後記

市面上有許多ＧＩＦ動畫製作軟體，有很多是免費的。

只是這次選擇用PhotoShop來做，單純是因為PhotoShop簡單好用。

當然也有其他軟體或更好更快的製作方式，本篇以謹以PhotoShop示範製作。

.....................................................................................................................................................

其他好艦娘請到以下連結

http://home.gamer.com.tw/creationCategory.php?owner=conecolin&c=277132

.....................................................................................................................................................

164

25

LINE 分享

相關創作

[達人專欄] 【菜圓日常】肇逃

大背頭

第六章 在聖誕節與妖精相戀（11）

留言

• 2014-07-08 11:41郁：
  好可愛~~~介紹製作方法也非常詳細~~~已收藏 感恩~~

  2014-07-08 12:56子貓玲：謝謝~ 喜歡就好! [e12]

• 2014-07-08 11:45熱：
  跳跳跳![e35]

  2014-07-08 12:56子貓玲：蹦蹦蹦! [e12]

• 2014-07-08 14:18神書：
  還不錯
  
  雖然是被島風吸引來的ww

  2014-07-08 16:29子貓玲：謝謝! [e12]

• 2014-07-08 14:33臥看泥石油貓餅：
  雖然已經會用了，但還是給你個推~話說那隻謎生物給我離開別靠近我!(驚嚇貌)

  2014-07-08 16:30子貓玲：別這樣啊~ 我犧牲很大耶~

• 2014-07-08 16:20巴哈姆特小管家：
  親愛的勇者：
  
  感謝您對勇者小屋的支持，
  我們會將此篇設定在首頁的精選閣樓中增加曝光。
  
  --
  巴哈小屋管家 敬上

  2014-07-10 02:40子貓玲：[e12][e12][e12]

• 2014-07-08 16:23炎寧：
  咳
  這支貓....裙子好像太小件?
  

  2014-07-08 16:31子貓玲：失去的永遠比得到的多~ 裙子也是~

• 2014-07-08 16:54♥雷姆玲♥：
  下次有空再來試試看好了~XD

  2014-07-10 02:41子貓玲：很好玩的，玩看看吧!

• 2014-07-08 22:42絲迪餒：
  超可愛的啊~

  2014-07-10 02:43子貓玲：謝謝~ [e12] [e12]

• 2014-07-08 22:51sd：
  我想要島風gif教學[e12]

  2014-07-10 15:46子貓玲：有空會PO的，寫這個很累人....

• 2014-07-08 23:13阿伏兔永夜(ぺこぺこ~)：
  犧牲色相了~~辛苦了~~(拍島風肩~@A@

  2014-07-11 15:41子貓玲：疑? 不是我嗎~

• 2014-07-09 01:13SAM in sfw：
  這樣拉褲子不會斷掉嗎? XD

  2014-07-11 15:42子貓玲：彈性絕佳! 高級貨~

• 2014-07-09 01:33夜行貓：
  島風醬不要這麼可愛好嗎XD

  2014-07-11 18:11子貓玲：要好好接住喔~

• 2014-07-09 08:16阿 狼 |>：
  實用
  
  剛好PIXIV最近可以放GIF

  2014-07-11 18:11子貓玲：嗯~ 加油~

• 2014-07-09 09:44美貓：
  貓咪好可愛~!![e16](歐咿~ 這次女主角不是島風嗎
  
  是說 彈性這麼好可以拉 這麼高 跟 將軍穿代代相傳的三角褲 有的比了

  2014-07-11 18:12子貓玲：好欣慰啊~ 犧牲還是有價值的~ [e13]

• 2014-07-09 10:10Dayuh：
  很實用的文章耶～
  我會試著做做看的[e22]
  謝謝你拉！已收藏和GP
  追蹤～

  2014-07-11 18:13子貓玲：感謝~感謝~有機會我會多POㄧ些的。

• 2014-07-10 19:26非翔：
  那邊痛痛Der

  2014-07-11 18:14子貓玲：哪邊~ 是哪邊~ 你說說看~你說說看~

• 2014-07-11 18:29貓丁：
  謎生物...哈哈哈[e35]

  2014-07-16 20:27子貓玲：不是我對吧~

• 2015-08-20 22:19小偉：
  好強喔 感謝大大

  2015-08-21 16:58子貓玲：謝謝你[e12]

• 2015-08-23 14:25Kleine：
  連PS都能做出GIF了阿@@

  2015-08-23 15:21子貓玲：很簡單的，來試試吧。

• 2015-11-05 00:30Swat-豹豹模式：
  收藏個
• 2016-01-22 13:47Hopor：
  看你的教學做了自己粉絲頁3周年GIF
  感恩您~
  https://truth.bahamut.com.tw/s01/201601/b14d10566fce3096f6730af96c4d9c0e.GIF

  2016-01-25 06:54子貓玲：[e12]

• 2016-12-10 17:29某眼鏡娘控：
  100巴幣,請收下

  2017-03-16 19:40子貓玲：[e12]

• 2016-12-10 17:34某眼鏡娘控：
  我...我可以抱走嗎?BLOG主

  2017-03-16 19:40子貓玲：[e16]

• 2017-03-14 03:44Paoly：
  請問文章內要怎麼放入GIF呢?

  2017-03-16 19:41子貓玲：我是用網頁連結置入的，這樣就不會衝突到巴哈的大小限制嚕。

• 2017-05-23 22:11青菜yoyo~：
  U質

• 送出