如何从 UI 截图中提取图标？4 步得到可交付 PNG
当源文件不在手边，开发仍然需要图标、插画或按钮视觉时，切图大师可以把一张完整 UI 截图整理成一组可复用的透明 PNG。
一句话结论
先让工具缩小候选范围，再由人确认边界，最后只导出真正需要的元素；这比在截图里反复放大、框选、命名更稳定。
这套方法适合什么场景？
它适合设计交接、旧项目维护、临时补素材、没有源文件的视觉还原，以及需要从成品图中建立小型素材库的团队。对文字、表格和强动态内容，不建议直接当作图片交付。
四步完成一次可靠切图
- 上传截图。 优先使用原始分辨率的 PNG、JPG 或 WebP，并保留元素周围的必要留白。
- 查看候选元素。 工具会把可能独立存在的图标、插画和控件列出来，文字和背景通常需要进一步排除。
- 校对边界。 选中切片后拖动位置、调整四条边，必要时输入精确宽高；靠近文字或阴影的元素尤其要检查。
- 导出所选 PNG。 单个下载适合快速取用，多选导出 ZIP 适合交付开发或归档。
手工裁剪与校对式切图，有什么区别？
传统做法
放大截图 → 找元素 → 画框 → 裁剪 → 重命名。元素越多，重复劳动越多，也更容易漏掉状态图标。
校对式做法
上传截图 → 获得候选 → 只修正边界 → 导出所选。工具负责发现，人负责判断，结果更适合交付。
导出前的 5 项检查
- 透明边缘是否干净，是否误带入相邻文字或背景色？
- 同组图标是否采用一致的画布尺寸与安全留白？
- 文件名是否能表达页面、功能和状态，例如
nav-home-active.png？ - 是否把应该由代码实现的文字、价格、按钮文案切成了图片？
- 是否记录了预期展示尺寸、是否允许拉伸，以及深色/浅色版本的关系？
安全与隐私边界
切图大师的识别、透明化和导出在当前浏览器中完成，图片不会被保存到网站服务器。团队处理客户截图时，仍应遵守项目保密制度，并在交付后按团队规则清理本地文件。
常见问题
切图大师会把 UI 截图上传到服务器吗？
不会。识别、透明化和导出在当前浏览器中完成。
为什么截图提取结果通常是 PNG？
截图是像素数据，透明 PNG 更能保留真实颜色、阴影和细节；需要 SVG 时应回到原始设计文件。
自动识别后还需要人工校对吗？
建议校对，尤其是图标靠近文字、元素重叠或背景复杂时。
把下一张截图变成可交付资产
无需注册，打开工具即可在浏览器本地完成识别、校对与导出。