photoshop 制作雪碧图
2019-02-18 本文已影响31人
Devops海洋的渔夫
仅供学习,转载请注明出处
![](https://img.haomeiwen.com/i13423234/fe87150539ee7759.png)
需求说明
在上一篇photoshop 切图技巧中,我使用批量切图的技巧切出了三张图片如下:
![](https://img.haomeiwen.com/i13423234/458bb6ae7cdf2b58.png)
那么可以将这三个图片做成一张雪碧图,方便一次性请求获取下来。
下面来演示一下制作过程。
创建透明画布
![](https://img.haomeiwen.com/i13423234/47bfc4f511b41224.png)
![](https://img.haomeiwen.com/i13423234/a99920850b44da55.png)
好了,有了透明背景之后,就可以打开那三个图片,抠出图像部分,复制+黏贴到透明背景中。
打开图像
![](https://img.haomeiwen.com/i13423234/f222bb73b4fea285.png)
选择【反选】,然后复制,如下:
![](https://img.haomeiwen.com/i13423234/da274adfd4e36e85.png)
新建图层,将图像复制
![](https://img.haomeiwen.com/i13423234/22eea682efefdf6b.png)
![](https://img.haomeiwen.com/i13423234/0749f5877ee88ad7.png)
发现画布不是很够大,那么下面就要调整一下画布的大小。
调整画布大小
![](https://img.haomeiwen.com/i13423234/9ef05931806709d3.png)
![](https://img.haomeiwen.com/i13423234/d9909821f851d344.png)
![](https://img.haomeiwen.com/i13423234/066c6060d6ea7e04.png)
设置参考线,方便另外两个图片的位置定位
![](https://img.haomeiwen.com/i13423234/ad61c8b714f39051.png)
首先使用固定的矩形选择框确认高度,然后拖拉参考线。
拷贝定位图标
![](https://img.haomeiwen.com/i13423234/263b0290c00e67f9.png)
![](https://img.haomeiwen.com/i13423234/c2b627e456794c31.png)
拷贝购物车图标
![](https://img.haomeiwen.com/i13423234/06801d7fcb8dfa2a.png)
![](https://img.haomeiwen.com/i13423234/fd8a2b369a253c5a.png)
好了,大概已经画好了,那么裁剪一下画布。
调整画布
![](https://img.haomeiwen.com/i13423234/c3545e8526932cf7.png)
导出雪碧图
![](https://img.haomeiwen.com/i13423234/21ef5af960687ff0.png)
![](https://img.haomeiwen.com/i13423234/92bcfc44a8290ffb.png)
好了,这样就制作好雪碧图了。
2019年全套Java、Android、HTML5前端、Python、大数据视频,价值数万资源大放送
![](https://img.haomeiwen.com/i13423234/c0c42aa68e0918e7.png)
![](https://img.haomeiwen.com/i13423234/ae2c4439a325a212.png)
![](https://img.haomeiwen.com/i13423234/25dbf05e37bf41e3.png)
寻找资源的地址如下:
扫描微信公众号
![](https://img.haomeiwen.com/i13423234/84d34904afe20360.png)
寻找价值数万的视频资源
![](https://img.haomeiwen.com/i13423234/65e6b7220e3f8f9f.png)