admin 發表於 2016-7-19 21:24:37

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

首先,製作圖像切片(以一張圖片為例子)
一、選擇「切片」工具,在圖像上拖動以分割圖像(例如:一張圖像切割2次就形成3個切片)
http://i.imgur.com/BsKM3.jpg
切片後如下圖
http://i.imgur.com/s1rPO.jpg
二、設定切片選項(如大小、目標連結、圖片說明等等):選擇「切片選擇」工具,在要設定的圖像切片上雙擊,在彈出的面板進行具體設定(如圖):
http://i.imgur.com/6B5LR.jpg
三、儲存切片為網頁:
檔案——儲存為WEB和設備所用格式
http://i.imgur.com/lu29l.jpg
一般選擇gif圖片格式,圖片邊緣的背景色設定為「無」,點閱「儲存」
http://i.imgur.com/RCVtY.jpg
然後,儲存類型「HTML和圖像」。如果要儲存為DIV+CSS佈局,則設定「其它」
http://i.imgur.com/AzjZS.jpg
此時會彈出進一步設定面板,選擇「切片」「建立CSS」
http://i.imgur.com/1Kc3e.jpg
這樣,圖像切片就被儲存成DIV+CSS的網頁佈局了。

lindaren 發表於 2016-7-20 00:34:01

不懂               
頁: [1]
檢視完整版本: Photoshop圖像切片儲存為網頁HTML(DIV+CSS佈局)的方法