Zeplin是一款为应用ps的室内设计师们给予的在线协作与标注工具，这款系统给予了标明、Style Guide、备注名称文本文档与简洁的团结协作作用。Zeplin 可以帮你自动生成码数标明、CSS 款式编码、导出来照片，及其共享资源组员间可以备注名称和评论等。

安装步骤

1、安裝PS

第一步毫无疑问便是安裝PS了，这儿先表明一下，zeplin适用的ps务必是2015年以后的版本，由于我一开始在电脑上安裝了一个PS，可是一直提醒版本不足。因此第一步便是安装下载2015年以后的PS版本。

2、安裝zeplin

我们可以立即到官方网站http://zeplin.io中的support去免费下载自身所须要的版本，依据自身的电脑操作系统开展免费下载，我下载的是windows 64bit

下面，大家安裝zeplin软件，我还在安裝的环节中出現了一个难题，提醒我笔记本的.NET Framework版本不足，务必在4.5之上，NET Framework又被称为 .Net框架，是 Microsoft 发布的一个全方位且一致的程序编写实体模型，用以搭建具备下列特征的应用软件：在外貌层面给予无可比拟的客户体验;适用无缝拼接而可靠的通讯;可以为一系列工作流程创建实体模型。 现阶段，.NET Framework的全新版本为4.5，但一般运用的为.NET Framework 3.5与.NET Framework4.0，现阶段绝大多数手机游戏、软件应用这两个版本的足已。

因此，我要去在网上安装了一个Microsoft .NET Framework 4.5，可以立即去官方网站下载，随后开展安裝就可以。

安裝完成后，我已经开展zeplin的安裝，必须将其做为软件安裝到ps中，我们在弹出来的提醒对话框中点一下INSTALL：

我们可以自身挑选ps的安装路径中寻找相应的potoshop.exe，以后对话框会出现install successfully的页面发生，意味着大家开始安裝好啦plugin，点一下got it就可以。

这个时候我们可以开启PS的手机客户端，在“对话框”选择项中挑选“拓展作用”，就可以见到zeplin软件了。

使用方法

免费下载成功后，大家开启当地的 App，点一下右上方的 Create，建立一个新的新项目。它有各种方式的，Android、iOS、Web，每一个下边会出现对应的叙述。

这儿我挑选 Web，可以见到 CSS 和 HTML。

图3

2 从Sketch中导出来文档

下边大家开启 Sketch，挑选菜单栏-gt; Plugins -gt; Zeplin -gt; Export Selected Artboards...

图4

这时候会弹出来 Zeplin 的导进对话框，挑选必须导进进的新项目。

可以注意到左下方有一个“Replace scrrens with the same name”，这一就是指如果是早已导进过新项目，但大家 Sketch 里设计图改动了，必须升级 Zeplin 上的设计图时，加上勾就可以更换本来的文档了。

图5

3 Zeplin的分组及设定

导进进行后，会全自动跳出来 Zeplin 的 App，我们可以见到文档都是在 Zeplin 里了。电脑鼠标飘浮在第一个文档的最左边，会发生像除号一样的标示，点一下一下，大家就可以给这好多个文件创建一个分组了。

图6

这儿大家把它取名为“产品有关”。看文件夹名称的右边，有一个小三角的标示，点一下它就可以便捷地收拢或进行文档分组。

图7

随后边上有一个大量实际操作的按键，大家点一下一下，还能够给这一分组提升叙述、重新命名分组、挪动分组，或者删掉分组了。

图8

4 查询CSS款式

大家进到 Zeplin 的一个设计图，点一下一下某一地区，如下图。我们可以见到该地区的px 规格，及其它与其它因素的间距。

图9

看控制面板的右边，大家不会见到它CSS 有关的值，比如 box-shadow。

5 导出来设计图照片

Zeplin 也有个很好的作用，便是导出来照片。矢量图片可以包括 PNG 和 SVG 文件格式。

图11

但是别忘记必须先在 Sketch 中，给这个图片设定过Export。

图12

6 给文档打标签

然后大家看下 Zeplin 的打标签作用。可以见到这一文档早已得到一个“专题讲座”的标签。大家还能够给它挑选其他的标签，或者键入一个新的标签。还可以删掉这种标签。

图13

随后返回主控制面板中。我们可以注意到最上边有两行的标签。例如大家挑选“专题讲座”，便会见到挨打上“专题讲座”标签的全部文档。

因为在最开始，Zeplin 并未建立分组的作用，因此大家用标签来归类文档。而如今大家就可以用标签来做更优化的过虑挑选标准。

图14

7 备注名称或评论

然后再看一下评论作用。我们可以回应一条评论，或者改动评论的色调，或者删掉这条评论。

图15

还能够增加一条评论。CMD 鼠标单击一个空缺地区，键入你的评论就可以。

留意看一下，文档的右下方有一个 Notes 睁着双眼的小猴标示，假如点一下一下，就可以掩藏网页页面上的全部评论。