CSS 分解精灵图像的简单工具？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9385900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Easy tool to decompose sprite image?
提问by Abadaba
I have a lot of sprite images that contain dozens of icons. Is there an easy way to unravel the sprites into separate image files either automatically or feeding it coordinates, widths and heights?
我有很多包含数十个图标的精灵图像。有没有一种简单的方法可以自动将精灵分解成单独的图像文件，或者提供坐标、宽度和高度？
采纳答案by Abadaba
Use the slice tool in Photoshop:
在 Photoshop 中使用切片工具：
- Use the
slice select tool(note the selectpart of that, see screenshot). - Right-click anywhere on the canvas and select
Divide Slice...from the drop down menu. - Enter in the height/width or sprite multiple.
- Once finished, go to
save for web and devices... - When you save, this will export all the individual cutouts to the file format of your choosing in a separate folder.
- 使用
slice select tool（注意其中的选择部分，见截图）。 - 右键单击画布上的任意位置，然后
Divide Slice...从下拉菜单中选择。 - 输入高度/宽度或精灵倍数。
- 完成后，转到
save for web and devices... - 保存时，这会将所有单独的剪切图导出为您在单独文件夹中选择的文件格式。
If they are of uneven size (not on a grid) you can also select them individually with the vanilla 'slice select' tool. If you have a lot of similar grids, save everything as a photoshop action and batch process them.
如果它们的大小不均匀（不在网格上），您也可以使用香草“切片选择”工具单独选择它们。如果您有很多类似的网格，请将所有内容保存为 Photoshop 操作并进行批处理。
回答by BYS2
This program is pretty good at decomposing sprites into individual frames
这个程序非常擅长将精灵分解成单独的帧
it supports all standard bitmap formats, .png, .bmp, .gif, .tiff and does everything pretty much automatically.
它支持所有标准位图格式，.png、.bmp、.gif、.tiff 并且几乎自动执行所有操作。
回答by fmovlex
I encountered a similar problem after losing the source images for a sprite and built this relatively simple tool: https://github.com/fmovlex/desprite
我在丢失精灵的源图像后遇到了类似的问题，并构建了这个相对简单的工具：https: //github.com/fmovlex/desprite
Hope this helps.
希望这可以帮助。
回答by 6ton
This one worked nicely for me to extract images from jquery ui sprites http://renderhjs.net/shoebox/
这个对我来说很好地从 jquery ui sprites 中提取图像http://renderhjs.net/shoebox/
回答by Adam Seabridge
give this as try as it will split it into individual rows: http://imagesplitter.net
试试这个，因为它会将它分成单独的行：http: //imagesplitter.net
回答by Four Queue
There is an android application that will dynamically split a sprite map:
有一个 android 应用程序可以动态拆分精灵图：
https://play.google.com/store/apps/details?id=com.fourqueue.android.texture
https://play.google.com/store/apps/details?id=com.fourqueue.android.texture
回答by vaskort
Creation of png:
创建 png：
I use spritepad to create the png image, just drag and drop your images to create the sprite: http://spritepad.wearekiss.com/(but as I assume you dont want this step).
我使用 spritepad 创建 png 图像，只需拖放图像即可创建 sprite：http://spritepad.wearekiss.com/ （但我假设您不想要这一步）。
CSS:
CSS:
After this I import the image to spritecow and get the css for every image (double click every image to get its height-width and coordinates): http://www.spritecow.com/
在此之后，我将图像导入 spritecow 并获取每个图像的 css（双击每个图像以获取其高度-宽度和坐标）：http: //www.spritecow.com/
You could use spritepad only but I prefer to use it only for the creation of the sprite. For css, spritecow seems easier to me. Anyway its up to you.
您只能使用 spritepad，但我更喜欢仅将其用于创建 sprite。对于 css，spritecow 对我来说似乎更容易。无论如何，这取决于你。
