从登录，到顺手使用。

三个工具如何配合使用

在副本中整理 PSD，按规则导出素材，再用手机预览确认画面效果。三个工具保留原有功能规则，在 PS 面板里登录后使用。

ChenRaft 清理 · 0.5.8

ChenRaft 导出 常用切图

ChenRaft 导出将多种素材输出方式集中在「ChenRaft 导出」面板中。顶部菜单用于切换功能，底部统一选择导出目录；右上角「…」可设置输出参数、预设和查看运行记录。初始首页为「规则批量导出」；0.2.7 可在顶部菜单拖动排序，下次以第一项为首页。

教程一 按名称批量导出

1. 将待导出图层或组命名为「界面_类型_名称」，例如 login_img_button。
2. 在「编辑类型标签」中确认 img 已包含在类型列表中；匹配依据是名称中第二段的类型标签。
3. 选择导出目录，点击「扫描预览」，核对识别到的对象及数量。
4. 选择「只导出切图」「只导出效果图」或「切图和效果图」，再点击「开始批量导出」。

命名提示：匹配到图层组后，会把该组作为一个整体导出，不再重复导出组内子图层。要分别导出子元素，应避免父组先命中规则。

教程二 手动导出选中图层

1. 从顶部切换到「手动切图」，在 Photoshop 中选中一个或多个图层。
2. 选择 Web、iOS 或 Android，再选择所需格式或倍率。格式可多选，切换平台后其他平台的已选项仍会保留。
3. 需要多层合成一张图时，勾选「合并选中的图层」并填写合并文件名；不勾选则分别输出。
4. 设置输出目录，点击「导出选中图层」，打开输出文件夹检查尺寸、透明边和效果。

同名文件：手动切图默认覆盖输出目录中的同名文件，可在更多选项中改为「自动加序号」。同一次任务中多个同名图层会自动加序号。手动设置不会改变规则批量导出的设置。

ChenRaft 导出 进阶功能

文字拆分导出

适合将数字、单词或带效果的文字拆成独立 PNG。每个单词放在一个顶层图层组中；这个流程会调整文字和图层结构，建议在专用副本中操作。

1. 字距：点击「扫描并应用字距」，默认值为 1000。检查字符及投影之间是否留有间隙。已有进度可先点击「读取进度」。
2. 合并：点击「备份并合并文字组」。插件保留隐藏的 backup_ 备份，并把原组合并为像素图层。
3. 检测：点击「检测全部字符边界」。默认灵敏度 0、最小间隙 4、扫描步长 2；边界不合适时调整后重新检测。
4. 拆分：点击「拆分并重命名」，按检测边界生成字符图层。切换文档或改变相关内容后，应重新读取或检测。
5. 导出：选择普通、只有数字等高或全部等高，点击「导出字符切图」。等高仅补充纵向透明范围，不拉伸字符；按原组名创建子目录，同名文件覆盖。

注意：关闭重开面板后，尚未拆分的图层需要重新检测。当前合并版文字流程已有独立逻辑测试，最终像素输出仍需在实际素材上验收。

参考线切图

1. 在 Photoshop 中放好横向和纵向参考线，再切换到「参考线切图」。
2. 选择「选中的图层」或「整个文档」，再选择 PNG 或 JPG，可填写文件名前缀。
3. 点击「预览分割数量」核对范围，然后点击「开始切图」。

选中多个图层时会逐层分割。分块保留完整矩形范围，不自动裁掉块内透明边。默认编号按从左到右、每列从上到下的顺序生成。

自动九宫处理

先把待处理 PNG 复制到独立文件夹，切换到「自动九宫处理」，选择处理目录后点击「开始九宫处理」。它识别可重复区域并保留 8px 安全边距，完成后会覆盖目录中的原 PNG；运行依赖系统可用的 node 命令。

功能边界：自动九宫处理不是带边缘黑线标记的点9输出。GIF 为静态图；JPG 和 BMP 不支持透明背景；SVG 转换不会把位图变成真正矢量。点9切图、APP 图标切图及图片分割切图尚未加入当前可用流程。

ChenRaft 标注

ChenRaft 标注在「ChenRaft 标注」面板中使用，可生成尺寸、位置、距离、颜色和文字说明。标注文字及标线放入「ChenRaft 标注」图层组，能够单独编辑；每项工具右侧的小箭头可选择方向或处理方式。

常用教程 为一个按钮制作标注

1. 打开 RGB 设计稿，在设置中选择单位、字号、线宽和颜色格式。常规界面交付可先用 px 和 HEX。
2. 选中按钮图层或组，展开「元素尺寸」，选择「宽度和高度」。有活动选区时会优先标注选区，测图层前先取消不需要的选区。
3. 需要位置时，使用「边角坐标」选择相应角点。画板内默认以所属画板左上角为原点；需要全稿坐标时勾选「使用整个文档坐标」。
4. 同时选中按钮和相邻元素，用「相互距离」标注水平或垂直间距。只选一个图层时，可标注到画布或画板边缘的距离。
5. 选中文字层，用「图层文字」标注所需字段；用「文字说明」补充状态或交互要求。检查遮挡后，调整标注位置。

管理与更新标注

「隐藏/显示标注」和「删除标注」只处理本插件生成的内容，操作可撤销。标线和遮罩是可编辑形状层，文字是文字层。源图层内容或尺寸改变后，需要重新生成相关标注；「链接标注图层」只链接同一次生成的标注文字、标线和背景，不链接原图层，也不自动重算数值。既有 PSD 的旧链接不会自动解除。

自动操作提示：拖标尺、取样或拖入参考线后的自动事件尚未完成端到端验收。若没有自动生成，可使用「标注标尺测量线」「标注最后一个取样点」「标注文档参考线」处理已有输入。

导出标注与完成交付

导出 PNG 标注图

1. 显示需要交付的标注，检查文字是否遮住设计内容，确认数值对应最终版本。
2. 在手动标注页点击「导出标注」，选择保存位置。PNG 保留当前可见标注；多画板会分别输出图片。

导出离线 HTML 标注页面

1. 顶部菜单切换到「自动导出标注」，点击「开始导出」并保存 HTML。
2. 用浏览器打开生成的 HTML，切换画板并点击元素，检查尺寸、位置、文字与颜色信息；支持搜索、缩放和复制。
3. 把 HTML 文件交付给接收方，可离线查看。自动导出以设计画面与可查询属性为主，不能代替对复杂样式的人工核对。

推荐的交付顺序

保留源 PSD / 在副本中清理 / 导出切图 / 制作标注 / 检查图片与 HTML / 交付。文字拆分建议单独使用副本；自动九宫仅对另存的 PNG 副本执行。

不要在仍需保留隐藏备份时直接清理隐藏图层。例如文字拆分产生的 backup_ 组，以及被隐藏的标注组，都可能被清理插件删除。

常见问题

交付检查：文件能打开，尺寸和倍率正确，透明背景符合预期，文字与效果无明显丢失，标注数值与最终设计一致。