切圖是網(wǎng)頁設(shè)計(jì)中非常重要的一環(huán)，它可以很方便的為我們標(biāo)明哪些是圖片區(qū)域，哪些是文本區(qū)域。另外，合理的切圖還有利于加快網(wǎng)頁的下載速度、設(shè)計(jì)復(fù)雜造型的網(wǎng)頁以及對不同特點(diǎn)的圖片進(jìn)行分格式壓縮等優(yōu)點(diǎn)。

1. 使用工具箱中的“切片工具”在標(biāo)題部分的左右各切一刀，使用“切片選擇工具”雙擊右側(cè)部分，在彈出的面板中設(shè)置切片類型為無圖像。因?yàn)樵摬糠质羌兩�，為了在網(wǎng)頁中顯示效果相同，設(shè)切片背景為黑色，這樣該部分輸出成網(wǎng)頁后將由透明占位符和黑色背景色代替，如圖 所示。

圖

2. 使用切片的固定大小，設(shè)置寬度為“68”，高度為“40”，這次是切割的導(dǎo)航條按鈕，將切片和被切對象對齊，切的時(shí)候要小心，避免切片之間重疊，如圖1-3-2 所示。

圖1-3-2

3. 使用同樣的方法將其它導(dǎo)航條按鈕切割，注重最后一個(gè)“管委會(huì)”按鈕是三個(gè)字，因此設(shè)置的切片寬度要大，如圖1-3-3 所示。需要注重的是，切割的時(shí)候要注重平衡，比如右側(cè)切割了，那么左側(cè)也要等高的切一刀，這樣輸出成網(wǎng)頁的時(shí)候不輕易亂。

圖1-3-3

4. 切割方法同上，注重切片左上角的編號。下一行切片14 和15 共兩刀，再往下16、17、18 共三刀，其中17 為純色，因此設(shè)為無圖像，并用相應(yīng)的顏色標(biāo)識(shí)，如圖1-3-4 所示。后面的方法基本相同，需要把在Dreamweaver 中處理的純色背景部分設(shè)為無圖像，并以相應(yīng)的切片背景色填充。假如某個(gè)圖層的范圍正好是要切割的大小，可以直接使用“基于圖層的切片”功能。

圖1-3-4

5. 執(zhí)行菜單“存儲(chǔ)為Web 和設(shè)備所用格式”，該命令用于將PSD 源文件輸出成網(wǎng)頁或是手機(jī)等設(shè)備所使用的格式。在對話框中進(jìn)行簡單的優(yōu)化設(shè)置，確定后設(shè)置輸出類型為“HTML 和圖像”，并且要輸出所有的切片，如圖1-3-5 所示。

圖1-3-5

舉一反三：

嘗試使用切圖工具對已有的版面進(jìn)行切割，并注重切割的技巧。