网页图片整理术之CSS Sprite的应用

CSS Sprite 虽然具有很多优点，但是在制图的时候其实需要相当的细心与耐心，每格图像的尺寸以及间距都必须计算清楚并对齐，否则很容易出现跳动或是没对准的情形。手工去逐一对准及计算、排列常常会耗费不少时间，这边为大家介绍一些实用的小工具：

GuideGuide是一个免费的 photoshop 插件，由于绘制 CSS Sprite 时需要大量的参考线辅助对位，因此新增参考线就变成一个非常琐碎的工作：假设绘制一排18 x 18 px 的图标，就会需要计算出一堆18、36、54、72……等递增单位的参考线，既耗神又耗时，这时 GuideGuide 就可以快速的帮你完成这个任务！

Modular Grid Pattern是一个网页版的服务，用户可以快速创建出一套自定的网格，并且可以输出 PNG 或是供 Photoshop 使用的图样档 (pat) 等，方便设计师在 Photoshop 中对位使用。

CSS Sprites Generator是一个网页版的服务，它允许你上传复数的现有图档，帮你合并好之后并提供 CSS 的文字给你，适合想将原本网站进行 CSS Sprite 改造情况下使用：

CSS Sprites �式生成工具(bg2css)是一个在 Adobe AIR 环境开发下开发的程序，帮助程序设计师在拿到一张 CSS Sprite 图档之后，快速帮忙计算出每个图档的定位信息。

除了在实作上必须花费比较多的精神去做对位的处理，CSS Sprite 在后续维护上有时也会反而造成更多的困扰：例如必须增加图标、或是其中一张图片必须修改（尤其是尺寸）的时候，可能就不是置换图档就可以解决的，往往还得 回去修改 CSS 程序代码才能够完成，这时候反而增加了维护上的成本。尽管如此，CSS Sprite 还是相当值得衡量考虑使用的作法，尤其是当你的网站应用了大量图标的时候，更可以显示出 CSS Sprite 的优点。大家在制作时不仿衡量一下优缺点再来考虑是否使用 CSS Sprite 完成工作，才能达到事半功倍的效果。

原文：dclick.fourdesire.com