仅供学习,转载请注明出处





photoshop 制作雪碧图_微信公众号


需求说明

在上一篇​​photoshop 切图技巧​​中,我使用批量切图的技巧切出了三张图片如下:




photoshop 制作雪碧图_切图_02


那么可以将这三个图片做成一张雪碧图,方便一次性请求获取下来。

下面来演示一下制作过程。

创建透明画布




photoshop 制作雪碧图_微信公众号_03




photoshop 制作雪碧图_微信公众号_04


好了,有了透明背景之后,就可以打开那三个图片,抠出图像部分,复制+黏贴到透明背景中。

打开图像




photoshop 制作雪碧图_微信公众号_05


选择【反选】,然后复制,如下:




photoshop 制作雪碧图_微信公众号_06


新建图层,将图像复制




photoshop 制作雪碧图_切图_07




photoshop 制作雪碧图_微信公众号_08


发现画布不是很够大,那么下面就要调整一下画布的大小。

调整画布大小




photoshop 制作雪碧图_透明背景_09




photoshop 制作雪碧图_微信公众号_10




photoshop 制作雪碧图_透明背景_11


设置参考线,方便另外两个图片的位置定位




photoshop 制作雪碧图_微信公众号_12


首先使用固定的矩形选择框确认高度,然后拖拉参考线。

拷贝定位图标




photoshop 制作雪碧图_透明背景_13




photoshop 制作雪碧图_透明背景_14


拷贝购物车图标




photoshop 制作雪碧图_微信公众号_15




photoshop 制作雪碧图_透明背景_16


好了,大概已经画好了,那么裁剪一下画布。

调整画布




photoshop 制作雪碧图_透明背景_17


导出雪碧图




photoshop 制作雪碧图_微信公众号_18




photoshop 制作雪碧图_切图_19


好了,这样就制作好雪碧图了。


 微信公众号

photoshop 制作雪碧图_微信公众号_20