梁又文老師:設計與多媒體達人研究工作室 (Teacher Yo-Wen Liang: Master of Multimedia & Design Research Studio).設計/Art藝術/Research研究/Training教學.訓練.家教/大學授課/研究/統計服務

使用Photoshop製作GIF動畫教學：昨天繼基隆黃色小鴨爆炸之後，各種黃色小鴨的Kuso作品陸續推出。敝人早上用幾分鐘時間，幫別人快速做了一個小案子：黃色小鴨爆破的GIF動畫檔，想說做完順便分享教學，讓這個簡單的工作價值發揮較大一些。

[軟體教學]Photoshop GIF動畫教學,CS5,CS6,製作,圖文,以黃色小鴨爆炸爆頭圖動畫為範例(Extended版,基本版,比較,才有時間軸,殘影,失真,透明,去背,漸變,淡入淡出,轉換為視訊時間軸)

[設計]六個Design設計比賽資訊網站:影片創作.多媒體設計.創新創意競賽(Click)

[設計Design]近三年個人設計作品集:作品集範例與製作過程概述(Click)

[字體下載]免費英文字型字體.字體檔案類型下載點與介紹說明 (CLICK)

教學之前的注意事項: 視訊時間軸

其實在網路上講這個主題的教學文，都經常使用"轉換為視訊時間軸"這個功能，但是很多使用者都會發現自己的軟體並沒有這個項目可以勾選。其實真正的原因，是因為只有Photoshop Extended(拓展版)才有提供這項功能可以使用。所以，這篇就是以Photoshop的基本版本，來講解如何製作GIF動畫。接下來，進入教學操作步驟：

01.將要做為開頭的圖片從Photoshop打開，並從[下拉式選單]>[影像]>[版面尺寸]，確立製作GIF檔的大小。

02.在Photoshop製作GIF動畫，就必須打開時間軸視窗。請至[下拉式選單]>[時間軸]，將面板打開。

03.打開[時間軸]面板之後，可以發現主視窗的下方出現如下所示的[時間軸]視窗，表示呼叫完成。

04.將所有的連續圖片做序列的編號，並將它們全部依照順序置入到[圖層]面板中。

05.置入圖片時可再稍微調整，像按下[Ctrl+F鍵](自由變形)的熱鍵做大小和形狀調整，並利用不透明度幫助對齊。

若圖片色彩與明亮分佈不佳，可以再加上[調整圖層]去將色階和亮度/對比做簡單的修正。

06.重覆05-1的動作，將所有圖片都置入進來後如下圖所示。請記得將調整圖層置於最上方。

07.確認所有圖片都對齊與調整完成後，按下[時間軸]面板最右上方的黑色倒三角按鈕，再選擇[從圖層製作影格]
 

08.因為剛才有加入兩個調整圖層(色階和亮度/對比)，所以請將多出的空白格數刪除。

09.將每一個影格的秒數調整為0.2秒鐘(如果需要更快或更慢的效果，請自行調整)

10.完成秒數的調整之後，請直接按下下方的[播放影片]按鈕，觀看效果是否如預期所想。

11.確定效果OK之後，至[下拉式選單]>[檔案]>[儲存為網頁用]，準備進行GIF檔輸出的設定。

12.基本上不用調整參數，只要直接按下[儲存](很多學生會不小心按下完成)，就可以存為GIF檔。

完成圖：黃色小鴨爆炸GIF檔

(有需要原始圖層步驟的PSD檔案，請不吝看看周圍支持後，請於下方留下E-mail寄給您，感恩)

煩請您不吝幫忙友站2015.3月剛成立的"粉絲團"與"文章"按讚分享 謝謝您！
(請不要使用手機版觀看敝站，煩請使用電腦網頁版，感恩)

[設計]六個Design設計比賽資訊網站:影片創作.多媒體設計.創新創意競賽(Click)

[設計Design]近三年個人設計作品集:作品集範例與製作過程概述(Click)

[字體下載]免費英文字型字體.字體檔案類型下載點與介紹說明 (CLICK)

*若覺得文章有幫助，煩請不吝留個言與四周看看，感謝您的支持。

[相關延伸閱讀]

軟體應用.教學.相關:

[Adobe Illustrator]  [Autodesk 3DSMax]  [Adobe Flash]  [Adobe Premiere]

[Adobe Photoshop]  [數位科技與軟體應用]  [技能.專業證照相關]

設計.多媒體.創新相關:

[設計與創作]  [設計與多媒體討論]  [設計繪畫.表現技法]  [學生作品成果]

[競賽活動與比賽訊息]  [設計素材.資源]

[軟體教學]Photoshop製作GIF動畫圖文教學CS5,CS6,以黃色小鴨爆炸爆頭圖動畫為範例(Extended版,基本版,比較,才有時間軸,殘影,失真,透明,去背,漸變,淡入淡出,轉換為視訊時間軸)