PS網(wǎng)頁(yè)GIF動(dòng)畫(huà)廣告設(shè)計(jì)(2)
7.那這時(shí)的圖像仍然是不會(huì)動(dòng)的,現(xiàn)在我們通過(guò)對(duì)圖層的隱藏為其添加動(dòng)畫(huà)效果。我們先來(lái)選中第一幀,然后在圖層面板中點(diǎn)擊圖層前面的小眼睛按鈕將圖層1、2隱藏,如圖12-3-8。
圖12-3-8
8.然后我們選中第2個(gè)以及第3個(gè)動(dòng)畫(huà)幀,對(duì)其進(jìn)行同樣的操作。完成后,我們點(diǎn)播放進(jìn)行一下預(yù)覽,那這樣一個(gè)簡(jiǎn)單的幀切換動(dòng)畫(huà)我們就創(chuàng)建好了。我們還可以在圖層之間添加一些漸變的效果,我們選中第1幀(要注意的是我們要為第一幀添加漸變,在圖層中我們也要選中第1幀所對(duì)應(yīng)的圖層)。單擊過(guò)渡動(dòng)畫(huà)幀按鈕,出現(xiàn)了過(guò)度的對(duì)話框,如圖12-3-9所示。
圖12-3-9
9.這里我們可以對(duì)其進(jìn)行過(guò)度的設(shè)置,比如:過(guò)度的方式、需要過(guò)度的幀數(shù)等等。我們點(diǎn)確定。這樣第1幀的過(guò)度動(dòng)畫(huà)我們就添加成功了,我們可以選中其中一個(gè)幀看下過(guò)度的效果,如圖12-3-10所示。
圖12-3-10
10.同樣對(duì)于其他2幀我們也可以使用同樣的操作。設(shè)置完后,我們?cè)傩陆?個(gè)圖層填充為粉紅色和白色,如圖12-3-11所示。新建圖層的同時(shí)我們也要再動(dòng)畫(huà)面板中為其添加動(dòng)畫(huà)幀。如圖12-3-12所示。
圖12-3-11
圖12-3-12
11.我們對(duì)14和13幀進(jìn)行復(fù)制,如圖12-3-13所示。那么這一步的目的是使兩個(gè)不同顏色的圖層進(jìn)行互相切換,起到一個(gè)閃爍的效果。
圖12-3-13
12.閃爍效果設(shè)置完以后,我們將圖層2對(duì)應(yīng)的動(dòng)畫(huà)幀拖到最后最為動(dòng)畫(huà)結(jié)束幀。最后我們?cè)O(shè)置動(dòng)畫(huà)的延遲時(shí)間以及播放的次數(shù),如圖12-3-14所示。我們?cè)O(shè)置成0.2秒,閃爍部分我們?cè)O(shè)置成0.1,最后結(jié)束幀我們?cè)O(shè)置為1。
圖12-3-14
13.完成后,我們就可以預(yù)覽了。預(yù)覽無(wú)誤,我們就可以進(jìn)行最后的輸出了。選擇【文件】,【存儲(chǔ)為web和設(shè)備所用格式】,彈出對(duì)話框如圖12-3-15所示。
圖12-3-15
14.我們對(duì)預(yù)設(shè)進(jìn)行一下設(shè)置,各參數(shù)設(shè)置如圖12-3-16所示。
圖12-3-16
點(diǎn)【存儲(chǔ)】,選擇文件保存路徑,選擇【保存】,這樣一個(gè)網(wǎng)頁(yè)中GIF的動(dòng)畫(huà)就制作完成了。
最終效果:
學(xué)習(xí) · 提示
相關(guān)教程
- 陰影效果,教你制作各類(lèi)陰影教程
- banner教程,設(shè)計(jì)一個(gè)簡(jiǎn)單的母親節(jié)Banner教程
- 陰影效果,制作網(wǎng)頁(yè)常見(jiàn)的圖片投影效果
- 網(wǎng)頁(yè)圖片,設(shè)計(jì)一個(gè)網(wǎng)頁(yè)登陸框圖片教程
- 設(shè)計(jì)知識(shí),新手詳情頁(yè)制作誤區(qū)
- 界面設(shè)計(jì),設(shè)計(jì)音樂(lè)播放器界面圖片
- 圖片教程,教你怎么做圓形圖表
- 圖片設(shè)計(jì),教你設(shè)計(jì)扁平化404錯(cuò)誤頁(yè)面圖片
- 圓角教程,教你制作網(wǎng)頁(yè)常用的圓角矩形邊角
- 進(jìn)度條,設(shè)計(jì)一個(gè)彩色進(jìn)度條
推薦教程
- PS教程:設(shè)計(jì)導(dǎo)航鼠標(biāo)懸停狀態(tài)小效果
- Photoshop制作網(wǎng)站導(dǎo)航圖
- 陰影效果,教你制作各類(lèi)陰影教程
- 用ps制作豎列導(dǎo)航
- Photoshop設(shè)計(jì)網(wǎng)站用的藍(lán)色導(dǎo)航圖框
- Photoshop精細(xì)制作Vista風(fēng)格網(wǎng)站導(dǎo)航條
- Photoshop教程:像素化細(xì)節(jié)設(shè)計(jì)技巧
- banner教程,用ps制作960*90的廣告圖片
- 界面設(shè)計(jì),設(shè)計(jì)音樂(lè)播放器界面圖片
- Photoshop制作網(wǎng)頁(yè)搜索條