下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > ps cc結合AE做一個時鐘動態圖

ps cc結合AE做一個時鐘動態圖

時間:2024-03-07 08:39作者:下載吧人氣:33

1、使用軟件:Adobe Photoshop、Adobe After Effect

ps cc結合AE做一個時鐘動態圖 ps cc結合AE做一個時鐘動態圖

版本:當然是越新越好,推薦CC。注意Windows下只有64位系統才能安裝AE CC,如果你是32位系統只能用CS4版本了。

以下以Windows版AE CC、PS CC作為例子,其他版本大同小異,用MAC的同學自己轉換一下快捷鍵哈~

由于我習慣用英文版AE,大家可能用中文版比較多,我盡量都照顧。中文翻譯以AE CC官方中文版為準。

2、關于GIF動圖

GIF會動,是因為它是由很多單張的圖片打包在一起播放,因而體積會很大,動輒好幾兆,要發網上播放容易卡殼兒影響效果。當然適當的優化可以減小體積,更重要的是在做之前要心里有個數,在保證效果的前提下盡量避免會造成臃腫的情況。

那么什么參數會影響GIF圖的體積呢?

①尺寸②動畫時長③幀率④顏色數

尺寸、動畫時長很容易理解;

幀率說的是每秒播放多少張圖,幀數越大動畫越流暢,代價就是體積變大,一般超過超過30就沒意義了;

顏色數是很多人忽略也很重要的一個關鍵影響因素,顏色數越少體積越小,同時畫質越差,但是很多動畫本身就沒用幾種顏色,這里頭的壓縮空間就很可觀了,所以那種有復雜寫實背景的GIF通常要么體積巨大要么畫質很渣。

尺寸我建議用dribbble的400x300像素,長度控制在10秒內,幀率25,顏色數根據動畫的不同盡量用128以下的吧。

3、“動”之前的準備

除非已經很熟練了,不然那種一拍腦子就想三下五除二做一個好看的動圖出來的行為常常事倍功半甚至一事無成。這里我強烈建議大家拿出筆和紙,畫一畫分解圖,理清一下思路。分鏡圖不是什么高深的東西,只要能把關鍵的幾個畫面簡單畫出來,簡單描述素材怎么運動就好,關鍵是自己邊做的時候不會忘了要做啥,提高效率。下圖就是第一次分享時一位學員畫的分鏡草圖,一個很簡單的天氣圖標動畫,她用一個下午的時間就完成了自己的GIF處女作。

ps cc結合AE做一個時鐘動態圖

成品:


ps cc結合AE做一個時鐘動態圖

然后就是在PS里畫了,大家都是玩UI的應該都很熟悉了。這里要注意的是要根據之前分鏡設計的動作把素材分離好,分組、圖層命名越清晰越好(或者你自己能記住哪個圖層是什么東西也行),圖層樣式保留著別柵格化了,最后存儲成PSD文件。

4、將PSD文件導入AE

終于要到AE了!!!激動了有木有!!!先別急,導入PSD文件這一步很重要,很多新手卡在這兒了。

啟動AE,文件→導入→文件,或者直接快捷鍵CTRL+I,選擇要導入的PSD文件:

ps cc結合AE做一個時鐘動態圖

注意了,先別急著按導入,在“導入為(Import As)”下拉菜單選擇“合成 - 保持圖層大小(Composition - Retine Layer Sizes)”,再按導入,這樣就能保持圖層的獨立性了。

另外兩個選項,Footage(素材)就是將這個PSD當成一張圖導入,而Composition(合成)則和我們的選擇很像只不過導入的每一張圖層都是等同畫布大小,中心點也是一樣的。

ps cc結合AE做一個時鐘動態圖

然后AE會問你是否保留圖層樣式(Editable Layer Styles),當然留著了!

ps cc結合AE做一個時鐘動態圖

點確定,然后就在項目列表里看到了我們的合成(Composition),以后我們就要在這個合成里完成各種酷炫狂拽吊炸天的動畫了——不過在此之前我們還得設置好才行。在合成上右鍵→合成設置(Composition Settings)

ps cc結合AE做一個時鐘動態圖

ps cc結合AE做一個時鐘動態圖

長寬都自動繼承了PSD文件畫布的設置,像素長寬比(Pixel Aspect Ratio)選方形像素(Square Pixel),幀率(Frame Rate)設為25,時長(Duration)設為10秒,其他默認就好了,然后點確定。

合成設置也可以在這里找到:

ps cc結合AE做一個時鐘動態圖

ps cc結合AE做一個時鐘動態圖

然后就開始我們的動畫之旅吧!別忘了存盤哦(Ctrl+S)!

