分类：
Game Art Workflow
摘要：
全面解析从Photoshop导出精灵图的三种主流方法：手动精确操作、脚本批量自动化以及第三方工具一键生成，涵盖不同场景下的优缺点与适用条件，帮助设计师和开发者根据项目需求选择最高效的导出方案。

三种可靠途径将 Photoshop 中的帧变成可用的精灵资源：

  1. 手动拼合 — 调整画布大小 + 移动工具（适合 2–8 帧，无需元数据）。
  2. 内置脚本 — 文件 > 脚本 > 将图层导出到文件 输出 PNG 序列（图层不能位于组内）。
  3. 自动化脚本与工具 — 免费的 GitHub 精灵表生成器 或 TexturePacker（提供高级打包与元数据）。

Photoshop 没有任何内置命令能一键生成可直接使用的精灵表（sprite sheet）——但下面这些工作流程覆盖了所有常见场景。

Photoshop 没有原生精灵表导出功能——以下方法可以替代

Adobe Animate 内置了专用的精灵表导出器，可以将动画帧打包成一个整体图集（atlas），并支持可配置的内边距、布局和元数据。而 Photoshop 完全缺少此功能——这个缺口多年来一直困扰着游戏开发者和动效设计师。

由于「时间轴」面板和「帧动画」工具都在 Photoshop 中，很多用户以为一定有直接的导出路径。其实没有。不过社区已建立了一套 手动变通方法、内置脚本、第三方打包工具和开源自动化方案，足以应对所有合理需求。本指南按复杂程度逐一介绍，你可以根据项目规模、动画格式以及是否需要元数据来选择。

手动方法适合简单项目

当你只有少量帧，且无需自动切片时，手动技巧无需安装任何东西就能搞定。常见两种场景：从独立图层拼合精灵表，以及将现有精灵表拆分为单个图像。

从图层拼合精灵表

如果动画帧作为独立图层存在于同一个 PSD 文件中，你可以将它们并排排列到一张图像中。这个方法在 Graphic Design Stack Exchange 上有记录，适合简单序列：

  1. 增加画布宽度。 执行 图像 > 画布大小 — 将宽度设为能容纳所有帧并排（例如，8 个 200 px 的帧设为 1600 px）。将定位锚点放在左侧。
  2. 选择移动工具（V）。 确保「自动选择」关闭，「显示变换控件」未勾选。
  3. 按住 Shift 键横向拖动每个图层。 按住 Shift 锁定 Y 轴，使所有帧保持垂直对齐。将每个图层移动到其网格位置。
  4. 合并可见图层。 执行 图层 > 合并可见图层（或 Shift+Ctrl+E / Shift+Cmd+E）。
  5. 保存。 执行 文件 > 导出 > 存储为 Web 所用格式（旧版） 或 导出为 — 选择 PNG 并保留透明。

何时使用这种方法 帧数少，不需要内边距或元数据，且动画可以排成单行。对于较大项目，繁琐的操作和对齐风险使得基于脚本的方法更可靠。

将现有精灵表拆分为独立帧

有时你已经有了一张精灵表（包含所有帧网格的单张图），需要得到单独的 PNG。一个简单的手动技巧来自 Reddit 的 r/photoshop，它使用选框工具（切片工具 是另一种基于网格切割的选项）：

  • 创建一个选区，大小等于精灵表中最大精灵的尺寸。
  • 将选区拖过每个精灵位置 — 复制（Ctrl+C / Cmd+C），然后粘贴到新文档中（Ctrl+N / Cmd+N，再 Ctrl+V / Cmd+V）。
  • 将每个文件导出为透明 PNG。

如需视频教程，可查看 Max Rohowsky 关于拆分精灵表的演示。无论你在为 Unity、Pygame 还是 Godot 准备资源，同一方法都适用。

Photoshop 图层面板显示多个包含 UI 元素的文件夹组，导出前状态

在组内组织图层是 UI 设计中的常见做法——但组会导致「将图层导出到文件」脚本出问题（见下文）。

「将图层导出到文件」生成 PNG 序列——但有一个关键注意事项

Photoshop 包含一个内置脚本，可将每个图层导出为单独的图像文件：文件 > 脚本 > 将图层导出到文件… 这是从分层文档生成 PNG 序列最快的方式之一。

  1. 执行 文件 > 脚本 > 将图层导出到文件…
  2. 选择目标文件夹。在「文件名称前缀」中输入基础名称（例如 "run_frame"）。
  3. 格式选择 PNG。勾选 修剪图层 以去除每个精灵周围多余的透明空间。
  4. 点击 运行。每个图层将被保存为单独的 PNG，并修剪到可见内容。

