邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

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

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、联合国国际贸易中心、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

【友情推荐】人人秀,H5活动制作工具,3分钟制作游戏、投票、抽奖、红包、砍价等营销活动。

了解更多

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

Anne 2018-12-21 15:37:40 阅读:2614

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


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

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:702611532 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