还在一张张切图?PS快速切图新技能助你解放双手

1,405 阅读3分钟

什么?你还在一张张处理???


切图和标注一直是多数设计师最耗时且最不愿意做的事情,PS快速切图新技能,教你解放双手,快上车。


本文纲要

  • 规则切图
  • 不规则切图
  • 快速批量切图
  • 快速批量切出不同平台各种尺寸的图


高清大图,给用户带来良好用户体验的同时,也会刺激用户的购买冲动,所以是电商平台、企业平台常见的展示方式,但是图片太大影响网页的加载速度,反过来也会影响用户体验和网站的排名。所以高清大图上传网络前都要进行切片处理。

1、规则切图


①选择切片工具


ps快速切图步骤1


②圈选整幅图片,右键选择划分切片;


ps快速切图步骤2


③选择需要划分的个数,9宫格选择3*3,4宫格选择2*2;


ps快速切图步骤3


④文件->导出->存储为web所用格式,快捷键“Alt+ Shift+Ctrl +S”,在弹出框中选择图片存储格式为jpeg格式,点击“储存”。


ps快速切图步骤4


⑤一张图片完美的切割为了9部分,如下:


ps快速切图步骤5

也可以在此基础上,把这9部分重新排列,从而可以获得新的视觉感。


9宫格图

2、不规则切图


①选择切片工具;


选择切片工具


②框选需要切的部分;


ps切图步骤2


③文件->导出->存储为web所用格式,快捷键“Alt+ Shift+Ctrl +S”,在弹出框中点击“储存”。


ps切图步骤3


④选择保存的格式为“仅限图像”,切片设置为“所有用户切片”,这样就只会保存已切好的图片,不会有多余图片。


ps切图步骤4


切片保存功能介绍:

(1)所有切片:保存所有选择和未选中的切片。

(2)所有用户切片:保存用户使用切片工具选择过的切片。

(3)选中切片:保存用户最后选中的切片。

3、快速批量切图

①下载安装插件-iDoc

官网下载地址:idoc.mockplus.cn/


②打开插件,选择需要切图的图层,点击「标记切图」;


ps快速批量切图步骤2


③上传设计稿

标记完成切图之后,一键将设计稿上传至云端项目中,提示完成后,点击右下角“我的项目”查看上传的设计稿。


④选择下载所有切图

ps快速批量切图步骤4

4、快速批量切出iOS、Android、Web不同平台多种倍率图


前三步同上,选中图层,标记切图,上传设计稿,然后选择平台iOS/Android/Web,选择需要的倍率,然后下载选中/全部切图。


ps快速批量切图新技能

下载的压缩包会按不同倍率分类,如下:

下载的图片包

批量下载的切图

按照这种方法,再也不用一张一张改尺寸了,无论你需要什么平台,什么尺寸,一键就可以下载,即使你的设计稿错选了其他手机的尺寸,上传原设计稿后,也可以重新选择需要的尺寸进行切图,不需要全部重新调整。


iDoc的另外两个特色功能标注和原型,各位小伙伴可以自己了解一下,方便交付和协作。


好了今天的ps快速切图新技能就分享到这了,希望可以帮大家摆脱低效和手工,高效协作驱动上下级。


摹客iDoc,全新的设计协作平台。从设计到开发,只要一个文档。 


ui设计师:快速完成交付、一键上传Sketch、PS、XD的设计稿,一键下载切图(安卓,IOS,Web), 智能标注(配合手动标注),支持切图自动压缩,一键匹配所有平台尺寸,自动生成UI设计规范; 

产品经理:直观表达需求、快速制作交互原型,支持多种手势交互、动画特效,上传各类型文档 (Axure,Mockplus,justinmind,office,confluence等); 

前端开发:轻松查看智能标注,可显示百分比标注;  

戳这里,免费领取团队版 

 https://idoc.mockplus.cn/buy/trial/?hmsr=thomas