切图框架(slicy) v1.3免费版 附使用教程

slicy是一款响应式的HTML5/CSS3框架，采用12列格子技术，快速的响应式设计，内置常用的jquery插件，iepng透明插件，选项卡插件等，兼容ie6,ie7,ie8,firefox,chrome浏览器以及iphone,ipad等移动设备。需要的朋友可以来本站下载！

软件特点

1、栅格化系统

采用了12列格子技术，将网页平分成12列，可以满足多种布局的网页，为网页的多样性提供了便捷性，和灵活性。

2、响应式设计

可以根据浏览器的大小自动缩放和调整，对web标签的重构实现了最大化的浏览器支持，避免了枯燥乏味的浏览器兼容调整的烦恼。

3、JS插件的支持

编入了常用的jquery插件，iepng透明插件，选项卡插件，幻灯片插件，lazyload插件，并且测试了其跨浏览器的兼容性。

slicy使用教程

1、PSD文件的预处理

这一步可以由美工来处理，不过个人推荐程序员亲自完成这一步骤，因为这里涉及到图片的命名，我们自己来对图片进行命名可以更好的使之符合整个项目的命名规则，方便在项目中对对应图片资源进行调用和管理。

首先用PhotoShop打开美工给你的PSD文件，如下图

图中的绿色状态图标即为本次需要切出的素材图片

在右侧分组面板中，选中对应的组“Statues”

对“Statues”组的组名进行重命名，将其重命名为“Statues@2x.png”，全部完成后保存PSD文件即可。

注意： 别忘了@2x后面的“.png”。同时，这里的命名即为图片素材被切出后的名字，因此建议大家在命名时考虑到项目整体的命名规则和调用的方便来进行命名，避免图片切好之后再来修改名字，浪费时间。

到这里，PSD文件的预处理就完成了，事实上这一步也是整个流程中比较繁琐的一步了，完成了这些，今天的切图工作就已经完成了八成。

2、令人愉悦的切图工作

问：使用Slicy切图总共分几步? 答：总共分2步

第一步：把PSD拖进去

第二步：把图片拖出来

是的，就是如此简单，打开Slicy的主界面，你可以看到其主界面也是如此的简单。。。

第一步

将我们预处理好的PSD文件拖进去，在一段令人愉悦的动画之后，我们会看到这个：

第二步

按住Command + A快捷键全选，将图片拖到你需要的地方

可以看到，一套严格命名，大小合规的图片已经被切好导出了，就是这么简单!