ps 切图

本文以 PS CC 2015 为例

旨在熟悉简单的切图步骤，更为巧妙的切图技巧--请自行Google 搜索
慕课网上也有相关切图教程

关于手动切图的步骤

• 1.1 选择按钮

  点击选择按钮时，记得勾选 自动选择
  这里有问题，更正下，同学告诉笔者，用自动选择，可能会切换到图层，也可能切换到图片，所以用 同时按住 Ctrl 键，单击鼠标左键，点击想选的图层，这样也是OK的。

选择按键-选项.png

• 1.2 建立图层组

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

新建组选项.png

图层建立组.png

• 1.3 图层组导出为png

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

把选中的组导出为png.png

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

自己组装.png

• 2.1 切片工具

  下面要开始手动切片，开始切图了

切片选择工具.png

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

切片选中后.png

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

储存为web所用格式.png

• 2.2 切片储存

  注意点：想要切图时，关闭其他图层，只留当前图层会更好

  然后会弹出下面的窗口，

储存为web所用格式窗口.png

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

格式png-24.png

别问我为什么，因为大家都这样用，哦，对了，png-6格式的图片，IE..低版本不兼容

• 2.3 切片保存格式

  然后弹出下面的窗口

保存图片格式.png

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

保存图片格式我改的.png

• 2.4 最终储存图片

  最终结果如下
  很显然，我漏选了一个切片，因为我一开始，是想选中三个切片 T_T

最终结果.png

简单的切图就到这里,谢谢观看

这里再补充下

腾讯在线制作雪碧图

我在此文件夹下测试了下，用几张简单的切片测试了合成为sprite.png

制作雪碧图简单介绍

雪碧图gulp-sprity

sprity-github-介绍