第十章 网页图像处理本章学习目标l l 理解网页图像的基本格式l l 掌握Photoshop CS的基本用法l l 掌握完整页面的制作及切割的方法l l 掌握Fireworks MX 2004的基本用法l l 掌握用Fireworks MX 2004制作按钮和 下拉菜单的方法1.网页图象基础1 1 网页图像格式GIF格式JPEG格式PNG格式SVG格式2网页图像使用要点 l1GIF格式一般用于大块纯色的图片或网页中的标题文字、按钮、小图标、小动画、logo图片等图像内容的存储，不适合表现真彩色和渐变色的图像。用JPEG处理照片比较合适，因为它们的阴影与色彩中包含有许多缓和的变化。l2GIF和PNG都支持背景透明，当图像的颜色数较多时，可以考虑PNG格式。l3目前各类浏览器均支持JPEG这种图像格式，部分浏览器不支持PNG格式。制作时应该在兼容性和效果上综合考虑 3 图像处理软件l常用的图像处理软件有Photoshop和Fireworksl工具选项工具选项：显示工具栏中所选工具的选项。不同的工具出现的选项也不相同。l文档窗口文档窗口：以窗口的形式显示制作中的图像。l状态栏状态栏：位于Photoshop编辑窗口的底部。显示图像的缩放比例、内存的占用、处理的进度、目前所选工具的使用方法等信息 。l控制面板控制面板：放置各种常用的调板。也可以称为浮动面板或面板。l调板井调板井：组织和管理调板。调板在其中只显示名称，点击后才出现整个调板。其中的文件浏览器可以实现缩略图浏览、分类、排序、旋转等功能 。2 Photoshop基本操作 lPhotoshop工作流程在Photoshop中处理图像通常遵循以下流程：（1）新建或打开文档（2）编辑图像（3）优化图像（4）导出图像返回该节2. Photoshop基本工具的使用Photoshop CS工具箱如图所示。返回该节返回该节部分工具说明如下：（1）选区工具选取工具选取工具套索工具套索工具魔棒工具魔棒工具钢笔工具钢笔工具（2）绘图工具画笔工具画笔工具铅笔工具铅笔工具橡皮擦工具橡皮擦工具油漆桶工具油漆桶工具渐变工具渐变工具3. 图层选择“【窗口】【图层】”菜单命令或者单击键盘上的F7键，可以将图层面板显示出来。如图所示为图层面板结构。返回该节（1）图层的基本操作l新建图层新建图层l复制图层复制图层l删除图层删除图层l调整图层的顺序调整图层的顺序l链接图层链接图层 l合并图层合并图层返回该节（2）图层的混合模式色彩混合模式是将当前选定的图层与下面的图层进行混合，从而产生另外一种图像显示效果。当两个图层重叠时，默认状态为“正常”，同时Photoshop也提供了多种不同的色彩混合方式，不同的色彩混合模式可以产生不同的效果。图层混合模式面板如图所示。返回该节（3）使用图层样式 在Photoshop中，我们可以针对图层使用多种图层特效。选择“【图层】【图层样式】”菜单命令，或单击图层面板底部的图层样式按钮，再从弹出的菜单中选择一种图层样式。“图层样式”菜单如图所示。返回该节4. 蒙版在Photoshop中，我们可以利用“蒙版”隔绝出一个受保护的区域，只允许对未被遮挡的区域进行修改。蒙版效果图如图所示。返回该节蒙板效果：遮照物（即蒙版）作用于被遮照物（即图层），遮照物是以8位灰度通道形式存储，其中：黑色黑色：完全不透明，被遮照物不可见。白色：白色：完全透明，被遮照物可见。灰度灰度：半透明，被遮照物隐约可见。5. 通道在Photoshop中，通道用来存储不同类型信息的灰度图像。其次，通道还可以用来存放选区和蒙版，让用户以更复杂的方法操作和控制图像的特定部分。打开一幅图像即会自动创建颜色信息通道。如果图像有多个图层，则每个图层都有自身的一套颜色通道。通道的数量取决于图像的模式，与图层的多少无关。6. 路径路径是Photoshop提供的绘制矢量图形的工具，如图所示。路径是连接锚点与锚点的线段或曲线。利用路径工具我们可以绘制出各种形状的矢量图形和填充图形。同时，路径工具提供了一种有效的方式来精确的选取对象。路径可以存储在路径面板中，我们可以将其转化为选区，然后对选区执行填色、描边或编辑操作。7. 调整菜单/调整图层 图像色彩和色调的调整是图像修饰中非常重要的一项内容,主要是对图像进行细微调整，改变图像的对比度和色彩等。Photoshop在“【图像】【调整】”菜单命令中，提供了一系列命令来帮助调整图像色调和色彩平衡。色彩调整菜单如图所示：8. 滤镜 滤镜主要用来处理图像的各种效果。Photoshop的所有滤镜都按类别放置在“滤镜”菜单下，l“抽出抽出”滤镜滤镜l“滤镜库滤镜库”l“液化液化”滤镜滤镜3 Photoshop设计网站封页 1实例创意本例制作网站的首页。这个网页是“网页设计与制作网络课程”网站的前导页，单击该页面“Enter”按钮进入到站点主页面。该页面的最佳效果浏览分辨率是800600，因此图片的大小为768432。该实例的最终效果图如图所示。2制作步骤（1）运行Photoshop CS，新建一大小为768432像素大小，背景色为白色的空白图像。保存该图像，命名为“startpage.psd”。（2）单键单击工具箱中的前景色，在弹出的拾色器中为前景色指定“006BD4”的浅蓝色。因为蓝色给人一种专业、深邃、宁静的感觉。（3）在工具箱中选择 工具，然后在文件窗口中单击鼠标左键，则该图像的背景色将更改为浅蓝色。（4）在工具箱中选择 工具，然后在工具选项中选择绘制路径选项。在文件窗口中绘制路径，绘制路径的最终效果。（5）在工具箱中选择路径选择工具，按照“注意”中所述的方法，把多条路径组合在一起。（6）在图层面板中点击按钮，新建一图层。在新建的图层名称上双击鼠标左键，将该层命名为“飘带” 。（7）保持“飘带”图层为当前层，图层面板中选择“路径”标签。点击面板下方的按钮，把该路径作为选区载入。设置前景色为白色，按快捷键“ALTBackspace(或Delete)”或选择“【编辑】【填充】”菜单命令，为该选区填充白色。（8）在图层面板中设置“飘带”图层的不透明度为30。（9）打开光盘附带的“source/10/10-2-3”文件夹下的素材文件“face.psd”。把该文件的内容直接拖到startpage.psd文件中并调整好位置。命名图层为“face”。通过此图层增加页面的欢迎气氛。（10）设置前景色为白色，在工具箱中选中工具，在文件窗口中点击左键，输入文字“网页设计与制作”。设置文字的属性为“华文行楷，60号，犀利”。按照同样的方法插入文字“网络课程”，设置文字的属性为“隶书，60号，犀利”。在页面的右下角插入文字“Enter”，设置文字的属性为“方正舒体，30，犀利，加粗”。（11）选中背景图层，双击鼠标左键，把该图层变为一普通图层。打开样式面板，为该图层应用“褪色相片”样式。（12）选中“Enter”图层，在图层面板下方点击图层样式按钮，在弹出的菜单中选择“斜面和浮雕.”，调出图层样式对话框。设置样式为“浮雕效果”，方向为“向下”，其他选项保持默认。选中“颜色叠加”前面的复选框，并单击“颜色叠加”，进入颜色叠加项的设置。设置混合模式为“溶解”，叠加颜色为“白色”。（1313）按照同样的方法为）按照同样的方法为“网页设计与制作网页设计与制作”和和“网络网络课程课程”图层添加图层样式。只是把（图层添加图层样式。只是把（1212）步中的）步中的“浮雕效果浮雕效果”的方向设置为的方向设置为“向上向上”，其他设置相。，其他设置相。（1414）选择最上面一个图层，点击图层面板中的）选择最上面一个图层，点击图层面板中的按钮，在弹出的菜单中选择按钮，在弹出的菜单中选择“合并图层合并图层”，把所有，把所有图层合并成一个图层。图层合并成一个图层。（1515）在工具箱中选择切片工具）在工具箱中选择切片工具 ，在文件窗口中单击，在文件窗口中单击鼠标左键，则该切片工具的工具选项如图所示。鼠标左键，则该切片工具的工具选项如图所示。（16）在工具选项中点击“划分切片”按钮，弹出如图所示的“划分切片”对话框。水平划分4个，垂直划分5个，通过设置可以在该图片上均匀划分切片。也可以在图片上拖拽区域，自主划分切片。（17）选择“【文件】【存储为Web所用格式】”菜单命令，将弹出“图像导出优化设置”对话框。在该对话框中可以单独设置每个切片导出所保存的文件格式和相应的优化设置。这里保持默认配置，点击“存储”按钮，选择保存的位置，则所有切片将被导出到HTML网页中。3 Fireworks设计网页设计网页 l lFireworks概述l lFireworks MX 2004基本操作 l l实例：Fireworks MX 2004制作按钮l l实例：Fireworks MX 2004制作下拉菜单 3.1 Fireworks 概述l菜单栏和工具栏菜单栏和工具栏：工具栏分为主要工具栏和修改工具栏。主要工具栏主要是文档操作命令，修改工具栏主要是组合、拆分、旋转和选区叠加操作等。l工具箱工具箱：包括选择、位图、矢量、网页、颜色和视图等6个类别的工具。l文档窗口文档窗口：也称为画布。该区域是用户进行图像绘制、修改或编辑的场所。l状态栏状态栏：显示图像的缩放比例、画布的大小、当前编辑的帧数、当前编辑的模式等信息。l属性检查器属性检查器：也称为属性面板。最初显示文档的属性，随着选择不同的对象，显示不同对象的所有属性。在该检查器中可以调整不同对象的属性。l面板组面板组：用来组织和管理各种浮动面板。2 Fireworks MX 2004基本操作 Fireworks MX 2004工作流程在Fireworks MX 2004中处理图片一般遵循以下流程：（1）创建图形（2）创建Web对象（3）优化图像（4）导出图像2 2Fireworks MX 2004Fireworks MX 2004基本工具的使用基本工具的使用Fireworks MX 2004Fireworks MX 2004的基本工具如图所示。的基本工具如图所示。（1）选择工具选择工具选择工具部分选择工具部分选择工具缩放工具缩放工具裁剪工具裁剪工具橡皮图章工具橡皮图章工具（3）矢量图形工具直线工具直线工具矩形工具矩形工具钢笔工具钢笔工具刀子工具刀子工具自由变形工具自由变形工具文本工具文本工具（5）颜色工具填充色工具笔触工具（2）位图工具滴管工具滴管工具油漆桶工具油漆桶工具涂抹工具涂抹工具橡皮擦工具橡皮擦工具选取框工具选取框工具套索工具套索工具魔棒工具魔棒工具刷子工具刷子工具铅笔工具铅笔工具（4）Web对象工具矩形热点工具切片工具隐藏切片和热点工具显示切片和热点工具（6）视图工具手形工具缩放工具3Fireworks MX 2004的修改工具栏该工具栏主要分成3部分：路径修改工具，对象排列工具和对象变形工具。路径修改工具仅对矢量路径有效，可以组合、合并、拆分路径。对象排列工具可以设置矢量或位图图像的叠放方式和对齐方式。对象变形工具可以翻转或旋转对象，对矢量和位图图像均有效。4Fireworks MX 2004的常用面板（1）优化面板在Fireworks MX 2004中，为了减少图像的容量，可以通过优化面板来对图像进行优化。选择文件格式：选择文件格式：选择适合图像内容的图像格式。设置格式特定项：设置格式特定项：不同格式的优化参数，例如GIF格式的颜色数量和JPEG格式的压缩质量。（2）层面板Fireworks MX 2004的层类似于Photoshop中的图层组。一个图层可以包括多个对象。层也是“透明的绘图纸”，每张透明纸放置着不同的矢量图形或位图图像。上层对象遮挡下层对象，可以调整对象之间的排列方式来改变叠放效果 （3）样式、URL、库面板“样式样式”面板：面板：笔画、填充、特效和字体设置等属性的集合。“样式”面板中包含一组可供选择的预定义Fireworks样式。如果创建了笔触、填充等属性并想重复利用或应用于其他对象，保存该样式在“样式”面板中即可。“URL”URL”面板：面板：URL是因特网上特定页面或文件的地址。欲多次使用同一个URL，可将它添加到“URL“面板，并且可以对URL进行分组管理。“库库”面板：面板：Fireworks MX 2004提供了3种类型的元件：图形、动画和按钮，其功能和Flash中元件功能类似。除了可以复制、导入、编辑元件外，可以创建自定义元件。 （4）帧面板 帧好比电影胶片中的单幅画面，通过帧可以制作动画。在“帧”面板中，可以创建帧、命名帧，组织帧，设置帧的属性和延时，隐藏帧，设置动画的运行时间以及在多个帧之间共享内容。l洋葱皮洋葱皮 ：查看所选帧和之前、之后帧的内容。可以查看多帧的内容和设置多帧内容的对齐，而不用在多帧之间来回跳转。lGifGif动画循环动画循环 ：设置导出后Gif动画的循环播放次数。l分散到帧分散到帧 ：将复制的对象分配到帧中 （5）历史记录面板 在“历史记录”面板中，记录了最近20步操作。通过该面板，能够快速撤消和重做某些操作步骤。另外，也可以选择多个动作，然后将其作为命令保存和重复使用。5特殊效果在属性检查器中，Fireworks MX 2004可以对不同的对象创建各种特殊效果，如图所示。（1 1）调整颜色）调整颜色l l自动色阶：自动色阶：Fireworks MX 2004Fireworks MX 2004自动调节对象的明暗和反差自动调节对象的明暗和反差等属性。等属性。l l明暗度明暗度对比度：调节对象的明亮度和对比度。调节亮度对比度：调节对象的明亮度和对比度。调节亮度不足和灰蒙蒙效果。不足和灰蒙蒙效果。l l颜色填充：用指定的颜色填充封闭的路径区域。双击该特颜色填充：用指定的颜色填充封闭的路径区域。双击该特效可以更改填充的颜色和填充样式。效可以更改填充的颜色和填充样式。l l曲线：允许用户通过拖动调节曲线的斜率来调整对象的输曲线：允许用户通过拖动调节曲线的斜率来调整对象的输入、输出亮度值，进而改变对象的颜色和明亮度。入、输出亮度值，进而改变对象的颜色和明亮度。l l色相色相饱和度：调整对象颜色的色相、饱和度和亮度。饱和度：调整对象颜色的色相、饱和度和亮度。l l反相：将对象的颜色进行反相处理。反相：将对象的颜色进行反相处理。l l色阶：允许用户通过拖动滑杆调整对象的输入与输出的黑、色阶：允许用户通过拖动滑杆调整对象的输入与输出的黑、白、灰亮度映射来改变对象的颜色和明亮度。可以纠正对白、灰亮度映射来改变对象的颜色和明亮度。可以纠正对象的亮度不足和灰蒙蒙效果。象的亮度不足和灰蒙蒙效果。（2）斜角与浮雕l内斜角：内斜角：在被选对象的内侧生成斜面边缘，并用对象本来的颜色着色。l外斜角：外斜角：在被选对象的外侧生成斜面边缘，可以选择其他颜色来对外边缘进行着色。l凸起浮雕：凸起浮雕：对象从背景凸出，并带有一定的阴影和亮度效果。l凹入浮雕：凹入浮雕：对象陷入背景中，并带有一定的阴影和亮度效果。（3）模糊 模糊处理可柔化位图图像的外观。Fireworks 提供了六种模糊选项：l模糊：模糊：柔化所选像素的焦点。l进一步模糊：进一步模糊：模糊处理效果大约是“模糊”的三倍。l高斯模糊：高斯模糊：对每个像素应用加权平均模糊处理以产生朦胧效果。l运动模糊：运动模糊：产生图像正在运动的视觉效果。l放射状模糊：放射状模糊：产生图像正在旋转的视觉效果。l缩放模糊：缩放模糊：产生图像正在朝向观察者或远离观察者移动的视觉效果。 （4）杂点l添加杂点：添加杂点：在图像的像素中添加随机出现的不同颜色。 （5）锐化l锐化：锐化：通过增大邻近像素的对比度，对模糊图像的焦点进行调整。l进一步锐化：进一步锐化：将邻近像素的对比度增大到“锐化”的大约三倍。l锐化蒙版：锐化蒙版：通过调整像素边缘的对比度来锐化图像。该选项提供了大量的控制参数，因此它通常是锐化图像时的最佳选择。 （6）阴影和光晕l投影：投影：产生图像的单色副本，并经过一定的偏移后出现在图像的后部。投影一般是灰度渐进形式，也可以是其他颜色。l内侧阴影：内侧阴影：在图像的内部产生阴影。l发光：发光：在图像的周围建立一边框，该边框淡出到背景，以产生发光效果。l内侧发光：内侧发光：在图像的内侧产生发光效果。 （7）其他l查找边缘：查找边缘：识别图像中的颜色过渡并将它们转变成线条，从而使位图看起来像素描。l转换为转换为AlphaAlpha：基于图像的透明度将对象或文本转换成透明 （8）外挂滤镜l根据不同滤镜的参数提示设置不同的值，产生更强大的特殊效果。3.2 实例1：Fireworks MX 2004制作按钮 1 1实例创意实例创意 结合前面所讲知识，运用结合前面所讲知识，运用Fireworks MX 2004Fireworks MX 2004制制作一具有动态效果的木纹导航栏。实例效果如图所示。作一具有动态效果的木纹导航栏。实例效果如图所示。 2制作步骤l（1）启动Fireworks MX 2004，选择“【文件】【新建】”菜单命令，新建一768432像素大小的空白文档。在弹出的对话框中进行如图所示的设置。（2）选择“【编辑】【插入】【新建元件】”菜单命令，弹出“元件属性”对话框。新建一按钮元件，并命名为“button”。参数设置如图一所示。点击“确定”按钮，进入“按钮编辑器”编辑模式，如图二所示。图一图二（3）选择“【文件】【导入】”菜单命令，在弹出的对话框中打开source/10/10-2-3目录，选择bg.png图片，点击“打开”按钮，导入该木纹图片。这时鼠标在文档窗口中显示为“”样式，在需要插入图片的位置点击左键，则导入的图片将放置到该位置。（4）用“指针工具”选中导入的位图图片，拖动图片四周的蓝色实心方块，调整图片的大小为115像素宽，21像素高。同时拖动图片，调整图片的位置，使图片的中心点和按钮的中心点“”对齐。（5 5）选中图片，在属性检查器中点击按钮，在弹出的菜）选中图片，在属性检查器中点击按钮，在弹出的菜单中选择单中选择“ “【调整颜色调整颜色】【色阶色阶】” ”命令，弹出命令，弹出“ “色阶色阶” ”对话框。在对话框中设置图像的输入、输出亮对话框。在对话框中设置图像的输入、输出亮度的映射关系，调整图像的亮度和对比度。调整的方度的映射关系，调整图像的亮度和对比度。调整的方法是拖动直方图中的黑色、白色、灰色三角形，定义法是拖动直方图中的黑色、白色、灰色三角形，定义把什么亮度的颜色作为纯黑，什么亮度的颜色作为纯把什么亮度的颜色作为纯黑，什么亮度的颜色作为纯白，什么亮度的颜色作为中性灰输出。也可以直接在白，什么亮度的颜色作为中性灰输出。也可以直接在“ “输入色阶输入色阶” ”中输入相应的值来进行调整。本例在中输入相应的值来进行调整。本例在“ “输入色阶输入色阶” ”中输入中输入“ “2525，1.271.27，163”163”三个参数值。点三个参数值。点击击“ “确定确定” ”，则图像调整后的效果如图所示。，则图像调整后的效果如图所示。（6）按照同样的方法，继续为图片添加一“外斜角”特效。设置特效的参数为“宽度：4，颜色：EE8C00”，其他参数保持默认。如图所示。（7）按照同样的方法，继续为图片添加一“投影”特效。参数保持默认值不变。添加特效后的图片效果如图所示 （8）在图片上添加文字“flash”。设置文字的颜色为“99ccff”，大小为“25号”，字体为“华文行楷”，消除锯齿级别为“平滑消除锯齿”。另外，为文字添加一“投影”特效，参数设置为“距离：4，柔化：0”，其他参数保持默认值。文字属性设置如图所示。设置文字属性 “投影”特效参数设置（10）在本例中，只制作简单的按钮，因此后两种响应状态不再设置。切换到“活动区域”标签模式，设置按钮的响应区域及超链接属性。选中按钮，属性面板如图所示。链接：链接：设置按钮的基本链接地址，即每个元件实例都以此链接为默认链接。AltAlt：超链接的替换文字，起到注释的作用。目标：目标：超链接的链接目标框架位置。有5个选项：无、_self、 _parent 、_top、 _blank。（11）点击“完成”按钮，完成按钮的创建，退出元件编辑模式，回到文档窗口界面。此时Fireworks将默认添加一按钮元件的实例。选中该实例，调整其位置。选择“【窗口】【库】”命令，打开“库”面板。从库中拖出按钮，创建该库的多个实例。均匀分布各个按钮。（12）选中各个button按钮实例，在属性检查器中设置每个按钮的文本内容和具体的超链接地址，如图所示。（13）点击窗口右上角的按钮，在弹出的菜单中选择“在主浏览器中预览”命令，预览建立的导航条。效果如图所示。3.3 3.3 实例实例2 2：Fireworks MX 2004Fireworks MX 2004制作下拉菜单制作下拉菜单 l l目标：运用目标：运用Fireworks MX 2004Fireworks MX 2004制作一下拉菜单。制作一下拉菜单。 1.1.启动启动Fireworks MX 2004Fireworks MX 2004，选择，选择“ “【文件文件】【新建新建】” ”菜单命令，新建一菜单命令，新建一768432768432像素大小的空白文像素大小的空白文档，背景色为白色。档，背景色为白色。 步骤：步骤：2.2.选择选择“ “【编辑编辑】【插入插入】【新建元件新建元件】” ”菜单菜单命令，弹出命令，弹出“ “元件属性元件属性” ”对话框。新建一按钮元件，对话框。新建一按钮元件，并命名为并命名为“ “button”button”。点击确定，进入按钮编辑器。点击确定，进入按钮编辑器编辑模式。编辑模式。 3.3.选择选择“直线工具直线工具” ” ，在，在“释放释放”状态下绘制状态下绘制4 4条相条相互交叉的直线。选择互交叉的直线。选择“指针工具指针工具” ” ，在属性面，在属性面板中设置每条直线的颜色和笔触类型。板中设置每条直线的颜色和笔触类型。4.4.选择选择“文本工具文本工具” ” ，在边框中间输入文字，在边框中间输入文字“Button1”Button1”，字体属性为，字体属性为“字体：字体：Monotype Monotype CorsivaCorsiva，大小：，大小：2525号，颜色：号，颜色：ff6600ff6600，加，加粗粗”。 5.5.在按钮编辑器中切换到在按钮编辑器中切换到“滑过滑过”标签，点击标签，点击“复制复制弹起时的图形弹起时的图形”按钮，将按钮，将“释放释放”状态下的按钮样状态下的按钮样式复制到式复制到“滑过滑过”状态下。选择状态下。选择“指针工具指针工具”，选，选中文本，修改文字的颜色为中文本，修改文字的颜色为“6699FF”6699FF”。完成按。完成按钮的编辑。钮的编辑。 6.6.保持按钮的选中状态，选择保持按钮的选中状态，选择“【修改修改】【弹出菜单弹出菜单】【新建弹出菜单新建弹出菜单】”菜单命令，弹出菜单命令，弹出“弹出菜单弹出菜单编辑器编辑器”对话框。对话框。7.7. ：添加一菜单项目（在选择的菜单项目后面），：添加一菜单项目（在选择的菜单项目后面）， ：删除当前选择的菜单项目，删除当前选择的菜单项目， ：把当前选择的菜单项目作为：把当前选择的菜单项目作为上一项目（或者主菜单项目）的子菜单，上一项目（或者主菜单项目）的子菜单， ：把选中的子菜：把选中的子菜单项目还原为主菜单项目还原为主菜单项目。单项目。 菜单项目菜单项目打开目标链接的窗口或框架区域8.8.鼠标切换到鼠标切换到“外观外观”标签，设置菜单的样式标签，设置菜单的样式 。9.9.鼠标切换到鼠标切换到“高级高级”标签，设置菜单的尺寸和边框属标签，设置菜单的尺寸和边框属性性 。10.10.切换到切换到“位置位置”标签，设置主菜单及其子菜单的显示标签，设置主菜单及其子菜单的显示位置。位置。11.11.点击点击“完成完成”按钮，退出弹出菜单编辑器，按按钮，退出弹出菜单编辑器，按F12F12键键预览菜单效果。预览菜单效果。 谢 谢！接下来的内容：动态网页技术