Photoshop制作网站首页(3):切割网页图片

 3. 使用同样的方法将其它导航条按钮切割，注意最后一个“管委会”按钮是三个字，因此设置的切片宽度要大，如图1-3-3 所示。需要注意的是，切割的时候要注意平衡，比如右侧切割了，那么左侧也要等高的切一刀，这样输出成网页的时候不容易乱。

Webjx.Com

图1-3-3

4. 切割方法同上，注意切片左上角的编号。下一行切片14 和15 共两刀，再往下16、17、18 共三刀，其中17 为纯色，因此设为无图像，并用相应的颜色标识，如图1-3-4 所示。后面的方法基本相同，需要把在Dreamweaver 中处理的纯色背景部分设为无图像，并以相应的切片背景色填充。如果某个图层的范围正好是要切割的大小，可以直接使用“基于图层的切片”功能。

网页教学网

图1-3-4

5. 执行菜单“存储为Web 和设备所用格式”，该命令用于将PSD 源文件输出成网页或是手机等设备所使用的格式。在对话框中进行简单的优化设置，确定后设置输出类型为“HTML 和图像”，并且要输出所有的切片，如图1-3-5 所示。 Webjx.Com

Webjx.Com

图1-3-5 Webjx.Com

举一反三：

尝试使用切图工具对已有的版面进行切割，并注意切割的技巧。