Tag Archives: TexturePacker

一款高效的spritesheets工具 TexturePacker

  CSS Sprites 是一种高效的前端图片处理方式,在对付众多琐碎的细小图片时通过背景定位的方式加载,可以大幅减少HTTP的请求次数,对于提高页面载入速度有着显著作用。

  例如谷歌雅虎美国在线都在旗下众多产品页面中使用这种图片处理方式,我在一些琐碎图标或者一些悬浮效果上也使用这种方式,不过以往发现的一些 CSS Sprites 辅助工具多是线上产品,一直没有找到一款合适的桌面工具。TexturePacker 不只是专门处理 CSS 的 Sprites 工具,还有很多其他功能,支持多种格式的导入与输入,支持三大桌面系統,总之使得 spritesheets 变得更简单制作效率也更高。

官方主页:http://www.codeandweb.com/
教程指南:http://www.codeandweb.com/texturepacker/tutorials
帮助文档:http://www.codeandweb.com/texturepacker/documentation

spritesheet_in_20_s

  使用起来非常简单,直接将需要的图片拖入,软件会按尺寸自动排列,然后选择输出css文件,工具会智能写好每张图的CSS样式和背景定位,并连同合并后的大图自动生成到指定位置,前端设计师要做的就是直接在HTML和CSS里引入,其他工作就全部交给这个工具智能解决了。

两点提示:
1. 图片之间留够足够的空间,这些可以在软件里调整,为了避免出现不必要的背景;
2. 源图片文件素材命名应规范,软件会按文件名自动相应的class命名,避免自己看不懂生成后的css无法找到需要的图片;

  CSS Sprites 既有优点也有缺点,例如测量需要精准,图片较多时计算定位位置也很头疼,我曾在下面提到的那篇台湾博客教学文章里看到作者最后提到“我認識許多設計師,大多數設計師數學好像不太好,對於太邏輯的東西也有點排斥”,正中下怀我就是属于这类人,所以这款工具作为桌面助手使用极大解决了这个阻碍。

  还有重要一点,软件可以免费使用也可以注册使用,如果只用上面提到的功能,免费版已经足够了,同时来自德国的开发者非常厚道,使用者可以申请免费的注册码,只要符合几个条件,你写自己的博客,博客是游戏或软件或前端开发相关方向的内容(作者还诙谐的提到FaceBook, Twitter, Weibo不算博客除非你有100000个朋友,新浪微博也出现了看来来自中国的申请非常多)我比较幸运恰好几个条件基本都符合,从这里提交申请后十分钟就收到注册码了。

补充

  分享一篇相关实用文章:
  使用 CSS Sprites 設計網頁但不用 background-image 的技巧
  多一种思路,里面也有提到IE6下PNG透明背景问题,我觉得当下众多解决方案中,最强悍的还是DD_belatedPNG,下次再做介绍。

下载 TexturePacker