分类
大小:68.7M更新:2018-08-22
类别:图像处理系统:WinAll
Zeplin是一款为使用ps的设计师们提供的在线协作与标注工具,这款软件提供了标注、Style Guide、备注文档与简单的团队协作功能。Zeplin 可以帮你自动生成尺码标注、CSS 样式代码、导出图片,以及共享成员间可以备注和评论等。
1、安装PS
第一步肯定就是安装PS了,这里先说明一下,zeplin支持的ps必须是2015年之后的版本,因为我刚开始在电脑上安装了一个PS,但是一直提示版本不够。所以第一步就是下载安装2015年之后的PS版本。
2、安装zeplin
我们可以直接到官网https://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,选择菜单-> Plugins -> Zeplin -> 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 睁着眼睛的小猴子标志,如果点击一下,就可以隐藏页面上的所有评论。
2018汪年全家福制作工具网页版图像处理.01M
查看sai2图像处理M2018.05.26 绿色免费版
查看电脑屏幕颜色抓取工具colors lite图像处理Mv2.1.0.5 免费版
查看水墨绘图软件(Expresii 2020)图像处理Mv2020.01.11中文版
查看高级电子相册制作软件典藏版图像处理Mv8.53
查看小鱼闪作图电脑版图像处理MV1.0绿色版
查看中望CAD2018专业版图像处理M免费中文版
查看Draw.io官方免安装版(开源跨平台绘图软件)图像处理MV13.6.2中文绿色版
查看点五学籍照片处理快速重命名调尺寸软件图像处理Mv1.0.0 PC版
查看360全景图制作软件图像处理Mv10.0 官方正式版
查看你画我猜自动绘画工具图像处理M2019免费版
查看InPixio Photo Studio Pro图像处理Mv10.02.0多语言版
查看ImBatch 中文免费版图像处理Mv5.1.1 官方最新版
查看照片编辑器(ACDSee Photo Editor 10)图像处理Mv10.0 Build 52官方版
查看公务员考试考生报名照片定制器图像处理.30M
查看微软画图软件(Microsoft Paint)图像处理.14M绿色版
查看绘画软件(PaintTool SAI)图像处理Mv2.2020.01.15中文版
查看水墨画绘制软件(BlackInk)图像处理Mv0.135 官方最新版
查看AEscripts Joysticks’n Sliders二维动画绑定图像处理.86M1.71
查看淘宝微信微商作图神器图像处理Mv1.1绿色版
查看模糊照片变清晰软件JPEG Enhancer图像处理Mv1.8 绿色版
查看CAD形文件编辑器ShpEdit图像处理Mv2.2.0.6 破解版
查看照片恢复软件(Picture Rescue 2)图像处理Mv2.0.5官方版
查看照片拼贴软件Rip Studio图像处理Mv1.1.2 免费版
查看点击查看更多