公司原先是手动合并的, 一个是效率低, 前端和美工工作都比较麻烦,
另一个是图片位置通过手工调整难以保证位置完全正确..
然后我做了两次尝试
Spritesmith
用了 Grunt 插件, 可以定义 CSS 模版. 合并基本是完成.
问题是不支持 Retina, 每次合并又不一样, 比较麻烦.
glue
解决了 Retina 合并的问题, 但是有两个问题,
一个定制性, Grunt 插件文档不清晰, 另外生成的 CSS 可能需要手工定制.
致命的是 Retina 生成的小图片图标质量不过关,
据说说 0.9 可以解决, 但需要手动安装, 我现在还没有尝试.
后面也开始找其他方案,
有推荐 peach, 但文档稍微找了下还没弄明白,
又有找 Fireworks 插件导出 CSS, 目前不熟悉工具也没有尝试..
不知道大家试过的方案有哪些好的?
可能要考虑进去的问题
Grunt 支持或者其他的脚本支持
CDN 部署的文件名和直接合并的不一致, 可能用模版去解决
Retina 的支持, 能生成 backgroupd-position.
Retina 下自动缩放图片而且保持清晰度
工具需要跨平台, 在 OS X 和 Windows 上进行使用
1.用Fireworks哦~~然后存储以后所有小组件图片都是分离存储在一起的fw.png文件,记得给小组件写position信息存到.txt文档里面,以后维护很方便。
2.然后PS打开一次打开一次这个文件再另存为另外一个文件夹路径中就可以变成普通整套组件一整张的小体积的.png了。
3.然后把小体积的上线,大体积的留档以后编辑。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。