Photoshop切图教程

在前端设计中，对于网端的请求自然越少越好，对于服务器的压力也越小。但网页中图片众多，这时候便有了精灵图。一张图片上有很多编辑所需的图片，只需要对服务器请求一张图便可以完成很多块页面的编辑设计。
许多图片汇成的精灵图使用时如何才能得到我们想要的图片呢？

方法一：用background标签做背景图片截取。

前端人员拿到的页面素材通常紧密排列在一张图上，如下图所示可窥一二所示。

步骤1：

这类图片在使用时候我们可以先将目标精灵图置入PS画布中，选择‘选框工具’将所需要的图片的宽高测量出来。

步骤2：

现在编辑器编辑栏输入我们所需要的图片的大小（长、宽），在CSS样式中设置宽高，框定一个该图片在页面的显示区域。
:

步骤3：

此时便可以引入目标精灵图作为背景图了

步骤4:

然而引入背景图并非会按照所想的显示我们所需要的图片，只会在限定的框内显示以整张精灵图左上角的起点的一个大小为48*48的图片。
要想让所想的图片显示限定框内，我们需要将精灵图做一个上下移动。将精灵图中我们所需要的图片移动到我们之前限定好的框内便可以在限定框内显示了

在PS 中测量好我们需要进行移动的距离

步骤5、

综上可知，我们仅需要将精灵图向上移动489PX ，我们即可以在限定框内显示我们所需要的图片。

方法二：使用Photoshop切取所需要的图片切片。

前端设计中大家都知道，有时网页页对于图片大小是有要求限制的，此时限定框部分显示精灵图的方法就不适用了。所以在使用PS导出图片时，会将图片使用切图工具切为多个图片。

下面来看看，如何使用切片工具将详情页切割。

步骤：1、

将目标素材置入PS画布中,下图所示为一张完整的项目PSD格式图。在图片上部"登录"和“注册”前分别有一个小图标： 和 。我们该如何切取呢？

步骤2、

不少玩过PS的朋友肯定想着直接拒矩形选框将将目标图片选定截取即可，但此种方法切取的图片有背景底色，使用时容易对页面的设计产生影响。故这里我们应该首先找到该小图片在PSD 文件所在的位置，取消其背景（背景色）。
多次点击文件类目前的小眼睛，精确确定我们所需要切取的图片是否暴露出来。

如上图所示，这就是做项目需求的图片

步骤3、

此时便可以开始切图了！在Photoshop中使用快捷键ctrl+R来调出标尺，然后用移动工具（快捷键v）来拖动标尺线来将目标图片框起来

步骤 4、

在Photoshop工具栏找到切片工具（快捷键C），在标尺框的辅助下能完美的切下目标所需要图片。

步骤5、

切取好图片后，“文件”-——“导出”——“储存为Web所用格式”

步骤 6、

在保存界面勾选PNG-24，最后保存时选定"选中的切片"，如此保存的就是自己切下来的图片的了~

一个完美的切取图就成了！！！