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

1.切片的劃分

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

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

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

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

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

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

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

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

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

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

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