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

【操作步驟】

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

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

網頁布局，所有網頁都由以下幾部分組成。   

?頁頭（logo、headers）。   

?一級導航條（buttons）。   

?二級導航條（buttons）。   

?頁面內容區(qū)（內容區(qū)用于顯示正文網頁）。   

?頁腳（底部菜單、copyright）。

根據PSD文件決定制作的區(qū)域，源圖中繪制出的區(qū)域必須制作出來，沒有的區(qū)域（如二級導航條，或頁腳）不需要制作。整個頁面要制作在一個表格之內。然后通過表格嵌套設計不同部分，具體說明如下。

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

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

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

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

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

底部菜單：二級菜單（導航）中的內容必須制作在一個獨立的表格內；不得設置表格的高度。

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

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

第4步，在優(yōu)化過程中，單擊窗口底部的【預覽】按鈕，可以自動開啟網頁瀏覽器，預覽當前圖片轉換為網頁的效果。

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

存儲之后，可以在當前站點目錄下看到所存儲的HTML文檔和images文件夾，在images文件夾中保存著所有的用戶切片圖像，直接雙擊HTML文件名，即可在網頁瀏覽器中預覽網頁效果。

第6步，在Dreamweaver中打開HTML文件，可以看到所有的切片圖像都是通過隱形表格進行控制，接著可以讓表格居中顯示，并設計網頁背景色。

【拓展】   

?色彩模式

網頁圖像都在屏幕中預覽，一般均為RGB格式，如果要更改色彩模式，可以在Photoshop中打開圖片，選擇【圖像】|【模式】|【RGB色彩】命令即可。   

?解析度

對于屏幕來說，大部分網頁圖像的解析度只需要72像素/英寸，如果高于這個解析度，就會導致圖像大小暴增。   

?圖像大小

在網頁設計中，圖像大小直接影響到瀏覽器的下載速度，在兼顧小而美的設計原則下，圖像盡可能要壓縮小，當然要確保圖像瀏覽質量的前提下，一般對于網頁修飾性的圖片一般大小不應該大于30KB。  

?圖像格式

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