素材切割 / UI Asset Sprite Sheet Splitter - VibeUI Kit
上传 UI assets sprite sheet，自动识别网格并拆解为独立 PNG，支持手动圈选、近白背景修边和 ZIP 导出。
素材切割用于把一整张 UI assets sprite sheet 拆成可直接使用的独立素材。它优先利用清晰网格线确定边界，再结合手动圈选和可选修边，减少逐个裁剪图标、卡片、装饰元素和 3D 小组件的重复工作。
素材切割 适合谁
- 前端开发者
- UI 设计师
- 独立产品开发者
- 需要整理素材包的团队
适合场景
- 一张素材图里包含多个 UI asset，需要拆成独立 PNG。
- 素材之间有黑色或高对比网格线，适合用网格边界辅助切割。
- 自动识别后仍需要手动圈选补充少量特殊区域。
- 导出前需要对近白背景做修边或去白底。
- 需要把所有切割结果一次打包成 ZIP。
核心能力
- 自动识别网格线并生成切割区域。
- 支持合并格和非完整贯穿线场景的辅助处理。
- 支持手动圈选补充自动识别遗漏的素材。
- 支持近白背景修边，让导出素材边缘更干净。
- 支持批量导出和 ZIP 打包。
输入
- PNG、JPG 或 WebP 素材图
- 带网格或规则分区的 sprite sheet
- 可选的手动圈选区域
- 可选的修边和导出参数
输出
- 独立 PNG 素材
- 可预览的切割区域
- 带命名序号的导出文件
- 包含全部结果的 ZIP 包
使用步骤
- 上传包含多个素材的 sprite sheet。
- 选择自动网格识别或手动圈选模式。
- 检查画布中的切割区域并按需调整。
- 设置是否修边、导出范围和文件命名。
- 预览结果并导出独立 PNG 或 ZIP。
常见问题
- 素材切割适合处理什么图片？
- 它适合处理包含多个 UI asset 的 sprite sheet，尤其是素材之间有清晰网格线、分区或留白的 PNG、JPG、WebP 图片。
- 自动识别不完整怎么办？
- 可以切换或叠加手动圈选区域，把自动网格识别遗漏的图标、卡片或装饰元素补充进导出列表。
- 导出的素材会上传到服务器吗？
- 当前工具在浏览器本地完成预览、切割和打包，不需要把素材上传到外部服务。
相关链接
关键词：素材切割、UI assets、sprite sheet splitter、网格识别、自动裁剪、ZIP 导出