做網頁切圖、店鋪裝修時，常需給導航欄文字加超鏈接。沒有 Dreamweaver？Photoshop 內建切片工具即可完成「切片 → 設定鏈接 → 導出 HTML + 圖片」全流程。本教程手把手教你用 PS 做出可直接上線的導航條代碼。

操作演示：從新建文檔到導出代碼

1. 建立導航條基礎畫布

• 新建文件：寬 1024 px、高 50 px、解析度 72 ppi、RGB 色彩模式。
• 油漆桶工具填充喜好背景色（如深灰 #333）。

2. 美化導航條：圖層樣式添加立體感

• 新建圖層 → 圖層 > 圖層樣式 > 斜面與浮雕：風格「內斜面」、技術「平滑」、深度 100%、方向「向上」、大小 5 px、柔化 3 px、高光模式「正常」不透明度 75%、陰影模式「正常」不透明度 50%。

3. 輸入菜單文字

• 文字工具輸入菜單項（如「首頁 產品 關於我們 聯繫我們」），字體微軟雅黑/思源黑體，大小 16-18 pt，顏色白 #fff，間距均勻分布。

4. 切片工具精準切割每個文字區塊

• 工具欄右鍵裁切工具 → 選「切片工具」。
• 逐個框選文字區域，**完整覆蓋文字像素，不留縫隙**，避免產生碎片切片增加維護成本。

5. 為每個切片設定超鏈接

• 右鍵點擊切片 →「編輯切片選項」。
• 彈窗中：
  名稱：如「nav_home」
  URL：貼上目標鏈接（如 https://example.com）
  目標：_blank（新視窗打開）或留空（當前視窗）
  Alt 標籤：輸入無障礙文字（如「返回首頁」）
• 重複為所有菜單切片設定鏈接。

6. 導出 Web 格式：生成 HTML + 圖片資源夾

• 檔案 > 導出 > 存儲為 Web 所用格式 (舊版) (或 Ctrl+Alt+Shift+S)。
• 預設：JPEG High / PNG-24（含透明度），切片勾選「全部切片」。
• 點擊「存儲」→ 存儲類型選 「HTML 和圖像」 → 確定。

7. 部署到網頁/店鋪

1. 導出後獲得兩項：images 資料夾（含所有切片圖片）、xxx.html（含完整 <table> 或 <div> 結構與 <img> 標籤）。
2. 將 images 資料夾上傳至伺服器/圖床。
3. 用瀏覽器打開 .html，右鍵「查看網頁原始碼」，複製 <table>...</table> 或 <div class="nav">...</div> 間的所有代碼。
4. 粘貼到目標頁面（CMS 後台、店鋪裝修模塊、靜態 HTML）對應位置。
5. 關鍵步驟：將代碼中 src="images/xxx.jpg" 的相對路徑，改為絕對 URL（如 https://yourdomain.com/images/xxx.jpg），否則圖片無法顯示。

進階技巧與避坑指南

場景	技巧/注意點
響應式導航	PS 導出的是固定寬度表格/圖片。實際專案建議：PS 只負責出設計稿與切片圖片，前端用 CSS Flex/Grid 重寫導航，圖片做 background-image 或 img+srcset 響應式。
Retina/高清屏	PS 文檔建立時寬度 ×2 (2048px)，導出時勾選「2x」或手動輸出 @2x 圖片，HTML 用 srcset 或 CSS background-size 適配。
懸停/點擊狀態	PS 切片只能設一個狀態。需準備「常態/懸停/點擊」三套切片，前端用 CSS :hover/:active 切換 background-image，或 JS 切換 src。
切片命名規範	建議：nav_home_normal, nav_home_hover, nav_product_normal... 便於前端識別與自動化構建。
避免碎片切片	切片時盡量合併相鄰空白區，用「基於參考線的切片」(視圖 > 清除切片後，視圖 > 新建基於參考線的切片) 一鍵生成整齊網格。

現代工作流建議：PS 做設計稿，專業工具做切圖

• 設計師：PS 做高保真設計稿，圖層命名規範（如 nav/btn_home_normal），標註標註標註（Zeplin/Figma/藍湖）。
• 前端/切圖師：用 Cutterman (PS 外掛)、Zeplin、Figma、F2EX 等工具一鍵批量導出多倍圖、WebP、SVG、CSS 代碼片段。
• 協作流：設計稿上傳雲端 → 標註/切圖自動生成 → 前端複製代碼 → 專案構建。

💡 時代變了：PS 切片導出 HTML 是 2005-2015 年的經典工作流。現在雖然仍可用於簡單靜態頁/店鋪裝修，但現代前端開發早已脫離「切圖拼表格」時代。學會 PS 切片是為了理解「圖層如何對應代碼結構」，真正生產環境請擁抱「設計稿 → 標註 → 自動化切圖 → 組件化開發」的現代工作流。