为了账号安全,请及时绑定邮箱和手机立即绑定

介绍一个前端切图神器avocode

安装avocode

前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能。杀敌要有趁手的兵器,而前端一般都是用photoshop,但是这个兵器非常笨重,可能当你笨拙的挥动的它时,敌人已经挥刀到你的颈部了。毕竟不是所有人都是杨过。所以我们应该选择轻便锋利的武器。那么现在我来介绍一下一个很好用的前端切图神器avocode。

avocode的官网地址是avocode.com,官网的标语是Build web, iOS & Android apps exactly as they were designed. Goodbye hand coding. Hello avocoding.
就是让你告别繁琐的切图工作。
图片描述

下载安装之后,注册登录之后。现在需要创建一个文件夹。创建文件夹可以选择你需要的切图的类型,有IOS,ANDROID,WEB三种类型。我们这里选择的WEB.

图片描述
进入之后可以选择上传按钮上传我们的PSD文件,这里有一个问题,就是这是国外的软件,服务器在国外,如果没有科学上网的话,上传的速度会让你痛不欲生,所以作为一个程序员科学上网是非常重要的。

我这里上传了一个示例的简历psd
图片描述
打开这个psd之后,可以看到很多工具栏,avocode由于版本的更新,工具栏的位置是会发生改变的。本文中的使用的版本是2.12.5。在界面中的左边,有四个按钮图层、活动信息、版本记录、psd的各种相关信息。上边的工具栏是对psd进行具体的切图工作。右边的工具栏显示的是具体选中或者进行操作的获得的图层信息。
图片描述

avocode的使用

现在着重的介绍一下上面的工具栏,第一个手形的按钮
图片描述
,这个按钮代表着你可以拖动的整个文件,第二个按钮
图片描述
有点像photoshop中的选择按钮,可以直接选择psd中的一个图层,当我们选中某个图层之后,我们就可以进行我们切图的工作的重头戏。假如选中图层中有一个标题。
图片描述
在右边显示关于这个标题的css信息,这个css可以包含color、font-size、line-height、border-color、background-color等等。有了这些信息,写css就会相当容易。
图片描述

当你需要这个图层导出图片当背景,就可以右键选中导出图片,某些情况下还支持svg格式,也可以支持base64。
图片描述
第三个是测量按钮
图片描述
,这个可以获得选中图层的大小和周围的间距大小。
图片描述
第四个是取色按钮
图片描述
,这个就用取色器直接吸取这个图层的颜色。第五个是裁剪按钮
图片描述
,这个也有点类似photoshop的裁剪功能。
图片描述

第6个按钮是备注按钮
图片描述
, 这个功能就不介绍了。

通过上面的介绍,已经基本把avocode的功能给介绍清楚了,但是更完整的体验你可以自己下载安装体验。最后我想说的时候,这个是付费软件,第一次注册之后可以免费使用14天,14天过后的话,每个月要$8.99。好的东西应该要付费支持,这样作者才会有动力去更新,如果你是在囊中羞涩的话,也可以通过多注册账号来解决这个问题。
图片描述

点击查看更多内容
10人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
286
获赞与收藏
3794

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消