在Photoshop中繪制圖像和優(yōu)化圖像，最終目的都是為了輸出圖像并應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)中。完成設(shè)計(jì)圖的切割之后，就需要把它輸出為網(wǎng)頁(yè)文檔。

【操作步驟】

第1步，繼續(xù)以上面示例為基礎(chǔ)進(jìn)行演示。在Photoshop中選擇【文件】|【存儲(chǔ)為Web所用格式】命令，打開(kāi)【存儲(chǔ)為Web所用格式】對(duì)話框。

提示：每個(gè)PSD源圖建議都設(shè)計(jì)3套配色方案，按照同樣規(guī)格分別切圖，且3種配色切出的同一區(qū)域圖片命名必須相同。按照配色方案建立3個(gè)以顏色命名的文件夾，每個(gè)文件夾中放置“配色方案”制作成網(wǎng)頁(yè)所需的資料。每種配色方案文件夾中包含的必需內(nèi)容：mages、css、headers、buttons文件夾和兩個(gè)HTMLl文件，以及兩張大小網(wǎng)頁(yè)效果圖；所有命名按照樣例進(jìn)行，自定義內(nèi)容可以自由命名。

網(wǎng)頁(yè)布局，所有網(wǎng)頁(yè)都由以下幾部分組成。   

?頁(yè)頭（logo、headers）。   

?一級(jí)導(dǎo)航條（buttons）。   

?二級(jí)導(dǎo)航條（buttons）。   

?頁(yè)面內(nèi)容區(qū)（內(nèi)容區(qū)用于顯示正文網(wǎng)頁(yè)）。   

?頁(yè)腳（底部菜單、copyright）。

根據(jù)PSD文件決定制作的區(qū)域，源圖中繪制出的區(qū)域必須制作出來(lái)，沒(méi)有的區(qū)域（如二級(jí)導(dǎo)航條，或頁(yè)腳）不需要制作。整個(gè)頁(yè)面要制作在一個(gè)表格之內(nèi)。然后通過(guò)表格嵌套設(shè)計(jì)不同部分，具體說(shuō)明如下。

?頁(yè)頭：可以把header制作成背景，或者有些header圖片屬于不規(guī)則圖形可以切成幾部分來(lái)處理，要盡量減少切割次數(shù)。logo區(qū)域單獨(dú)制作在一個(gè)表格內(nèi)（可以限定表格寬度）；logo分為logo圖片、公司名稱和公司標(biāo)語(yǔ)3部分。   

?一級(jí)導(dǎo)航：一級(jí)菜單（導(dǎo)航）中的內(nèi)容必須制作在一個(gè)獨(dú)立的表格內(nèi)；不得設(shè)置單元格的寬度和高度；按鈕圖片需要制作出超連接的3種狀態(tài)變化（根據(jù)PSD圖，有些可能只有兩種狀態(tài)）；每一項(xiàng)里的圖片和文字必須制作在一行里面，可以使用<br>使它們產(chǎn)生分行顯示效果。   

?二級(jí)導(dǎo)航（豎導(dǎo)航）：二級(jí)菜單（導(dǎo)航）中的內(nèi)容必須制作在一個(gè)獨(dú)立的表格內(nèi)；不得設(shè)置表格的高度；文字鏈接最少需要制作出超連接的兩種狀態(tài)變化。

?頁(yè)面內(nèi)容區(qū)：可以使用替代文本使頁(yè)面撐開(kāi)，達(dá)到在1024×768px的屏幕下使用的IE瀏覽器出現(xiàn)左右上下拉伸條。   

?頁(yè)腳：版權(quán)信息區(qū)域要與上下區(qū)域保留一定的距離。

底部菜單：二級(jí)菜單（導(dǎo)航）中的內(nèi)容必須制作在一個(gè)獨(dú)立的表格內(nèi)；不得設(shè)置表格的高度。

第2步，在窗口左側(cè)選擇【切片選取工具】，依次單擊選中每個(gè)切片，設(shè)置切片的圖像質(zhì)量。在設(shè)置中，對(duì)于圖像比較復(fù)雜且比較重要的切片，則可以設(shè)定比較高的品質(zhì)，對(duì)于高品質(zhì)的圖片，應(yīng)該設(shè)定為JPG格式（品質(zhì)：60%），其他切片沒(méi)有包含圖像或者復(fù)雜的色彩，設(shè)定為GIF格式即可。

