Photoshop CC切图 秘笈独家传授!

Photoshop CC切图 秘笈独家传授!

这是一个神圣的职业!为什么?

Photoshop CC切图 秘笈独家传授!

 

Photoshop CC切图 秘笈独家传授!

Android的奇葩尺寸够你们折腾的了!还在想做一套效果图通吃所有设备吗?没有牛逼的切图技巧实现出来的开发与适配,你还敢说不神圣伟大?

那么问题来了,如何切得一手好图?

Photoshop CC切图 秘笈独家传授!

精准:最好理解,看到某产品图片突然被截断,天狗吃了?最闹心!所以不出错,切得准,没切着自己的手,也没切到被人的手是最重要的。

快速:面对庞大的适配工作,和堆积如山的项目支持,如何快速搞定切图工作显然格外重要,当然除非你太爱切图了,你愿意将更多的设计时间用在切图上,嗯!请坚持!

易用:这里需要让你的合作者明白图片含义,辅助标注少不了,也需要有清晰的实现逻辑,考虑好是否易用适配別的分辨率。当然合理的命名规则也是需要的。

通常我们怎么做?

Photoshop CC切图 秘笈独家传授!

Photoshop CC切图 秘笈独家传授!使用切片工具已经有着十分悠久的历史了,上溯上世纪……额,通常我们会将我们的设计资源整理成单个的控件,或者图标。

其实在适配过程中最需要提供多个分辨率的切图资源就是图标了,因为无论是放大还是缩小图标都容易产生虚边。原理就不在这里说了,今天讲切图,这样做,这样方便以后对切图资源修改而不再去设计效果图里大海捞针了。

Photoshop CC切图 秘笈独家传授!

记得切片选择“选中的切片”,不然你会悲剧。

后续如果还需要输出其他分辨率的资源,只需要将这一个文件等比例放大或者缩小一定百分比。 当然切记放大或缩小后仍需要调整虚边。

但看看输出的资源,这样的命名方式是不是会让开发哥哥抓狂?

我们还可以?

Photoshop CC切图 秘笈独家传授!

将我们需要切的资源图变成智能图层,然后点击进入智能图层,再输出资源。

可以短时间内非常快速的解决图片输出。

图片是贴边切裁的,有时候需要手动调整画布大小。并且需要整理PSD,防止遗忘覆盖。

所以还有捷径?

重点来了,那就来看看我们天天使用的PS提供的捷径吧。

这个切图是PS  CC14.0版本以后自带的一个强大的功能,很多朋友都知道。但似乎身边更多的设计师,职业切图狂魔都不知道。

开始工作

1. 要有一个PS,只有PS CC 14.0版本以后才有这个功能。所以…其他就不多说。

2. command(ctrl)+k打开设置,勾选“启动生成器”。如下图所示:

Photoshop CC切图 秘笈独家传授!

3.将图层改名,以XXX.png或者XXX.jpg等其他文件格式命名。

Photoshop CC切图 秘笈独家传授!

4.点击菜单栏中文件–>生成–>勾选“图像资源”

Photoshop CC切图 秘笈独家传授!

5.奇迹发生了,在你的PSD所在路径下出现了一个文件夹,文件夹里就有我们需要的资源。

Photoshop CC切图 秘笈独家传授!

6.感觉很牛逼是不是?更神奇的地方在后面,现在我需要一套小尺寸的切图,大小通过之前计算大概是设计稿的66.67%。那好,我们再次回到图层命名,将选中命名更改以和常态区分。

Photoshop CC切图 秘笈独家传授!

7.再去文件夹里看,碉堡了!点击后的资源都缩小成66.7%了。

Photoshop CC切图 秘笈独家传授!

 

 



属性标签: ,

欢迎留言

页面生成消耗的时间 0.432 秒,此页面一共查询了 112 次数据库!缓存时间:2020-11-29 13:23:14你的IP为:35.153.39.7