哪些是需要切出来的呢？！一般分为两类：

• 内容性的(一般用在img标签)

Banner、广告图片、文章中的配图（若服务器中的数据，可以不切图，只占位）；

通常存为jpg格式（颜色比较丰富，当然会做些压缩，保证图片不要太大）。

• 修饰性的(一般用在background属性)

图标、logo、特殊效果按钮等、非纯色的背景；

一般存为PNG24（IE6不支持半透明，需兼容）、PNG8，二者都支持全透明；但PNG24支持半透明，PNG8不支持。

切图步骤

（1）隐藏文字只留背景（若文字上有特殊效果，无法用代码写出，则把文字和背景一起切出）

• 若文字为独立图层，则隐藏文字（使用移动工具找到文字图层，去掉眼睛）
• 文字和背景合并，平铺背景覆盖文字

[ 适应于背景可以拉伸平铺 ] 矩形选框工具+自由变换Ctrl+T，拉伸背景覆盖文字，回车或双击。

[ 背景有纹理，不可以拉伸 ] 矩形选框工具在背景上画一个小框，移动工具+Alt来复制当前图层，一次次按下方向键

或用鼠标移动（鼠标移动时，按住shift可保证图层按直线移动）。

（2）移动工具选中所需图层(ctrl+点击图层的矩形区域)，出现蚂蚁线

（3）合并图层< ctrl + e >（可选） // 勾选自动选择，然后将需要的多个图层合并

（4）复制图层< ctrl + c > -- 新建文件< ctrl + n >，点击确定 -- 粘贴图层< ctrl + v >

应用：如何开始切图

（1）去掉所有文字，只留背景

打开视觉稿后，用上述方法去掉所有的文字，只留背景和图片（记得备份一下PSD文件）。

青岛中新（83837777.com）

（2）保存图片

将去掉文字的图片保存起来。一般情况下内容性图片保存为jpg格式，图标类型的保存为png格式。

青岛中新（83837777.com）

（3）构思页面的具体表现

划分页面的结构，具体的实现方式。

（4）一边编写HTML代码，一边测量、取色

根据构思号的页面结构，开始编写HTML代码，并开始进行测量和取色。

青岛中新（83837777.com）