如何用photoshop输出html网页

来源：

http://www.mobanwang.com/art/36.html

http://jimi.marlito.com/viewthread.php?tid=474&extra=page%3D1

很多設計師都習慣使用 Photoshop 來製作圖形，切圖後再用 Dreamweaver 來編輯網頁。不曉得您在 Photoshop 和 Dreamweaver 之間的工作流程是怎麼樣的，小正正要教您最快速的剪貼技巧!!
直接在 Dreamweaver 中插入 PSD 檔案

1. 在 Photoshop 中製作您要在網頁中使用的圖形，有多少圖層或特效都沒關係。

2. 將完成的圖形直接存檔為 PSD 檔案即可，不需要轉存成 GIF 或 JPEG。
3. 在 Dreamweaver 中編輯網頁的時候，和平常一樣的方式來插入影像 ( 從主選單選擇 "插入->影像")，但這時直接選擇一個 Photoshop 的 PSD 檔案。
4. 接著便會出現影像預覽的對話框，您可以選擇存檔的類型和品質來對圖形做最佳化。

5. 完成後便會要求您將最佳化後的 JPEG 或 GIF 圖形存檔，這時可以選擇存檔的位置，記得要儲存在網站根目錄以下哦!
6. 按下確定後圖形就插入到網頁中啦! 很方便吧! 而且您注意一下屬性面板，Dreamweaver 會記住原始 PSD 檔案的位置。

更方便的剪貼功能

7. 如果想要再次修改這張圖形，那麼可以直接回到 Photoshop 中來修改。或是在 Dreamweaver 中選取圖形後按下屬性面板上 "編輯" 右方的 Photoshop 小圖示，也會自動用 Photoshop 去開啟原始的 PSD 檔案，讓您修改。
8. 修改完後不需要像之前那麼麻煩再重新轉存和插入影像。只要先按 Ctrl+A 全選整張圖形 (或是用套索工具選取要剪貼的範圍也可以 )，然後從主選單選擇 "編輯->拷貝合併" (或按 Shift+Ctrl+C)。因為有圖層所以要選擇拷貝合併，而不是拷貝而已。
9. 切換到 Dreamweaver，選取編輯的那張圖形按下 Ctrl+V 來貼上，立刻就更新為修改後的圖形了! Dreamweaver 會自動記住上次插入 PSD 影像時所選擇過的設定，自動幫你套用這些設定。
這個複製和貼上的整合功能真是超方便的啦!! 同樣的手法也適用於 Fireworks 哦!! 建議您自己動手試試看，就會因為這樣的便利性而感動的痛苦流涕啦~ (其實是在怨恨自己以前怎麼那麼笨，不知道浪費了多少時間在轉存...)