网页设计与制作第13章位图图像的编辑

1、第13章 位图图像的编辑第13章 位图图像的编辑学习目标：学习目标： 通过本章的学习，要求掌握创建位图图像的方法通过本章的学习，要求掌握创建位图图像的方法，学会编辑图像，优化、导出图像，能够用，学会编辑图像，优化、导出图像，能够用firesorks熟练处理图像。熟练处理图像。第13章 位图图像的编辑13.1创建编辑位图图像创建编辑位图图像13.2 图像效果的应用图像效果的应用13.3优化图像的输出优化图像的输出13.1创建编辑位图图像13.1.1 创建位图图像创建位图图像13.1.2图像部分区域的选取图像部分区域的选取13.1.3编辑位图图像编辑位图图像13.1.1 创建位图图像 创建位图的方

2、法很简单，可以直接选择【导入】命令，导入一幅位图图像，也可以将已经存在的路径对象转换成位图，或者直接利用位图编辑工具铅笔或刷子创建新的位图。13.1.2图像部分区域的选取1.【选取选取】工具工具2. 【套索套索】工具工具3. 【魔术棒魔术棒】工具工具4. 选取区域的控制选取区域的控制13.1.3编辑位图图像1.对象的操作对象的操作2.铅笔工具铅笔工具3.刷子工具刷子工具4.油漆桶工具油漆桶工具5.橡皮图章工具橡皮图章工具6.模糊工具组模糊工具组7.橡皮擦工具橡皮擦工具8.裁切工具裁切工具13.2 图像效果的应用掌握了创建和编辑位图的基本方法后，我们将开始学习如何对图像应掌握了创建和编辑位图的基

3、本方法后，我们将开始学习如何对图像应用各种动态效果。用各种动态效果。fireworks mx 2004中动态效果主要是通过中动态效果主要是通过【滤镜滤镜】菜单和属性面板菜单和属性面板上的上的【效果效果】菜单来实现的，两者的多数选项是相同的，应用的效果菜单来实现的，两者的多数选项是相同的，应用的效果也相同，可执行的后果却不相同。从也相同，可执行的后果却不相同。从【效果效果】菜单中应用某种效果，菜单中应用某种效果，随时可以重新编辑或通过随时可以重新编辑或通过【删除效果删除效果】按钮删除该效果的应用，但是按钮删除该效果的应用，但是应用滤镜产生的效果是永久性的，除非撤消这次执行命令的操作，否应用滤镜产

4、生的效果是永久性的，除非撤消这次执行命令的操作，否则不能取消则不能取消【动态效果动态效果】对图像的改变。对图像的改变。为图像设置动态效果的目的，主要是为了较好的控制图像色彩和色调为图像设置动态效果的目的，主要是为了较好的控制图像色彩和色调，使图像达到最佳效果。，使图像达到最佳效果。fireworks mx 2004提供了多种控制和调节提供了多种控制和调节图像色彩及色调的方法。图像色彩及色调的方法。13.2 图像效果的应用13.2.1 调整色调范围调整色调范围13.2.2调整亮度和对比度调整亮度和对比度13.2.3调整色相和饱和度调整色相和饱和度13.2.4应用颜色填充动态效果应用颜色填充动态效

5、果13.2.5应用其他动态效果应用其他动态效果13.2.1 调整色调范围1.自动色阶自动色阶2.反转反转3.色阶色阶4.曲线曲线13.2.2调整亮度和对比度 亮度是图像的明亮程度，对比度是指不同颜色之间的差异亮度是图像的明亮程度，对比度是指不同颜色之间的差异。从。从【添加效果添加效果】/【调整颜色调整颜色】中打开中打开【亮度亮度/对比度对比度】对话框，如图对话框，如图13-21所示，滑块调节的范围从所示，滑块调节的范围从【-100100】。值为正，表示增加了图像的亮度和对比度，反之是降。值为正，表示增加了图像的亮度和对比度，反之是降低图像的亮度和对比度。低图像的亮度和对比度。13.2.3调整色

