創作內容

100 GP

Photoshop 動畫製作教學

作者：向日葵茄子│2014-10-21 23:55:28│巴幣：444│人氣：39450


這次製作動畫嘗試了Photoshop 的動畫功能
當時使用PS 製作就是為了筆刷的材質效果
個人認為那是其他軟體所無法媲美的
PS 製作動畫的方式相當多
所以我在這裡也只是分享認為最適合我的製作方式
若喜歡的話也請不吝分享
還有也請各位期待我最近就快要完成的動畫「Umbrella 」
好啦廢話不多說
來看看這破破的教學吧
----------------------------------------------------------------------------------------------------------------
【Photoshop 動畫教學】
STEP1. 開新檔案，解析度、影像尺寸比例可自行設定
----------------------------------------------------------------------------------------------------------------
STEP2. 開啟視窗>時間軸，開啟時間軸視窗
----------------------------------------------------------------------------------------------------------------
STEP3. 你會看見時間軸視窗（廢話）
----------------------------------------------------------------------------------------------------------------
STEP4. 按下中間的「建立影片時間軸」，可以看見該視窗變成這樣。你可以拉動圖層那個紫色長方體的前後端，延長或縮短該圖層的顯示時間

----------------------------------------------------------------------------------------------------------------
STEP5. 在時間軸視窗的右上方可以看見一個小三角形，將他點開可以看到這視窗（我是習慣將「啟動時間軸快速建」給開啟，這樣按鍵盤方向鍵前、後就可以移動時間軸）

----------------------------------------------------------------------------------------------------------------
STEP6. 按下剛才時間軸視窗跳出來的面板中「設定時間軸影格速度」，可以設定動畫的影格速率

----------------------------------------------------------------------------------------------------------------
STEP7.  按下剛才時間軸視窗跳出來的面板中「面板選項」，可以設定在時間軸視窗內的圖層顯示大小

----------------------------------------------------------------------------------------------------------------
STEP8. 複製一個圖層

----------------------------------------------------------------------------------------------------------------
STEP9. 拖曳上方的圖層到下面圖層的後方

----------------------------------------------------------------------------------------------------------------
STEP10. 他就會變成一個「視訊群組」，我個人是認為將畫面內容編輯成視訊群組非常方便，在圖層面板就像資料夾一樣可以收納進所有的影格，在時間軸視窗裡也變得相當類似FLASH 的樣子



----------------------------------------------------------------------------------------------------------------
STEP11. 接下來就可以開始動畫的繪製了。要注意一點的是，一定要確定你所選取的圖層「在時間軸中有顯示出來」，這樣才能順利在工作區繪畫

----------------------------------------------------------------------------------------------------------------
STEP12. 畫

----------------------------------------------------------------------------------------------------------------
STEP13. 第一張畫完後，就選取至第二個圖層，並且把時間軸移到第二個圖層有所顯示的時間

----------------------------------------------------------------------------------------------------------------
STEP14. 這時我們需要開啟描圖紙功能，來讓我們在繪製第二張的時候也能看見第一個圖層的內容。點擊時間軸視窗右上角的三角按鈕，按下「啟動描圖紙」，並且可以開啟「描圖紙選項」來設定描圖紙的一些參數設定

----------------------------------------------------------------------------------------------------------------
STEP15.再來就能看見這個視窗，可以依據個人的需求調整描圖紙的設定

例如將最大與最小的透明度做調整，就可以決定前一個圖層的影像透明度

----------------------------------------------------------------------------------------------------------------
STEP16. 藉此我們可以畫出第二個影格

----------------------------------------------------------------------------------------------------------------
STEP17. 依樣畫葫蘆做出第三個影格圖層，這裡我們可以了解一下描圖紙的設定

描圖紙可以設定你要看見前面、後面多少的影格，數字越大看到的越多。影格間隔比較難解釋，簡單說明就是如果你的影格速率調整是每秒24格，但實際上我們24格中畫8張圖，那代表每張圖停留3格影格，這時我們就可以將影格間隔設定成3，這樣他就會「每3格只抓一個影像」。我會用這這功能是因為我這次的動畫草圖是在FLASH中已影格速率24完成的，所以從FLASH匯出連續圖檔後再進PS完稿，若不把影格間隔設定成3，那描圖紙所顯示出來的影像就會變得更複雜。當然聰明點就是直接在PS畫草稿，這樣你就不用設定影格速率24，而是設定成8，這樣每個影格都只需要調整成長度是1個影格，而不用像是影格速率24要把單一影格延長至3格了

