如何用Photoshop輸出網頁格式

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


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

Photoshop 網頁版面切割與輸出設定-01  

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

02.jpg

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


03.jpg

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

04.jpg  

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

Photoshop 網頁版面切割與輸出設定-05.jpg    


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

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

Photoshop 網頁版面切割與輸出設定-06.jpg  

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

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

07.jpg

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

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

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

08.jpg

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

09.jpg

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

10.jpg  

arrow
arrow
    全站熱搜

    jun431869 發表在 痞客邦 留言(6) 人氣()