ps html切图教程,#PS教程:你所不知道的Photoshop CC快速切图的方法

0a17036f321537aa5f7e3e170629bd6a.png

前言

记得前不久才写完《切,切个大西瓜》,肯定有人就会提出疑问了 “我擦,这孙子怎么又有西瓜切?” “我之前的评论这孙子还没回复呢,又来了? ”

之前文章链接:

没错,首先本仔(什么仔别问,别叫孙子)对上次没上首页怨念十分重,一定是你们只看不赞的原因! 一定是!然后,上篇《切》已经讲的很详细了,但是干干万同行(同行是冤家,切图 也一样)用评论,用QQ把我轰得体无完肤了,其中有个前同事,简直就是专业得我五体投 地,用了数个日日夜夜验证以后又跟我用了一个通宵时间彻夜长谈,最终得到了一个终极切图 方法。也许很多朋友都知道了,但我还是想拿出来和大家分享分享(怨念嘛!)。

5dc3a8101990e6dbf7688ce82a24e954.png

那么直接开始教程

之前说的前提,开生成器,开图片资源都不用了,也别找了,我们用抽出资源。

对!只用这个。不过,同样有个前提,这次的前提更加苛刻。需要有PSCC 2014 V2.0版以上才行。下面是我 的测试环境。

72a82a533c4307c8e55c8b80a5616364.png

希望看教程的把版本号看清出,不要再在评论里问版本,至于怎么下载 网上大把不多说(基本上用Creative Cloud更新,打上XX补丁即可)

b489560e679041dbd9ff1c1931d41d12.png

这是本次测试切图资源,图标是网上开源的,因为喜欢就拿来做例子也会在底下提供PSD下载供学习和参考。

打开PSD,找到我们要切的资源图片(这都是TM废话)。

这一次我们只挑其中4个icon做例子,这4个图标我也用醒目色给标出来了。 “皮卡丘,就是你了!”

4da34be894856cb1052bee1c0c1e388e.png

将要被切出的资源逐一选中(为什么要逐一,我后面会说)右键,看到抽出资源没?这就是今 天的主角,我可以肯定的告诉你,低版本PS是一定没有这个选项的。

86d7349bba3cd9c20fe59b5c1557e7b8.png

其实,已经完了,剩下的顺着做就行了,这时候你肯定会发一个表情。

被骂多了,容易怀孕,于是秉着为人民服务的精神,我们详细的讲解一下,这个抽出资源到底是怎么回事。

ebbe4ae34c326e80b4a8a726c4f08be3.png

最终会生成一个XXX-资产的文件夹,默认尺寸显示在根目录,其他尺寸会自动归纳到对应的

一个文件夹里。为了保证大家相信我们真的一键切完全部尺寸的图标,我拿Evelina.png做对比,关键是,图标不虚哦!

eda8b813f40f42215c9305e8f430a17a.png

我们可以很直观的看到,顶上的“0.25x”,“0.5x”,“2x”,“3x”。这就是额逗比为UI 设计师,不对,熟练切图仔们量身定制的多尺寸适配的救星!这样只需要点一个按钮,抽出的资源就是你想适配的各种倍数关系的资源切图了。

874facaaaa5b94f21308cfd6fb9500c8.png

我们再回过头来看看额逗比对“抽出资源”这个功能的解释说明。

d68f59edcdcc2828486381b4b9dfb80c.png

抽出图层或者图层组,为什么我上面提到要逐一?因为可以整体切嘛。比如像下面这样选中图层组,就可以将资源整体切出来了。

08f3483e8d49eb44ba73206f08d255db.png

我们再回过头来看看额逗比对“抽出资源”这个功能的解释说明。

抽出图层或者图层组,为什么我上面提到要逐一?因为可以整体切嘛。比如像下面这样选中图层组,就可以将资源整体切出来了。

b6440f7ab7472ce16df55bb240a38172.png

最后一个问题!

看来还是额逗比牛逼,“我们不生产方法,我们只是方法的搬运工! ”肯定又有人吐權说 “说来说去,这孙子就只会复制Adobe的帮助文档。”“你们研究了一通宵就这样?”

显然不是!因为我们还有最后一个问题没有解决,也是我们切图职业生涯中最常见的一个问 题。如何做到统一切图大小7 因为这种切图方式是系统沿《图片边缘切的,大小不可控。

b9bbfb46b71b35b122dcc63f3f46a7a6.png

1.我们给需要统一尺寸的资源一个大小一样的蒙版遮運

503a961d937c95be445f6b70ba6688c3.png

2.不知道怎么遮罩的可以看这张图

32cfe374674498831f7c4fb817bcfd92.png

4.这就是结果,不需要我显示每个点尺寸对比吧

df114829b44a95f1dd73b6a430a1f1de.png

最后感谢诸位在此期间给我提出各种建议和意见的热心设计师(切图仔)们。感谢上海MUX 全部小伙伴的各种试验研究,感谢那个找我对抽出资源小窗讨论,并决定出教程补齐我的切 图系列的同学(对不起,我没看到你的教程,所以我自己补了一份)。THANK YOU!

a36b4720a6980c8702d0d501a45e3826.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值