介绍一个前端切图神器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。好的东西应该要付费支持，这样作者才会有动力去更新，如果你是在囊中羞涩的话，也可以通过多注册账号来解决这个问题。

图片描述