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

admin

首先，製作圖像切片（以一張圖片為例子）
+ i3 I, d4 A) t7 E' C" V3 y5 E5 H# D一、選擇「切片」工具，在圖像上拖動以分割圖像（例如：一張圖像切割2次就形成3個切片）
* F/ @% N6 g& w) b) ?" Z

# J2 ~# B  X0 K1 u3 n: O: a7 t& a                               
登入/註冊後可檢視大圖

3 i( L( Y0 U& I( x& D切片後如下圖

5 J3 R7 O3 x! q. {, y! @                               
登入/註冊後可檢視大圖

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

$ ]3 x0 G) |' x5 {1 Q/ F* b                               
登入/註冊後可檢視大圖

三、儲存切片為網頁：
7 E( f1 W5 N! q. t. i+ ]( T: A檔案——儲存為WEB和設備所用格式
" o# c. G. _& l% H! P% M0 p

' v. d! ^5 ]; H0 \5 X$ o4 ~                               
登入/註冊後可檢視大圖

一般選擇gif圖片格式，圖片邊緣的背景色設定為「無」，點閱「儲存」
9 ]. y1 H; P' b  B- @. P: \0 ~

/ a1 [' a2 ?% F/ U* z8 D! a+ h- N                               
登入/註冊後可檢視大圖

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

6 V6 E8 f$ D/ n# Y                               
登入/註冊後可檢視大圖

此時會彈出進一步設定面板，選擇「切片」「建立CSS」
5 `+ {6 ]- g* z0 i" ?

                               
登入/註冊後可檢視大圖

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

lindaren

不懂