制作CSS精灵的工具？[关闭]

有什么好的工具可以制作CSS精灵？

理想情况下，我想给它一个图像目录和一个引用这些图像的现有.css文件，并使其创建具有所有小图像优化的大图像，并更改我的.css文件以引用这些图像。

至少我希望它获取图像目录并生成一个大的精灵，以及将每个精灵用作背景所必需的.css。

有没有很好的photoshop插件或功能完备的应用程序可以做到这一点？

这将为您完成90％的工作：CSS Sprite Generator。您仍然需要自己编辑规则，但是该工具将为您提供新CSS文件所需的代码片段。

Instant Sprite是我正在使用的浏览器内CSS Sprite生成器。它确实非常快，但没有其他功能那么多。它目前仅在Firefox或Chrome中工作，因为它使用JavaScript FileReader和HTML Canvas在Web浏览器内部生成了没有上传的精灵。

现在有史蒂夫·索德斯（Steve Souders）的《 Sprite Me》。只是尝试一下，它似乎工作得很好。

这是链接http://spriteme.org/，这是宣布它的博客文章。

http://www.stevesouders.com/blog/2009/09/14/spriteme/

这看起来很有希望：

http://csssprites.org/

我也发现这篇文章有一些有用的信息，甚至还有一些值得一读的读者评论。

显然Google Web工具包也有一些功能-因此，如果您使用它，可能值得一试。

试试这个：

http://spritepad.wearekiss.com/

ZeroSprites是CSS精灵生成器，旨在使用VLSI布局规划算法来最小化面积。

发现这相当快，因为500K的上传限制可能很痛苦。源代码在这里

Tonttu 是基于Adobe AIR的应用程序，它提供了用于创建功能强大的CSS Sprites图像的简便界面。您可以指定FiledWidth和FieldHeight或对图像进行排序。
使用Tonttu桌面工具创建CSS Sprites图像

尚不清楚它是否可以进入核心ASP.NET框架，但这是一个用于csssprites的Microsoft Codeplex项目：

http://aspnet.codeplex.com/releases/view/50869

如果您喜欢它-使用它-或就像这个想法一样，然后添加评论。我认为这在ASP.NET框架中将是一件很棒的事情。还没有亲自使用过它（我必须自己发明轮子），但是它得到了很好的评价。

它包括以下组件：

• 用于自动生成精灵和嵌入式图像的API
• 提供方便的API调用方式的控件和助手

第二版中添加的功能：

• Web窗体的CSS链接控件（为用户的浏览器选择正确的CSS文件，但不显示图像）
• 使用App_Sprites以外的自定义文件夹路径
• 更改子画面图像的平铺方向
• 将生成的CSS与用户自己的CSS合并

未来版本中正在考虑的功能：

• 自动选择最有效的精灵背景颜色
• 自动缩小渲染的CSS
• NET 3.5编译

只需使用http://sprites.scherpontwikkeling.nl/，它也可以从网站URL生成精灵...您可以在开发网站后集成您的精灵。这很容易使用;）

不是直接的答案，而是对我的开发人员和Web集成商的考虑，只需考虑将每个Sprite调整为2的幂。例如16像素或32像素网格。它使计算CSS文件中的偏移量变得更加容易。两者之间的所有空格都无关紧要，因为gifd和png格式压缩得很好。

Compass CSS Framework具有自动生成精灵的功能。

如果您喜欢Java，则可以使用GWT 1.5+（带有“ ImageBundle”）。GWT编译器将为您处理所有令人讨厌的细节。您甚至不必编写一行JavaScript或编写任何CSS。

这是一个脚本，它将通过Photoshop脚本将图像组合到CSS精灵中。它不会像您所要求的那样创建一个精灵图，但是如果它们的大小相同，它将以两个（2、4、8）的倍数合并图像。与将所有图像放在一个文件中相比，我更喜欢组合相似的图像（正常，悬停，选定，选定的父级）。

如果您在轨道上使用ruby，则有一个易于安装的库来生成CSS sprites。

http://github.com/aberant/spittle

有一个名为ActiveSprites的新工具，它是active_assets gem的一部分。

GitHub：http : //bitly.com/eRTwU4

您使用ruby dsl定义精灵，然后执行“ rake sprites”，并生成精灵和相应的样式表。

拉德！

这是一些示例代码，

# 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

https://github.com/northpoint/SpeedySprite

该工具采用一种新颖的方法，它可以将您请求的图像作为http服务动态地组合在一起。这使整个过程非常简单（无需预处理，可以随时更改图像）：启动服务，然后在HTML中引用所需的任何图像：

<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />

由于它是动态的，因此您甚至可以从一组动态图像（例如缩略图页面）中制作精灵。虽然不支持JPEG，但是PNG和GIF可以正常工作。

我建议您使用Sprite Master Web。我会自动生成精灵表并为您导出CSS代码。它总是尝试使用高级算法生成最小的Sprite表。

这是屏幕截图和youtube视频

这些工具都不符合我的要求，所以我写了一个使用Mark Tylers的微型图像库mtpixel（现在是mtcelledit的一部分）的工具。）的工具，它不是超级广泛，但可以通过mtpixel的内置函数轻松扩展，这些函数包括：灰度，颜色反转，旋转，锐化，量化，后验，翻转（垂直和水平），变换，rgb->索引，indexed-> rgb，边缘检测，浮雕，绘制多边形，文本等。

您要做的就是将一组图像作为args传递（支持png，gif和jpeg），它将输出一个名为sprite.png的rgb png以及有用的图像切片数据到stdout。我在bash脚本中使用它来分割整个图像目录并输出切片数据以自动生成css（希望最终使其能够用一些有创意的sed / awk自动替换现有的img标签）

小狗linux的二进制软件包将在这里：

http://murga-linux.com/puppy/viewtopic.php?t=82009

我的用例只需要将图像垂直拼接成新的png，就可以完成所有工作，但是我的源代码是公共领域，而mtcelledit库是gpl3。使用mtpixel静态链接时，二进制文件小于100kb（动态链接时只有几kb），而其他依赖项只有libpng，libjpeg和libgif（以及带有mtmt官方格式的freetype，但我不需要文本支持，所以我注释掉静态版本中的freetype位）

随时根据自己的需要进行修改：

#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+1] ); 
   height+=imglist[i]->height; 
   if (imglist[i]->width > width) width=imglist[i]->width; 
} while (++i < 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=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y); 
   y+=imglist[i]->height; 
   mtpixel_image_destroy( imglist[i] ); 
}while (++i < argc); 
   mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); 
mtpixel_quit(); 
return 0; 
}

如果您使用的是.net，请访问http://www.RequestReduce.com。它不仅会自动创建Sprite文件，而且还会通过HttpModule进行动态处理，并合并和缩小所有CSS。它还使用量化和无损压缩来优化子画面图像，并使用ETags和Expires标头处理生成文件的提供，以确保最佳的浏览器缓存。该设置非常简单，仅涉及一个简单的web.config更改。请参阅我的博客文章，以了解Microsoft Visual Studio和MSDN Samples画廊采用的博客。

我最近找到了这个工具：SpriteRight http://spriterightapp.com/

SpriteRight是Mac的CSS Spritesheet生成器，可用于导入现有的图像或样式表。使您的网站加载速度更快，降低带宽成本并节省时间。SpriteRight甚至可以即时生成CSS代码。