⚠ 关键：图层不能位于组内 根据 Unity Forum 上的报告，当图层嵌套在组文件夹内时，「将图层导出到文件」脚本会 失败或输出损坏的文件。运行脚本前，请将所有图层拖出组，或者使用 图层 > 取消图层编组（根据需要重复）来扁平化结构。

此方法最适用于你已经将每个动画帧放在独立图层上的情况（例如逐帧动画或扁平化的时间轴）。输出结果是 PNG 序列，可直接导入 TexturePacker 等精灵打包工具，或用于支持单帧文件的引擎。

免费 Photoshop 脚本可自动生成精灵表

社区开发的多个脚本可直接在 Photoshop 中运行，无需手动放置就能从动画帧生成打包好的精灵表。它们在功能、价格和兼容性上各有不同，选择哪一个取决于你的 Photoshop 版本和项目复杂程度。

GitHub Spritesheet Generator (bogdanrybak)

bogdanrybak 的 spritesheet-generator 脚本是一个免费的开源工具，可直接从 Photoshop 动画帧生成精灵表。它面向游戏开发工作流，并包含元数据输出。

安装： 下载 .jsx 文件，放入 Photoshop 的 Presets/Scripts 文件夹。重启 Photoshop — 脚本会出现在 文件 > 脚本 > Spritesheet Generator 下。

主要功能：

  • 帧范围 — 仅导出时间轴中的部分帧。
  • 列和行 — 自动计算或手动设置。
  • 内边距 — 精灵之间的可配置间距。
  • 元数据输出 — 在 PNG 旁保存一个 _spritesheets.txt 文件。

John Wordsworth 的脚本（付费选项）

John Wordsworth 的 Photoshop Sprite Sheet Generator 脚本是一个专业替代品，提供更高级的布局、内边距和输出格式控制。定价和具体功能列表见作者网站。它适用于需要一致性和可重复性的生产管线。

这两个脚本解决的是同一个核心问题——将动画帧转化为打包好的精灵表——但免费的 GitHub 选项在游戏开发社区中使用更广，并且包含许多引擎可以直接解析的元数据格式。

在直接使用脚本与先扁平化图层之间选择

一个常见的工作流决策是：直接对动画帧运行脚本（GitHub 脚本从时间轴读取帧），还是 先将帧扁平化为图层，然后再使用「将图层导出到文件」。Stack Exchange 的讨论建议，当你需要对修剪进行精细控制时选择扁平化，而当你需要内边距和元数据时 GitHub 脚本更合适。如果优先级是单条命令输出一个可即用的精灵表加数据文件，那么直接使用脚本可以省去几个步骤。

方法 输入源 输出 元数据 最佳用途
GitHub 脚本 时间轴帧 单个 PNG + .txt 尺寸、内边距、帧数 自动化游戏引擎导入
将图层导出到文件 独立图层 PNG 序列 无（仅文件名） 手动打包或 TexturePacker
手动调整画布 独立图层 单个 PNG 无 小项目、快速测试

第三方工具（如 TexturePacker）提供高级打包

当你的精灵图集需要自动打包、旋转或 JSON/XML 格式的元数据时，专用工具比 Photoshop 内部的任何东西都更强大。Unity Forum 和相关社区最常推荐的选项是 TexturePacker。

典型工作流：

  1. 从 Photoshop 导出 PNG 序列（通过「将图层导出到文件」或 GitHub 脚本）。
  2. 将 PNG 序列导入 TexturePacker。
  3. 配置修剪、内边距、外扩和输出格式（JSON、XML、Unity Sprite Sheet 等）。
  4. 导出一个打包好的精灵表及对应的元数据。

TexturePacker 的算法能最大限度减少浪费空间，并自动处理精灵旋转。它特别适合拥有大量不同尺寸帧的项目——角色动画、UI 资源集或粒子纹理。社区提到的替代品包括 GraphicsGale，不过该工具更适合像素艺术工作流，而非分层 PSD 导出。

  • 🔹 TexturePacker：自动打包、旋转、JSON/XML 元数据。个人使用免费；商业项目付费。
  • 🔹 GitHub 脚本（免费）：Photoshop 内的网格打包。输出一个包含帧尺寸的 _spritesheets.txt 文件。
  • 🔹 手动方法：无需额外工具。最适合小型集合，布局控制比速度更重要。

更想留在 Photoshop 中？Layerbench 可以拆分并导出帧

