shoeBox超实用的雪碧图(Sprite)图制作工具-使用
从前端优化说起
浏览器载入单张图片的速度基本取决于图片的大小,但是载入多张图片的速度却和另一个要素息息相关-网络请求数,在图片大小和一致的情况下,图片张数越少其请求数越少其载入速度也就越快。所以在使用各种小图标或者小图片时尽量使用一张雪碧图来代替是加快页面载入速度的一种很好的解决方案。
但是雪碧图制作困难
所谓雪碧图就是将无数张图片通过约定的间距合成一张图片,在使用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就可以了,是不是方便很多。
最新文章
- [C#] string 与 String,大 S 与小 S 之间没有什么不可言说的秘密
- css content之counter-reset、content-increment
- 理解ASP.NET MVC的DependencyResolver组件
- 使用用户自定义类型 CLR UDT
- Firebird数据库的Select语句
- SQL入门经典(五) 之键和约束
- JavaScript学习笔记-数组
- android ndk开发(二)实现一个官方demo
- 【过程改进】10分钟进阶Nuget
- ubuntu下查看cpu信息
- 剖析iphone之触摸事件touchstart
- MinGW-notepad++开发c/c++程序
- python 远程统计文件
- FPGA的SPI从机模块实现
- 一款值得推荐的shell工具
- empty 和isset的差别
- js常用内置对象及方法
- zabbix web监控模板
- springboot redis(单机/集群)
- CheckForIllegalCrossThreadCalls = false 是干嘛的?
热门文章
- maven中GroupID 和ArtifactID
- iOS10权限问题
- java读取blob,clob转换为字符串
- asp.netMVC中配置automap
- Linux:lvm磁盘分区,动态扩容
- pika常见问题解答(FAQ)
- AttributeError: module 'html.parser' has no attribute 'HTMLParseError'
- 学习shell的第二天
- CDH安装前系统优化准备
- Hive 教程(六)-Hive Cli