從 Fireworks 遷移到 Photoshop 進行設計稿標註時，掌握核心工具面板與快捷鍵可大幅提效。以下為前端切圖最常用操作：
1. 量取尺寸：標尺 + 參考線 + 移動工具
- 開啟標尺：Ctrl + R (Win) / Cmd + R (Mac)。
- 設置單位：右鍵標尺 → 選擇 像素。
- 拖出參考線：從標尺向畫布拖動，對齊元素邊緣。
- 快速測量：選中 移動工具 (V)，按住 Ctrl (Win) / Cmd (Mac) 懸停於圖層上，智能參考線自動顯示與相鄰圖層的距離、寬高。
2. 獲取文字屬性：字符面板
- 選中 文字工具 (T) 或在圖層面板雙擊文字圖層縮略圖。
- 打開 字符面板：Ctrl + T (Win) / Cmd + T (Mac) 或 窗口 → 字符。
- 面板顯示：字體族、字號、字重、行高、字間距、顏色、對齊方式 等完整屬性。
- 右鍵文字圖層 → 複製 CSS 可直接生成
font-family、font-size 等樣式代碼（需 PS CC 版本）。
3. 拾取顏色：吸管工具 + 顏色面板
- 選中 吸管工具 (I)，點擊畫布任意位置拾取前景色。
- 打開 顏色面板 (F6) 或 色板面板，顯示 HEX、RGB、HSB、CMYK、Lab 多種模式值。
- 右鍵顏色面板 → 複製十六進制顏色 直接獲取
#RRGGBB。
- 提示：吸管工具選項欄可設置 採樣範圍（點採樣 / 3x3 / 5x5 平均），避免噪點干擾。
4. 高效切圖流程
- 圖層面板右鍵圖層/組 → 導出為 (Export As) → 選擇格式 (PNG/SVG/WebP)、倍率 (1x/2x/3x)、質量 → 導出。
- 或使用 生成圖像資源 (文件 → 生成 → 圖像資源)，圖層命名為
icon.png、logo@2x.png 自動輸出至同級 -assets 文件夾。
- 切片工具 (C) 手動劃分 → 存儲為 Web 所用格式 (舊版工作流)。
5. 推薦輔助工具
- Zeplin / Figma / 蓝湖：設計師上傳 PS/Sketch/Figma 文件，前端直接在線標註、複製代碼、下載切圖，**無需安裝 PS**。
- PS 插件：CSS3Ps、Copy CSS、PNG Express（舊版本）。
快捷鍵速查表
| 操作 | Windows | macOS |
|---|
| 標尺顯示/隱藏 | Ctrl + R | Cmd + R |
| 移動工具 | V | V |
| 文字工具 | T | T |
| 吸管工具 | I | I |
| 字符面板 | Ctrl + T | Cmd + T |
| 顏色面板 | F6 | F6 |
| 放大/縮小 | Ctrl + +/- | Cmd + +/- |
| 適應屏幕 | Ctrl + 0 | Cmd + 0 |
