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

admin

首先，製作圖像切片（以一張圖片為例子）
6 X3 g- ~) J8 Y8 e; H一、選擇「切片」工具，在圖像上拖動以分割圖像（例如：一張圖像切割2次就形成3個切片）
9 w" Y. \* a: x! L% \* @8 J

                               
登入/註冊後可檢視大圖

1 b2 B' m0 p- f切片後如下圖
/ C; m) s% H, _- C2 w

; `2 |( _$ G: C% U: |+ G                               
登入/註冊後可檢視大圖

二、設定切片選項（如大小、目標連結、圖片說明等等）：選擇「切片選擇」工具，在要設定的圖像切片上雙擊，在彈出的面板進行具體設定（如圖）：

/ ~  J% B8 d# k8 x5 Y                               
登入/註冊後可檢視大圖

三、儲存切片為網頁：
/ V+ w/ k1 o# C0 u檔案——儲存為WEB和設備所用格式
0 _% P, C! O% \

                               
登入/註冊後可檢視大圖

一般選擇gif圖片格式，圖片邊緣的背景色設定為「無」，點閱「儲存」
: G% ]* J# A! [) E5 V1 _) D! y) _

! `5 u; Q, @3 S0 Y; V                               
登入/註冊後可檢視大圖

然後，儲存類型「HTML和圖像」。如果要儲存為DIV+CSS佈局，則設定「其它」

                               
登入/註冊後可檢視大圖

5 t# G( a6 n3 n! R+ {: w此時會彈出進一步設定面板，選擇「切片」「建立CSS」

" v( {5 R1 g: Y% m9 `                               
登入/註冊後可檢視大圖

/ ]" R9 J! s- G# e8 A5 t: B這樣，圖像切片就被儲存成DIV+CSS的網頁佈局了。

lindaren

不懂