美文网首页UI设计
如何利用Photoshop进行快速切图

如何利用Photoshop进行快速切图

作者: huaer | 来源:发表于2018-11-19 11:06 被阅读155次

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

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

准备

使用Photoshop CC 2015版

准备好要切的图片 

第一种方法

Ps自带切图

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

选中要切图的图层 

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

选择一个文件夹保存即可

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

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

第二种方法

摹客iDoc PS插件

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

下载

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

安装PS插件

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

打开插件

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

登录

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

标记切图

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

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

上传设计稿

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

下载切图

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

相关文章

  • 如何利用Photoshop进行快速切图

    在UI设计中我们常常使用Ai来进行矢量图的绘制,然后导入Ps中进行设计、排版和导出。 在以前的版本中,切图一直是个...

  • 印章

    如何利用photoshop快速扣出印章图章 工具/原料 Photoshop 方法/步骤 将图片导入photosho...

  • Photoshop快速切图工具

    1. 下载 Photoshop 切图动作格式文件 Photoshop 切图动作格式文件下载 提取码:sac3 2....

  • 思维导图入门点评(六)

    “如何利用思维导图进行快速阅读”,要求用一张思维导图,画出重点内容。 丹菡点评: 中心图又有进步。 建议:中心图用...

  • 毕设预调研

    滤镜功能: 在 GPUImage 中可以通过ACV文件快速创建自定义滤镜。AVC可以通过 photoShop进行图...

  • PS切图

    ​ 因为网页美工大部分效果图都是利用 PS(Photoshop)来做的,所以以后我们大部分切图工作都是...

  • Excel中合并计算的使用方法

    如何利用合并计算对数据进行快速汇总求和?

  • 如何利用思维导图进行快速阅读

    成图构思:以正在读书的小刺猬和签名蜗牛为中心图,快速阅读的概念、原理、训练步骤和观点为主分支,用下级分支一一阐述。...

  • PhotoShop切图

    PhotoShop切图 1. 原始切图 (3)导出为web常用格式,一般为png-24。 2. 基于参考线的切图 ...

  • Photoshop | 如何利用“通道”抠图

    封面这张图,一看就是合成的(前面是句废话~),然而想做成这种合成,除了无尽的想象力,你还得学会基本功,抠图! 所以...

网友评论

    本文标题:如何利用Photoshop进行快速切图

    本文链接:https://www.haomeiwen.com/subject/mdyofqtx.html