仅供学习,转载请注明出处
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg4NC9mZTUyMTRmMmQ3ZTk5NDFlYWRmOTgzYTU5YTBlYzM1NC5wbmc%3D.png?w=700)
需求说明
在上一篇photoshop 切图技巧中,我使用批量切图的技巧切出了三张图片如下:
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzkzMi85NzQzYzIxZmU1MTFmMmQyNTI3N2YxZTNmZDA3ZGU4Yy5wbmc%3D.png?w=700)
那么可以将这三个图片做成一张雪碧图,方便一次性请求获取下来。
下面来演示一下制作过程。
创建透明画布
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQ0MC8wNjUyZmFkMzc0M2Y3YjdmMjM3ZTBiMjQ0MTM5NDBkMC5wbmc%3D.png?w=700)
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQ4Ny80NmE1YmRkNzFkNGYyMmNjZGI5NzkxNzM4Y2Q2YTZhNy5wbmc%3D.png?w=700)
好了,有了透明背景之后,就可以打开那三个图片,抠出图像部分,复制+黏贴到透明背景中。
打开图像
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzIyNC80MTRlYTY0ZTI0NGQ0YTU3ZjI0ZGFlMzUwN2JkYjQ4OC5wbmc%3D.png?w=700)
选择【反选】,然后复制,如下:
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzk2LzA4MDMwZWJjNTZkY2FmOTUyM2I5MGFlOTE4ZWExNDcwLnBuZw%3D%3D.png?w=700)
新建图层,将图像复制
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzkxNy85YWU3MTljNjVmZDgwNzRhZjVmOTFhZGJiMzA3ZjMxZC5wbmc%3D.png?w=700)
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI0MC9jZjJhZTE1M2YwMDA3MjNjYTNmMWM3MGI0YjE1NTFkMC5wbmc%3D.png?w=700)
发现画布不是很够大,那么下面就要调整一下画布的大小。
调整画布大小
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzk3My8zNjIzZjgwZmE4YTdjZGU2MGJhMzI5NmQxZDQ5OGIzZC5wbmc%3D.png?w=700)
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzkyLzZjOGZjMWNlNzE2MjhlYzU1NGJjODc3MWE1ZTQyZjM0LnBuZw%3D%3D.png?w=700)
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzc0Ny9hNmExM2I2M2IxNzUzYTVjYTBiNTcxMmY0NmU0YjVhMy5wbmc%3D.png?w=700)
设置参考线,方便另外两个图片的位置定位
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0My81NjY4M2EyNTU1YzQyMjY2MTkzMTczODA5NDJjMWQzZi5wbmc%3D.png?w=700)
首先使用固定的矩形选择框确认高度,然后拖拉参考线。
拷贝定位图标
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzgwNC8xOWYyOThjOTNkOWIyMDQxODA2YWU2OGEyNWI2ZGU5NC5wbmc%3D.png?w=700)
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzU1My9kY2NhZWE4MGRjMjZiYjZiNDc3N2E3OTBmZDgxNzFhMS5wbmc%3D.png?w=700)
拷贝购物车图标
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzY1OS9lZDc3ZjNhMTFmNTRiY2IxMzJhM2QzNzkxZjE1ZDM1Yi5wbmc%3D.png?w=700)
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzUwMi8xMGRkNzU1MDdmNGU3OWRkZmQyMTQ5YzA2ODFjMmRjNi5wbmc%3D.png?w=700)
好了,大概已经画好了,那么裁剪一下画布。
调整画布
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg0Mi8zZGQxNTA1YTg3NDc4YzYyNTFkZGMwZjYxY2I1YTY2Mi5wbmc%3D.png?w=700)
导出雪碧图
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE2NS8wNmIwMzQ4MTg4YWEyYjYzMDEyMDZkMjI2NjQ3MzBlZC5wbmc%3D.png?w=700)
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzc4My81MjE0YzgzN2VlMmRlZjRkOGI3NDk3OTJhODMwNWIxNy5wbmc%3D.png?w=700)
好了,这样就制作好雪碧图了。
2019年全套Java、Android、HTML5前端、Python、大数据视频,价值数万资源大放送
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzczMS9mMzAwYTZjNzU5MGY1ZDYwZTQ1YTQxNDhmMTRmMTAzYi5wbmc%3D.png?w=700)
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzEyOC9lZWY2YjZlN2NiZTlmZTY1MTJkYzdmYzFmNTIxZDMzMC5wbmc%3D.png?w=700)
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQwNS8xODA2MWQyYjRjMDg0ODc5YmIyNTljYThhMzdhNTI2NS5wbmc%3D.png?w=700)
寻找资源的地址如下:
扫描微信公众号
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQzNS9iMmViNDM4ZDhlYTJkMWZlMjg4ZGZjNGI5MjIyNzU2Yi5wbmc%3D.png?w=700)
寻找价值数万的视频资源
![photoshop 制作雪碧图 photoshop 制作雪碧图](https://image.shishitao.com:8440/aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQ2LzZlMWMwZjAzMGRmOWE5MjdhMzQ5YmMwYjIwZDg1ZWM2LnBuZw%3D%3D.png?w=700)