前端如何快速切图

liwusen 2019-06-28

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


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

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

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

2.导入(需要注册个账号)之后会呈现如下:前端如何快速切图

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

3.选择切片
前端如何快速切图

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

前端如何快速切图

5我们要将PS和Pxcook建立关联,打开ps ‘编辑’-‘首选项’,进行下面的设置,
前端如何快速切图

6.将两者建立连接,输入我们刚才设置的密码,开始就是用就可以了。
前端如何快速切图

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

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

相关推荐

Adisketch / 0评论 2019-11-02
软件设计 / 0评论 2017-09-15
软件设计 / 0评论 2017-03-29