127

有没有制作css sprites的好工具？

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

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

是否有任何好的 Photoshop 插件或完全成熟的应用程序可以做到这一点？

4

21 回答 21

50

Instant Sprite是我正在开发的浏览器内 CSS sprite 生成器。它真的很快，但没有其他一些功能那么多。它目前仅适用于 Firefox 或 Chrome，因为它使用 JavaScript FileReader 和 HTML Canvas 在 Web 浏览器中生成精灵而无需上传。

于 2010-11-15T14:56:50.627 回答
48

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

于 2009-02-09T07:29:22.553 回答
31

现在有 Steve Souders 的 Sprite Me。只是尝试一下，它似乎工作得很好。

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

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

于 2009-10-21T10:59:35.490 回答
13

这看起来很有希望：

http://csssprites.org/

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

显然谷歌网络工具包也有一些东西 - 所以如果你正在使用它可能值得一试。

于 2009-02-15T20:27:44.547 回答
9

试试这个：

http://spritepad.wearekiss.com/

于 2012-08-28T16:56:29.220 回答
7

ZeroSprites是一个 CSS 精灵生成器，旨在使用 VLSI 平面布局算法最小化区域。

于 2012-05-04T03:11:59.910 回答
6

发现这个非常快，但 500K 的上传限制可能会很痛苦。源代码可在此处获得

于 2009-02-09T07:28:23.180 回答
4

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

于 2010-05-25T02:24:05.637 回答
4

目前尚不清楚它是否会成为核心 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 编译
于 2011-02-23T21:33:28.160 回答
4

只需使用http://sprites.scherpontwikkeling.nl/它也可以从网站 URL 生成精灵……您可以在开发网站后集成您的精灵。它非常易于使用；）

于 2012-11-15T15:17:37.410 回答
3

不是直接的答案，但对于我的开发人员和网络集成商，考虑简单地将每个精灵与 2 的幂对齐；例如 16 像素或 32 像素的网格。它使计算 CSS 文件中的偏移量变得更加容易。之间的所有空白都无关紧要，因为 gifd 和 png 格式可以很好地压缩它们。

于 2009-02-12T23:57:53.360 回答
3

Compass CSS 框架具有自动精灵生成功能。

于 2011-11-13T03:20:41.890 回答
2

如果你喜欢 Java，那么你可以使用 GWT 1.5+，它带有一个叫做“ ImageBundle ”的东西。GWT 编译器将为您处理所有令人讨厌的细节。您甚至不必编写任何 JavaScript 代码或编写任何 CSS。

于 2009-02-09T14:17:27.533 回答
2

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

于 2009-07-07T19:23:37.910 回答
2

如果你在 rails 上使用 ruby​​，有一个易于安装的库来生成 css sprites。

http://github.com/aberant/spittle

于 2009-11-30T04:02:47.343 回答
2

有一个名为 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
于 2011-03-03T15:03:59.013 回答
2

https://github.com/northpoint/SpeedySprite

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

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

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

于 2011-11-11T15:52:06.057 回答
1

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

这是截图和youtube视频

在此处输入图像描述

于 2012-01-26T21:47:05.013 回答
1

这些工具都不符合我的要求，所以我编写了一个使用 Mark Tylers 的微型图像库 mtpixel（现在是mtcelledit的一部分）的工具、旋转、锐化、量化、分色、翻转（垂直和水平）、变换、rgb->indexed、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（以及使用官方 mtpixel 的 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; 
}
于 2012-11-08T02:30:49.093 回答
0

如果您使用的是 .net，请查看http://www.RequestReduce.com。它不仅自动创建 sprite 文件，而且还通过 HttpModule 以及合并和缩小所有 CSS 即时完成。它还使用量化和无损压缩优化 sprite 图像，并使用 ETags 和 Expires 标头处理生成文件的服务，以确保最佳浏览器缓存。设置很简单，只涉及一个简单的 web.config 更改。请参阅我的博客文章，了解 Microsoft Visual Studio 和 MSDN 示例库对它的采用。

于 2011-09-11T06:50:08.210 回答
0

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

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

于 2012-01-20T14:43:45.500 回答