Photoshop是设计行业的“全能手”。除了在传统设计中起到了中流砥柱的作用，在网页设计行业也有很好的表现。使用Photoshop的网页设计工具及相关功能，用户可以轻松创建网站图像、动态图像、按钮等，还可以通过切片及相关存储功能输出完整的网页框架及链接。

1）首先创建网页布局的背景。在Photoshop中单击菜单【文件】→【新建】命令（快捷键<Ctrl+N>），弹出【新建】对话框，设置名称为“网页”，【宽度】为【1024像素】，【高度】为【768像素】，【分辨率】为【72像素/英寸】（如果网页布局需要更多的空间，可以在后面调整网页高度），【颜色模式】为【RGB颜色】、【8位】，【背景内容】为【白色】，如图3-69所示，设置完毕后单击【确定】按钮。

图3-69 新建网页文件设置

2）把背景色从白色改为亮灰色。选中Background图层，单击图层面板上方的小黑锁的图标解锁该图层（由于是新建文档，故改为双击背景图层解锁）。然后把背景图层的颜色改为#ecf1c8。再新建网页内容区域，背景颜色填充为#d1d5b0，如图3-70所示。

图3-70 新建网页背景颜色

3）设计banner区域。用网站的名字以及相关的图片素材创建普通的头部区域。如图3-71所示。

图3-71 新建网页banner

4）导入实训2中制作的导航条，根据网页的整体色调调整颜色，效果如图3-72所示。

图3-72 导入导航条

5）绘制内容版块，添加相关图片、文字信息元素，效果如图3-73所示。

图3-73 绘制内容版块

6）利用同样方法绘制其他相关信息版块，并在栏目标题载体上写上所需名称及其他元素，效果如图3-74所示。

图3-74 绘制其他信息版块

7）综合调整网页布局、色彩，效果如图3-75所示。(www.daowen.com)

图3-75 网页布局及色彩效果

8）网页效果图已做好，接下来把效果图转成网页格式，可以直接用Photoshop自带的切片工具来切割。在Photoshop中，【切片工具】是该软件自带的一个平面图片制作工具。【切片工具】将一个完整的网页切割许多小片，即将用户设计的网页设计稿切成一片一片的，或一个表格一个表格的，这样用户可以对每一张进行单独的优化，以便于网络上的下载。可以做成网格的，然后可以用Dreamweaver来进行细致的处理。利用【切片工具】可以快速地进行网页的制作。

9）打开要分割的网页图片，单击工具栏的【切片工具】，根据网页的不同区域划分切片，如图3-76所示。

用户在做网页的时候，使用分割好的小图片有利于网页的浏览速度。

图3-76 网页切片效果

10）单击菜单栏中的【文件】→【存储为web格式】命令，弹出的对话框如图3-77所示，如需调整照片格式、质量和色彩可在右侧【预设】调整。

图3-77 存储web格式设置

11）单击【存储】将优化结果储存为HTML格式，如图3-78所示。

图3-78 存储为HTML格式

12）保存在计算机的文件夹里，会出现一个文件名为Images的文件包，点击打开，里面就是刚才分割好的小图片，如图3-79所示。用户打开另一个HTML格式的网页，效果如图3-80所示。

图3-79 存储的切片图片

打开这些小图时会发现默认为索引颜色，这时选择菜单【图像】→【模式】→【RGB颜色】就可以对这些小图片进行处理了。

图3-80 存储的网页