今天來分享一個實用的技巧~GIF動畫圖檔製作,這種格式的動畫可以應用於廣告Banner、Logo、貼紙等等的設計,製作簡單又具有動態效果,相當受歡迎,實作上有許多軟體都可以完成,像是早期很流行的Ulead Gif Animator或是PhotoShop早期版本有一個ImageReady的附屬程式都可以製作。由於今天有學生問了如何使用PhotoShop製作GIF,所以本文就以PhotoShop作教學示範吧!
上面有提到,在早期的PhotoShop版本中,有一個專門製作GIF動畫的ImageReady程式,但是現在的版本已經沒有了,所以我們要直接在PhotoShop中製作。
◎完成範例:
1.先準備幾張『長寬尺寸相同、解析度相同、內容不同』的圖片,在此設計嵐簡單準備寫了123的三張圖片。
2.使用『工具箱』→『移動工具』+SHIFT鍵分別將2和1合成到3的正中間。
3.完成後在圖層面板可以看到總共會有三個圖層。
4.執行『視窗』→『動畫』開啟動畫面板。
5.開啟面板後會出現如下畫面,並且會有第一個畫格已經出現並且顯示1號圖片。
6.點選第一個畫格下方的時間,會出現設定畫革時間長度的選單,點選其他。
7.在出現的設定畫面上輸入所需的秒數,完成按確定。
8.接著點選動畫面板下方的『複製選取畫格』鍵,可新增第二個畫格。
9.新增第二個畫格後,畫面如下:
10.選取第二個畫格,並且到圖層面板將1號圖片的圖層做關閉,此時第二個畫格便會顯示2號圖片內容。
11.重複上述動作,新增第三個畫格並且關閉1號和2號圖層,以顯示3號圖片內容。
p.s.每一個畫格也都可以設定所需要的播放秒數。
12.將所有圖片和畫格都建立好之後,執行檔案→儲存為網頁及裝置用。
13.接著選擇輸出為GIF格式,動畫的播放則是『永遠』,然後按下儲存。
14.接著決定儲存位置以及檔名就完工嚕!
室內設計相關 (5)





























