前言

針對網頁設計師高頻場景，精選 9 個**提效倍增器**，涵蓋圖標處理、圖層管理、選區操作、視圖控制、色彩調整、標註測量，新手老手皆受用。

技巧 1：圖標背景透明化 / 替換背景色 (高頻剛需)

場景

下載的 GIF/PNG 圖標背景與網頁不匹配，需透明化或換色。

標準化流程

1. 格式統一**：GIF → 存儲為 Web 格式 (Ctrl+Alt+Shift+S) → 選 **PNG-8/24** (體積更小、支援半透明)
2. 圖層解鎖**：圖層面板 (F7) → 右鍵背景層 → 「從背景轉為圖層」
3. 魔術棒選背景**：容差 20、勾選「連續/消除鋸齒」 → 點擊背景區域
4. 排除陰影**：若陰影被選中，降低容差重選
5. 刪除/填色**：
   • 透明化：Delete → 存儲 Web 格式勾選「透明」
   • 換色：吸管取色 → G 油漆桶填充 → 存儲

技巧 2：自動選擇圖層 — 滑板式圖層定位

• 移動工具 (V) → 勾選選項欄 **「自動選擇」→「圖層」**
• 畫布單擊即選中該像素所屬圖層，告別圖層面板翻找

技巧 3：Ctrl/Cmd + Click 畫布直選圖層

• 移動工具 (V) + **關閉自動選擇** → 按住 Ctrl/Cmd 點擊畫布元素 → 直接選中所在圖層
• 比自動選擇更可控，避免誤觸發

技巧 4：秒級分割圖層至新文檔 (切圖神技)

1. Ctrl/Cmd 點擊圖層縮略圖 → 載入像素選區
2. Ctrl/Cmd+C 複製
3. Ctrl/Cmd+N 新建文檔 (PS 自動匹配選區尺寸)
4. Ctrl/Cmd+V 粘貼 → 獨立圖層文檔誕生，尺寸精準無冗餘

技巧 5：拖放複製圖層跨文檔 (最直觀)

1. 圖層面板 Ctrl 多選目標圖層
2. 移動工具 (V) → 畫布按住拖拽 → 釋放於目標文檔標籤/窗口
3. 自動居中放置，保留相對位置與圖層結構

技巧 6：選區擴展/收縮 — 像素級微調

• Ctrl++ 放大檢視
• 選擇 → 修改 → **擴展/收縮** → 輸入像素值 (如 2px)
• 解決魔術棒選區「多一圈/少一圈」的經典痛點

技巧 7：圖層復合 — 多狀態一鍵切換

• 窗口 → 圖層復合 → 新建復合
• 勾選「可見性」 → 捕獲當前圖層顯隱狀態
• 一鍵切換：「首頁態/內頁態/彈窗態/手機態」等多版本佈局共存單一 PSD

技巧 8：色相/飽和度 單層變色 (Hover 態快速出圖)

1. 矩形選框 (M) 框選目標區域 (如房子圖標)
2. Ctrl/Cmd+J 複製至新層
3. Ctrl/Cmd+U 色相/飽和度 → **飽和度拉至 -100** → 黑白版誕生
4. 原彩色層保留，可見性切換即為 Normal/Hover 兩態

技巧 9：雙重測量系統 — 像素級標註

標尺工具 (Ctrl+R)

• 拖拽標尺建立參考線/原點
• 雙擊標尺/偏好設置 → 單位改 **像素**
• 縮放 (Ctrl++) 精確讀取座標

量尺工具 (I / Shift+I 切換)

• 工具欄吸管組長按切換
• 畫布拖拽測量任意兩點距離、角度
• 資訊面板 (F8) 實時顯示 W/H/角度，CSS 寫寬高零心算

效率對比表

任務	傳統操作	技巧操作	提速比
圖標透明化	橡皮擦手抠	魔術棒+存儲Web	10x
定位圖層	圖層面板翻找	Ctrl+Click/自動選擇	5x
切圖存檔	裁剪工具+存檔	Ctrl+Click→C→N→V	8x
跨文檔複製	複製→切換標籤→粘貼	拖放	3x
選區微調	重新選取	擴展/收縮	20x
多狀態管理	複製多份PSD	圖層復合	∞ (單文件)
Hover態出圖	重繪/調色	Ctrl+J → Ctrl+U	5x
標註尺寸	手算/記筆記	量尺工具直讀	10x

將這 9 技內化為肌肉記憶，你的 PS 網頁設計產能將質變式提升。建議製作「快捷鍵貼紙」貼於顯示器邊緣，強制前 20 次使用建立神經回路。