大家是用什么方式生成 CSS sprites 的?

Question

公司原先是手动合并的, 一个是效率低, 前端和美工工作都比较麻烦,
另一个是图片位置通过手工调整难以保证位置完全正确..
然后我做了两次尝试

• Spritesmith

用了 Grunt 插件, 可以定义 CSS 模版. 合并基本是完成.
问题是不支持 Retina, 每次合并又不一样, 比较麻烦.

• glue

解决了 Retina 合并的问题, 但是有两个问题,
一个定制性, Grunt 插件文档不清晰, 另外生成的 CSS 可能需要手工定制.
致命的是 Retina 生成的小图片图标质量不过关,
据说说 0.9 可以解决, 但需要手动安装, 我现在还没有尝试.

后面也开始找其他方案,

有推荐 peach, 但文档稍微找了下还没弄明白,
又有找 Fireworks 插件导出 CSS, 目前不熟悉工具也没有尝试..

不知道大家试过的方案有哪些好的?

可能要考虑进去的问题

• Grunt 支持或者其他的脚本支持
• CDN 部署的文件名和直接合并的不一致, 可能用模版去解决
• Retina 的支持, 能生成 backgroupd-position.
• Retina 下自动缩放图片而且保持清晰度
• 工具需要跨平台, 在 OS X 和 Windows 上进行使用

Answer 1

Spriting with Compass

优点

1. 编写代码方便；

2. 图片的合并自动化。

缺点

这个需要用到 SASS，增加了依赖。

Answer 2

1.用Fireworks哦~~然后存储以后所有小组件图片都是分离存储在一起的fw.png文件，记得给小组件写position信息存到.txt文档里面，以后维护很方便。
2.然后PS打开一次打开一次这个文件再另存为另外一个文件夹路径中就可以变成普通整套组件一整张的小体积的.png了。
3.然后把小体积的上线，大体积的留档以后编辑。

Answer 3

用fireworks，最好是4.0版，对，就是2001年出的那个版本，切图神器。后面的版本反而不太顺手...
其实不用像 @龜娇娇の逆袭 说的那样记坐标，fireworks“自己的”图片格式是png（相对于photoshop的psd格式来说），各种原始状态都在里面了。
最后选好输出图片格式，用export命令导出就行了。

Answer 4

按照你的要求我可以很肯定的说 "没有!"
不过你可以尝试涛哥的 " CssGaga " 这是 Qzone 还有我们目前使用的解决方案.

• 没有脚本支持, 依赖 "windows".
• Retina? No problem!
• Sprites 合拼图片出来的大小是最低的.
• 随便解决了 CSS / 时间戳 / 图片压缩等等...
• 这亦是我们目前用的最欢乐的东西!

Answer 5

當然是compass啦！

但是，你compass好一個web用的sp，想用在retina display的iDevice上怎麼辦？ 頭疼了吧？

所以，老老實實用手動的，而且sp裏每個icon最好是矢量的，然後放大2x，輕輕鬆鬆解決retina display問題。

這麼爽的方案，我會亂說？

Answer 6

小声说，额，移动端，iconfont...
UC8.x还支持的，9.x就不支持了。。。UC必须死

Answer 7

同上面的也用的CssGaga ,这里有个 Grunt版的https://github.com/hellometers/grunt-sprite 看到需要安装太多就不折腾
peaches windows下 好像node-canvas装不起来，云模式要上传图片没继续用

现在用cssgaga 只在windows下sprite

单独建提个bg.css 只放backgrond的css,把bg.css用cssgaga处理
然后再grunt watch cssgaga生成的bg.css ，再和其他css文件合并

Answer 8

http://cn.spritegen.website-performance.org/
一直在用这个

Answer 9

这个网页挺帅的，就是火狐用起来有些卡： http://www.spritecow.com/

Answer 10

欢迎使用我们的 gulp-tmtsprite 插件，地址是： https://github.com/weixin/gulp-tmtsprite ， 支持 3 倍图。

也可以直接使用我们的工作流： https://github.com/weixin/tmt-workflow

欢迎反馈意见

Answer 11

http://alloyteam.github.io/gopng/ alloyteam出品

Answer 12

我一般用Icon Ninja里面自带的css sprite生成器：http://www.iconninja.com/css-...