PS網(wǎng)頁GIF動畫廣告設(shè)計(2)

來源:薛欣博客 作者:薛欣姚輝 學(xué)習(xí):2402人次

7.那這時的圖像仍然是不會動的,現(xiàn)在我們通過對圖層的隱藏為其添加動畫效果。我們先來選中第一幀,然后在圖層面板中點擊圖層前面的小眼睛按鈕將圖層1、2隱藏,如圖12-3-8。

PS教程大禮包-第12章網(wǎng)頁設(shè)計中的應(yīng)用(三)

圖12-3-8

8.然后我們選中第2個以及第3個動畫幀,對其進行同樣的操作。完成后,我們點播放進行一下預(yù)覽,那這樣一個簡單的幀切換動畫我們就創(chuàng)建好了。我們還可以在圖層之間添加一些漸變的效果,我們選中第1幀(要注意的是我們要為第一幀添加漸變,在圖層中我們也要選中第1幀所對應(yīng)的圖層)。單擊PS教程大禮包-第12章網(wǎng)頁設(shè)計中的應(yīng)用(三)過渡動畫幀按鈕,出現(xiàn)了過度的對話框,如圖12-3-9所示。

PS教程大禮包-第12章網(wǎng)頁設(shè)計中的應(yīng)用(三)

圖12-3-9

9.這里我們可以對其進行過度的設(shè)置,比如:過度的方式、需要過度的幀數(shù)等等。我們點確定。這樣第1幀的過度動畫我們就添加成功了,我們可以選中其中一個幀看下過度的效果,如圖12-3-10所示。

PS教程大禮包-第12章網(wǎng)頁設(shè)計中的應(yīng)用(三)

圖12-3-10

10.同樣對于其他2幀我們也可以使用同樣的操作。設(shè)置完后,我們再新建2個圖層填充為粉紅色和白色,如圖12-3-11所示。新建圖層的同時我們也要再動畫面板中為其添加動畫幀。如圖12-3-12所示。

PS教程大禮包-第12章網(wǎng)頁設(shè)計中的應(yīng)用(三)

圖12-3-11

PS教程大禮包-第12章網(wǎng)頁設(shè)計中的應(yīng)用(三)

圖12-3-12

11.我們對14和13幀進行復(fù)制,如圖12-3-13所示。那么這一步的目的是使兩個不同顏色的圖層進行互相切換,起到一個閃爍的效果。

PS教程大禮包-第12章網(wǎng)頁設(shè)計中的應(yīng)用(三)

圖12-3-13

12.閃爍效果設(shè)置完以后,我們將圖層2對應(yīng)的動畫幀拖到最后最為動畫結(jié)束幀。最后我們設(shè)置動畫的延遲時間以及播放的次數(shù),如圖12-3-14所示。我們設(shè)置成0.2秒,閃爍部分我們設(shè)置成0.1,最后結(jié)束幀我們設(shè)置為1。

PS教程大禮包-第12章網(wǎng)頁設(shè)計中的應(yīng)用(三)
圖12-3-14

13.完成后,我們就可以預(yù)覽了。預(yù)覽無誤,我們就可以進行最后的輸出了。選擇【文件】,【存儲為web和設(shè)備所用格式】,彈出對話框如圖12-3-15所示。

PS教程大禮包-第12章網(wǎng)頁設(shè)計中的應(yīng)用(三)

圖12-3-15

14.我們對預(yù)設(shè)進行一下設(shè)置,各參數(shù)設(shè)置如圖12-3-16所示。

PS教程大禮包-第12章網(wǎng)頁設(shè)計中的應(yīng)用(三)

圖12-3-16

點【存儲】,選擇文件保存路徑,選擇【保存】,這樣一個網(wǎng)頁中GIF的動畫就制作完成了。

最終效果:

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!