【发布时间】：2012-03-12 06:08:18
【问题描述】：
我有很多包含几十个图标的精灵图像。有没有一种简单的方法可以自动将精灵分解成单独的图像文件，或者提供坐标、宽度和高度？
【问题讨论】：
-
好问题，我总是遇到这个问题，精灵需要很长时间。
标签： css image sprite photoshop
【发布时间】：2012-03-12 06:08:18
【问题描述】：
这个程序非常擅长将精灵分解成单独的帧
https://github.com/ForkandBeard/Alferd-Spritesheet-Unpacker
它支持所有标准位图格式，.png、.bmp、.gif、.tiff，并且几乎可以自动完成所有操作。
【讨论】：
-
当我将精灵拖到应用程序上然后单击导出选择时，它会冻结...
-
@abadaba，真的吗？它似乎对我很有效：S.. 你有你的精灵副本，我可以从互联网上下载吗？我自己尝试了一些，它似乎工作得很好
-
好吧...这真是太棒了。工作完美。我没想到它会为我做所有的工作。非常感谢！
-
这个程序很好用！对于导出时冻结的人，根据常见问题解答，您必须取消选择“导出到文件夹”复选框，这对我有用:)
-
@BYS2 毫无疑问，这应该是正确的答案。那个节目太棒了！！谢谢！！
在 Photoshop 中使用切片工具：
- 使用
slice select tool（注意其中的选择部分，见截图）。 - 右键单击画布上的任意位置，然后从下拉菜单中选择
Divide Slice...。 - 输入高度/宽度或精灵倍数。
- 完成后，转到
save for web and devices... - 保存时，这会将所有单独的剪裁导出为您在单独文件夹中选择的文件格式。
如果它们的大小不均匀（不在网格上），您也可以使用原版“切片选择”工具单独选择它们。如果您有很多类似的网格，请将所有内容保存为 Photoshop 动作并进行批处理。
【讨论】：
-
这个想法是将精灵图像分解为单独的图像。我与 CSS sprites 无关。
-
这非常耗时，BYS2 的回答是最好的方法。
我在丢失精灵的源图像后遇到了类似的问题，并构建了这个相对简单的工具：https://github.com/fmovlex/desprite
希望这会有所帮助。
【讨论】：
-
请注意，这仅在您有一个包含单个图像的宽度/高度和背景位置的 CSS 文件时才有效，当您只有一个精灵图像时，此选项对您没有帮助
这对我来说很好，可以从 jquery ui sprites http://renderhjs.net/shoebox/ 中提取图像
【讨论】：
尝试一下，因为它会将其拆分为单独的行：http://imagesplitter.net
【讨论】：
-
但这假设每一行的高度相同，图像可能会占用不同的空间。
有一个 android 应用程序会动态分割精灵图：
https://play.google.com/store/apps/details?id=com.fourqueue.android.texture
【讨论】：
png的创建：
我使用 spritepad 创建 png 图像，只需拖放图像即可创建精灵：http://spritepad.wearekiss.com/（但我假设您不想要这一步）。
CSS：
在此之后，我将图像导入 spritecow 并获取每个图像的 css（双击每个图像以获取其高度-宽度和坐标）：http://www.spritecow.com/
您只能使用 spritepad，但我更喜欢仅将其用于创建 sprite。对于 css，spritecow 对我来说似乎更容易。无论如何，这取决于你。
【讨论】：