如果你不想离开 Photoshop 或手动切片，Layerbench 是一个单独的 Photoshop 面板插件（而非脚本），它专为此而生：指向精灵表，设置 行数 × 列数，即可将画布拆分为等大的帧图层，还能自动构建帧动画时间轴，并将帧导出为带编号的 PNG 序列（或缩放至 Default/iOS/Android 尺寸，或导出为 GIF 动画）。

Layerbench（Photoshop 插件）的精灵表面板，按行 × 列将图集拆分为等大帧，并自动构建动画时间轴

Layerbench——Photoshop 插件：按网格将精灵表拆分为帧，自动构建时间轴，然后导出为带编号的 PNG 序列。访问 Layerbench 试用。

它无法取代 TexturePacker 的装箱算法，但对于常见的拆分-导出帧步骤，它能让你始终留在 Photoshop 中。另请参阅 如何在 Photoshop 中导出 GIF 了解基于时间轴的动画路径。

常见陷阱及解决方法

从 Photoshop 导出精灵时容易遇到几个反复出现的问题，这些问题在 Unity Forum 和 Stack Exchange 的讨论中都有记录。以下是最常见的问题及其解决方案。

⚠ 陷阱 1：将图层导出到文件失败或没有输出 原因： 图层嵌套在组内。该脚本无法处理归组的图层，要么跳过它们，要么崩溃。解决： 将所有图层拖出组，或反复使用 图层 > 取消图层编组，直到没有组存在。再次运行脚本。

⚠ 陷阱 2：手动放置导致帧错位 原因： 手动拖动图层会产生微小的垂直偏移，导致动画播放时出现明显的跳动。解决： 改用基于网格的脚本，或者开启 Photoshop 的网格（视图 > 显示 > 网格）并将图层吸附到网格线。也可以在精确像素间隔设置辅助线。

⚠ 陷阱 3：脚本没有出现在「文件 > 脚本」菜单中 原因： 脚本文件（.jsx）被放在了错误的文件夹，或者安装后没有重启 Photoshop。解决： 确认文件位于 Photoshop 安装目录下的 Presets/Scripts 内（而不是用户文档文件夹）。完全重启 Photoshop。如果脚本仍然不出现，检查它是否是为旧版 Photoshop 编写的——有些 CS6 脚本与最新的 CC 版本不兼容。

⚠ 陷阱 4：修剪切掉了精灵的部分内容 原因： 「将图层导出到文件」中的「修剪图层」选项基于最外层不透明像素去除透明像素。如果每个帧周围的透明边距不一致，修剪会产生不同尺寸的帧。解决： 确保每个图层有统一的透明内边距——或者跳过修剪，将内边距处理交给游戏引擎或精灵打包工具。

利用脚本输出的元数据实现游戏引擎自动导入

GitHub 精灵表生成器脚本会输出一个 _spritesheets.txt 文件，其中包含精灵表中每个精灵的精确像素尺寸。这些元数据可以驱动 Unity、Godot 或自定义管线的自动切片——无需再手动在引擎的精灵编辑器中设置网格值。

元数据格式（两种模式）：

模式 1 — 不包含单独的内边距数据

spritename,cell width+pad left+pad right,cell height+pad top+pad bottom,number of frames
basic_attack.png,68,68,4

模式 2 — 包含单独的内边距数据

spritename,cell width,cell height,padding left,padding top,padding right,padding bottom,number of frames
basic_attack.png,64,64,2,2,2,2,4

第一种模式将内边距合并到单元格尺寸中，读取更简单，但要求游戏引擎在导入时减去内边距。第二种模式给出了每侧独立的内边距值，可以轻松地在 Unity 的 Sprite Editor 或 Godot 的 SpriteFrames 导入器中配置切片网格。

Unity 集成示例： 编写一个小的 Editor 脚本，读取 _spritesheets.txt，按指定的单元格宽度和高度对导入的精灵表进行切片，并设置轴心点。这样批处理导入就变成了一键操作，当你有几十个动画表需要处理时尤其有价值。

对于高级用户，同样的元数据可以输入到构建管线中：用 GitHub 脚本从 Photoshop 导出每个动画，让后处理脚本解析 .txt 文件，并自动生成引擎特定的图集配置。这种方法消除了手动输入数据的人为错误，并降低了大型项目中切片错位的风险。

专业技巧：批量导出多个动画 将 GitHub 脚本与 Photoshop 动作（Action）结合，该动作循环遍历所有打开的 PSD 文件。每个动画将导出自己的精灵表和命名一致的元数据文件——非常适合包含大量角色动画、UI 状态或特效序列的项目。