切圖技巧整理

1、快捷鍵

• 新建參考線：alt+V+E

2、切圖方式

1. 傳統切圖：

1. 手動切片
2. 參考線切片

2. 精準切圖：

• 文件->導出/腳本->將圖層導出到文件(勾選「透明區域」、「交錯」、「裁切圖層」)

3. 自動切圖

1. 使用PS CC版本集成的新功能：

   • 編輯->首選項->增效工具->勾選「啓用生成器」
   • 文件->生成->圖像資源
   • 在須要的組或圖層上添加如：200% 文件名 @2x.png/jpg8（200% @2x：2倍寬高，品質80%）

2. SVG和WebP格式導出技巧

   • 文件名.svg

3. 抽出資源：PS CC版本開始的導出svg

   • 指定圖層/組，文件->抽出資源
4. 複製CSS：指定圖層，圖層->複製CSS
5. 圖層管理：對psd中的大量圖層進行分類管理，即圖層上方的搜索功能

參考資料

• 前端工程師必備的PS技能——切圖篇