6、相和饱和度 调整色相是指调整多种颜色之间的比例，例如，白光是由调整色相是指调整多种颜色之间的比例，例如，白光是由红、橙、黄、绿、青、蓝、紫红、橙、黄、绿、青、蓝、紫7种颜色按一定比例组成，种颜色按一定比例组成，每一种颜色代表一种色相，通过调整色相可以使白光变成每一种颜色代表一种色相，通过调整色相可以使白光变成其他颜色的效果。饱和度指图像颜色的彩度。从其他颜色的效果。饱和度指图像颜色的彩度。从【添加效添加效果果】/【调整颜色调整颜色】打开打开【色相色相/饱和度饱和度】对话框，修改参对话框，修改参数的值，得到如图数的值，得到如图13-22所示效果。所示效果。13.2.4应用颜色填充动态效果 应用这

7、种动态效果可以将图像更改成其他颜色。从应用这种动态效果可以将图像更改成其他颜色。从【添加添加效果效果】/【调整颜色调整颜色】中执行中执行【颜色填充颜色填充】命令，系统会命令，系统会将默认的颜色填充到对象当中，同时出现如图将默认的颜色填充到对象当中，同时出现如图13-23所示所示面板，可以对填充色及填充透明度进行修改，这时图象的面板，可以对填充色及填充透明度进行修改，这时图象的填充效果又会对应发生变化。填充效果又会对应发生变化。13.2.5应用其他动态效果 除了前面介绍的对图像的除了前面介绍的对图像的【颜色和色调颜色和色调】应用应用【调整颜色调整颜色】菜单下的动态效果，我们还可以对图像应用斜角和

8、浮雕菜单下的动态效果，我们还可以对图像应用斜角和浮雕、投影和光晕、颜色校正、模糊和锐化等多种动态效果。、投影和光晕、颜色校正、模糊和锐化等多种动态效果。如图如图13-24（a）所示，可以很容易的设置这些动态效果。）所示，可以很容易的设置这些动态效果。例如，我们从例如，我们从【效果效果】面板菜单中选择面板菜单中选择【模糊模糊】/【放射放射状模糊状模糊】，并设置参数，并设置参数【数量数量】为为15，【品质品质】为为30，得到效果如图得到效果如图13-24（c）所）所示：13.2.5应用其他动态效果 提示：可以将设置的多种动态效果保存成自定义样式，以提示：可以将设置的多种动态效果保存成自定义样式，以

9、方便下次对图像进行相同效果设置时使用。只要执行方便下次对图像进行相同效果设置时使用。只要执行【效效果果】面板菜单中的面板菜单中的【选项选项】/【另存为样式另存为样式】，在下一次，在下一次我们打开我们打开【效果效果】面板菜单就可以看到我们自己保存的样面板菜单就可以看到我们自己保存的样式名称。删除自定义样式可以在式名称。删除自定义样式可以在【样式样式】面板中执行。面板中执行。13.3 优化图像的输出 前面我们在第前面我们在第11章的章的11.5.3节中已经介绍过利用节中已经介绍过利用【导出向导出向导导】将文档输出。在本节中，我们将具体介绍如何对图像将文档输出。在本节中，我们将具体介绍如何对图像优化

10、后再输出。优化的目的主要是使将输出的图像选择一优化后再输出。优化的目的主要是使将输出的图像选择一种合适的压缩方式，达到即能减小文件大小，又能兼顾图种合适的压缩方式，达到即能减小文件大小，又能兼顾图像质量的效果。像质量的效果。 优化主要包括选择文件格式和调整图形中的颜色两个方面优化主要包括选择文件格式和调整图形中的颜色两个方面。不同的图像具有不同的存储格式，每种格式都有一组唯。不同的图像具有不同的存储格式，每种格式都有一组唯一的选项，所以不同格式的图像文件对应不同的优化存储一的选项，所以不同格式的图像文件对应不同的优化存储过程。过程。13.3 优化图像的输出1.jpeg文件的优化文件的优化2.g

