锐客网

  1. 首页 > it技术 > >

Zeplin教程(设计师端、开发端)

1 什么是Zeplin

Zeplin是一款为设计师和开发者提供设计图交接与沟通的高效平台，核心功能为标注。设计师可通过插件(目前仅支持PS和sketch)将已完成的设计图直接导入到Zeplin中，无需手动标注，开发者在Zeplin查看设计图时可通过鼠标点击设计图 显示相应位置的尺寸、色值、文字大小等信息。
实际效果图如下:

Zeplin教程(设计师端、开发端)
文章图片
image 2 Zeplin的作用
  • 对于设计师来说:
    不用做标注，省很多事，也不需要总担心标注漏了什么，程序员又来问来问去
  • 对于开发者来说:
    不需要费心将标注的px换算成自己需要的尺寸，也不用担心设计师标注漏了什么
3 注册并验证Zeplin账户，下载安装客户端 3.1 打开Zeplin官网(https://zeplin.io/) Zeplin教程(设计师端、开发端)
文章图片
image 3.2 注册账户 Zeplin教程(设计师端、开发端)
文章图片
image 3.3 去邮箱接受验证邮件，并激活账户(可能会被误认为辣鸡邮件)、 Zeplin教程(设计师端、开发端)
文章图片
image 3.4 下载并安装客户端(windows或mac) Zeplin教程(设计师端、开发端)
文章图片
image 4 操作教程 如果你是码农，请直接跳到开发端即可，如果你是设计师呢？恭喜你，需要全部看完！
4.1 设计师端(Photoshop版) 4.1.1 打开并登录客户端 4.1.2 安装PS导出插件(需先关闭PS) Zeplin教程(设计师端、开发端)
文章图片
image Zeplin教程(设计师端、开发端)
文章图片
image 4.1.3 新建Zeplin项目 Zeplin教程(设计师端、开发端)
文章图片
image Zeplin教程(设计师端、开发端)
文章图片
image Zeplin教程(设计师端、开发端)
文章图片
image 4.1.4 在Zeplin项目中邀请开发者参与 Zeplin教程(设计师端、开发端)
文章图片
image 4.1.5 从PS中导出设计图到Zeplin
  • 首先，我们需要确保ps中已经安装好了zeplin插件，我们可以在窗口，扩展功能中看到
  • 然后，我们打开一个psd文件，打开zeplin插件，可以看到说明，是将画板导入到zeplin
  • psd中默认是以图层的形式呈现的，我们需要先将图层转换成画板，先选中所有的图层（按住shift键，分别选中第一个图层和最后一个图层），右键-来自图层的画板。
  • 这样，软件会提示我们即将从图层新建画板，可以为画板重命名，定义高度和宽度，我们直接点击确定即可。
  • 此时选中画板，Zeplin面板就会显示这个黄色的按钮，点击按钮会提示你选择要导入到哪个Zeplin项目中(勾选下方的蓝色框会覆盖更新相同命名的画板)，点击“import”即可开始上传，然后等待上传完成即可。
4.2 开发端 4.2.1 打开并登录客户端 4.2.2 等待参与的Zeplin项目同步更新完成 4.2.3 刷新一次项目 Zeplin教程(设计师端、开发端)
文章图片
image 4.2.4 查看数值尺寸与切图 5 注意事项 免费版账户仅能同时存在一个项目，设计师可注册多个设计师账户+1个公用的开发者账户，设计师账户创建的项目均邀请公用账户参加。
6 参考资料 【Zeplin教程(设计师端、开发端)】Zeplin与sketch-入门教程
Zeplin 的使用体验如何？

    推荐阅读


    上一篇：走钢丝

    下一篇：顺势而为的成熟