怎样用工具切图导出？

本文目录导读：

1. 使用 UI 设计软件（最推荐，适合设计师或开发者拿源文件）
2. 使用标注/协作工具（适合开发团队或有设计稿链接）
3. 使用截图工具（最简单，适合没有源文件的普通图片）
4. 使用自动化工具（适合批量切图或网页图标）
5. 总结：你应该选哪个？

“切图导出”通常指的是将设计稿（如 Sketch、Figma、PSD 或图片）中的某个元素或某个区域单独裁剪并导出来，具体用什么工具和操作方法，取决于你的设计源文件类型。

以下是针对不同场景最主流的几种方法：

使用 UI 设计软件（最推荐，适合设计师或开发者拿源文件）

这是最专业、效率最高的方式，且能导出 1x、2x、3x 等多种倍率。

• Figma (目前最流行)

  • 方法： 选中你要导出的图层或组 -> 右侧面板点击“Design”标签 -> 找到“Export”区域 -> 设置格式（PNG、JPG、SVG、PDF）和大小（如 1x、2x）-> 点击“Export [图层名]”。
  • 技巧： 按住 Ctrl 点击可以多选多个图层，一次性批量导出。

• Sketch

  • 方法： 选中图层 -> 点击右下角“Make Exportable” -> 设置格式和大小 -> 点击“Export Selected”。
  • 技巧： 可以创建“切片（Slice）”来精确控制导出区域。

• Adobe XD

  • 方法： 选中对象 -> 右键 -> “导出” -> “选定对象”，或者直接使用快捷键 Ctrl + E (Win) / Cmd + E (Mac)。
  • 技巧： 可以批量选中多个画板或对象一次性导出。

• Photoshop (PSD)

  • 方法 A (传统)： 使用“切片工具”（快捷键 C）手动框选区域 -> 文件 -> 导出 -> 存储为 Web 所用格式。
  • 方法 B (快速)： 右键图层 -> “导出为” -> PNG/JPG，Photoshop 会直接根据图层内容进行裁剪导出。
  • 方法 C (图层组)： 创建图层组，选中后右键 -> “快速导出为 PNG”。

使用标注/协作工具（适合开发团队或有设计稿链接）

如果你是开发者,没有源文件，但拿到了设计平台链接，这些工具非常方便。

• 蓝湖 / 摹客 / Zeplin
  • 方法： 打开设计稿 -> 点击选中某个元素 -> 右侧面板通常会有“下载”或“导出”按钮，可以直接下载 PNG、SVG 格式，还能附带切图倍率和尺寸标注。

使用截图工具（最简单，适合没有源文件的普通图片）

如果你想从一张普通的电脑截图、网页或照片中切出一部分：

• Windows 自带：

  • 截图工具：Win + Shift + S 启动，选择“矩形截图”，截取后保存即可。
  • 画图软件：打开图片，用“选择”工具框选，Ctrl + C 复制，新建画布，Ctrl + V 粘贴，最后保存。

• Mac 自带：

  • 截图：Command + Shift + 4，光标变成十字，拖拽框选区域，松开鼠标即可保存到桌面。
  • 预览 App：打开图片 -> 点击工具栏的“显示标记工具栏” -> 选择“矩形选择”工具，框选 -> Command + K 直接裁剪并保存为新文件。

• 专业截图软件 (如 Snipaste、PicPick)

  • Snipaste：按 F1 进入截图，框选出你要的区域，然后按 Ctrl + S 保存，它能直接“贴图”在屏幕上，非常方便。

使用自动化工具（适合批量切图或网页图标）

• ImageOptim / TinyPNG (在线工具)：主要用于压缩，不是切图。
• SvgOMG：专门优化和导出 SVG 图标。
• Photon (在线)：在线图片编辑器，支持裁剪和导出。
• 网页元素提取 (浏览器插件)：如 Image Downloader、图片助手，可以直接从网页上批量抓取图标、背景图等，并选择需要的大小下载。

你应该选哪个？

最后一个小提示： 对于 UI 切图，尽量使用 SVG 格式（矢量无损缩放）或 PNG（有透明背景），避免用 JPG（会压缩且有白底）。

标签： Sketch切图 Figma导出