第7章創(chuàng)建切片與設(shè)計網(wǎng)頁動畫

1、切片的使用，使得整個圖片可以分為多個不同的小圖片分開下載，這樣下載的時間就大大縮短了。在目前互聯(lián)網(wǎng)帶寬還受到條件限制的情況下，運(yùn)用切片來減少網(wǎng)頁下載時間而又不影響圖片的效果。使用Photoshop還可以輕松制作出GIF動畫?？焖僦谱鱓eb文件創(chuàng)建與編輯切片優(yōu)化與導(dǎo)出切片圖像動畫面板橫幅動態(tài)Banner7.17.1快速切割網(wǎng)頁文件快速切割網(wǎng)頁文件切片是網(wǎng)頁制作過程中非常重要的一個步驟，往往切片的正確與否會影響著網(wǎng)頁的后期制作。一般是用Photoshop對網(wǎng)頁的效果圖或者大幅的圖片進(jìn)行切割。7.27.2創(chuàng)建與編輯切片創(chuàng)建與編輯切片切片就是將一幅大圖分割為一些小的圖像，然后在網(wǎng)頁中通過沒有間距和寬度

2、的表格重新將這些小的圖像沒有縫隙地拼接起來，成為一幅完整的圖像。這樣做可以縮小圖像的大小，減少網(wǎng)頁的下載時間，還能將圖像的一些區(qū)域用HTML來代替。7.2.17.2.1創(chuàng)建切片創(chuàng)建切片切片工具是Photoshop軟件自帶的一個平面圖片切割工具。使用切片工具可以將一個完整的網(wǎng)頁切割許多小圖片，以便于網(wǎng)絡(luò)上的下載。創(chuàng)建切片的具體操作步驟如下。7.2.27.2.2編輯切片編輯切片 如果切片大小不合適，還可以調(diào)整和編輯切片，具體操作步驟如下。7.37.3優(yōu)化與導(dǎo)出切片圖像優(yōu)化與導(dǎo)出切片圖像網(wǎng)頁優(yōu)化涉及方方面面，圖片優(yōu)化則是其中重要手段之一本文中，本節(jié)就講述網(wǎng)頁圖像的優(yōu)化。下面講述網(wǎng)站優(yōu)化與導(dǎo)出的具體操

3、作步驟。7.47.4動畫面板動畫面板動畫是在一段時間內(nèi)顯示的一系列圖像或幀，當(dāng)每一幀較前一幀都有輕微的變化時，連續(xù)快速地顯示幀，就會產(chǎn)生運(yùn)動或其它變化的視覺效果。GIF動畫制作相對較為簡單，我們打開“時間軸”面板后，會發(fā)現(xiàn)有幀動畫模式和時間軸動畫兩種模式可以選擇。7.4.17.4.1時間軸動畫面板時間軸動畫面板 時間軸動畫相對來說要專業(yè)很多，有點(diǎn)類似Flash及一些專業(yè)影視制作軟件。同樣，在制作之前，需要設(shè)定好動畫的展示方式，再做出分層圖層。然后在時間軸設(shè)置各層的展示位置及動畫時間設(shè)定等。7.4.27.4.2幀動畫面板幀動畫面板 幀動畫相對來說直觀很多，在動畫面板會看到每一幀的縮略圖。制作之前需要先設(shè)定好動畫的展示方式，然后用Photoshop做出分層圖。然后在動畫面板新建幀，把展示的動畫分幀設(shè)置好，再設(shè)定好時間和過渡等即可播放預(yù)覽。7.57.5橫幅動態(tài)橫幅動態(tài)BANNERBANNER本節(jié)主要來學(xué)習(xí)如何