創作內容

84 GP

Photoshop 動畫製作教學

作者:費子軒│2014-10-21 23:55:28│贊助:364│人氣:26371


這次製作動畫嘗試了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 會開啟一個新的暫存檔案來讓你編輯該智慧型物件的影像內容
----------------------------------------------------------------------------------------------------------------
希望這份教學對各位有所幫助
很多小地方或許沒有提及
各位有問題可以再問問
感恩各位閱讀囉:)
另外喜歡也請不吝分享
感恩!
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=2631441
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 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

我要留言提醒:您尚未登入,請先登入再留言

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

前一篇:手...手臂痛!... 後一篇:塗鴉1022...

追蹤私訊

作品資料夾

SageLuri喜歡清水BL的你
歡迎喜歡閱讀/創作故事的同好入內閒聊加友!同場加映薔薇口味的玄幻小說〈時空魅影〉,每週一二四五播出。看更多我要大聲說昨天16:16


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

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