[公告] 痞客豐年終!萬元禮券限量送~[公告] 第一屆痞客邦金點賞登場!2014年最有影響力的部落格即將揭曉[公告] 痞客邦新服務上線 每日星座運勢測算【得獎名單公佈】[公告] 痞客邦應用市集全新改版![公告] 痞客邦「應用市集」新 App 上架-iFontCloud Professional

如何用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  

Posted by jun431869 at 痞客邦 PIXNET 留言(5) 引用(0) 人氣()


open trackbacks list Trackbacks (0)

留言列表 (5)

Post Comment
  • 楊比比
  • 寫教學是相當費心的,步驟程序的安排
    文字的編列,版主辛苦了!寫得非常完整!
  • Private Comment
  • Private Comment
  • violet
  • 拯救了我!!太感謝了QQ
  • Ann
  • 版主請教一下~
    如果我要把這些連結貼在e-mail裡,
    要怎麼樣讓圖跟圖之間不要有空隙呢?
    我現在遇到的問題都是寄出電子報的時候,
    在gmail看,圖中間都有一條白色空隙
    好困擾喔~~~拜偷你了!!

You haven’t logged in yet, please use guest status to leave message. You can also log in with above service account and leave message

other options