5、在AE里制作動畫

將PSD文件正確導入AE之后,我們就可以開始動畫的制作了,介于本篇教程是基礎篇,具體的動畫內容、技巧等不作太多贅述,計劃在以后的教程里做展開。這里只聊聊AE的基本操作。

首先我們看下AE的界面:

雙擊打開PSD文件同名的合成(例:未標題-1)

ps cc結合AE做一個時鐘動態圖

項目面板——所有素材、合成都在這里哦。

ps cc結合AE做一個時鐘動態圖

這個面板顯示打開的合成里的各個層,注意到在PS里分好的組是以合成的形式存在的,雙擊之可進入“組1”、“組2”。

ps cc結合AE做一個時鐘動態圖

預覽面板,可以看懂我們的小圖圖了連參考線也能導入哦。其實AE可以把PS里的路徑、圖層樣式、參考線、分組統統導進來,果然是Adobe自家兄弟!


ps cc結合AE做一個時鐘動態圖


時間軸,大概是UI設計師們比較陌生的東西了,別怕,西西帶你玩轉它!

ps cc結合AE做一個時鐘動態圖


萬事開頭難,下面我們先來做個最簡單的動畫,本例是一個鐘,那就讓指針轉一圈。把時間軸上的指針移到0秒,找到指針所在圖層(組4),點開小三角,點Transform->Rotation(變換->旋轉)旁邊的小秒表,這樣我們就在0秒處添加了一個關鍵幀,如圖:

ps cc結合AE做一個時鐘動態圖

然后將指針移到10秒處,將旋轉數值設為360°(會自動變成1x+0.0°),意思是轉了一圈。好,按下空格播放可以看到旋轉的效果。

ps cc結合AE做一個時鐘動態圖

如何做炫目的效果不是本篇教程的目的,成功動起來了咱就翻篇吧~

再次提醒:一定要記得隨時存盤!

6、輸出動畫,生成GIF

動畫做再屌,輸不出來也白搭。AE雖然是專業影視動畫軟件,但它的輸出選項其實少的可憐(當然配合自家的MediaEncoder能輸出更多格式,不過這不在本教程討論范圍了),反正是沒有GIF直接輸出的選項了,我們只能曲線救國。

方法一:輸出視頻轉GIF

確保我們的“未標題-1”合成處在被選中狀態(邊框變黃色),

ps cc結合AE做一個時鐘動態圖 ps cc結合AE做一個時鐘動態圖

被選中 未選中

按下快捷鍵Ctrl+M,合成就被加入到渲染隊列(Render Queue)了。

ps cc結合AE做一個時鐘動態圖

“渲染(Render)”就是把動畫生成動畫文件的過程,下面我們來做些設置:單擊那個Lossless(無損)那個黃字(不是小三角哦)。

彈出的對話框格式(Format)里選Quicktime:

ps cc結合AE做一個時鐘動態圖

點開旁邊的格式選項(Format Option),視頻編碼(Video Codec)選

擇PNG,質量(Quality)選100,這樣就能幾乎畫質無損地輸出。

ps cc結合AE做一個時鐘動態圖

如果找不到Quicktime選項請先安裝Quicktime,蘋果官網上可以找到 http://www.apple.com/quicktime/

好,其他選項保持默認,點兩次確定之后回到渲染隊列,點擊輸出到(Output to)小黃字(不是小三角哦),設置生成的文件路徑以及文件名,這里我還是保持默認的“未標題-1.mov”吧,然后別忘了點渲染(Render)按鈕,等進度條跑完后,我們又要回熟悉的PS了~

ps cc結合AE做一個時鐘動態圖 ps cc結合AE做一個時鐘動態圖

將我們生成的“未標題-1.mov”直接拖進PS,會看到多了一個時間軸,

ps cc結合AE做一個時鐘動態圖

其實PS是可以簡單制作視頻的,不過我也不太會用,有時間再研究研究。好,現在點擊文件→存儲為web所用格式:

ps cc結合AE做一個時鐘動態圖

ps cc結合AE做一個時鐘動態圖

終于到最后一步了,這里有很多的優化選項,說實話我也沒研究透。左下角能看到輸出的大概大小(本圖是381.1k),右下角可以播放查看動畫,注意這里有個循環選項記得把“一次”改為“永遠”不然它就只播放一次就停了。

ps cc結合AE做一個時鐘動態圖

右上的這些參數才是優化的重點,大家可以自己調整試試看什么參數能調的又小又不失真,最后點“存儲為”輸出,就大功告成了!

這種方法的好處是生成文件少,直觀方便管理,且中間生成的視頻文件也可作為展示資料用。

