在Photoshop中绘制图像和优化图像，最终目的都是为了输出图像并应用到网页设计中。完成设计图的切割之后，就需要把它输出为网页文档。

【操作步骤】

第1步，继续以上面示例为基础进行演示。在Photoshop中选择【文件】|【存储为Web所用格式】命令，打开【存储为Web所用格式】对话框。

提示：每个PSD源图建议都设计3套配色方案，按照同样规格分别切图，且3种配色切出的同一区域图片命名必须相同。按照配色方案建立3个以颜色命名的文件夹，每个文件夹中放置“配色方案”制作成网页所需的资料。每种配色方案文件夹中包含的必需内容：mages、css、headers、buttons文件夹和两个HTMLl文件，以及两张大小网页效果图；所有命名按照样例进行，自定义内容可以自由命名。

网页布局，所有网页都由以下几部分组成。   

•页头（logo、headers）。   

•一级导航条（buttons）。   

•二级导航条（buttons）。   

•页面内容区（内容区用于显示正文网页）。   

•页脚（底部菜单、copyright）。

根据PSD文件决定制作的区域，源图中绘制出的区域必须制作出来，没有的区域（如二级导航条，或页脚）不需要制作。整个页面要制作在一个表格之内。然后通过表格嵌套设计不同部分，具体说明如下。

•页头：可以把header制作成背景，或者有些header图片属于不规则图形可以切成几部分来处理，要尽量减少切割次数。logo区域单独制作在一个表格内（可以限定表格宽度）；logo分为logo图片、公司名称和公司标语3部分。   

•一级导航：一级菜单（导航）中的内容必须制作在一个独立的表格内；不得设置单元格的宽度和高度；按钮图片需要制作出超连接的3种状态变化（根据PSD图，有些可能只有两种状态）；每一项里的图片和文字必须制作在一行里面，可以使用<br>使它们产生分行显示效果。   

•二级导航（竖导航）：二级菜单（导航）中的内容必须制作在一个独立的表格内；不得设置表格的高度；文字链接最少需要制作出超连接的两种状态变化。

•页面内容区：可以使用替代文本使页面撑开，达到在1024×768px的屏幕下使用的IE浏览器出现左右上下拉伸条。   

•页脚：版权信息区域要与上下区域保留一定的距离。

底部菜单：二级菜单（导航）中的内容必须制作在一个独立的表格内；不得设置表格的高度。

第2步，在窗口左侧选择【切片选取工具】，依次单击选中每个切片，设置切片的图像质量。在设置中，对于图像比较复杂且比较重要的切片，则可以设定比较高的品质，对于高品质的图片，应该设定为JPG格式（品质：60%），其他切片没有包含图像或者复杂的色彩，设定为GIF格式即可。

第3步，在窗口左上位置单击选择【优化】标签，切换到优化状态，检查每个切片的优化效果，以便根据情况调整优化品质，并在左下角可以查看优化图片的大小、传输速率等信息。

第4步，在优化过程中，单击窗口底部的【预览】按钮，可以自动开启网页浏览器，预览当前图片转换为网页的效果。

第5步，设定完毕，对于优化后的切片品质感觉满意之后，可以单击【存储】按钮，打开【将优化结果存储为】对话框，在【文件名】文本框中设置网页的名称，建议以英文字母配合数值进行命名；在【格式】下拉列表框中选择【HTML和图像】选项；在【设置】选项中保持默认设置，在【切片】下拉列表框中选择【所有用户切片】选项。

存储之后，可以在当前站点目录下看到所存储的HTML文档和images文件夹，在images文件夹中保存着所有的用户切片图像，直接双击HTML文件名，即可在网页浏览器中预览网页效果。

第6步，在Dreamweaver中打开HTML文件，可以看到所有的切片图像都是通过隐形表格进行控制，接着可以让表格居中显示，并设计网页背景色。

【拓展】   

•色彩模式

网页图像都在屏幕中预览，一般均为RGB格式，如果要更改色彩模式，可以在Photoshop中打开图片，选择【图像】|【模式】|【RGB色彩】命令即可。   

•解析度

对于屏幕来说，大部分网页图像的解析度只需要72像素/英寸，如果高于这个解析度，就会导致图像大小暴增。   

•图像大小

在网页设计中，图像大小直接影响到浏览器的下载速度，在兼顾小而美的设计原则下，图像尽可能要压缩小，当然要确保图像浏览质量的前提下，一般对于网页修饰性的图片一般大小不应该大于30KB。  

•图像格式

网页图像格式主要包括GIF、JPG和PNG。JPG格式适合应用色彩丰富的图片场合，但不适合做简单色彩（色调少）的图片，如LOGO、各种小图标（ICONS）。GIF不适合应用于色彩丰富的照片，主要适合应用于LOGO、小图标和用于布局的图片（如布局背景、角落、边框等），对于仅包含不超过256种色彩的简单图片也可以考虑使用。GIF支持基本的透明特性，可以设置透明背景；也支持动画，可以用来设计简单的动态提示性效果。PNG拥有JPG和GIF格式的不同优点，使其具有更广泛的应用场合。它支持多色彩，也支持透明特性，成为网页设计中首选的图像格式。