掌握聚合最新动态了解行业最新趋势
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。好的东西应该要付费支持,这样作者才会有动力去更新,如果你是在囊中羞涩的话,也可以通过多注册账号来解决这个问题。

原文来自:剑阁前端博客

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

  • 个人/企业涉诉查询

    通过企业关键词查询企业涉松详情,如裁判文书、开庭公告、执行公告、失信公告、案件流程等等。

    通过企业关键词查询企业涉松详情,如裁判文书、开庭公告、执行公告、失信公告、案件流程等等。

  • 账号黑产风险识别

    根据手机号来查询是否命中黑产风险

    根据手机号来查询是否命中黑产风险

  • IP反查域名

    IP反查域名是通过IP查询相关联的域名信息的功能,它提供IP地址历史上绑定过的域名信息。

    IP反查域名是通过IP查询相关联的域名信息的功能,它提供IP地址历史上绑定过的域名信息。

  • 人脸卫士

    结合权威身份认证的精准人脸风险查询服务,提升人脸应用及身份认证生态的安全性。人脸风险情报库,覆盖范围广、准确性高,数据权威可靠。

    结合权威身份认证的精准人脸风险查询服务,提升人脸应用及身份认证生态的安全性。人脸风险情报库,覆盖范围广、准确性高,数据权威可靠。

  • 全国城市空气质量

    全国城市和站点空气质量查询,污染物浓度及空气质量分指数、空气质量指数、首要污染物及空气质量级别、健康指引及建议采取的措施等。

    全国城市和站点空气质量查询,污染物浓度及空气质量分指数、空气质量指数、首要污染物及空气质量级别、健康指引及建议采取的措施等。

0512-88869195
数 据 驱 动 未 来
Data Drives The Future