leiroc / supercutePSD

psd2html/css 一款psd生成h5的切图，样式布局脚本

写在前面

• 在线说明文档
• 在线演示地址

此PS脚本主要实现以下功能：

• 快速切图（切图是很费时间，利用插件切图能很大程度提高效率）
• 快速布局、生成CSS、HTML（自动计算切图宽度、高度生成理想的DOM结构）

下面分别对以上功能做一些说明和解释，方便大家在使用过程中，自己灵活扩展

快速入门

• 打开demo中的psd文件

• 选择 文件->脚本->浏览 选择 supercutePSD.jsx 文件，显示如下:

  其中需要选择，导出文件地址。css单位默认是px,然后点击运行即可；

• 这样在文件夹下面就会生成相应的文件了,如下：

  imgs目录是切图

常见问题

切图方面

• 一个ps文件中最好是一个页面的，不要有多个页面，这样切图会很慢，也容易出问题
• 如果有一些图层要特殊处理，可以自己先在psd里面栅格化个别图层即可
• 图层太多，可以先把文字和图组合栅格化之后再运行脚本

单位方面

• 单位用px，项目会自动转rem方便直接用
• css采用绝对定位方式布局，如不需要布局，请自己在jsx源码里面去修改，writeCss方法中。

其他

• 插件来源是在2016年无意中发现，然后放到了github中，原作者已找不到。
• 如需交流请联系（qq: 121644750）