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

admin

首先，製作圖像切片（以一張圖片為例子）
7 \; l0 x/ \7 {. C, z: M一、選擇「切片」工具，在圖像上拖動以分割圖像（例如：一張圖像切割2次就形成3個切片）
8 t$ R; e; G3 [# S$ j1 n3 ], D4 u: O

  T! `& X0 V$ I2 }                               
登入/註冊後可檢視大圖

9 m" d/ H9 W/ a$ m9 W. {$ A切片後如下圖

) \/ r- ^  F3 [9 q                               
登入/註冊後可檢視大圖

; `4 A. r- ]! i3 ?/ M, Y二、設定切片選項（如大小、目標連結、圖片說明等等）：選擇「切片選擇」工具，在要設定的圖像切片上雙擊，在彈出的面板進行具體設定（如圖）：
8 P& ^! @3 y. X8 v9 J

                               
登入/註冊後可檢視大圖

三、儲存切片為網頁：
% F( z' d, J5 f' v9 v7 V3 u檔案——儲存為WEB和設備所用格式
+ I& x2 D2 U9 e& M' Q% `0 _2 S

                               
登入/註冊後可檢視大圖

/ `- h( f0 Y  [一般選擇gif圖片格式，圖片邊緣的背景色設定為「無」，點閱「儲存」
. D2 G6 }( h0 C. `9 Q( M

                               
登入/註冊後可檢視大圖

8 q  A. B  ~3 Y5 D4 e  g然後，儲存類型「HTML和圖像」。如果要儲存為DIV+CSS佈局，則設定「其它」
8 R, k9 p, s: U' m6 Z1 q

9 b) B5 h, o( }; ]" ^, @; q                               
登入/註冊後可檢視大圖

此時會彈出進一步設定面板，選擇「切片」「建立CSS」
$ S3 g1 }3 e; Y$ }4 M

                               
登入/註冊後可檢視大圖

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

lindaren

不懂