前端如何快速切图

废话不多说我们直接进入正题

---

正所谓：‘工欲善其事，必先利其器’，好的开发工具能够极大的提高我们的开发效率。

• Pxcook（高效易用的自动标注工具, 生成前端代码, 设计研发协作利器）
• Adobe PhotoShop CC 2018(推荐下载较高版本，可以找我要破解版的哦！)

1.上面两种工具安装成功之后，下面开始我们的切图了，实现准备好我们的psd原型图，直接拖拽到Pxcook中

2.导入（需要注册个账号）之后会呈现如下：

在上面图中我们可以看到当前图中每个元素的各种属性值，对应的CSS代码也可以直接copy，阴影也都帮我们写好了，还有什么比这个更加高兴的事吗！

3.选择切片

4.在PS中将需要切的图层事先选择好

5我们要将PS和Pxcook建立关联，打开ps ‘编辑’-‘首选项’，进行下面的设置，

6.将两者建立连接，输入我们刚才设置的密码，开始就是用就可以了。

7.选择适合我们自己的需求的格式，点击‘切所选图层’即可导出到指定的路径下面。

通过这两个工具的混合使用，困扰我的问题得到了解决，妈妈再也不用担心我的切图了。