前陣子有網友提到留言版上方標題圖的gif 動畫製作很有趣想學，所以趁今天有空趕快來寫一下Photoshop教學^^
ps：GIF檔因為色彩較少，所以表現較不細膩，加上因為事多張組合而成，檔案較大，建議不要做太大張的圖
教學製作軟體:Adobe Photoshop 內建之Adobe ImageReady
製作時間:約３～５分鐘 （視個人速度而定）
相關應用能力：須對GIF動畫大概有概念
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
首先
開啟Adobe ImageReady (此教學版本使用3.0 各版本使用差不多)
1.開啟要製作動畫的圖片 (此教學使用三張)
以拖曳的方式將三張放在同一檔案中，(配合Shift 鍵拖曳時會直接放在正中位子)
2.接著到下方Hide Animation 面板（沒顯示出來的可至上方Windows功能表點選選顯示出來)
新增一個動畫影格
然後將Layer3隱藏，此時Hide Animation 面板也會跟著改變
3.將1．2動畫影格以Shift 鍵複選，按下轉場連結鈕(我自己翻譯的)
會出現Tween視窗，可選擇要插入幾格 （越多格越順 檔案也越大，用預設的3格就夠了)
此時可按下Play 播放紐看一下，跑很快對吧！沒關係，看下一步^^
4.設定每一動畫影格的播放時間（按下影格下方0 sec位子可設定)
我將1跟5影格設定停留1.5秒，2．3．4影格設定0.1秒
5.重複2．3．4步驟做到三張Layer的圖都出現
都完成時，最後還要再將Layer1跟Layer3做連結一次才會形成一個很順的循環
6.播放後沒問題就可至上方File功能表選擇Save Optimized As另存新檔即可
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
感謝網友提供ＣＳ以上版本存檔方式：
使用Photoshop CS3版者，它直接將之前的ImageReady整合一起。使用時可直接由「視
窗」的「動畫」來做，步驟一樣。
CS3在存檔時的語法是Shift + Ctrl + Alt + S (要一起按)，
如果想直接從「檔案」內選，要選「儲存為網頁與裝置用」。
最後按儲存及可！
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
最後完成是這樣
也可以這樣用
光這樣的方法就可以設計出很多種樣式囉～ 只是差在如何應用而已，多發揮創意唄
若還有其他方法 歡迎留言討論
覺得不錯的話也歡迎按個讚跟分享支持哦～
圖文：無名影像
hello
我試過囉可是蠻妙滴！就只存到第一張影格變成兩個分開檔案，印象之前版本做不會這樣，不知道哪邊出了問題..
版主回覆：(04/13/2010 02:51:36 AM)
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
這樣阿
因為我現在比較少做動畫
��Ｓ３就沒研究了 其實研究完就又忘記
你在試試看囉 如有成功再分享一下哦～
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
請問我的是CS3版本為何儲存gif檔後，影格顯示是分開的兩個圖？如何可以像你這
樣在同一張做變換？謝謝
版主回覆：(02/01/2010 10:03:16 AM)
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
以下方式試試看
CS3在存檔時的語法是Shift + Ctrl + Alt + S (要一起按)，
如果想直接從「檔案」內選，要選「儲存為網頁與裝置用」。
最後按儲存及可！
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
謝謝你ㄉ說明喔~
我再試試看~
emily
版主回覆：(10/20/2009 05:53:25 PM)
��＝＝＝＝＝＝＝
不客氣～
��＝＝＝＝＝＝＝
請問一下我如果動畫做好了要上傳到無名的話要存成什麼檔阿?
我存成GIF檔 開啟都會動!!
上傳到無名他就不動了!! 原因是為什麼阿?
可以幫我解答一下嗎??謝謝你
版主回覆：(06/11/2009 06:20:00 AM)
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝
存ＧＩＦ
但是我不知道為何傳到無名不會動ㄟ
不過我的會動說
http://www.wretch.cc/album/show.php?i=sjudc&b=33&f=1108057212&p=21
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
請問…
我看不太懂步驟5的意思…
「重複2~4的動作做到三張layer出現」
因為我是初學者…還麻煩您幫幫忙…謝謝＞＜＂
版主回覆：(12/10/2008 10:39:37 AM)
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
��－４步驟就是把第一張跟第二張中間做出漸變
重複的意思就是繼續往下做下去
例如２跟３ ３跟４的漸變 依此類推
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
我有買書 他說要按工能列中的視窗/顯示動畫
但是我都找不到.. 拜託求你救救我..
真的好急- –
版主回覆：(08/28/2008 04:23:39 PM)
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
聽不太懂你的意思
是說找不到動畫這個項目嗎
你是用幾版的呢
我現在是ＣＳ３版本
在上面右邊 視窗那裡按下去 中間有個 動畫
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
你好你好~
我想請問一下就是，
我是cs3版，
但我存檔跟樓上上的小姐的問題一樣，
只給存jpg檔不給存gif檔＞０＜
而且我在第一個步驟要把檔案開啟放在同一個資料夾裡，
但我不管打開幾張圖都只會出現Layer１，然後就不會出現其它圖片了，
而且我有試著用shift拖曳，不過一樣無法放入同一個檔案中，
想請教一下這是什麼情況？我應該要怎麼做？謝謝＞０＜
版主回覆：(04/13/2008 05:34:12 PM)
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝
存檔的問題你有看我給他的回覆嗎
通常我是都在ＰＳ做好我要的效果
文字什麼的也都先設計好
圖層也都放進去了 然後存檔
到ImageReady開啟後
就只要選擇哪一畫格要顯示就好
若無法照步驟寫的那樣存檔
你試試在ＰＳ先轉成索引色看看
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝
你好!我是從知識那裡連結過來的
教學非常精彩喔!
可是存檔該怎麼存呢?
我在最後一個步驟時，它跳出"因為JPEG、PNG與 WBMP不支援動畫，ImageReady只會儲存目前選取影格"
可以麻煩你教教我嗎? 謝謝
版主回覆：(01/01/1970 12:00:00 AM)
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
很多人都遇到存檔問題
好像ＣＳ版本就會有
你試試看先在ＣＳ轉換成索引色另存成ＧＩＦ
再開這軟體叫出來做動畫應該就可以了
我現在沒灌ＣＳ版 所以無法測試囉
��＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
��＝＝＝＝＝＝＝＝＝＝＝＝
看起來比較差
是因為ＧＩＦ檔原本色階就比較少
自然看起來顆粒比較粗
那不算雜訊
只是顏色比較少能夠表現
��＝＝＝＝＝＝＝＝＝＝＝＝
oh!那個問題我搞定了!
不過又出現了另一個問題,
存檔後,它的影像質數比起在imageReady看的差了很多耶!
有很多雜訊, 怎麼辦??!