11、if文件的优化文件的优化3.其他格式的优化设置其他格式的优化设置1.jpeg文件的优化jpeg总是以总是以 24 位颜色保存和导出，它不存在调色板设置的问位颜色保存和导出，它不存在调色板设置的问题，当选择题，当选择 jpeg 图像时，颜色表为空。下面具体介绍图像时，颜色表为空。下面具体介绍jpeg格式中的优化设置，对应格式中的优化设置，对应jpeg格式的优化面板如上图所示。格式的优化面板如上图所示。预设模式：预设模式：【jpeg-较高品质较高品质】和和【jpeg-较小文件较小文件】。前者。前者导出的图像质量较高，但文件大小也更大，后者为了得到更小导出的图像质量较高，但文件大小也更大，后者为了得

12、到更小的文件，而牺牲了图像的质量。的文件，而牺牲了图像的质量。色板，决定原图中透明的区域在输出时的颜色。色板，决定原图中透明的区域在输出时的颜色。品质，在品质，在【预设模式预设模式】的基础上，对图像的压缩质量做进一步的基础上，对图像的压缩质量做进一步的微调。其参数的值越高，图像质量越好，对应文件也越大。的微调。其参数的值越高，图像质量越好，对应文件也越大。如图如图13-26所示，左图：品质所示，左图：品质90，文件大小，文件大小50.90k；右图：品；右图：品质质20，文件大小，文件大小7.73k。1.jpeg文件的优化平滑，对图像中尖锐的颜色边界做模糊处理，较大的平滑，对图像中尖锐的颜色边界

13、做模糊处理，较大的【平滑平滑】参数值参数值会减小文件的大小，但图像质量也受一定影响。会减小文件的大小，但图像质量也受一定影响。除了除了【优化优化】面板上显示的，在面板的选项菜单中，还有两种优化参面板上显示的，在面板的选项菜单中，还有两种优化参数可以设置：数可以设置：连续的连续的jpeg，选中该参数，图像在浏览器中的显示效果将随着图像，选中该参数，图像在浏览器中的显示效果将随着图像下载过程逐渐地由模糊变得清晰。下载过程逐渐地由模糊变得清晰。锐化锐化jpeg边缘，保护优化后的图像中的细节颜色边缘，以保持这些边缘，保护优化后的图像中的细节颜色边缘，以保持这些区域的清晰度。选择区域的清晰度。选择【锐化

14、锐化jpeg 边缘边缘】将增加文件大小。将增加文件大小。fireworks mx 2004还扩展了还扩展了jpeg的优化的功能。的优化的功能。选择性选择性jpeg功能，可以设置同一图像的不同区域采用不用级别压缩功能，可以设置同一图像的不同区域采用不用级别压缩，如图像的重点区域采用较高品质的压缩级别，其他区域则采用低品，如图像的重点区域采用较高品质的压缩级别，其他区域则采用低品质的压缩级别，这样即可以突出图像的重点又可以适当减小图像文件质的压缩级别，这样即可以突出图像的重点又可以适当减小图像文件的大小，如图的大小，如图13-27所示。所示。2. gif文件的优化gif文件格式也是一种广泛应用的网

15、络图形格式，虽然文件格式也是一种广泛应用的网络图形格式，虽然它只包含它只包含256种以下的颜色，但优化时有很多种不同的种以下的颜色，但优化时有很多种不同的设置，优化面板如图设置，优化面板如图13-29所示。下面介绍几种与所示。下面介绍几种与jpeg格式不同的优化参数设置。格式不同的优化参数设置。3.其他格式的优化设置 除了除了jpeg和和gif两种格式外，还有两种格式外，还有png、tiff、bmp和和pict等图形文件格式。这些格式的优化参数设定都和等图形文件格式。这些格式的优化参数设定都和gif格式的优化参数设定非常相似。格式的优化参数设定非常相似。 提示：所有这些在优化面板上的设置，都可以在选择提示：所有这些在优化面板上的设置，都可