PS網(wǎng)頁GIF動(dòng)畫廣告設(shè)計(jì)(4)

12.3精彩實(shí)例

12.3.1網(wǎng)頁GIF動(dòng)畫設(shè)計(jì)

下面我們就來通過一個(gè)實(shí)例講解一下GIF動(dòng)畫的制作過程。

1.首先我們啟動(dòng)ps，選擇【文件】，【新建】如圖12-3-1所示。再彈出的【新建】對(duì)話框中，我們輸入它的名稱以及畫布的寬和高。如圖12-3-2所示。設(shè)置完成后，我們點(diǎn)確定。

圖12-3-1

圖12-3-2

2.接下來，我們打開一些JPG的圖片，如圖12-3-3所示。

圖12-3-3

3.我們將這些圖片分為多個(gè)圖層合在我們剛剛新建的圖像上。然后對(duì)它們的大小進(jìn)行調(diào)整。調(diào)整后效果如圖12-3-4所示。

圖12-3-4

4.我們再打開兩張圖片，也將其合并在一個(gè)圖像內(nèi)。這時(shí)圖層樣式如圖12-3-5所示。

圖12-3-5

5.準(zhǔn)備工作做完，我們就要開始創(chuàng)建動(dòng)畫效果了。創(chuàng)建動(dòng)畫非常的簡單，我們選擇【窗口】，【動(dòng)畫】，這時(shí)就打開了動(dòng)畫面板。如圖12-3-6所示。

圖12-3-6

6.由于我們現(xiàn)在有3個(gè)圖層，因此我們可以在動(dòng)畫面板中創(chuàng)建3個(gè)動(dòng)畫幀。我們單擊按鈕。創(chuàng)建后效果如圖12-3-7所示。

圖12-3-7

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

圖12-3-8

8.然后我們選中第2個(gè)以及第3個(gè)動(dòng)畫幀，對(duì)其進(jìn)行同樣的操作。完成后，我們點(diǎn)播放進(jìn)行一下預(yù)覽，那這樣一個(gè)簡單的幀切換動(dòng)畫我們就創(chuàng)建好了。我們還可以在圖層之間添加一些漸變的效果，我們選中第1幀（要注意的是我們要為第一幀添加漸變，在圖層中我們也要選中第1幀所對(duì)應(yīng)的圖層）。單擊過渡動(dòng)畫幀按鈕，出現(xiàn)了過度的對(duì)話框，如圖12-3-9所示。

圖12-3-9

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

圖12-3-10

10.同樣對(duì)于其他2幀我們也可以使用同樣的操作。設(shè)置完后，我們再新建2個(gè)圖層填充為粉紅色和白色，如圖12-3-11所示。新建圖層的同時(shí)我們也要再動(dòng)畫面板中為其添加動(dòng)畫幀。如圖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)畫幀拖到最后最為動(dòng)畫結(jié)束幀。最后我們設(shè)置動(dòng)畫的延遲時(shí)間以及播放的次數(shù)，如圖12-3-14所示。我們設(shè)置成0.2秒，閃爍部分我們設(shè)置成0.1，最后結(jié)束幀我們設(shè)置為1。

圖12-3-14

13.完成后，我們就可以預(yù)覽了。預(yù)覽無誤，我們就可以進(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)頁中GIF的動(dòng)畫就制作完成了。

最終效果：

GIF動(dòng)畫最初顯示的圖像效果，如圖12-3-17所示。

圖12-3-17

GIF動(dòng)畫播放至中間所顯示的漸變效果，如圖12-3-18所示。

圖12-3-18

GIF動(dòng)畫閃爍后播放至最后一張圖像所顯示的效果。如圖12-3-19所示。

圖12-3-19

12.3.2網(wǎng)頁中透明GIF圖片的制作

在網(wǎng)頁的制作過程中總是少不了透明GIF圖像的添加，往往網(wǎng)頁中透明圖像的添加并不像圖片和動(dòng)畫中的那么簡單，所以我們在添加時(shí)需要使用ps來完成這項(xiàng)工作。

1.打開或制作一個(gè)需要制作成透明GIF圖片的PSD文件，如圖12-3-20所示。

2.在圖層面板中將最底層的白色背景刪除掉，或者將圖案圖層白色的部分刪除掉。讓當(dāng)前圖像顯示為圖12-3-21中的效果，也就是透明的狀態(tài)。

圖12-3-20圖12-3-21

3.在菜單欄上選取【圖像】>【裁切】，打開裁切對(duì)話框，如圖12-3-22所示。在【基于】類別中選中【透明像素】項(xiàng)，這樣就可以按照像素所在區(qū)域進(jìn)行自定剪裁。如圖12-3-23所示。

圖12-3-22圖12-3-23

4.剪裁好以后，在【文件】菜單欄中選擇【存儲(chǔ)為Web和設(shè)備所用格式】項(xiàng)。在打開后的對(duì)話框中將優(yōu)化的文件格式選擇為GIF或PNG，接著再將選項(xiàng)后面的【透明度】想勾選。如圖12-3-24所示。

圖12-3-24

5.另外需要我們注意的就是GIF圖像的雜邊設(shè)置。如果這個(gè)透明GIF圖像是要用到一個(gè)底色為藍(lán)色或綠色的網(wǎng)頁中，那么就需要使用雜色來使圖片邊緣和網(wǎng)頁很好的結(jié)合。在設(shè)置雜邊時(shí)，為了使顏色更準(zhǔn)確可以先在網(wǎng)頁中取得底色的顏色值，然后再將雜邊的顏色值設(shè)置為和底色的一樣即可。如圖12-3-25所示。

圖12-3-25

6.設(shè)置完畢后點(diǎn)擊【存儲(chǔ)】按鈕將圖片保存，然后在Dreamweaver中插入該圖片時(shí)就可以看到之前設(shè)置的透明效果。