从设计截图到可用资产:切图大师使用指南
切图大师不是把整张设计图变成零散图片,而是帮助你从完整界面中发现独立图标与插图,再由你确认它们是否值得交付给开发。
工具能识别什么?
工具会依据像素颜色、连通区域和元素边界,优先寻找设计截图中的独立视觉元素。浅色或纯色背景上、间距清晰的图标与插图通常识别效果更好;复杂照片、渐变背景、密集文字和相互重叠的元素,则更适合由人工补充或修正。
从自动识别到人工确认
自动识别是起点,不是最终交付。使用“忽略文字内容”可以减少标题、标签与段落被误选;再通过灵敏度和最小尺寸控制候选范围。检查结果时,保留真正的图标与插图,删除无关元素,并对缺失资源在原图上手动框选。
把自动结果当作候选清单
最理想的工作流不是追求 100% 自动识别,而是先让工具发现大多数候选,再用少量时间完成业务和视觉层面的判断。
精确框选如何帮助开发?
每个框选区域都可以在原图上拖动移动,或通过边与角调整长宽。需要精确一致的尺寸时,直接输入宽高即可。对于一组同规格的图标,可保存一个默认框尺寸,并同步到已经选中的切片,减少输出规格不一致的问题。
导出前的三个建议
- 确认透明背景是否符合需要;对需要固定尺寸的图标保留标准画布。
- 只选择开发真正会用到的元素,避免将文字、容器和装饰噪声一起导出。
- 按模块或状态分批导出,并配合清晰命名交接,后续引用会更高效。
隐私与本地处理
切图大师的图片处理在当前浏览器内完成:截图、切片和导出结果不会上传到本站服务器。这使它特别适合处理尚未公开的设计稿或内部项目截图;但请注意,浏览器刷新后当前工作内容不会自动保存。
用本地浏览器完成切图
上传一张设计截图,开始识别图标与插图。