切图技巧整理

原文地址：https://segmentfault.com/a/1190000021445831
作者：Fw恶龙
本文首发于：思否

一、快捷键

• 新建参考线：alt+V+E

二、切图方式

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技能——切图篇