设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 产品设计 > 还在一张张切图?PS快速切图新技能助你解放双手

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

Anne
2018-12-21
200389

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

切图和标注一直是多数设计师最耗时且最不愿意做的事情,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

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

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

ps快速批量切图步骤2

③上传设计稿

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

④选择下载所有切图

ps快速批量切图步骤4


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

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

ps快速批量切图新技能

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

下载的图片包

批量下载的切图

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


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

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

上一篇
22款设计师必备的PS插件【附教程】

Chloe   12/24

联合国国际贸易中心采购数十套Mockplus终身版

Jongde   12/21

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com