在UI设计中我们常常使用Ai来进行矢量图的绘制，然后导入Ps中进行设计、排版和导出。

在以前的版本中，切图一直是个很麻烦的事情，要么依托于脚本，要么手动一张张导出，很不方便，这种窘况在Photoshop CC 2015版中得到了解决。

准备

使用Photoshop CC 2015版

准备好要切的图片

第一种方法

Ps自带切图

首先打开图层，找到要切图的部分

选中要切图的图层

图层上单击右键，选择快速导出为PNG

选择一个文件夹保存即可

可以发现导出的文件以图层名称保存成为PNG格式，保留了透明像素

接下来介绍另外的切图神器！！

第二种方法

摹客iDoc PS插件

摹客iDoc PS插件是一个Ps扩展，可以方便的导出移动端和网页的切图，并生成多种大小格式，并且是免费的！

下载

官方网站：https://idoc.mockplus.cn/

安装PS插件

下载摹客iDoc PS插件安装文件并点击进行安装。

打开插件

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

登录

使用摹客平台账号（在Mockplus、摹客 iDoc 上通用）即可登录。

标记切图

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

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

上传设计稿

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

下载切图

选中需要导出的切图，可以一键选择“下载选中切图”或“下载全部切图”。

如何利用Photoshop进行快速切图的更多相关文章

  1. photoshop如何快速切图

    作为业余爱好,之前都是用比较笨的方法切图,甚至用裁剪工具一张一张的切. 后来知道用切片工具,但也仅限于互不重叠的图片. 在工作中实际使用时才发现实在是太慢了,慢到上级自己说你不用做了,我来吧. 其实, ...

  2. web中切图、快速切图与web雪碧图制作的方法

    声明: web小白的笔记,欢迎大神指点,联系QQ:1522025433. 工具:Photoshop 1.复制文字:点击文章工具后选择文字. 2.矩形选框工具 看信息 f8, 取消矩形选框 Ctrl+D ...

  3. HTML-图片热点、网页内嵌、网页拼接、快速切图

    图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.与图片链接不同,热点是图片上的某一个区域或多个区域. 我们用魔兽世界图片来做一个图片热点,点击logo.区域和不 ...

  4. photoshop CC智能切图

    网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.p ...

  5. photoshop 快速切图

    发现一个详细好方法:http://blog.csdn.net/zhangxiaowei_/article/details/42143307 具体如下:

  6. photoshop cc 智能切图

    这节分享一个photoshop cc 开始有的自动生成图标的方法 psd练习文件 http://pan.baidu.com/s/1pL2dwL1 1 工具:我这里用的是photoshop cc 201 ...

  7. Photoshop CC 智能切图功能介绍

    http://gdc.qq.com/ http://gdc.qq.com/?p=4445

  8. 学习笔记2：前端PS切图

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

  9. App切图命名规范

    转自:http://www.uisdc.com/slice-rename-in-ui-design(略有修改) 关于切图命名的规范,我个人觉得关键是在于团队能够有一个统一的规则,所有成员严格遵守并且和 ...

随机推荐

  1. 验货或VIP带尾续的半成品，不同客户对于相同编码，需要维护不同的尾续

    前提:验货或VIP带尾续的半成品 不同客户对于相同编码,需要维护不同的C开头的尾续. 例子: 以下验货客户编码102001001134CZ绑定了SO:5000144993,而且目前5000144993 ...

  2. js中函数的 this、arguments 、caller，call()，apply()，bind()

    在函数内部有两个特殊的对象,arguments 和 this,还有一个函数对象的属性caller. arguments对象 arguments是一个类似数组的对象,包含着传入函数的所有参数. func ...

  3. 解题（LevenshteinInstance--Levenshtein距离）

    题目描述 Levenshtein 距离,又称编辑距离,指的是两个字符串之间,由一个转换成另一个所需的最少编辑操作次数.许可的编辑操作包括将一个字符替换成另一个字符,插入一个字符,删除一个字符.编辑距离 ...

  4. Python Flask学习

    开了一个新坑..一直以来对web的前端后端了解比较模糊,所以打算学一个后端框架,写个小博客什么的增长一下姿势水平. 初学嘛,选个相对轻量级一点的,就决定学习flask啦.

  5. Python十分适合用来开发网页爬虫

    Python十分适合用来开发网页爬虫,理由如下:1.抓取网页自身的接口比较与其他静态编程语言,如java,c#,c++,python抓取网页文档的接口更简练:比较其他动态脚本语言,如perl,shel ...

  6. PHP从规定字符中生成固定位数随即串

               }

  7. 【转】关于easyui的窗口和tab页面不执行js说明

    原地址:http://www.jeasyuicn.com/post-49.html 一直以来群里里面很多人反应,在用tab加载界面的时候,界面里面的js不会执行.今天GodSon在此说明一下原因. 不 ...

  8. 微信小程序开发——setData的使用技巧

    前言: 之前使用 setData,一直都是作为给变量赋值,感觉比起vue给data中的变量的赋值还是有点麻烦的. 最近项目不太紧张,为了提高小程序的开发效率及提升小程序开发的能力,又重新的通读了下小程 ...

  9. vue params和query传参区别

    参考地址:https://blog.csdn.net/bluefish_flying/article/details/81011230 router.js中 路由设置这里, 当你使用params方法传 ...

  10. eclipse配置mybatis xml文件自动提示（转）

    原文链接 原文如下: 如果使用eclipse中,再写mybatis的xml文件的时候,没有提示,用“Alt+/”,不能把代码用快捷键敲出来,可以试试下面要说的这种方法,反正我试了,我这个可以. 1.下 ...