方法二:輸出圖像序列( 序列幀)

有時候因為一些原因AE輸出視頻失敗或者PS無法導入,這時就可以試試圖像序列。

在AE里,渲染設置的時候選擇PNG 序列(PNG Sequence)

ps cc結合AE做一個時鐘動態圖

然后輸出路徑指定一個文件夾存放輸出的圖像序列,這樣點渲染后就會生成一組帶序號的PNG文件。

ps cc結合AE做一個時鐘動態圖

然后打開PS,如果是PS CC及以上版本,直接可以文件 -> 打開 ,然后選中圖像序列其中的一張圖,勾上“圖像序列”選項

ps cc結合AE做一個時鐘動態圖

然后幀率選25

ps cc結合AE做一個時鐘動態圖

之后的步驟參照方法一就行。

如果你的PS是CC以前的版本就稍微有點繁瑣了,主要是導入序列幀比較麻煩。打開PS,文件 -> 腳本->將文件載入堆棧

ps cc結合AE做一個時鐘動態圖

彈出的面板選擇 瀏覽

ps cc結合AE做一個時鐘動態圖

然后選中所有序列幀

ps cc結合AE做一個時鐘動態圖

ps cc結合AE做一個時鐘動態圖

然后就耐心等待圖像載入到PS圖層里(如果你的圖像序列很多,會載入相當長一段時間)

ps cc結合AE做一個時鐘動態圖

點擊 創建幀動畫,時間軸變成這樣(有時候載入圖層后你的時間軸直接是下圖這樣,就不用點創建幀動畫那一步驟):

ps cc結合AE做一個時鐘動態圖

然后點擊時間軸右上角的選項菜單,選擇 從圖層建立幀:

ps cc結合AE做一個時鐘動態圖

這樣終于把動畫導進來了,可以先點下面的播放按鈕播放一下,看看播放順序是否正確

ps cc結合AE做一個時鐘動態圖

如果發現反了(多數情況如此),點擊剛才的小菜單,選擇 反向幀 來修正:

ps cc結合AE做一個時鐘動態圖

然后,選擇時間軸上的所有幀,點擊下面的“0秒”,在彈出來的菜單選擇 其他時間 ,用以設置每幀存在時間:

ps cc結合AE做一個時鐘動態圖

彈出來的面板輸入0.04,這個值是根據我們動畫設置的25幀/秒來計算的(大家想想如果動畫設置了30幀/秒或者其他值這里該填多少?),

ps cc結合AE做一個時鐘動態圖

確定之后的步驟和之前相同了,點擊文件→存儲為web所用格式:

ps cc結合AE做一個時鐘動態圖

ps cc結合AE做一個時鐘動態圖

ps cc結合AE做一個時鐘動態圖

如果有問題或者建議,歡迎討論!

標簽圖像處理,原創,自譯教程,bigxixi,設計教程
查看所有評論+

網友評論

網友
您的評論需要經過審核才能顯示

公眾號

盖楼回复X

(您的评论需要经过审核才能显示)

主站蜘蛛池模板: 久久aⅴ免费观看| 动漫女同性被吸乳羞羞漫画| 亚洲av丰满熟妇在线播放| 91欧美精品激情在线观看最新| 玉蒲团之偷情宝鉴电影| 好吊色青青青国产在线播放| 十六以下岁女子毛片免费| 上课公然调教h| 精品国产理论在线观看不卡| 成人毛片无码一区二区三区| 又爽又黄又无遮挡的视频| 两个丫头稚嫩紧窄小说| 精品久久久久成人码免费动漫 | 亚洲视频在线一区二区三区| 你是我的城池营垒免费观看完整版 | 国产成人av一区二区三区在线观看 | 欧美高清老少配性啪啪| 国产青草视频在线观看免费影院| 亚洲欧美强伦一区二区另类| 91精品啪在线观看国产线免费| 欧美换爱交换乱理伦片免费| 国产精品国产三级国产专播下 | 波多野结衣丝袜诱惑| 国产综合无码一区二区辣椒| 亚洲伊人久久大香线蕉AV| 狠狠色噜噜狠狠狠狠98| 日本暖暖视频在线| 啦啦啦手机完整免费高清观看| 一个人看的www日本高清视频| 男人的天堂欧美| 国产精品爆乳奶水无码视频| 亚洲2022国产成人精品无码区| 青青草国产精品久久| 欧美色视频日本| 国产日产欧产精品精品电影| 久久久亚洲精品无码| 精品人妻人人做人人爽夜夜爽 | 万古战神txt下载| 热re久久精品国产99热| 女人张开腿等男人桶免费视频| 亚洲精品tv久久久久久久久|