1. 准备工作：安装和设置 AssistorPS。
  2. 核心操作流程：从设计稿到导出图片的完整步骤。
  3. 进阶技巧：处理特殊情况（如切图、九宫格、Retina屏）。
  4. 最佳实践与总结：养成良好习惯,避免踩坑。

第一部分：准备工作 - 安装与设置 AssistorPS

AssistorPS 是一个插件，所以你需要先确保你的 Photoshop 是正常运行的。

assistor ps切图教程
（图片来源网络，侵删）

步骤 1：下载插件

访问 AssistorPS 的官方网站或可靠的资源站下载插件，通常是 .zxp 格式的文件。

  • 官方网址：http://www.assistorps.com/ (请自行搜索确认当前可用链接)

步骤 2：安装插件

安装 .zxp 文件不能直接双击，你需要 Adobe Extension Manager CC（Adobe 扩展管理器）。

  1. 安装 Extension Manager：如果你没有，请先下载并安装它（通常与 Creative Cloud 桌面应用捆绑，或单独下载）。
  2. 安装插件：打开 Extension Manager CC，点击左上角的 安装... 按钮，然后选择你下载的 AssistorPS.zxp 文件,按提示完成安装。

步骤 3：在 PS 中加载插件

安装完成后，重启 Photoshop。

  1. 打开 PS，点击顶部菜单栏的 窗口 -> 扩展功能。
  2. 在扩展功能面板列表中，你应该能看到 AssistorPS，点击它，就会在右侧弹出 AssistorPS 的操作面板。

步骤 4：重要设置 - 标尺单位

这是最关键的一步！必须将 PS 的单位设置为与设计稿一致，通常是“像素”。

assistor ps切图教程
（图片来源网络，侵删）
  1. 在 PS 顶部菜单栏，点击 编辑 -> 首选项 -> 单位与标尺 (快捷键: Ctrl + K)。
  2. 在“单位”区域，将 “文字”、“单位” 和 “列” 的下拉菜单都设置为 像素。
  3. 点击“确定”。

第二部分：核心操作流程 - 从设计稿到导出

假设我们有一个简单的 App 首页设计稿，需要切出顶部导航栏图标、中间的 Banner 图和底部的按钮。

步骤 1：整理图层（图层命名规范）

AssistorPS 的强大之处在于它能智能识别图层名称,请务必按照规范命名你的图层。

  • 命名规则：图层名@状态.后缀
    • 图层名：给元素起一个有意义的名字，如 logo, banner, btn_login。
    • @状态：可选，用于表示不同状态，如 @2x, @3x (用于高清屏)，@hover (鼠标悬停状态)，@pressed (点击状态)。
    • 英文半角句号。
    • 后缀：表示导出格式，如 png, jpg。

示例：

  • logo.png -> 导出为 logo.png
  • btn_login@hover.png -> 导出为 btn_login_hover.png
  • banner@2x.jpg -> 导出为 banner_2x.jpg

操作： 在图层面板中，双击图层名称,按照上述规则进行重命名。

assistor ps切图教程
（图片来源网络，侵删）

步骤 2：使用 AssistorPS 进行切图

AssistorPS 面板已经准备就绪。

  1. 选择图层：在图层面板中，选中你想要导出的图层（选中 logo 图层）。
  2. 打开 AssistorPS 面板：确保面板已打开。
  3. 选择导出格式：在 AssistorPS 面板的“导出格式”中，选择 PNG 或 JPG，对于需要透明背景的图标、按钮等，强烈推荐使用 PNG。
  4. 选择保存位置：点击“选择目录”按钮,选择一个你想要保存图片的文件夹。
  5. 执行导出：点击面板下方的 导出选中图层 按钮。

步骤 3：检查结果

  1. AssistorPS 会自动根据你的图层名称,将图片保存到你选择的文件夹中。
  2. 打开文件夹，你应该能看到 logo.png 文件。
  3. 双击打开图片，检查其内容是否正确,尺寸是否与设计稿一致。

