AE制作APP界面gif動(dòng)畫(huà)效果

我們?cè)谶M(jìn)行交互設(shè)計(jì)的時(shí)候,大部分時(shí)間是基于界面和功能邏輯的考慮,也適當(dāng)?shù)倪M(jìn)行了交互效果的考慮,那么我們?nèi)绾伟呀换サ男Ч庇^的表現(xiàn)出來(lái)呢,除了用axure做出交互的動(dòng)態(tài)效果,ps繪制GIF圖,代碼設(shè)計(jì)動(dòng)效外,還可使用一個(gè)非常容易上手的工具,那就是Adobe 的AE,AE是一款強(qiáng)大的后期軟件,同時(shí)也可以用來(lái)制作不少直觀的動(dòng)效預(yù)覽效果。
常見(jiàn)的動(dòng)效有:縮放,漸變,透明度變化,旋轉(zhuǎn),左右滑進(jìn),左右滑出,跳動(dòng),顏色變化等。

Adobe After Effects CS3 中文綠色免費(fèi)版
- 類(lèi)型:媒體其它
- 大?。?/span>138MB
- 語(yǔ)言:簡(jiǎn)體中文
- 時(shí)間:2016-03-19
1.首先安裝完AE后打開(kāi),界面默認(rèn)居中是預(yù)覽,左邊是素材窗口,下方是時(shí)間軸和圖層。
我們可以右鍵導(dǎo)入素材,或者在AE里面直接用上方的工具進(jìn)行繪制來(lái)制作想要的效果。素材拖動(dòng)到圖層去,上方的預(yù)覽區(qū)就可以看到我們放進(jìn)去的素材了。
2.因?yàn)楸容^簡(jiǎn)單的效果,這里我是直接在AE里面繪制一些簡(jiǎn)單圖形,放到圖層窗口中,我們先做一個(gè)位移的效果,舉一反三很快就能上手了。點(diǎn)擊三角符號(hào)展開(kāi)圖層的各種效果屬性,打開(kāi)變換,右側(cè)調(diào)節(jié)時(shí)間,我們是從0s開(kāi)始所以把指針拖到00s,點(diǎn)擊位置前面的類(lèi)似鬧鐘的圖標(biāo),開(kāi)始記錄關(guān)鍵的幀數(shù)。
然后拖動(dòng)指針到01s再調(diào)節(jié)位置后面的坐標(biāo)參數(shù),我這里是做Y軸的變化,所以就只調(diào)節(jié)Y軸坐標(biāo)的數(shù)值就可以。這樣從0到1s的位置動(dòng)畫(huà)就做好了。非常簡(jiǎn)單吧。除了位移外,縮放旋轉(zhuǎn)這些也是同樣的道理。
3.現(xiàn)在我們來(lái)試一下封面圖的制作,我們新建一個(gè)項(xiàng)目組,在素材區(qū)點(diǎn)擊右鍵新建合成,調(diào)節(jié)時(shí)長(zhǎng)其他默認(rèn)即可。
用上面的矩形畫(huà)兩個(gè)大小為560*210(寬高合適也行,不一定要這個(gè))的矩形,填充一些不同的顏色,拖動(dòng)到畫(huà)布外面對(duì)齊,利用位置關(guān)鍵幀來(lái)調(diào)節(jié),沿著Y/X軸坐標(biāo)參數(shù),從畫(huà)布外向中間移動(dòng)就可以了,具體的參數(shù)自己把握。
4.利用不同的變化效果去調(diào)節(jié)關(guān)鍵幀,就能做到縮放旋轉(zhuǎn)漸變等效果了。另外素材拖入圖層是默認(rèn)占全部時(shí)長(zhǎng)的可以通過(guò)時(shí)間軸拖動(dòng)來(lái)調(diào)節(jié)素材長(zhǎng)短來(lái)決定顯示的時(shí)間。點(diǎn)擊素材后鼠標(biāo)放到左右會(huì)出現(xiàn)拖動(dòng)的鼠標(biāo)指針,這時(shí)就能拖動(dòng)來(lái)調(diào)節(jié)了,在英文輸入狀態(tài)下,IO和[]可以快速對(duì)齊拖動(dòng)的指針,銜接不同的素材。
5.效果做好后可以預(yù)覽一下,沒(méi)問(wèn)題就可以合成了,合成快捷鍵OSX (shift+command+M),WIN(Ctrl+M)因?yàn)槲覀円獙?dǎo)出GIF圖,所以就渲染為圖片的序列幀,然后倒入PS儲(chǔ)存為WEB格式就可以了。渲染的參數(shù)設(shè)置為JPEG序列或者png序列都可以,考慮到大小所以選擇JPEG格式。
6.確定后點(diǎn)擊渲染,渲染后的圖片用ps打開(kāi),勾選圖像序列,然后點(diǎn)文件-導(dǎo)出-存儲(chǔ)為WEB,格式選擇GIF再做其他一些參數(shù)調(diào)節(jié),盡量控制圖像質(zhì)量和文件大小的平衡,一個(gè)動(dòng)態(tài)效果的預(yù)覽就做好了,基本上熟悉的話(huà),很快就能搞定一些簡(jiǎn)單或者中等難度的效果了。
7.因?yàn)閯?dòng)效涉及到物理學(xué),所以我們可以觀察一些基本事物的運(yùn)動(dòng)特征,可以通過(guò)運(yùn)動(dòng)曲線來(lái)調(diào)節(jié)動(dòng)效,才能在交互設(shè)計(jì)中起到一些錦上添花的效果,同時(shí)UI和交互或者產(chǎn)品不一定要非常專(zhuān)業(yè)的來(lái)制作動(dòng)效,學(xué)習(xí)一些簡(jiǎn)單的小技能,在工作起到一定的作用就算是可以了,畢竟還有專(zhuān)業(yè)的動(dòng)效設(shè)計(jì)師在嘛。
8.最后放張做了2個(gè)小時(shí)的效果圖,拙劣之處還望大神們不吝賜教。
以上就是AE制作APP界面gif動(dòng)畫(huà)效果方法介紹,操作很簡(jiǎn)單的,喜歡的朋友可以參考本文,希望能對(duì)大家有所幫助!
相關(guān)閱讀:ae怎么制作文字隨著煙霧消散效果? Particular的使用方法
相關(guān)文章
gif動(dòng)態(tài)圖片另存為jpg格式以后不動(dòng)了怎么辦?
gif動(dòng)態(tài)圖片另存為jpg格式以后不動(dòng)了怎么辦?在網(wǎng)上經(jīng)常能看到動(dòng)圖,想下載一張gif動(dòng)圖,發(fā)現(xiàn)下載下來(lái)的是jpg格式的圖,打開(kāi)也不動(dòng)了,該怎么辦呢?下面我們就來(lái)看看詳細(xì)的2016-07-01Camtasia Studio教你將視頻做成GIF動(dòng)態(tài)圖
這篇文章主要為大家詳細(xì)介紹了Camtasia Studio教你將視頻做成GIF動(dòng)態(tài)圖,給出了制作有趣的動(dòng)態(tài)圖片的詳細(xì)步驟,感興趣的小伙伴們可以參考一下2016-05-19AE怎么將編輯好的視頻轉(zhuǎn)換成GIF? ae輸出gif格式的教程
AE怎么將編輯好的視頻轉(zhuǎn)換成GIF?使用ae做好了視頻效果,但是想讓這個(gè)視頻隨時(shí)播放,就可以將視頻轉(zhuǎn)換成gif動(dòng)圖格式的,下面我們來(lái)看看ae輸出gif格式的教程,需要的朋友可2016-04-14- 很多朋友想要使用GIF快手下載別人的視頻,但是不知道怎么使用,今天小編就為大家?guī)?lái)GIF快手保存視頻圖文方法,感興趣的朋友可以一起看看2015-11-04
word中插入的gif動(dòng)畫(huà)怎么設(shè)置動(dòng)起來(lái)?
word中插入的gif動(dòng)畫(huà)怎么設(shè)置動(dòng)起來(lái)?我們都知道,word中如果插入gif動(dòng)圖保存以后,動(dòng)圖都不動(dòng)了,該怎么解決這個(gè)問(wèn)題呢?下面我們就來(lái)看看word總讓gif動(dòng)圖動(dòng)起來(lái)的教程,2016-07-15ulead gif怎么將模糊動(dòng)態(tài)gif調(diào)整成清晰的?
ulead gif怎么將模糊動(dòng)態(tài)gif調(diào)整成清晰的?有一個(gè)重要的gif,打開(kāi)以后發(fā)現(xiàn)一點(diǎn)都不清楚,該怎么將畫(huà)面調(diào)整的很清晰呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2016-06-25制作gif動(dòng)態(tài)圖哪個(gè)軟件好 制作動(dòng)圖的app美圖GIF下載使用方法
有時(shí)候手機(jī)拍照片會(huì)連續(xù)拍好幾張,如果這樣的照片能變成gif格式的動(dòng)圖就好了,今天就介紹一下手機(jī)里可以用的制作動(dòng)圖的軟件:美圖gif。這款軟件經(jīng)過(guò)測(cè)試使用方法很方便,效2016-07-28