此PS脚本主要实现以下功能:
- 快速切图(切图是很费时间,利用插件切图能很大程度提高效率)
- 快速布局、生成CSS、HTML(自动计算切图宽度、高度生成理想的DOM结构)
下面分别对以上功能做一些说明和解释,方便大家在使用过程中,自己灵活扩展
-
打开demo中的psd文件
-
选择 文件->脚本->浏览 选择
supercutePSD.jsx
文件,显示如下:其中需要选择,导出文件地址。css单位默认是px,然后点击运行即可;
-
这样在文件夹下面就会生成相应的文件了,如下:
imgs
目录是切图
- 一个ps文件中最好是一个页面的,不要有多个页面,这样切图会很慢,也容易出问题
- 如果有一些图层要特殊处理,可以自己先在psd里面栅格化个别图层即可
- 图层太多,可以先把文字和图组合栅格化之后再运行脚本
- 单位用px,项目会自动转rem方便直接用
- css采用绝对定位方式布局,如不需要布局,请自己在
jsx
源码里面去修改,writeCss
方法中。
- 插件来源是在2016年无意中发现,然后放到了github中,原作者已找不到。
- 如需交流请联系(qq: 121644750)