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 的倍数就行了。
对于有些需要透明的地方，把多余的图层隐藏即可。