Photoshop圖像切片儲存為網頁HTML（DIV+CSS佈局）的方法

admin

首先，製作圖像切片（以一張圖片為例子）
一、選擇「切片」工具，在圖像上拖動以分割圖像（例如：一張圖像切割2次就形成3個切片）
  r4 q0 }& [$ t) @5 [

- _) ^# x2 W' ~4 J                               
登入/註冊後可檢視大圖

切片後如下圖
0 p" q! |& K  l# @

                               
登入/註冊後可檢視大圖

$ F9 j, a, V$ H2 `3 D二、設定切片選項（如大小、目標連結、圖片說明等等）：選擇「切片選擇」工具，在要設定的圖像切片上雙擊，在彈出的面板進行具體設定（如圖）：
2 f" F# i2 ^( [% Z# ?; S/ d# i

                               
登入/註冊後可檢視大圖

$ \; `5 |! i, }, N! [: B三、儲存切片為網頁：
. V1 |% I" |1 G5 Z' i檔案——儲存為WEB和設備所用格式
5 U) z3 k6 t) k( U+ \

6 z9 H" M  _# z+ X' s                               
登入/註冊後可檢視大圖

# t2 t: J+ w% Z( Q4 _一般選擇gif圖片格式，圖片邊緣的背景色設定為「無」，點閱「儲存」
3 D, C6 y; L. h% C

                               
登入/註冊後可檢視大圖

9 v! ^$ \# J3 E; j然後，儲存類型「HTML和圖像」。如果要儲存為DIV+CSS佈局，則設定「其它」

                               
登入/註冊後可檢視大圖

5 X. C$ }/ {: z1 F此時會彈出進一步設定面板，選擇「切片」「建立CSS」
: Z9 |8 L/ X' k; M

                               
登入/註冊後可檢視大圖

這樣，圖像切片就被儲存成DIV+CSS的網頁佈局了。

lindaren

不懂