切图，是把设计稿中需要作为图片使用的内容，按明确边界、格式和像素尺寸导出为资源文件。常见对象包括照片、插画、纹理和部分图标。文字、输入框、普通按钮和整张商品卡片通常不应该被烘焙成一张图片：它们还要适应内容变化、支持交互，并由开发实现结构与样式。
因此，UI设计稿如何切图，第一步是决定“哪些需要图片”，之后才是点击导出。已有设计文件可以在墨刀设计中整理图层、配置资源导出项，再把文件与使用尺寸一起交给研发。下面以一张带品牌标志、装饰背景和表单的登录页，说明资源拆分、格式选择、倍率以及实际导出顺序。
切图和截图、切片、代码生成有什么不同
截图记录某一刻整个画面的显示结果，通常不保留可编辑图层；切图从设计文件中选择需要的对象或区域，决定哪些背景、阴影和透明部分要保留。切片则是一种指定矩形导出范围的方式，适合多个图层共同组成的装饰区域，不要求每个资源都先画一个切片。
整页导出也有用途，例如评审附件、演示封面或视觉留档，但它不等于可以直接开发的界面资源。代码生成则是另一条交付路径：它可能提供界面结构和样式代码，仍需研发接入数据与业务。不要把“导出图片”“导出代码”和“完成产品”混为一件事。
先拆资源：这张登录页需要导出什么
先在设计文件中按用途给图层命名，并与研发确认实现方式。登录按钮上的文字可能换成“登录并继续”，输入框需要显示真实输入和错误提示，这两处应保留为可实现的控件。底部复杂植物插画若不需要独立交互，则可以作为一张透明背景图片导出。
| 页面内容 | 通常怎样处理 | 需要说明的细节 |
|---|---|---|
| 品牌标志、简单功能图标 | 保留矢量资源或使用项目既有图标组件 | 使用位置、可见尺寸、颜色是否随主题改变；先确认素材授权。 |
| 植物插画、复杂纹理 | 导出为图片资源 | 是否透明、是否需要裁切、在宽屏和窄屏中的摆放方式。 |
| 背景纯色、圆角和普通阴影 | 优先交付样式信息 | 颜色、圆角、阴影范围及不同状态，不必把整个背景切成大图。 |
| 邮箱标签、占位文字、登录按钮 | 交付文字、控件样式和行为 | 可编辑内容、校验、加载或禁用状态，不并入装饰图。 |
| 整张登录页 | 必要时导出一张预览图 | 命名并标明为参考预览，避免与真正的开发资源放在一起误用。 |
如果一个装饰图同时包含文字，要判断这段文字是否会翻译、改价或动态更新。会变化的文字尽量从图片中分离。若不得不保留在图片里，也应说明用途和替换方式，避免开发以后只能反复找设计师重新切图。
PNG、JPG、SVG怎么选
| 格式 | 适合什么 | 容易忽略的问题 |
|---|---|---|
| PNG | 需要透明背景的插画、界面截图，以及需要保留清晰边缘的位图 | 透明区域也占据文件的画布范围；检查是否导出了过大的空白边。 |
| JPG / JPEG | 不需要透明的照片或连续色调背景 | 有损压缩可能影响细线和文字边缘；不能用它保留透明背景。 |
| SVG | 由矢量路径构成的标志、线性图标和图形 | 导出后仍要检查遮罩、滤镜、文字与嵌入图片；SVG格式不会把原本的照片自动变成矢量。 |
不要按“质量越高越好”统一导出PNG，也不要因为SVG可缩放就把所有内容都选成SVG。一张商品照片与一个放大镜图标，适合的格式通常不同。若项目需要其他现代图片格式，可由研发按实际浏览器支持和构建流程转换；交付时先提供没有多次有损压缩的原始资源。
1倍、2倍、3倍图，改变的是资源像素
假设一个位图图标在网页中显示为24×24 CSS像素，1倍资源为24×24像素，2倍为48×48，3倍为72×72。使用48×48文件时，界面里的可见位置仍可以是24×24 CSS像素；文件名加上“@2x”不会自动告诉所有平台该怎么显示。
登录页装饰图的可见范围若是320×180，2倍文件就是640×360。先定显示范围，再算资源像素。把一张原本只有320×180的照片强行放大导出到1280×720，不会凭空增加细节。已有高清原图时，应保留原素材，再按目标用途产生合适的规格。
Web、iOS和Android的资源使用方式不同，墨刀提供相应的切图预设，但不能仅凭预设名称就确认项目需求。先和开发约定逻辑尺寸、密度规格及命名方式，再选所需导出项；不必把每个资源的1、2、3倍文件全部打包。复杂的团队命名与交付约定可继续看切图资源命名、倍率与前端验收。
在墨刀设计中完成一次资源导出
1. 打开设计稿，确认要导出的是哪一层
使用现有设计文件，或通过导入入口载入文件。导入后先查看图层、文字、图片和遮罩是否符合预期；不同来源文件的结构未必完全一致。将品牌标志、背景插画、表单和预览画板分开命名，避免只看到“组1”“矩形37”。
例如仅需要底部植物装饰，就选对应图层或包含它的容器，不要选中同时含邮箱和登录按钮的整张页面。多个图层共同组成一张装饰图时，可以整理到同一容器，或使用切片限定区域。检查图层边界是否包含需要保留的阴影、描边和边缘细节。
2. 添加导出项，设置格式和倍率
选中目标对象，在右侧“导出”区域添加或检查导出项。先选择PNG、JPG或SVG等目标格式，再设置需要的倍率与后缀。如果项目需要多个规格，为同一对象添加对应导出项；不要复制几份图层，分别手工缩放后再导出。
多个资源已设置好规格后，可以按批量方式导出；只有少数独立资源时，单项导出更方便核对。批量操作不会替你判断资源是否选错，所以第一次先用一张图片检查尺寸和背景，再处理其余同类文件。
3. 核对背景与压缩，不把透明区域导成白底
需要透明背景时，先选支持透明的格式，再查看是否包含了画板填充或底层背景。墨刀的切片可以控制“背景色”；画板具有导出属性时，也可以检查填充中的“显示在切图中”。透明设置只影响对应背景，不能清除插画本身已经烘焙进去的白色底色。
图片压缩可减少体积，墨刀提供不同品质选项。先用能够保持细节的设置导出，打开文件观察细线、半透明边缘、文字和渐变；若某处变糊，不要只提高所有图片的倍率，应区分是原图质量、格式、缩放还是压缩导致。具体开关位置可对照墨刀切图帮助。
4. 导出后，按实际使用大小检查文件
下载到文件夹后，核对文件名、格式、像素尺寸和数量。将透明图分别放在浅色与深色背景上，确认边缘没有白边；按页面里的实际显示尺寸查看清晰度，并与原设计中的位置和比例比较。整页预览图单独放到参考目录，避免研发把它当成背景直接使用。
交付信息不需要很长，但不能只给一串文件。至少说清“这是哪一个元素、用在哪里、显示多大、是否允许裁切”。下面是一组练习交付说明，可按项目修改：
资源：login-plant@2x.png
用途：登录页底部植物装饰，不含表单文字和按钮。
文件像素：640×360；参考显示范围：320×180。
背景：透明；保留叶片与边缘阴影。
布局：等比例显示并靠底部放置；窄屏是否裁切由页面布局说明确定，不拉伸填满。
参考：同目录login-preview.png只用于对照，不作为开发背景资源。
切图常见问题，先查原因再重导
| 问题 | 先检查什么 | 处理方法 |
|---|---|---|
| 资源看起来比设计稿模糊 | 原图清晰度、资源像素与实际显示尺寸 | 避免把小图放大；按需要导出合适倍率，再比较压缩前后。 |
| 透明图出现白底或灰底 | 文件格式、画板填充、底层背景以及图片自身底色 | 用支持透明的格式，分别排除背景来源；不要只反复取消一个开关。 |
| 阴影或描边被截掉 | 导出区域边界与上级容器裁剪 | 适度扩展切片或调整裁剪；如果增加透明留白，同时告诉开发实际可见区域。 |
| 图标周围留白太大、视觉偏小 | 图层边界、隐藏对象、离散路径或不必要的空容器 | 清理无用范围并重新检查对齐；不要由开发随意拉伸来补。 |
| 批量导出后同名文件互相混淆 | 资源图层名、倍率后缀和重复导出项 | 在设计文件中统一命名，只导出项目需要的规格，记录状态差异。 |
| 导出限制或浏览器卡顿 | 范围过大、倍率过高、复杂图层与浏览器负载 | 缩小导出范围或降低倍率，分批处理；再关闭无关标签页，而不是不断重试同一个超大导出。 |
切图完成后，还要交付哪些界面信息
研发拿到图片后，仍需要知道它与页面的关系。标志是否保持比例、装饰图能否裁切、图标是否随主题变色，以及按钮的文字和交互状态，都不是图片文件能单独表达的内容。把切图、样式标注和行为说明放回同一份设计文件，后续修改才容易定位。
如果项目还希望从设计生成前端结构，可另看UI设计稿转代码的交付方法。生成代码与图片资源一样，需要经过项目适配；接口、权限、表单校验和真实数据不能由一张设计稿自动补齐。
准备开始时，可进入墨刀设计工作台，从一张已完成的页面挑出一个标志和一张装饰图，分别核对格式、倍率、背景与导出边界。两类资源都确认无误后，再批量处理其余素材。
