shoeBox超实用的雪碧图（Sprite）图制作工具-使用

时间：2024-02-19 15:00:59

从前端优化说起

浏览器载入单张图片的速度基本取决于图片的大小，但是载入多张图片的速度却和另一个要素息息相关-网络请求数，在图片大小和一致的情况下，图片张数越少其请求数越少其载入速度也就越快。所以在使用各种小图标或者小图片时尽量使用一张雪碧图来代替是加快页面载入速度的一种很好的解决方案。

但是雪碧图制作困难

所谓雪碧图就是将无数张图片通过约定的间距合成一张图片，在使用css或者img或者其他手段调用，根据其位置编制只显示对应单图片。首先一般使用的软件是很大众的PS，一张一张拼起来，而且还要注意固定间距，大小图放在一起的时候如何排放，等，制作完了还要编写对应的css代码或者js代码来使用这张大图里面的单张小图。其工作量是非常大的，而且这种机械化的工作很容易让人烦躁。所以一个解放我们双手和心灵的神神器降生了，他就是shoeBox。

如何使用shoeBox

首先打开以下网址并下载并安装

shoeBox 
这里写图片描述

安装如果遇到问题一般是没用装adobe AIR Runtime去下面链接下载安装　　板面

adobe AIR Runtime 
然后再安装一便。

如何使用

使用方法再简单不过了 
只需要将你要转化的多张图片拖放到对应位置就行了

这里写图片描述 
拖放完之后是展示页面点击设置 
页面 
设置你的选择 
这里写图片描述 
Basic基础设置栏目里 
template是选择你要生成那个平台或者那种框架上使用的对应文件，如css就是一般浏览器使用的图片和css文件，pixi.js就是专门为pixi.js这个动画制作框架产生对应的图片和json文件其他的可以慢慢研究。然后是名字，再其次是大小限制。 
Advanced高级设置栏目里 
是为每种类型下设置其名称格式啦，间距啦，缩放比例啦等等设置一般也不会去动的。 
之后按apply就设置完毕了。 
设置完毕后按save来生成我们想要的文件。 
我这里选择了生成css类型。 
这里写图片描述 
生成的图片就不用看了，来看看生成的css代码。

.img1{top:0px;left:0px;
width:323px;height:300px;background: url("sprites.png") no-repeat -0px -0px;}
.img2{top:0px;left:0px;
width:245px;height:350px;background: url("sprites.png") no-repeat -335px -0px;}
.img3{top:0px;left:0px;
width:318px;height:300px;background: url("sprites.png") no-repeat -0px -312px;}

 

到时候我们只需要引入这个css文件并把对应的图片放置对应文件目录里，我们只需要使用对应的class就可以了，是不是方便很多。

相关文章