订阅摹客文章

免费获取优质的设计资讯!

文章分类
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
入门教程 了解更多

分享到微信朋友圈:

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

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

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

Anne
2018-12-21
21139

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

切图和标注一直是多数设计师最耗时且最不愿意做的事情,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快速切图新技能就分享到这了,希望可以帮大家摆脱低效和手工,高效协作驱动上下级。

文末推荐一下设计大赛

设计大赛

报名链接:https://idoc.mockplus.cn/ux_2018?hmsr=anne

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

Chloe   12/24

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

Jongde   12/21

下一篇
需要帮助?

摹客产品顾问为你服务

帮助群:651432826

服务邮箱:service@jongde.com