----------------------------------------------------------------------------------------------------------------
STEP18. 利用描圖紙這個功能就能很方便的往下畫或是中割動畫。若要撥放動畫預覽只需一按下空白鍵並且讓Photoshop演算一下後就可以觀看動畫了

----------------------------------------------------------------------------------------------------------------
STEP19. 完成動畫後，按下檔案>轉存>演算視訊，就可以看到這個視窗。我個人是習慣從成連續圖檔，Photoshop 也有提供這個功能。



----------------------------------------------------------------------------------------------------------------
STEP20.這是我的動畫檔內容完成的模樣。各位可以看到圖層視窗內，每個圖層右下角都有個小標誌，那個標誌代表這個圖層是「智慧型物件」，個人覺得這個功能挺好用的。

----------------------------------------------------------------------------------------------------------------
【智慧型物件】如果你已經將整串動畫完成，但突然發現大小、位置不太正確，這時只有兩個解決辦法：1.一格一格慢慢調整，還有可能將順暢的動畫給搞砸。2.進入AE 再做調整。
但其實你可以將你所想要一起調整大小（甚至扭曲變形）的視訊群組製作成智慧型物件，這樣他就會變成一個完整的圖層（時間軸變成完整的一長條，而圖層也只顯示為一個智慧型物件圖層）。變成智慧型物件後你就能夠很容易的修改他的大小、位置甚至你可以扭曲他做變形，概念就像是FLASH 中的元件一樣方便，而且智慧型物件本身還可以製作成智慧型物件，概念跟FLASH的元件包元件是一模一樣的。例如我覺得上面那張最後完成的動畫男孩太小了，甚至想將他稍微扭曲變形一下，那我可以將有關男孩的所有圖層選取起來製作成智慧型物件：
1.首先將有關男孩的圖層全部選取起來，按右鍵製作成智慧型物件

2. 所有有關男孩的圖層結合我一個單一智慧型物件的圖層

3. 再來我就能針對這個圖層做各種扭曲變形

4. 結果是會影響整段智慧型物件內的影像內容的

----------------------------------------------------------------------------------------------------------------
【編輯智慧型物件的內容】已經製作成智慧型物件的影像內容，可以在該圖層點右鍵，選擇「編輯內容」，Photoshop 會開啟一個新的暫存檔案來讓你編輯該智慧型物件的影像內容
----------------------------------------------------------------------------------------------------------------
希望這份教學對各位有所幫助
很多小地方或許沒有提及
各位有問題可以再問問
感恩各位閱讀囉:)
另外喜歡也請不吝分享
感恩！
喜歡100 收藏 124 引用 留言 推上首頁 檢舉
引用網址：https://home.gamer.com.tw/TrackBack.php?sn=2631441
All rights reserved. 版權所有，保留一切權利

相關創作
【坐檯接客經驗談】韓國客人
【原創】狐之窗
道天錄 官方認證最強T0首抽弟子陣容+最新禮包碼+兌換碼序號+免費領明星弟子&仙魔
【中村くまりん】 【蔚藍檔案哇庫哇庫四格漫】告解室
【中村くまりん】 【蔚藍檔案哇庫哇庫四格漫】 流局滿貫

留言共 20 篇留言

KARAS：
cool! 本身也是數媒系學生
觀察了一下日本學生的作品 他們好像偏好用ps這種方法

感謝教學!

10-22 00:48

