WEB切图

一、需要掌握的知识点

1、PS里的参考线和标尺。

2、PS里的图层基本知识。

3、PS里有一个命令叫【拷贝（Ctrl+C）】，但还有一个命令叫【合并拷贝（Ctrl+Shift+C）】可能您用得比较少，而在用选区进行切图的过程中，【合并拷贝】命令则具有重要的作用。

【拷贝】只是对当前选区、当前图层内的内容进行复制。

【合并拷贝】则是对当前选区、所有可见图层的内容进行复制。

二、思路分析

拿着一张效果图，首选应该对这张效果图进行分析，在切图层面上，主要分析三点：

1、哪些图片是单独的，比如图1中的logo和banner部分。

2、哪些图片是需要平铺的。比如图1中的导航部分的背景。

3、哪些图片是需要sprite的。如图1中一些列表前面的小图标。

如图1所示为本文所用图片。

图1

三、实现方法

在切图之前您肯定已经建立好了一个图片文件夹的。打开PSD文件进行并显示参考线。

u切出大图片u

1、选择矩形选框工具，沿banner部分四周的参考线绘制一个矩形选区，如图2所示。

图2

2、招待【编辑】菜单下的【合并拷贝】命令，或按下快捷键【Ctrl+Shift+C】。这样选区内的图片所有可见像素都已经拷贝到了PS剪贴板。

3、新建文件，由于PS可以监视剪贴板，所以大小不用更改。直接确定。如图3所示。

图3

4、确定后【Ctrl+V】粘贴，即可得到如图4所示的效果。

图4

5、执行【文件】菜单下的【存储为web和设备所用格式…】，快捷键【Ctrl+Shift+Alt+S】，打开【存储为web和设备所用格式】对话框，如图5所示。

图5

6、在图5中选择需要存储的格式并进行设置，关于格式的知识，自己查一下。单击【存储】按钮，打开【将优化结果存储为】对话框。如图6所示。

图6

在对话框中的【格式】下拉列表下选择【仅限图像】，并设置需要的文件名，保存。

同样的方法对logo部分进行切图操作。

u切平铺图片u

1、平铺图片一般会比较小，所以需要放大图像来进行操作。

2、使用矩形选框工具绘制一个矩形选区，因为图片为水平平铺，所以矩形选区的高度正好是需要平铺的高度，为了快速，宽度无所谓，如图7所示。

图7

3、平铺的图像一般做成1px的宽度，所以，再一个叫【单列选框工具】的东西派上用场了。在矩形选框工具组中选择单列选框工具，如图8所示。然后在【工具选项栏】上选择相交按钮

，如图9所示。

图8

图9

4、在第2步画好的选区内部单击鼠标，即可得到1px宽度、原来的高度的选区。如图10所示。

图10

5、全并拷贝，后面的步骤和切大图一样。

用同样的方法切其它部分的平铺图片。

u切sprite的图片u

切sprite 图片之前，应该知道，总共有多少张小图，然后，最大的图片是多大，再来进行操作。比如，此例中，右上角有四张图片，再加上二级菜单的一个小方点总共就是5张图片，而最大的就是右上角，为12px*12px。后期建立文件大小应该为12px*60px。

1、新建一个大小为12px*60px的透明文件。并每隔12px拉一条参考线。（当然，此例中本来可以不用参考线，但在其它例子中都是需要的。），如图11所示。

图11

2、选择矩形选框工具，在【工具选项栏】上设置为【固定大小】，并将宽高设置为12px，如图12所示。

图12

3、放大效果图，使用矩形选框工具单击，并拖动选区到合适的位置，如图13所示。

图13

4、合并拷贝，返回到新建的文件中粘贴。并移动到合适的位置。如图14所示。

图14

当然，如果图标都在一个图层上，您也可以用移动工具直接从原文件拖到此文件中。

5、同样的方法对其它小图进行操作，完成后效果如图15所示。

图15

6、后面的保存方法一样。存储为web和设备所用格式。

在sprite那里之所以全部都放在相同大小的格子里，是为了方便后期定位，只需要每次的数值是12的倍数就行了。
对于有些需要透明的地方，把多余的图层隐藏即可。