将UI图从设计稿或应用界面中提取出来，是设计师、开发者或产品经理在日常工作中经常需要完成的任务，这个过程根据源文件的不同，可以分为多种情况，每种情况都有其对应的操作方法和工具选择,下面将详细阐述不同场景下如何高效地扣取UI图。
最常见的场景是直接从设计稿软件中导出，如果你使用的是Figma、Sketch、Adobe XD或即时设计这类主流UI设计工具，那么操作最为直接，这些软件在设计时，每个元素都是独立的对象或图层，导出功能就是为了满足这一需求，以Figma为例，你只需用选择工具点击你想要导出的UI组件或页面，然后在右侧的“Export”面板中设置格式（如PNG、JPG、SVG等）、尺寸（1x、2x、3x）以及是否包含背景，设置完成后，点击“Export”即可直接下载到本地，这种方法导出的图片是矢量或高质量位图，边缘清晰，没有任何多余背景，是获取UI图的最佳方式，其他设计工具的操作逻辑大同小异，核心都是利用其内置的导出功能，确保获取到的是干净、可用的设计资源。
当UI图存在于一个无法直接编辑的图片文件中时，就需要借助图像编辑软件来“抠图”，这时，你可以使用Adobe Photoshop（简称PS）这类专业工具，PS提供了多种抠图方法，以适应不同复杂度的UI元素，对于边缘清晰、颜色单一的图标或按钮，可以使用“魔棒工具”或“快速选择工具”，点击UI元素区域即可选中，然后通过“图层”面板将选区复制为新图层，最后删除原始背景图层，对于带有柔和边缘或透明渐变的元素，如阴影、光晕效果，“选择并遮住”功能（旧版本的“调整边缘”）是更好的选择，它可以帮你精细化边缘，保留半透明效果，对于复杂的界面，可能需要结合“钢笔工具”手动勾勒路径，这种方法精度最高，但耗时也最长，完成抠图后，记得将文件另存为支持透明背景的PNG格式,以保证UI元素在不同背景下都能完美融合。
如果你需要从已经运行的应用或网页中截取UI界面，情况则更为复杂，对于手机App，最简单的方式是使用系统自带的截屏功能，在大多数安卓和iOS设备上，同时按下电源键和音量减小键即可完成截屏，截取的图片是整个屏幕的快照，如果只需要其中一部分，可以使用手机自带的图片编辑器进行裁剪，对于电脑上的软件界面，可以使用操作系统自带的截图工具，例如Windows的“截图和草图”或macOS的“Command + Shift + 4”快捷键，后者允许你自由选择截取区域，截取的界面图片通常包含窗口边框、任务栏等无关元素，你仍然需要借助PS等工具进行二次处理，将核心的UI区域从截图中精确地“抠”出来。
对于网页UI，浏览器开发者工具（DevTools）是一个强大的辅助工具，通过按F12打开开发者工具，在“Elements”面板中你可以找到网页上任意UI元素对应的HTML和CSS代码，虽然这不能直接“扣”出图片，但你可以通过审查元素，精确定位到你想要复制的组件，然后使用截图工具只截取该元素所在的DOM区域，这比截取整个页面要精准得多，如果该UI元素是使用SVG矢量图形绘制的，你甚至可以直接在代码中找到SVG标签，将其复制出来保存为.svg文件，这种格式的图片可以无限放大而不失真,非常灵活。
为了更清晰地对比不同方法的适用场景,可以参考下表：
| 场景 | 推荐工具 | 操作要点 | 优点 | 缺点 |
|---|---|---|---|---|
| 设计稿源文件 | Figma, Sketch, XD, 即时设计 | 使用内置导出功能，设置格式和尺寸 | 效率高，质量最佳，无背景干扰 | 依赖原始设计文件 |
| 静态图片文件 | Adobe Photoshop, GIMP | 使用魔棒、钢笔或选择并遮住工具抠图，保存为PNG | 灵活性高，处理效果好 | 需要一定的软件操作基础 |
| 运行中的应用/网页 | 系统截图工具 + PS/浏览器DevTools | 先截取屏幕，再用PS抠图或用DevTools辅助定位 | 可获取最终呈现效果 | 步骤繁琐，可能存在画质损失 |
把UI图扣下来并非单一操作，而是需要根据源文件的性质和最终用途，选择最合适的工具和方法，从设计稿直接导出是首选，其次是利用专业图像软件处理静态图片，而对于动态或已发布的应用界面，则需结合截图和后期处理，掌握这些技巧,能极大地提升UI资源获取的效率和质量。
相关问答FAQs
为什么我从Figma里导出的PNG图片背景是黑色的，而不是透明的？ 解答： 这通常是因为在导出设置中，背景被错误地设置为了黑色，在Figma的“Export”面板中，确保“Background”选项被设置为“Transparent”（透明），如果导出后依然有黑色背景，也请检查该图层下方是否存在一个黑色的填充矩形或背景图层,并将其隐藏或删除后再进行导出。
用PS抠图时，UI元素的边缘总是有白色的毛边，怎么解决？ 解答： 白色毛边通常是由于抠图时选区边缘不够精确，或者在处理半透明边缘时操作不当造成的，解决方法主要有两点：第一，在使用“选择并遮住”功能时，仔细调整“边缘检测”和“净化颜色”选项，确保边缘平滑且颜色过渡自然，第二，在完成抠图并将内容复制到新图层后，可以给这个图层添加一个“图层蒙版”，然后用柔边的黑色画笔在毛边区域进行涂抹，让边缘与背景更好地融合,从而消除突兀的白边。