向日葵茄子：
感恩:)10-25 00:00
納粹-恩(´･ω･`)：
推 最近剛好想學用ps做動圖

10-22 07:12

向日葵茄子：
希望有幫助:)10-25 00:00
曾：
超酷的

10-22 19:45

向日葵茄子：
感謝:)
10-25 00:00
濃眉bay：
將動畫群組轉為智慧型物件真的好好用!
之前還一格一格修改...好像笨蛋

11-05 08:26

允樂：
好棒!很有幫助!!

08-11 21:36

向日葵茄子：
感恩唷:D!
08-11 21:37
允樂：
請問一下，我在轉存成演算視訊時只能選擇Photoshop連續圖像，Adobe媒體編碼器是灰色的無法選擇，請問大大知道該如何解決嗎?

08-12 09:20

向日葵茄子：
是選擇PS連續圖像沒錯，然後在格式的地方選擇PNG，他就能會出連續的PNG圖檔了。然後我會在AE開始連續圖檔再做後續的編輯08-12 21:29
Aqual：
請問你的ps版本是神麼呢，因為我用的很多功能都沒有。。。

08-18 17:21

向日葵茄子：
請問你是沒有什麼呢?可否截圖給我看我或許比較好理解你的情況（我的PS是CS6.Extended）08-18 20:30
Aqual：
我瘋狂努力的爬文後發現是extended才有，所以我重裝就好了XD

08-18 22:52

向日葵茄子：
原來是這樣嗎:S抱歉囉08-19 11:42
絕美：
想請問為什麼設定描圖紙功能，但都沒有重疊的效果?

09-07 17:52

向日葵茄子：
可能描圖紙設定沒有調整好唷09-07 20:02
絕美：
抱歉.....原來描圖的功能要拉到前面一點點才會有效果啊..........

09-07 18:09

向日葵茄子：
YEP09-07 20:02
PGK 2018紅襪冠軍：
我想問一下ps能把某人物圖跟另一張衣服圖合成在一起嗎？看起來像該人物穿上該衣服這樣

09-26 11:31

向日葵茄子：
我不是很理解你的意思，是否有圖片可以解釋一下呢:)
09-26 23:16
PGK 2018紅襪冠軍：
摁~~就是把一張照片裡面的人物衣服換成另外一張照片的衣服款式

09-27 10:09

向日葵茄子：
是否能有一張單張的圖片示意一下讓我了解:S09-27 22:57
城市茶飲：
請問增加音軌片段(加入音樂)時卻跑出「無法完成您的要求，因為沒有可用的動態連結。」要怎麼解決呢？

10-08 00:05

向日葵茄子：
我音樂部分都是在AE合成的所以沒有遇到這問題耶:S SORRY10-11 00:10
城市茶飲：
嗯，謝謝回應。
那可以請問一下關於描圖紙方面，請問只有在圖與圖之間的幾格才會出現描圖紙效果嗎？
每次都要調到中間的地方有點小麻煩。

10-11 15:57

向日葵茄子：
我記得描圖紙設定你可以決定說要看見前後幾格的範圍唷10-12 11:54
DoubleRow：
[e12]之前在找這方面的資料一直找不到，現在終於看到了,已收藏^^3q

10-16 21:34

向日葵茄子：
:D NO PRO10-16 21:53
泫殘：
請問妳用ae存的時候音樂檔 是存成mp3嗎?!

10-27 01:08

向日葵茄子：
是的11-01 12:56
Kosumi：
您好 想問問題
時間軸在繪製的時候拉動 會套用淡出淡入的效果 然而動畫不就該一張一張放嗎XD
滿困擾的 畫完KEY關鍵張在試看的時候 也在上一張跟下一張之間淡出淡入
雖然徹底完成之後可以存成影像序列在AE裡面製作
但畫的時候很不方便
以上 QQ

03-07 00:35

向日葵茄子：
是否在預覽時開到描圖紙功能呢? 我可能要看圖才會更了解詳細喔
03-07 21:40
Kosumi：
是的!!!天啊我是白癡XD
那再請問因為PS不像TOONBOOM之類的軟體 可以決定你一張圖幾拍
(同一張閃三次，畫八張剛好一秒這樣的意思)
要自己拉時間長度的話 要怎麼切割比較好
(覺得關鍵張很好畫，畫完之後捕間補得timing很亂)
小弟愚蠢QQ

03-07 21:50

向日葵茄子：
其實我已經很久沒用PS做動畫...所以細節我很難掌握(都改用CLIPSTUDIO)，我印象中我使用PS是可以讓一個影格延長顯示的ORZ03-12 19:19
Watagashi：
您好~想請問PS能做到像火影忍者ED6(流星)那樣的呈現方式?
好像是繪畫縮圖攝影?可是沒有錄製滑鼠又沒有放大縮小畫面...google爬文很久都找不到製作的方法[e28]

10-02 03:02

伈婷：
收藏收藏：）

02-11 11:22

我要留言提醒：您尚未登入，請先登入再留言

100喜歡★darkcrow6027 可決定是否刪除您的留言，請勿發表違反站規文字。

前一篇：手...手臂痛！... 後一篇：塗鴉1022...

追蹤私訊切換新版閱覽

作品資料夾

漫畫 (209)

插畫 (61)

塗鴉 (9)

教學 (2)

動畫 (16)

日誌 (55)

未分類 (95)

aaa1357932 給 大家：
各位有空可以來我家看看畫作或聽聽我的全創作專輯！看更多我要大聲說昨天17:29


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準，可能無法使用新的應用程式來呈現網站內容，在瀏覽器支援度及網站安全性的雙重考量下，為了讓巴友們有更好的使用體驗，巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特：
。Google Chrome（推薦）
。Mozilla Firefox
。Microsoft Edge（Windows10以上的作業系統版本才可使用）

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營，請將 gamer.com.tw 加入廣告阻擋工具的白名單中，謝謝 !【教學】