批量导出： 如果你已经命名好了所有需要切图的图层（如 banner.png, btn_home.png, icon_user.png）,你可以：

  1. 按住 Ctrl (Windows) 或 Cmd (Mac)，在图层面板中选中所有需要导出的图层。
  2. 在 AssistorPS 面板中设置好格式和目录。
  3. 点击 导出选中图层,所有图片会一次性被导出。

第三部分：进阶技巧

技巧 1：切图（九宫格图）

对于需要拉伸的背景图（如九宫格图），AssistorPS 支持一键导出。

  1. 命名图层：将图层命名为 bg_home.9.png 或 btn_bg.9.png，关键是 .9 这个后缀。
  2. 绘制九宫格拉伸区域：
    • 在 PS 中，使用矩形选框工具，在图层上框出不可拉伸的区域。
    • 点击顶部菜单栏的 编辑 -> 定义用户自定义形状，给形状起个名字（如 bg_home_9_patch）并确定。
    • 隐藏或删除原来的图层和选框,只保留这个自定义形状。
  3. 导出：
    • 选中这个自定义形状图层。
    • 在 AssistorPS 面板中，设置格式为 PNG。
    • 点击 导出选中图层。
  4. 结果：导出的图片会自动生成 .9.png 文件，其中包含了拉伸信息，Android 开发者可以直接使用它。

技巧 2：处理 Retina 屏幕 (@2x, @3x)

这是一个非常实用的功能,可以一次性生成不同分辨率的图片。

  1. 命名图层：将需要高清图的图层命名为 icon@2x.png 或 logo@3x.png。
  2. 设置缩放比例：
    • 在 AssistorPS 面板中，找到 缩放 选项。
    • 输入你想要的缩放值，200% (对应 @2x) 或 300% (对应 @3x)。
  3. 导出：
    • 选中 icon.png 图层。
    • 设置缩放为 200%，格式为 PNG,选择目录。
    • 点击 导出选中图层。
  4. 结果：
    • AssistorPS 会导出两份文件：
      • icon.png (原始尺寸,1x)
      • icon_2x.png (放大两倍后的尺寸,2x)
    • 同理，如果你选中 logo.png 并设置缩放 300%，它会导出 logo.png 和 logo_3x.png。

技巧 3：导出选中区域的图片

有时候你只需要图层的一部分,而不是整个图层。

  1. 使用选框工具：在画布上，使用矩形选框工具 或 椭圆选框工具 框选出你想要导出的区域。
  2. 导出：
    • 确保你的选框是当前活动状态（不要取消选择）。
    • 在 AssistorPS 面板中,设置好格式和目录。
    • 点击 导出选中图层。
  3. 结果：导出的图片将只包含你选框区域内的内容,尺寸也会自动匹配选框大小。

第四部分：最佳实践与总结

养成好习惯

  1. 先命名，后操作：养成在切图前先重命名图层的习惯,避免混乱。
  2. 图层分组：将不同页面的图层放在不同的图层组里（如 首页, 个人中心）,方便管理和批量导出。
  3. 保留源文件：导出图片后，不要删除 PS 源文件（.psd）,这是你修改和重新切图的唯一依据。
  4. 版本控制：如果设计稿有更新，最好在文件夹名或文件名中加上版本号，如 v1.2_logo.png。

常见问题与解决

  • Q: 导出的图片是黑色的/内容为空？
    • A: 检查图层的不透明度是否为 100%，以及填充是否为 100%,检查图层是否被隐藏或被其他图层遮挡。
  • Q: AssistorPS 面板里找不到“导出选中图层”按钮？
    • A: 确保你正确选中了图层，AssistorPS 面板已经成功加载。
  • Q: 切出的图片尺寸不对？
    • A: 再次检查 PS 的 首选项 -> 单位与标尺 是否设置为 像素。

使用 AssistorPS 切图的核心流程可以概括为：

整理图层（规范命名） -> 选中图层 -> 设置 AssistorPS（格式、目录、缩放） -> 点击导出

这个插件将设计师从繁琐的“存储为Web所用格式”对话框中解放出来，通过图层命名实现了自动化和批量化，是提升 UI 设计工作效率的利器，多加练习,你很快就能熟练掌握它。