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

2022-12-26 11:31:58 來源/作者: / 己有:12人學(xué)習(xí)過

GIF動畫最初顯示的圖像效果,如圖12-3-17所示。

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

圖12-3-17

GIF動畫播放至中間所顯示的漸變效果,如圖12-3-18所示。

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

圖12-3-18

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

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

圖12-3-19

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

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

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

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

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

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

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

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

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

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

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

圖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所示。

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

圖12-3-25

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

標(biāo)簽(TAG) 網(wǎng)頁圖片 薛欣姚輝