blocks|key|1415691|text|found+this+one+pretty+fast尽管500K上传限制可能是一件痛苦的事情。源代码可在here上找到|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1415692|entityMap|0|LINK|mutability|MUTABLE|url|http://spritegen.website-performance.org/section/tool-help|1|https://launchpad.net/css-sprite-generator/^0|0|Q|0|1G|4|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<a href="http://spritegen.website-performance.org/section/tool-help" rel="noreferrer">found this one pretty fast</a> tho that 500K upload limit might be a pain. source code is available <a href="https://launchpad.net/css-sprite-generator/" rel="noreferrer">here</a>

blocks|key|1415769|text|这将为您完成90%25的工作：CSS+Sprite+Generator。您仍然需要自己编辑规则，但该工具将为您提供新CSS文件所需的代码片段。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1415770|entityMap|0|LINK|mutability|MUTABLE|url|http://spritegen.website-performance.org/^0|D|K|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

This will do 90% of the work for you: <a href="http://spritegen.website-performance.org/" rel="nofollow noreferrer">CSS Sprite Generator</a>. You'll still need to edit the rules yourself, but the tool will give you the code fragments you need for the new CSS file.

blocks|key|1415832|text|如果您喜欢Java，那么您可以使用GWT+1.5%2B，它附带了一个叫做“ImageBundle”的东西。GWT编译器将为您处理所有令人讨厌的细节。您甚至不需要编写一行JavaScript代码或编写任何CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1415833|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/intl/en/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=DevGuideImageBundles^0|Z|B|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

If you like Java, then you can use GWT 1.5+ which comes with something called "<a href="http://code.google.com/intl/en/docreader/#p=google-web-toolkit-doc-1-5&amp;s=google-web-toolkit-doc-1-5&amp;t=DevGuideImageBundles" rel="nofollow noreferrer">ImageBundle</a>." The GWT compiler will handle all the nasty details for you. You won't even have to code a single line of JavaScript or write any CSS.

blocks|key|1630621|text|不是直接的答案，但对于我的开发伙伴和web集成商，考虑简单地将每个sprite与2的幂对齐；例如，16像素或32像素的网格。它使得在CSS文件中计算偏移量变得更加容易。所有之间的空白都无关紧要，因为gifd和png格式压缩得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1630622|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Not a direct answer but to my fellow developers and web integrators, consider simply aligning each sprite to powers of two; eg a 16 pixel or 32 pixel grid. It makes calculating offsets in the CSS file much easier. All the white space between does not matter as the gifd and png formats compress that very well.

blocks|key|1630678|text|这看起来很有希望：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1630679|http://csssprites.org/|offset|length|1630680|我还发现了this+article，它有一些有用的信息，甚至还有一些值得一读的读者评论。|1630681|显然，google+web+toolkit也有一些功能--所以如果你正在使用它，它可能值得一试。|1630682|entityMap|0|LINK|mutability|MUTABLE|url|1|http://mezzoblue.com/archives/2009/01/27/sprite_optim/^0|0|0|M|0|0|5|C|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]|Q|$5|M|N|O|A|$P|R]]]]

This looks promising :

<a href="http://csssprites.org/" rel="noreferrer">http://csssprites.org/</a>

Also i found <a href="http://mezzoblue.com/archives/2009/01/27/sprite_optim/" rel="noreferrer">this article</a> which has some useful information, and even some reader comments worth reading.

Also apparently google web toolkit has something - so if you're using that it might be worth checking out.

blocks|key|1630731|text|这是一个combines+images+via+a+Photoshop+script+into+CSS+sprites的脚本。它不会像你要求的那样做一个精灵贴图，但如果图像大小相同，它会将图像组合成2+(2，4，8)的倍数。我更喜欢组合相似的图像(普通、悬停、选定、选定的父项)，而不是将所有图像放在一个文件中。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1630732|entityMap|0|LINK|mutability|MUTABLE|url|http://www.interactivellama.com/blog/archives/photoshop-script-combine-two-images-css-hover-css-sprite/^0|4|1J|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Here is a script that <a href="http://www.interactivellama.com/blog/archives/photoshop-script-combine-two-images-css-hover-css-sprite/" rel="nofollow noreferrer">combines images via a Photoshop script into CSS sprites</a>. It won't do a sprite map as you asked, but it will combine images in multiples of two (2, 4, 8) if they are the same size. I prefer combining similar images (normal, hover, selected, parent of selected) than having all the images in one file.

