终于找到你,我梦寐以求的PS切图插件。曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦。为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安卓那一堆的尺寸,真是让人欲哭无泪!

直到前段时间使用了摹客-iDoc,心中大喜,我终于找到了我想要的那种PS切图插件。iDoc巧妙的将标注、切图这两项设计完稿后最棘手工作集成在一起,简单、快捷、高效,而且支持Windows和Mac双平台。我是个爱分享之人,接下来,给大家全方位揭秘这款从设计稿到轻松高效输出切图的PS切图插件神器。希望能让所有的设计师解放双手,摆脱加班的痛。

1. 安装PS切图插件

首先在摹客官网(https://idoc.mockplus.cn/download)下载 PS切图插件-摹客iDoc,下载完成后点击进行安装。

2.在PS中打开切图插件

插件安装好后打开PS,在「窗口>扩展功能」找到摹客 iDoc 插件,选择并打开。

3.注册和登录切图插件

你可以使用摹客平台账号(在Mockplus、摹客 iDoc 上通用)即可登录。没有账号的自行先注册。

4.在切图插件中选择团队和项目

在右上角下拉菜单中选择团队和项目(当然你也可以新建项目),然后将设计稿上传至此项目中。

5.在PS中标记切图

选中需要切图的图层或编组,点击「标记切图」。

点击后,将在名称前增加“-e-”,「标记切图」变为「取消切图标记」,此时切图操作便完成了。

6.选择设计稿倍率

点击倍率下拉框选择设计稿对应的倍率,也可以直接默认,在Web端可修改设计稿倍率。

7.上传设计稿

标记完成切图之后,一键将设计稿上传至云端项目中,提示完成后便可在云端查看到刚才上传的设计稿。

8. 在Web端查看设计稿及下载切图

在设计稿上传完成后,可点击切图插件界面中的“我的应用”进入相应项目。进入到切图板块,点击空白处,右侧切图面板上会展示该页面内所有切图,按Ctrl键可以进行多选,点击“下载选中切图”,可下载当前选中切图;点击“下载全部切图”,可下载全部切图。此外,还可切换平台(iOS、Android、Web)和选择不同倍率。

怎么样?是不是有一种被这款PS切图插件拯救了的感觉?当然,切图只是所有功能中的冰山一角。在iDoc中,智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理,从产品到开发,只要一个文档。心动的小伙伴赶紧去下载试试吧!

2018年设计师都在用的PS切图插件--摹客iDoc的更多相关文章

  1. ps切图插件

    ps切图工具插件 下载网址:http://www.cutterman.cn/zh/cutterman 安装完插件,关闭ps,重新打开,窗口- 扩展,即可使用

  2. 那些年,UI设计师还在手工标注和切图时走的弯路

    在我从事UI设计师这几年的工作中逐渐发现,最让人糟心的不是应付各种奇葩的需求,完成设计稿,而是交付.每次交付的设计稿和最后开发出来的产品总是让我心塞无比,很少最终产品和我的设计稿是完全一致的. UI设 ...

  3. 页面制作部分之PS切图

    页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...

  4. 做一个会PS切图的前端开发

    系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...

  5. 前端技术-PS切图

    页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...

  6. 学习笔记2:前端PS切图

    前端PS切图 一.Photoshop的界面设置 二.Photoshop的基本操作 三.Photoshop的传统切图 四.Photoshop的精准切图 五.Photoshop的扩展知识 视频学习:htt ...

  7. 前端PS切图

    http://www.imooc.com/learn/506    慕课网地址 Tools Tools  Photoshop 快捷键 l  移动工具 V l  选取工具 M l  套索工具 L l  ...

  8. 两种ps切图方法(图层/切片)

    两种Ps切图方法 一.      基础操作: a)    Ctrl++ 放大图片,ctrl - -缩小图片 b)    按住空格键space+,点击鼠标左键,拖动图片. c)    修改单位,点击编辑 ...

  9. 前端菜鸟起飞之学会ps切图

    由于之前只顾着追求效率,没有学习过PS,但其实这是前端开发人员需要学会的技能之一,曾经看过一个大佬的前端经验分享说他在招聘时遇到不会切图的会直接pass掉,可见前端开发人员学会切图是多么重要.通过观看 ...

随机推荐

  1. async.waterfall

    [async.waterfall] if any of the tasks pass an error to their own callback, the next function is not ...

  2. lucene笔记

    lucene全文检索 全文检索是计算机程序通过扫描文章中的每一个词, 对每一个词建立一个索引, 指明该词在文章中出现的次数和位置. 当用户查询时根据建立的索引查找,类似于通过字典的检索字表查字的过程

  3. Centos 7 MariaDB Galera cluster 部署

    一.安装环境准备 1.系统: CentOS Linux release 7.4.1708 (Core) 2.hosts 10.6.32.51 openstack1 10.6.32.52 opensta ...

  4. ubuntu 印象笔记

    1. 印象笔记剪裁,直接浏览器上百度搜索,下载浏览器插件,登陆即可.(不过,我遇到个问题,浏览器登陆的服务器貌似是国际版的,与pc上的服务器不同,也没有成功转换过来.两账户相互独立.) 2. 印象笔记 ...

  5. AJAX模板

    $.ajax({ type:"",//Ajax请求的提交方式(GET或POST) dataType:"text",//请求的类型 url:"" ...

  6. git config --global user.email

    加上这个就ok

  7. 初识Netty

    我们已经了解了Socket通信/IO/NIO/AIO编程,对于通信模型已经有了一个初步的认识,其实我们之前所学习的仅仅是一个模型,如果想把这些真正的用于实际工作中去,其实我们之前所学习的仅仅是一个模型 ...

  8. crm作业知识点集合[三]

    知识点1 我们要实现一个这样的功能,在学生表中,可以查看每个学生的报名的班级的所有的成绩,就是下图的效果 1.首先我们需要在学生表中自定义一列,这一列的内容就是一个a标签,指向另外一个页面,而我们在另 ...

  9. AngularJS——第5章 作用域

    第5章 作用域 通常AngularJS中应用(App)是由若干个视图(View)组合成而成的,而视图(View)又都是HTML元素,并且HTML元素是可以互相嵌套的,另一方面视图都隶属于某个控制器(C ...

  10. Head First Servlets & JSP 学习笔记 第三章 —— MVC迷你教程

    临渊羡鱼,不如退而结网!是时候动手搞事情了! 我们的四大步骤: ①分析用户的视图(也就是浏览器要显示的东西),以及高层体系结构: (这个就是所谓的前端吧?用JSP?JSP可以当成Html来用吧?高层体 ...