前端如何快速切图

shevy 发布于2019-08-23 10:33 / 827人阅读

摘要：选择适合我们自己的需求的格式，点击切所选图层即可导出到指定的路径下面。通过这两个工具的混合使用，困扰我的问题得到了解决，妈妈再也不用担心我的切图了。

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

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

Pxcook（高效易用的自动标注工具, 生成前端代码, 设计研发协作利器）

Adobe PhotoShop CC 2018(推荐下载较高版本，可以找我要破解版的哦！)

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

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

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

3.选择切片

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

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

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

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

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

云服务器 GPU云服务器前端切图 web前端切图前端切图教程快速开发前端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96454.html

web前端工程师快速的切片方式

摘要：今天在网上看了一个教程前端工程师如何快速切片。除了传统的人工手动使用的切片工具以外。今天在网上看了一个教程：web前端工程师如何快速切片。除了传统的人工手动使用PS的切片工具以外。还可以使用以下方法进行切图 1：使用文件脚本，将图层导出为文件的方式快速切图showImg(https://segmentfault.com/img/bVtt1o);选中文件->脚本->将图层导出到文件 ...

LeoHsiun 2019-08-01 15:08 评论0 收藏0
前端又要失失失失失失失失失业了！

摘要：何去何从在如此趋势所迫中，切图仔该何去何从作为个人来看，工具是没法完全取代人工的，工具可以帮助开发者完成大量的简单重复工作，但是要满足实际业务，还是需要前端工程师的专业知识和技术。 1. 祸起看到标题，切图仔们又是菊花一紧。前几天微软刚刚开源Sketch2Code，让UI草图转化成HTML代码。切图仔瑟瑟发抖。 showImg(https://segmentfault.com/img...

lewif 2019-08-23 11:55 评论0 收藏0
神器！解放你的双手——UI设计稿全自动切图和标注的一些工具推荐

摘要：蓝湖通过帮助设计师更好地向团队展示设计图描述页面之间的跳转关系。如果设计图出现改动和更新，蓝湖也能自动添加新版本。蓝湖基于这些反馈快速迭代，而自动标注功能就是其中一项。原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。工欲善其事，必先利其器。我只是...

lylwyy2016 2019-08-29 12:23 评论0 收藏0