blocks|key|1630779|text|现在有了Steve+Souders的Sprite+Me。只是尝试一下，它似乎工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1630780|这里是链接http://spriteme.org/，这里是宣布它的博客帖子。|offset|length|1630781|http://www.stevesouders.com/blog/2009/09/14/spriteme/|1630782|entityMap|0|LINK|mutability|MUTABLE|url|http://spriteme.org/|1^0|0|5|K|0|0|0|1H|1|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|H|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|G]]]]

There is now Sprite Me by Steve Souders. Just tries it out and it seems to work pretty well.

Here is the link <a href="http://spriteme.org/" rel="noreferrer">http://spriteme.org/</a> and here is the blog post announcing it. 

<a href="http://www.stevesouders.com/blog/2009/09/14/spriteme/" rel="noreferrer">http://www.stevesouders.com/blog/2009/09/14/spriteme/</a>

blocks|key|1630815|text|如果你正在使用ruby+on+rails，有一个容易安装的库来生成css精灵。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1630816|http://github.com/aberant/spittle|offset|length|1630817|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|X|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

if you are using ruby on rails, there is an easy to install library to generate css sprites. 

<a href="http://github.com/aberant/spittle" rel="nofollow noreferrer">http://github.com/aberant/spittle</a>

blocks|key|1416136|text|Tonttu是基于Adobe+AIR的应用程序，它为创建强大的CSS+Sprites图像提供了简单的界面。您可以指定FiledWidth和FieldHeight或对图像进行排序。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1416137|Create+CSS+Sprites+Images+with+Tonttu+Desktop+Tool|1416138|entityMap|0|LINK|mutability|MUTABLE|url|http://collamo.jp/Tonttu/|1|http://www.blogsdna.com/5375/create-css-sprites-images-with-tonttu-desktop-tools.htm^0|0|6|0|0|0|1E|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<a href="http://collamo.jp/Tonttu/" rel="nofollow noreferrer">Tonttu</a> is Adobe AIR based application which provides easy interface for creating powerful CSS Sprites images. You can specify FiledWidth and FieldHeight or sort images. 
<a href="http://www.blogsdna.com/5375/create-css-sprites-images-with-tonttu-desktop-tools.htm" rel="nofollow noreferrer">Create CSS Sprites Images with Tonttu Desktop Tool</a>

blocks|key|1630883|text|Instant+Sprite是我正在开发的一个浏览器内CSS+sprite生成器。它真的很快，但没有像其他一些人那么多的功能。它目前只能在火狐或Chrome中运行，因为它使用JavaScript+FileReader和HTML+Canvas在web浏览器中生成精灵，而无需上传。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1630884|entityMap|0|LINK|mutability|MUTABLE|url|http://instantsprite.com/^0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<a href="http://instantsprite.com">Instant Sprite</a> is an in-browser CSS sprite generator I'm working on. It's really fast, but doesn't have quite as many features as some of the others. It currently only works in Firefox or Chrome, since it uses JavaScript FileReader and HTML Canvas to generate the sprites inside the web browser without uploads.

blocks|key|1630919|text|active_assets+gem中有一个名为ActiveSprites的新工具。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1630920|Github：http://bitly.com/eRTwU4|offset|length|1630921|您使用ruby+dsl来定义您的sprites，然后执行"rake+sprites“，从而生成sprites和相应的样式表。|1630922|太棒了！|1630923|下面是一些示例代码，|1630924|#+config/sprites.rb
Rails.application.sprites+do
++sprite+'sprites/sprite1.png'+=>+'sprites/sprite1.css'+do
++++_'sprite_images/sprite1/1.png'+=>+'a.one'
++++_'sprite_images/sprite1/2.png'+=>+'span.two'
++end
end|code-block|syntax|javascript|1630925|entityMap|0|LINK|mutability|MUTABLE|url|http://bitly.com/eRTwU4^0|0|7|N|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|16|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

There is a new tool out there called ActiveSprites, part of the active_assets gem.

Github: <a href="http://bitly.com/eRTwU4" rel="nofollow">http://bitly.com/eRTwU4</a>

You use a ruby dsl to define your sprites and then do "rake sprites" and the sprites and corresponding stylesheets get generated.

It's rad!