小咪今年開始
也在試這個呢!~
我都用PHOTOSCAPE說,PHOTOSHOP我整個很不熟,
從今年開始也要好好學習一下!^O^
正在煩惱動畫該怎麼做~ 沒想到PS 竟然可以耶!!
看來只把它拿來修圖真是太大才小用了~ (笑
謝謝老師!!
但嵐設這篇介紹好詳細,推推 ^___^
不能預視??
我有個問題想想請教下
我自己弄好的影像
但是都不會動耶!
為什麼啊!
我明明都按照你的步驟做啊!
可以幫我解答嗎?
謝謝!
我的電腦是小筆電
可是在做gif動畫要儲存為網頁與裝置用時
對話框太大 也不能縮小
怎麼辦?
想請問的是~
Adobe Photoshop CS3這個版本是否也可以製作動畫呢?
因為我照您的教學到最後卻找不到"儲存"這個鍵??????
謝謝回答了~
無法儲存
您好我製作完成動畫無法儲存.按下檔案"儲存為網頁及裝置.. 沒有動作.要儲存為網頁及裝置用時沒有顯示這一頁.????請問老師為什麼?
謝謝
我也是在第13的步驟就和您的頁面不同,並沒有可以選擇「儲存為網頁及裝置」,我的是「儲存為網頁用」然後裡面的設定頁就開始和您的不同了~~ 是photoshop版本不同的關係嗎? 那我該怎麼設定呢??
第12步作完要儲存為"儲存為網頁及裝置用"
無法變為13步一直停留在12步..沒有變化到13步..
可以幫我解答嗎?
謝謝!
PS和Flash哪一個比較好用呢?
若我看到原本的gif檔圖
可以看到她一張一張的分開的圖層嗎?
就是回到原本的情況
可以嗎?
謝謝!
另外,有個問題想請教一下
向下面這個網址的圖要怎樣做呢?
(就是很多張相片一層層逐步疊上去的效果)
http://imgsrc.baidu.com/forum/pic/item/0f8e041faa78f28ca68669d2.jpg?v=tbs
也是用PS做的嗎?還是需要其它軟體
感謝幫忙!!
真是太棒的教學了^^
之前都沒注意到在視窗那邊~感謝~
我已經做好動畫了
但在"儲存為網頁及裝置用"
按下後等好久沒結果photoshop卻忽然跳開
為什麼
上了一課了!
不過一張一張手動加入有點累...
不知有沒有比較方便的軟體?
也歡迎到我的部落格唷^^
不過在我試了第4個小時後終於讓我試出來了~~~
(雖然有點久也有點囧)
感謝版大^^
我應該會多多來這逛逛~吸收知識^^
趕快來試試!^^
為什麼我的"儲存為網頁及裝置用"都不讓我選取阿ˊˋ?
一定要用圖檔做
我之前事先開空白檔開始做...就不行
原來PS可以這麼做
我也要來做我的gif
自己製作1張gif圖竟然花了212張圖
但是做好後發現會卡住
但用成影片方式播放卻不會卡住
這該怎麼辦『用成圖片格式會卡,影片不會』
原來三張圖可以做
不知道有shift這招
哈~~~~
我還以為要同一個檔案的三個圖層!
真的是學了一課~
我看著您分享的這篇已經製作成功了
但是遇到一個瓶頸...
在PS裡面播放都正常但是
儲存完GIF後
單獨打開結果他不會動耶...
請教一下可能是哪裡出了問題?
麻煩您了 :)
我也是在預覽的時候還可以看
但儲存後就無法了
附上MF載點:http://www.mediafire.com/?snt4itmmdc6gnay
因為這個機會,改變了我的人生,我的人生就像柳丁有豐富的維他命C,甜甜的好滋味! 現在的我好幸福喔^^~
..(,") (¨.) ㄛ 嗨 唷 ~~~~
_/█\_/█\_ Have a nice day!!
 ̄ ̄ ̄ ̄√√ √√ ̄.¸.•°*♥ღ✿‿<ღ♥ 來問安 ~Ѽ
因為這個機會,改變了我的人生,我的人生就像柳丁有豐富的維他命C,甜甜的好滋味! 現在的我好幸福喔^^~
..(,") (¨.) ㄛ 嗨 唷 ~~~~
_/█\_/█\_ Have a nice day!!
 ̄ ̄ ̄ ̄√√ √√ ̄.¸.•°*♥ღ✿‿<ღ♥ 來問安 ~Ѽ
分享愈多福氣愈多
祝您身體健康、萬事如意、財源滾滾
也歡迎到我家逛逛唷~^^
(吃奶力氣的給你推)
之前是去學CAD跟SOLIDWOR
最近因為要做GIF
會動圖片!
但是問題一開場就卡住了!
我圖片不管怎樣都卡在一起!
軟體一直問"是否置入"
三張都會卡在一起
無法別分存在囧""
謝謝分享^^
謝謝你的教學!!!
想請問一下
在我做完動畫要"儲存為網頁及裝置用"的時候
卻跳出一個對話框說
"此影像超出[儲存為網頁及裝置用]的設計大小,可能會發生記憶體不足錯誤並減慢效能。您確定要繼續嗎?"
當我繼續後,GIF是有存成功,可是用Google Chrome開啟的話,播放速度就變慢了:(
請問該怎麼辦??:(
ps我用單眼相機拍的,這會影響嗎??
以前都是用別的軟體合起來的><
學會了呢^^
您真的太棒啦!!
小弟又學到一招啦
馬上拿來用在新的文章上 ^^
您真的太棒啦!!
小弟又學到一招啦
馬上拿來用在新的文章上 ^^
要開新的檔案在上面做嗎? 還是直接開啟舊檔?
但是會在不同視窗中啊? 不太了解如何用SHIFT把三個圖片合成
很想學會這招....麻煩解答了 感謝 : )
實用XDDD
做好的gif檔上傳痞客邦相簿
但是他卻不會動.....
請問是哪邊出問題了
謝謝你
我的朋友讓我2個月減重10公斤,
全身雕塑了15吋
這是他在fb新創的健康減重分享的社團!
裡面是分享大家減重的方式跟健康概念喔!!
歡迎大家可以一起討論交好友喔~~
http://www.facebook.com/groups/210599282396174/
歡迎來我家坐坐
親愛的網友您好
想要體驗最新Samsung GALAXY最佳跨界體驗相機嗎?
只要寫下你瘋跨界的理由就可以親自體驗令人驚豔的跨界功能,
還可以直接把相機帶回家!
◎活動時間:即日起至3/31日止
◎活動辦法:上傳您工作領域的照片以及可以得到跨界相機的理由,下一個體驗跨界驚艷功能的就會是你!!
◎活動網站:http://galaxycamera.events.pixnet.net/index.php
痞客邦活動小組敬上
所以只能用PS CS5
現在終於知道如何作用PS製作動圖了 感恩 !!! XD