切图前的准备工作——整理好你的PSD文件
在动手切图之前，先把PSD文件整理干净，这能让你的效率翻倍,也方便后续修改。
- 给图层和图层组起好名字：千万不要用“图层1”、“组拷贝3”这种默认名字，给每个按钮、图标、图片所在的图层起一个清晰易懂的英文或拼音名字，btn_login”、“icon_search”,这样在导出时会非常清楚。
- 图层归组：把属于同一个元素的图层放到一个组里，比如一个登录按钮，可能包括背景层、文字层、阴影层，把它们全部放进一个叫“btn_login”的组里,保持井井有条。
- 隐藏不需要的图层：把暂时不需要导出的图层眼睛关掉，只显示你最终需要切出来的内容,避免切到多余的东西。
第二步：核心技巧——使用“画板”工具来切图
这是现在最推荐的方法,特别适合切多个图标或多个页面状态。
- 创建画板：在左侧工具栏，长按鼠标在“裁剪工具”上，会弹出菜单，选择“画板工具”,或者直接按快捷键A。
- 划定区域：用画板工具在你需要切出的元素（比如一个图标）周围拖出一个框，PS会自动为这个画板创建一个新的“画板”图层。
- 给画板命名：这是最关键的一步！在右侧图层面板中，选中你刚创建的画板图层，双击它的名字，给它起一个清晰的名字，这个名字会直接成为你导出图片的文件名，比如你把一个搜索图标框起来，就把画板命名为“icon_search”。
- 重复操作：用同样的方法，为所有需要切出的元素都创建独立的画板，画板之间可以重叠，互不影响,非常灵活。
第三步：另一种常用方法——基于图层的切图
如果你只是偶尔切一两个小元素,这个方法更快捷。
- 选中图层/组：在图层面板中,右键点击你想要导出的那个图层或者图层组。
- 转换为智能对象：在弹出的菜单里，选择“转换为智能对象”，这个操作会把选中的内容“打包”成一个整体，这样你之后无论怎么缩放它，图片质量都不会受损,这是一个好习惯。
- 重命名图层：确保这个智能对象图层的名字是你想要的图片文件名，logo”。
- 设置导出区域（可选）：如果你导出的内容周围有大量空白，你可以先用“矩形选框工具”选中你想要的确切范围，然后右键点击图层，选择“基于所选图层创建画板”,这样导出的图片尺寸就和你选的区域一模一样了。
第四步：导出图片——生成最终文件
无论你用画板法还是图层法,导出的步骤都是一样的。
- 打开导出窗口：点击顶部菜单的“文件” -> “导出” -> “导出为”。
- 选择格式和设置：
- 图片格式选择：
- PNG：如果图片需要透明背景（比如图标、Logo），一定要选PNG，PNG-24质量最好。
- JPG：如果图片是照片、或者有复杂颜色渐变的背景图，没有透明区域，就用JPG,可以通过调整品质来平衡文件大小和清晰度。
- SVG：如果是简单的图标和Logo，并且需要无限放大不失真（用于网页），可以选择SVG，但前提是你的图层是矢量图形（比如用形状工具画的）。
- 调整大小（可选）：在导出界面，你还可以按比例缩放图片，比如生成@2x（2倍大小）和@1x（1倍大小）两种尺寸,以适应不同分辨率的屏幕。
- 全部导出：检查一下右侧的列表，确保所有你要切的画板或图层都在里面，然后点击“导出全部”，选择一个文件夹存放,图片就会以你之前命名的名字保存好了。
第五步：高级技巧与注意事项
- 切片工具的旧方法：你可能会看到旧的教程用“切片工具”，这个工具比较老，控制不够灵活，容易出错，不推荐新手使用，画板方法是更现代、更高效的选择。
- 保持为Web所用格式（旧版）：在“文件” -> “导出”里，你还会看到一个“存储为Web所用格式（旧版）”，这个功能非常强大，可以同时预览不同格式和压缩比例下的图片效果和文件大小，适合对图片体积有严格要求的专业人士，如果你是新手，可以先用“导出为”,等熟练后再研究这个。
- 导出选中图层：如果你只想导出众多画板中的某一个，可以在图层面板先选中那个画板，然后右键点击，选择“快速导出为PNG”或其他格式,这样更快。
- 考虑不同尺寸：现在手机屏幕分辨率多样，最好能导出多种尺寸的图片，比如同一个图标，导出一个大尺寸的（如@3x）和一个小尺寸的（如@1x），交给开发人员,他们会根据情况使用。
切图的核心是 “整理” 和 “命名”，一个整理得井井有条的PSD文件，加上清晰规范的命名，能让你和你的同事（比如程序员）的工作效率大大提高，多练习几次,你就能非常熟练地掌握这些技巧了。