Here's some sample code,

<pre><code># config/sprites.rb
Rails.application.sprites do
 sprite 'sprites/sprite1.png' =&gt; 'sprites/sprite1.css' do
 _'sprite_images/sprite1/1.png' =&gt; 'a.one'
 _'sprite_images/sprite1/2.png' =&gt; 'span.two'
 end
end
</code></pre>

blocks|key|1630964|text|如果您使用的是.net，请查看http://www.RequestReduce.com。它不仅可以自动创建精灵文件，还可以通过HttpModule动态创建文件，同时合并和缩小所有CSS。It使用量化和无损压缩来优化精灵图像，并使用ETags和Expires头来处理生成的文件的服务，以确保最佳的浏览器缓存。设置非常简单，只涉及一个简单的web.config更改。有关Microsoft+Visual+Studio和MSDN样本库采用它的信息，请参阅my+blog+post。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1630965|entityMap|0|LINK|mutability|MUTABLE|url|http://www.requestreduce.com/|1|http://www.mattwrock.com/post/2011/09/10/Adopt-RequestReduce-and-see-immediate-Yslow-and-Google-Page-Speed-score-improvements-not-to-mention-a-faster-site!.aspx^0|F|S|0|6B|9|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

If you are using .net, check out <a href="http://www.RequestReduce.com" rel="nofollow">http://www.RequestReduce.com</a>. It not only creates the sprite file automatically, but it does it on the fly through an HttpModule along with merging and minifying all CSS. It lso optimizes the sprite image using quantization and lossless compression and it handles the serving of the generated files using ETags and Expires headers to ensure optimal browser caching. The setup is trivial involving just a simple web.config change. See my <a href="http://www.mattwrock.com/post/2011/09/10/Adopt-RequestReduce-and-see-immediate-Yslow-and-Google-Page-Speed-score-improvements-not-to-mention-a-faster-site!.aspx" rel="nofollow">blog post</a> about its adoption by the Microsoft Visual Studio and MSDN Samples gallery.

blocks|key|1416278|text|https://github.com/northpoint/SpeedySprite|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1416279|这个工具采用了一种新颖的方法，它将您所请求的图像作为http服务进行动态组装。这使得整个过程非常简单(不需要预处理，可以随时更改图像)：您可以启动该服务，然后在HTML中引用您想要的任何图像：|1416280|<link+href="css/my-images-dir/"+rel="stylesheet">
<div+class="my-image-name-here"+/>|code-block|syntax|javascript|1416281|因为它是动态的，所以您甚至可以从一组动态图像(如缩略图页面)中制作精灵。虽然不支持JPEG，但PNG和GIF可以很好地工作。|1416282|entityMap|0|LINK|mutability|MUTABLE|url^0|0|16|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|4]]]]

<a href="https://github.com/northpoint/SpeedySprite" rel="nofollow">https://github.com/northpoint/SpeedySprite</a>

This tool takes a novel approach in that it assembles your requested images on the fly as an http service. This makes the whole process pretty simple (no preprocessing required, change images any time): You start the service and then reference whatever images you want in your HTML:

<pre><code>&lt;link href="css/my-images-dir/" rel="stylesheet"&gt;
&lt;div class="my-image-name-here" /&gt;
</code></pre>

Because it's dynamic, you can even make sprites from a dynamic set of images such as a thumbnail page. Doesn't support JPEG though, but PNG and GIF works fine.

blocks|key|1416321|text|Compass+CSS框架有automatic+sprite+generation。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1416322|entityMap|0|LINK|mutability|MUTABLE|url|http://compass-style.org/help/tutorials/spriting/^0|E|R|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Compass CSS Framework has <a href="http://compass-style.org/help/tutorials/spriting/" rel="nofollow">automatic sprite generation</a>.

blocks|key|1416437|text|我建议你使用Sprite+Master+Web。我自动生成雪碧表，并为您导出CSS代码。它总是尝试使用高级算法生成最小的精灵工作表。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1416438|这是一个屏幕截图和youtube+video|1416439|​|1416440|📷|atomic|1416441|1416442|entityMap|0|LINK|mutability|MUTABLE|url|http://www.mobinodo.com/spritemasterweb|1|http://www.youtube.com/watch?v=458Qx7JW5PI|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/70e39252a10b55801a650195d3597483.png|imageAlt^0|6|H|0|0|9|D|1|0|0|0|1|2|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|F|3|G|5|6|7|19|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|K|3|G|5|6|7|1E|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|O|P|Q|C|$R|U]]|V|$5|W|P|X|C|$Y|Z|10|-4]]]]

