安装avocode

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

avocode的官网地址是avocode.com,官网的标语是Build web, iOS & Android apps exactly as they were designed. Goodbye hand coding. Hello avocoding.

就是让你告别繁琐的切图工作。

介绍一个前端切图神器avocode

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

介绍一个前端切图神器avocode

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

我这里上传了一个示例的简历psd

介绍一个前端切图神器avocode

图片描述

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

介绍一个前端切图神器avocode

avocode的使用

现在着重的介绍一下上面的工具栏,第一个手形的按钮

介绍一个前端切图神器avocode

图片描述

,这个按钮代表着你可以拖动的整个文件,第二个按钮

介绍一个前端切图神器avocode

图片描述

有点像photoshop中的选择按钮,可以直接选择psd中的一个图层,当我们选中某个图层之后,我们就可以进行我们切图的工作的重头戏。假如选中图层中有一个标题。

介绍一个前端切图神器avocode

图片描述

在右边显示关于这个标题的css信息,这个css可以包含color、font-size、line-height、border-color、background-color等等。有了这些信息,写css就会相当容易。

介绍一个前端切图神器avocode

图片描述

当你需要这个图层导出图片当背景,就可以右键选中导出图片,某些情况下还支持svg格式,也可以支持base64。

介绍一个前端切图神器avocode

图片描述

第三个是测量按钮

介绍一个前端切图神器avocode

图片描述

,这个可以获得选中图层的大小和周围的间距大小。

介绍一个前端切图神器avocode

图片描述

第四个是取色按钮

介绍一个前端切图神器avocode

图片描述

,这个就用取色器直接吸取这个图层的颜色。第五个是裁剪按钮

介绍一个前端切图神器avocode

图片描述

,这个也有点类似photoshop的裁剪功能。

介绍一个前端切图神器avocode

图片描述

第6个按钮是备注按钮

介绍一个前端切图神器avocode

图片描述

, 这个功能就不介绍了。

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

介绍一个前端切图神器avocode

图片描述

Tags:

我要发布评论

来!做第一个写评论的

avatar

wpDiscuz
51Gorwth就是增长黑客交流平台

登陆您的账户

or    

Forgot your details?

Create Account