数据API 案例 开发者 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
新闻动态 > 媒体报道

前端切图神器avocode

01安装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.

572-640.jpg.jpg

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

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

573-640.jpg.jpg

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

574-640.jpg.jpg

02avocode的使用

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

微信截图_20170220140726.png

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

微信截图_20170220140748.png

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

575-640.jpg.jpg

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

576-640.jpg.png

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

577-640.jpg.jpg

第三个是测量按钮

微信截图_20170220140915.png

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

578-640.jpg.png

第四个是取色按钮

微信截图_20170220140952.png

这个就用取色器直接吸取这个图层的颜色。

第五个是裁剪按钮

微信截图_20170220141011.png

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

579-640.jpg.jpg

第6个按钮是备注按钮

580-640.jpg.jpg

这个功能就不介绍了。

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

原文来自:剑阁前端博客

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
新闻动态 > 媒体报道
前端切图神器avocode
发布:2017-02-20

01安装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.

572-640.jpg.jpg

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

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

573-640.jpg.jpg

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

574-640.jpg.jpg

02avocode的使用

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

微信截图_20170220140726.png

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

微信截图_20170220140748.png

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

575-640.jpg.jpg

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

576-640.jpg.png

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

577-640.jpg.jpg

第三个是测量按钮

微信截图_20170220140915.png

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

578-640.jpg.png

第四个是取色按钮

微信截图_20170220140952.png

这个就用取色器直接吸取这个图层的颜色。

第五个是裁剪按钮

微信截图_20170220141011.png

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

579-640.jpg.jpg

第6个按钮是备注按钮

580-640.jpg.jpg

这个功能就不介绍了。

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

原文来自:剑阁前端博客

电话 0512-88869195