I suggest you to use <a href="http://www.mobinodo.com/spritemasterweb" rel="nofollow noreferrer">Sprite Master Web</a>. I generates sprite sheets automatically and exports CSS code for you. It always tries to generate smallest sprite sheets with advanced algorithms.

Here is a screenshot and <a href="http://www.youtube.com/watch?v=458Qx7JW5PI" rel="nofollow noreferrer">youtube video</a>

<img src="https://i.stack.imgur.com/yU2sz.png" alt="enter image description here">

blocks|key|1416469|text|ZeroSprites是一个CSS精灵生成器，旨在使用超大规模集成电路布图算法最小化面积。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1416470|entityMap|0|LINK|mutability|MUTABLE|url|http://zerosprites.com/^0|0|B|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<a href="http://zerosprites.com/" rel="nofollow">ZeroSprites</a> is a CSS sprites generator aimed at area minimization using VLSI floorplaning algorithms.

blocks|key|1631257|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1631258|http://spritepad.wearekiss.com/|offset|length|1631259|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|V|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

Try this:

<a href="http://spritepad.wearekiss.com/">http://spritepad.wearekiss.com/</a>

blocks|key|1631495|text|这些工具都不符合我的要求，所以我写了一个使用Mark+Tylers的微型图像库，mtpixel+(现在是mtcelledit的一部分)，它不是非常广泛，但它很容易通过mtpixel的内置功能进行扩展，这些功能包括:灰度、颜色反转、旋转、锐化、量化、色调、翻转(垂直和水平)、变换、rgb->索引、索引->rgb、边缘检测、浮雕、绘制多边形、文本等等。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1631496|您所要做的就是将一组图像作为args+(支持png、gif和jpeg)传递给它，它将输出一个名为sprite.png的rgb以及有用的图像切片数据到stdout。我在bash脚本中使用它来细化整个图像目录，并输出切片数据以自动生成css+(希望最终使它能够使用一些创造性的sed/awk自动替换现有的img标记)。|1631497|puppy的二进制软件包将在这里：|1631498|http://murga-linux.com/puppy/viewtopic.php?t=82009|1631499|我的用例只需要将图像垂直拼接到一个新的png中，所以这就是它所做的一切，但我的源代码是公共领域的，mtcelledit库是gpl3。使用mtpixel静态链接，二进制文件小于100kb(动态链接时只有几kb+)，唯一的其他依赖项是libpng、libjpeg和libgif+(以及官方mtpixel的freetype，但我不需要文本支持，所以我注释掉了静态构建中的freetype位)|1631500|您可以根据自己的需要进行修改：|1631501|#include+<stdlib.h>+
#include+<stdio.h>+
#include+<string.h>+
#include+<mtpixel.h>+

int+main(+int+argc,+char+*argv[]+){+
int+i=0,height=0,width=0,y=0;+
mtpixel_init();+
mtImage+*imglist[argc];+
argc--;+
do{+++imglist[i]+=+mtpixel_image_load(+argv[i%2B1]+);+
+++height%2B=imglist[i]->height;+
+++if+(imglist[i]->width+>+width)+width=imglist[i]->width;+
}+while+(%2B%2Bi+<+argc);+
imglist[argc]=mtpixel_image_new_rgb(width,height);+
imglist[argc]->palette.trans=0;+
i=0;+
do{+++if+(imglist[i]->type+==+MTPIXEL_IMAGE_INDEXED)+
++++++mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0+,y);+
+++else+mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0+,y);+
+++printf("name=%25s;width=%25d;height=%25d;y_offset=%25d\n",argv[i%2B1],imglist[i]->height,imglist[i]->width,y);+
+++y%2B=imglist[i]->height;+
+++mtpixel_image_destroy(+imglist[i]+);+
}while+(%2B%2Bi+<+argc);+
+++mtpixel_image_save(+imglist[argc],+"sprite.png",+MTPIXEL_FILE_TYPE_PNG,+5+);+
mtpixel_quit();+
return+0;+
}|code-block|syntax|javascript|1631502|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/mtcelledit/|1^0|1G|A|0|0|0|0|0|1E|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|J|3|K|5|6|7|1B|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1C|8|@]|9|@]|C|$]]|$1|N|3|O|5|P|7|1D|8|@]|9|@]|C|$Q|R]]|$1|S|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|I]]]]

