三、以“图片新闻”栏目为例进行切图说明

这里仅以设计图中的“图片新闻”栏目为例进行说明，整张设计图的切图方法及构想基本相同，只要成竹在胸后再下手切图，再进行处理，就可以了。

首先要加以说明的是，在 CSS 里所有的图片都是以背景的形式存在的。所以我们制图、切图的过程中始终不能忘记这点，要做到尽可能地减少图片的体积（现在好多简洁的皮肤都实现了不用图片或少用图片），为的是减少下载量，提高页面浏览的速度。

1 、分析设计图中的“图片新闻”栏目

第一步 　拿前面给出的栏目结构图与设计稿中“图片新闻”栏目进行对比，分析并确定需要几张背景图来实现整个栏目的美工效果。

其实只需要四张图片（ lm_tl 的背景图、 Head 的背景图、 HeadIcon 的背景图、 lm_tr 的背景图）就可以了。

第二步 　分析其他的文字与边框效果分别用哪些 css 属性可以实现。如栏目内容的边线效果可以用 border 来实现，标题字体效果可以用 font 来实现等。这里可以通过查看准备好的手册来了解并确定。

2 、切图并保存所有切片

所谓切片，顾名思义就是把做好的图切成你需要的一块块。有很多朋友都是在这里卡住了，不知道怎么切好。这里要说的是在可以表现出你的效果的前提下，图切得越小越好、越少越好。那需要切那些呢？怎么切？其实是根据您 CSS 的需要来切的。

因此在切图之前，我们还应该知道背景属性中的 color 和 image 的关系，始终都是 color 显示在下面 image 在上面。这个的作用就是某些大块单色的地方我们就不需要用 image 而是采用 color ；再就是 repeat ，它可以让图片以 X （ repeat-x ）或 Y （ repeat-y ）重复或不重复（ no-repeat ）的方式显示。这个的作用就是某背景有一样的重复的，我们切图的时候宽（长）只要切 1px 就可以了。

根据前面的分析，用 photoshop/fireworks 的切片工具，对设计图中的“图片新闻”栏目切割成如图9所示的四块切片。

图 9 　图片新闻栏目切割图

再依次单击左上角的“文件”－“存储为 Web 所用格式”，把所有切片都保存下来。

3 、对生成的小图片进行筛选并修改

通过上面的切图、保存，所有切片都将被单独做为一张图片保存下来，并以保存的图片名加数字后缀命名。在这些切片图片中，有一些是没有用的，需要加以删除。至于有用的，由于切片时很难精确到 1 像素，所以最后还需要对个别图片进行细致的修改处理。

第一步 　从生成的图片中筛选出有用的图片，删除多余、无用的

第二步 　再对所有有用的图片内容进行进一步的修改、调整

对应用到 lm_tl 、 lm_tr 的背景图进行去白色背景处理，使其背景色为透明的，再准确设置图片的宽高，不留多余的空白空间；

对应用到 Head 的背景图进行图片宽高设置，因其背景是重复的，只需设置其宽为 1px 就可以了，高则取所需图像全显示的高度；

对应用到 HeadIcon 的背景图，只需取有用的部分，其他部分可以全部不用。

第三步 　对修改后的图片进行重命名处理，并在文本文档中记录下图片名称及宽高参数（可省）

因为切片后存储的图片，都是以原图片名称加数字后缀命名的，为了便于后面的添加编辑或理解，可以对其进行重命名处理。

另外，为了使后面的皮肤编辑更方便、直接，可以把图片进行准确的量化——新建一个文本文档，把图片的名称及其宽高的参数、所应用到的标识名称等记录在该文本文档中。

最后四张图的处理效果如图10所示。

图 10 　“图片新闻”栏目所需图片

4 、记录所有有用的参数（可省）

为了后面编辑皮肤文件时，对 css 属性设置更方便，在此建议您创建一个文本文档，除了记录前面的图片参数外，还可把“图片新闻”栏目美工的其他相关设置参数也简单记录在内，最后记录结果如下：

RIGHT_T （因为整个右上部分的栏目美工都是一样的，所以这里可以把用整个区域的 id 来标识）

标题左： tianyi_title02l.gif no-repeat 7 × 28

标题中： tianyi_title02c.gif repeat-x 1 × 28

标题右： tianyi_title02r.GIF no-repeat 7 × 28

标题图标： tianyi_icon04.gif no-repeat 6 × 15 　距上 6

标题文字：加粗　行高 28px （与背景图片同高，这样文字就垂直居中显示。）

标题文字颜色： 033d7c

内容边框： 81c7fa

注： 这里的记录不需要写得很规范，只要自己看得懂并能使后面代码编辑更方便就可以了。