二流設計師的小筆記

如何用Photoshop輸出網頁格式

這邊所用的是Photoshop CS3 版本，但基本上Photoshop設定輸出版本上大同小異
並無太大影響。

步驟一：首先先將你在做Photoshop做好的網頁版面開啟。

  

步驟二：然後到左邊工具列找到一個「切片工具」。



步驟三：之後用切割工具，切割你的版面，大小由你自己控制，而每當你切割完一個區塊後，旁邊
就會出現一個標示，會顯示你區塊的切割順序。



步驟四：再到上方「檔案」→「儲存為網頁與裝置用」選項。

 

步驟五：這時就會跳出「儲存為網頁與裝置用」視窗。

   

步驟六-1：這可選擇你要的輸出格式，有GIF、JPEG、PNG等等。

步驟六-2：這個選項為輸出品質、可依畫質需求高或低調整。

 

步驟七-1：前面幾項設定完後，按下「儲存」後會跳出下面這個視窗。

步驟七-2：之後跳出「另存最佳化檔案」視窗時，有幾個部分要設定一下，「存檔類型」選擇
「HTML和影像」。



步驟八-1：「設定」如無別的特殊需求選擇「預設設定」。

步驟八-2：「切片」選擇「全部切片」，若只需要部分選取的切片輸出，可以選「選取的切片」。

步驟八-3：設定好之後，選擇你要的儲存位置，按下「儲存」。



步驟九：按下儲存後，跳出此視窗按確定即可。



步驟十：之後到你儲存的位置，就會看到「images」跟一個「html」格式的檔案了。
這時你在Photoshop設計的版面，就已經輸出成HTML格式的網頁了。