如何从 UI 截图中批量提取图标
一张完整界面图里,真正要交给开发的往往只是其中的图标、插图和图形控件。用正确的校对方式,可以把这件事从重复劳动变成几分钟的交付流程。
先从适合识别的截图开始
切图大师适合处理图标、插图与控件图形边界相对清晰的 UI 截图。尽量上传原始分辨率图片,并保留图标周围的留白;这样自动识别更容易区分独立元素与文字、分割线或背景。
上传不会离开浏览器
识别、透明化与导出均在当前浏览器中完成。刷新或关闭页面后,图片不会被保存在切图大师的网站服务器中。
四步完成切图交付
- 上传界面截图。 将 PNG、JPG 或 WebP 直接拖入工作台。
- 查看自动识别结果。 工具优先寻找图标与插图;可用“忽略文字内容”和识别参数减少误判。
- 校对裁剪框。 点击切片即可选中;拖动框体可移动,拖动边角可调整大小,也可以直接输入宽高。
- 导出所选资源。 单个下载适合快速取用,多选导出 ZIP 则适合一次性交付开发。
为什么要做一次人工校对?
自动识别负责发现候选元素,人工校对负责保证资源边界符合开发需要。尤其当图标离文字很近、背景不均匀,或多个元素重叠时,建议删除误判并手动补框。这样得到的 PNG 会有更干净的透明边缘,也更容易直接放入页面。
让尺寸保持一致
同一组导航图标、功能入口或状态图形,通常要使用相同的导出画布尺寸。选中一个切片后,可输入精确宽高并设为默认尺寸;后续框选即可沿用该标准。需要统一一组已选切片时,也可以将当前尺寸同步给它们。
现在开始提取 UI 资产
无需注册,打开工具后即可在浏览器本地完成切图。