煙臺網(wǎng)頁設(shè)計教你圖像切片的制作步驟

1.切片的劃分

　　打開Fireworks軟件，選擇菜單“文件|打開”命令，打開配套光盤中“\源文件\6\素材\領(lǐng)跑者IT培訓(xùn)中心.psd”文件，使用切片工具進行圖像切片的制作，可以放大圖形，選擇部分選定工具進行圖片邊界的調(diào)整。

　　在進行圖像切片的時候，要盡量將網(wǎng)頁圖像整齊的分成幾個橫向的塊，因為在使用Dreamweaver進行網(wǎng)頁表格排版時，能夠避免一些麻煩，而且規(guī)則的表格能夠提高網(wǎng)頁加載的速度。所以，我們先把效果圖切成幾行，然后在行中進行列的切片，也就是說，先做出大的行的切片，再進行行中列的切片。

　　這里，我們先創(chuàng)建四個橫向的切片。因為我們在設(shè)計效果圖時，已經(jīng)借助輔助線做好第二行和第三行之間的圖像，使第二個切片底部能夠正好在右側(cè)兩個認證圖形中間穿過，便于排版布局。網(wǎng)頁右側(cè)圖像具有明顯的規(guī)律性，我們可以用比較小的圖像作為背景平鋪實現(xiàn)。這樣能夠大大減小網(wǎng)頁文件的大小，減少瀏覽著下載網(wǎng)頁圖像文件的時間，加快網(wǎng)頁加載的速度。

2.圖像切片的優(yōu)化

　　對于質(zhì)量要求較高的圖片，可以使用部分選擇工具進行個別設(shè)置，選擇標志、網(wǎng)站名稱、主圖和熱點鏈接等圖形，選擇優(yōu)化選項為“JPEG-較高品質(zhì)”,并調(diào)整品質(zhì)的參數(shù)，可以從效果圖左側(cè)下方可以看到優(yōu)化后切片的大小與加載的時間。對于質(zhì)量要求較低的圖片，可以將圖片優(yōu)化為GIF格式，注意保證圖片的顏色為256色，對于漸變色范圍的圖像不適合采GIF格式。

3．圖像切片的導(dǎo)出

　　選擇菜單“文件|導(dǎo)出”命令，設(shè)置導(dǎo)出的類型為HTML和圖像，并勾選將切片放入子文件夾 “images”,可以瀏覽指定圖片文件夾的位置，勾選“包括無切片區(qū)域”，單擊保存按鈕導(dǎo)出網(wǎng)頁文件和圖像切片，如圖所示。

如果只想導(dǎo)出某個切片，可以在原始視圖中使用部分選擇工具單擊該切片，單擊鼠標右鍵選擇“導(dǎo)出所選切片”。最后選擇菜單“文件|另存為”命令，將文件保存為“領(lǐng)跑者首頁切片.png” 。

4．欄目文字圖形切片的技巧

　　采用Fireworks直接打開PSD格式的文件，在Fireworks中對效果圖進行切片，注意將欄目等切片獨立切開

對于版式相同，只有文字不同的內(nèi)容，可以進行相應(yīng)的修改。對于內(nèi)頁的設(shè)計中，左側(cè)欄目、欄目條目、右側(cè)欄目只存在文字的不同，因此可以在用Fireworks打開效果圖，使用文本工具修改文字等內(nèi)容單獨導(dǎo)出圖片，以適應(yīng)不同欄目的圖片需求。