第3步，在窗口左上位置單擊選擇【優(yōu)化】標(biāo)簽，切換到優(yōu)化狀態(tài)，檢查每個(gè)切片的優(yōu)化效果，以便根據(jù)情況調(diào)整優(yōu)化品質(zhì)，并在左下角可以查看優(yōu)化圖片的大小、傳輸速率等信息。

第4步，在優(yōu)化過(guò)程中，單擊窗口底部的【預(yù)覽】按鈕，可以自動(dòng)開(kāi)啟網(wǎng)頁(yè)瀏覽器，預(yù)覽當(dāng)前圖片轉(zhuǎn)換為網(wǎng)頁(yè)的效果。

第5步，設(shè)定完畢，對(duì)于優(yōu)化后的切片品質(zhì)感覺(jué)滿意之后，可以單擊【存儲(chǔ)】按鈕，打開(kāi)【將優(yōu)化結(jié)果存儲(chǔ)為】對(duì)話框，在【文件名】文本框中設(shè)置網(wǎng)頁(yè)的名稱，建議以英文字母配合數(shù)值進(jìn)行命名；在【格式】下拉列表框中選擇【HTML和圖像】選項(xiàng)；在【設(shè)置】選項(xiàng)中保持默認(rèn)設(shè)置，在【切片】下拉列表框中選擇【所有用戶切片】選項(xiàng)。

存儲(chǔ)之后，可以在當(dāng)前站點(diǎn)目錄下看到所存儲(chǔ)的HTML文檔和images文件夾，在images文件夾中保存著所有的用戶切片圖像，直接雙擊HTML文件名，即可在網(wǎng)頁(yè)瀏覽器中預(yù)覽網(wǎng)頁(yè)效果。

第6步，在Dreamweaver中打開(kāi)HTML文件，可以看到所有的切片圖像都是通過(guò)隱形表格進(jìn)行控制，接著可以讓表格居中顯示，并設(shè)計(jì)網(wǎng)頁(yè)背景色。

【拓展】   

?色彩模式

網(wǎng)頁(yè)圖像都在屏幕中預(yù)覽，一般均為RGB格式，如果要更改色彩模式，可以在Photoshop中打開(kāi)圖片，選擇【圖像】|【模式】|【RGB色彩】命令即可。   

?解析度

對(duì)于屏幕來(lái)說(shuō)，大部分網(wǎng)頁(yè)圖像的解析度只需要72像素/英寸，如果高于這個(gè)解析度，就會(huì)導(dǎo)致圖像大小暴增。   

?圖像大小

在網(wǎng)頁(yè)設(shè)計(jì)中，圖像大小直接影響到瀏覽器的下載速度，在兼顧小而美的設(shè)計(jì)原則下，圖像盡可能要壓縮小，當(dāng)然要確保圖像瀏覽質(zhì)量的前提下，一般對(duì)于網(wǎng)頁(yè)修飾性的圖片一般大小不應(yīng)該大于30KB。  

?圖像格式

網(wǎng)頁(yè)圖像格式主要包括GIF、JPG和PNG。JPG格式適合應(yīng)用色彩豐富的圖片場(chǎng)合，但不適合做簡(jiǎn)單色彩（色調(diào)少）的圖片，如LOGO、各種小圖標(biāo)（ICONS）。GIF不適合應(yīng)用于色彩豐富的照片，主要適合應(yīng)用于LOGO、小圖標(biāo)和用于布局的圖片（如布局背景、角落、邊框等），對(duì)于僅包含不超過(guò)256種色彩的簡(jiǎn)單圖片也可以考慮使用。GIF支持基本的透明特性，可以設(shè)置透明背景；也支持動(dòng)畫，可以用來(lái)設(shè)計(jì)簡(jiǎn)單的動(dòng)態(tài)提示性效果。PNG擁有JPG和GIF格式的不同優(yōu)點(diǎn)，使其具有更廣泛的應(yīng)用場(chǎng)合。它支持多色彩，也支持透明特性，成為網(wǎng)頁(yè)設(shè)計(jì)中首選的圖像格式。