本文以 PS CC 2015 为例
旨在熟悉简单的切图步骤,更为巧妙的切图技巧--请自行Google 搜索
慕课网上也有相关切图教程
关于手动切图的步骤
-
1.1 选择按钮
点击选择按钮时,记得勾选 自动选择
这里有问题,更正下,同学告诉笔者,用自动选择,可能会切换到图层,也可能切换到图片,所以用 同时按住 Ctrl 键,单击鼠标左键,点击想选的图层,这样也是OK的。

-
1.2 建立图层组
如果想自己保存几个图片,按住ctrl,单击想要的图层,点击右键,选择其中 从图层中建立组 下图中就是 依次弹出的窗口


-
1.3 图层组导出为png
在新建组之后,我们想要导出这个组作为整张PNG图片,选中组,右键,单击导出为png,得到下面的图片
这里也不一定要新建组,也可以按住Ctrl键,鼠标左键单击多个想要的图层,右键直接导出PNG,也可以快速整合为一张图片

整合后的图片,虽然有点丑,将就下看看

-
2.1 切片工具
下面要开始手动切片,开始切图了

笔者不太想随意的切图,强迫症伤不起,拉了几条辅助线,切了3个切片,下面是切出来的切片
这里当切了一堆切片后,为了避免心烦意乱,直接Ctrl+H,可以快速隐藏选区,切片等乱七八糟的

然后点击 文件,鼠标移到 导出,会有二级菜单,点击 存储为web所用格式(旧版)

-
2.2 切片储存
注意点:想要切图时,关闭其他图层,只留当前图层会更好
然后会弹出下面的窗口,

Now,按住Shift,鼠标左键单击,你切好的,并且想要的切片,而且在右边的选项卡中,点击GIF,选择png-24,

别问我为什么,因为大家都这样用,哦,对了,png-6格式的图片,IE..低版本不兼容
-
2.3 切片保存格式
然后弹出下面的窗口

我更改后的选项卡,应该是下面的状态,把 所有切片 更改为 选中的切片,
文件名 改为 png

-
2.4 最终储存图片
最终结果如下
很显然,我漏选了一个切片,因为我一开始,是想选中三个切片 T_T

简单的切图就到这里,谢谢观看
这里再补充下
腾讯在线制作雪碧图
我在此文件夹下测试了下,用几张简单的切片测试了合成为sprite.png
网友评论