None of these tools met my requirements, so I wrote one that uses Mark Tylers's tiny image library, mtpixel (now part of <a href="http://code.google.com/p/mtcelledit/" rel="nofollow">mtcelledit</a>)
It isn't super extensive but it is easily extensible through mtpixel's built in functions that include: grayscale, color inversion, rotation, sharpen, quantize, posterize, flip (vertical and horizontal), transform, rgb->indexed, indexed->rgb, edge detect, emboss, drawing polygons, text and more.

All you do is pass it a set of images as args (supports png, gif and jpeg) and it will output an rgb png called sprite.png along with the useful image slicing data to stdout. I use it in bash scripts to spritify an entire directory of images and output the slicing data for automatic generation of css (with the hope of eventually making it capable of replacing existing img tags automagically with a bit of creative sed/awk)

Binary packages for puppy linux will be here:

<a href="http://murga-linux.com/puppy/viewtopic.php?t=82009" rel="nofollow">http://murga-linux.com/puppy/viewtopic.php?t=82009</a>

My use case only required splicing the images vertically into a new png, so that is all it does, but my source code is public domain and the mtcelledit library is gpl3. With mtpixel statically linked, the binary is &lt;100kb (only a few kb when dynamically linked) and the only other dependencies are libpng, libjpeg and libgif (and freetype with the official mtpixel, but I didn't need the text support, so I commented out the freetype bits in the static build)

feel free to modify for your own needs:

<pre><code>#include &lt;stdlib.h&gt; 
#include &lt;stdio.h&gt; 
#include &lt;string.h&gt; 
#include &lt;mtpixel.h&gt; 

int main( int argc, char *argv[] ){ 
int i=0,height=0,width=0,y=0; 
mtpixel_init(); 
mtImage *imglist[argc]; 
argc--; 
do{ imglist[i] = mtpixel_image_load( argv[i+1] ); 
 height+=imglist[i]-&gt;height; 
 if (imglist[i]-&gt;width &gt; width) width=imglist[i]-&gt;width; 
} while (++i &lt; argc); 
imglist[argc]=mtpixel_image_new_rgb(width,height); 
imglist[argc]-&gt;palette.trans=0; 
i=0; 
do{ if (imglist[i]-&gt;type == MTPIXEL_IMAGE_INDEXED) 
 mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); 
 else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); 
 printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]-&gt;height,imglist[i]-&gt;width,y); 
 y+=imglist[i]-&gt;height; 
 mtpixel_image_destroy( imglist[i] ); 
}while (++i &lt; argc); 
 mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); 
mtpixel_quit(); 
return 0; 
}
</code></pre>

blocks|key|1416771|text|只要使用http://sprites.scherpontwikkeling.nl/，它就可以从网站网址生成精灵，因为well...you可以在开发你的网站后集成你的精灵。它非常容易使用;)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1416772|entityMap|0|LINK|mutability|MUTABLE|url|http://sprites.scherpontwikkeling.nl/^0|4|11|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Just use <a href="http://sprites.scherpontwikkeling.nl/" rel="nofollow">http://sprites.scherpontwikkeling.nl/</a> it can generate sprites from website URL's as well...you can integrate your sprites after developing your website. It's very easy to use ;)

Are there any good tools to make css sprites?

IDEALLY I'd want to give it a directory of images and an existing .css file that refers to those images and have it create a big image optimized with all the little images AND change my .css file to refer to those images. 

At the least I'd want it to take a directory of images and generate a big sprite and the .css necessary to use each as a background.

Are there any good photoshop plugins or fully blown apps to do this?

Tools to make CSS sprites?

有没有好的工具来制作css精灵？理想情况下，我希望为它提供一个图像目录和一个引用这些图像的现有.css文件，让它创建一个使用所有小图像优化的大图像，并更改我的.css文件以引用这些图像。至少，我希望它能获取一个图像目录，并生成一个大的sprite和使用每个图像作为背景所必需的.css。有没有什么好的photoshop插...

问制作CSS精灵的工具？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问制作CSS精灵的工具？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问制作CSS精灵的工具？
EN