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

《网页设计与制作第13章位图图像的编辑.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第13章位图图像的编辑.ppt（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、图像部分区域的选取13.1.3编辑位图图像编辑位图图像13.1.1 创建位图图像创建位图图像 创建位图的方法很简单，可以直接选择【导入】命令，导入一幅位图图像，也可以将已经存在的路径对象转换成位图，或者直接利用位图编辑工具铅笔或刷子创建新的位图。13.1.2图像部分区域的选取图像部分区域的选取1.【选取选取】工具工具2.【套索套索】工具工具3.【魔术棒魔术棒】工具工具4.选取区域的控制选取区域的控制13.1.3编辑位图图像编辑位图图像1.对象的操作对象的操作2.铅笔工具铅笔工具3.刷子工具刷子工具4.油漆桶工具油漆桶工具5.橡皮图章工具橡皮图章工具6.模糊工具组模糊工具组7.橡皮擦工具橡皮擦工

3、具8.裁切工具裁切工具13.2 图像效果的应用图像效果的应用l掌握了创建和编辑位图的基本方法后，我们将开始学习如何对图像掌握了创建和编辑位图的基本方法后，我们将开始学习如何对图像应用各种动态效果。应用各种动态效果。lFireworks MX 2004中动态效果主要是通过【滤镜】菜单和属性面中动态效果主要是通过【滤镜】菜单和属性面板上的【效果】菜单来实现的，两者的多数选项是相同的，应用的板上的【效果】菜单来实现的，两者的多数选项是相同的，应用的效果也相同，可执行的后果却不相同。从【效果】菜单中应用某种效果也相同，可执行的后果却不相同。从【效果】菜单中应用某种效果，随时可以重新编辑或通过【删除效果

4、】按钮删除该效果的应效果，随时可以重新编辑或通过【删除效果】按钮删除该效果的应用，但是应用滤镜产生的效果是永久性的，除非撤消这次执行命令用，但是应用滤镜产生的效果是永久性的，除非撤消这次执行命令的操作，否则不能取消【动态效果】对图像的改变。的操作，否则不能取消【动态效果】对图像的改变。l为图像设置动态效果的目的，主要是为了较好的控制图像色彩和色为图像设置动态效果的目的，主要是为了较好的控制图像色彩和色调，使图像达到最佳效果。调，使图像达到最佳效果。Fireworks MX 2004提供了多种控制和提供了多种控制和调节图像色彩及色调的方法。调节图像色彩及色调的方法。13.2 图像效果的应用图像效

5、果的应用13.2.1 调整色调范围调整色调范围13.2.2调整亮度和对比度调整亮度和对比度13.2.3调整色相和饱和度调整色相和饱和度13.2.4应用颜色填充动态效果应用颜色填充动态效果13.2.5应用其他动态效果应用其他动态效果13.2.1 调整色调范围调整色调范围1.自动色阶自动色阶2.反转反转3.色阶色阶4.曲线曲线13.2.2调整亮度和对比度调整亮度和对比度l亮度是图像的明亮程度，对比度是指不同颜色之亮度是图像的明亮程度，对比度是指不同颜色之间的差异。从【添加效果】间的差异。从【添加效果】/【调整颜色】中打【调整颜色】中打开【亮度开【亮度/对比度】对话框，如图对比度】对话框，如图13-

6、21所示，滑所示，滑块调节的范围从【块调节的范围从【-100100】。值为正，表示】。值为正，表示增加了图像的亮度和对比度，反之是降低图像的增加了图像的亮度和对比度，反之是降低图像的亮度和对比度。亮度和对比度。13.2.3调整色相和饱和度调整色相和饱和度l调整色相是指调整多种颜色之间的比例，例如，调整色相是指调整多种颜色之间的比例，例如，白光是由红、橙、黄、绿、青、蓝、紫白光是由红、橙、黄、绿、青、蓝、紫7种颜色种颜色按一定比例组成，每一种颜色代表一种色相，通按一定比例组成，每一种颜色代表一种色相，通过调整色相可以使白光变成其他颜色的效果。饱过调整色相可以使白光变成其他颜色的效果。饱和度指图像

7、颜色的彩度。从【添加效果】和度指图像颜色的彩度。从【添加效果】/【调【调整颜色】打开【色相整颜色】打开【色相/饱和度】对话框，修改参饱和度】对话框，修改参数的值，得到如图数的值，得到如图13-22所示效果。所示效果。13.2.4应用颜色填充动态效果应用颜色填充动态效果l应用这种动态效果可以将图像更改成其他颜色。应用这种动态效果可以将图像更改成其他颜色。从【添加效果】从【添加效果】/【调整颜色】中执行【颜色填【调整颜色】中执行【颜色填充】命令，系统会将默认的颜色填充到对象当中，充】命令，系统会将默认的颜色填充到对象当中，同时出现如图同时出现如图13-23所示面板，可以对填充色及所示面板，可以对填

8、充色及填充透明度进行修改，这时图象的填充效果又会填充透明度进行修改，这时图象的填充效果又会对应发生变化。对应发生变化。13.2.5应用其他动态效果应用其他动态效果l除了前面介绍的对图像的【颜色和色调】应用【除了前面介绍的对图像的【颜色和色调】应用【调整颜色】菜单下的动态效果，我们还可以对图调整颜色】菜单下的动态效果，我们还可以对图像应用斜角和浮雕、投影和光晕、颜色校正、模像应用斜角和浮雕、投影和光晕、颜色校正、模糊和锐化等多种动态效果。如图糊和锐化等多种动态效果。如图13-24（a）所）所示，可以很容易的设置这些动态效果。例如，我示，可以很容易的设置这些动态效果。例如，我们从【效果】面板菜单中

9、选择【模糊】们从【效果】面板菜单中选择【模糊】/【放射【放射状模糊】，并设置参数【数量】为状模糊】，并设置参数【数量】为15，【品质，【品质】为】为30，得到效果如图，得到效果如图13-24（c）所）所示：13.2.5应用其他动态效果应用其他动态效果l提示：可以将设置的多种动态效果保存成自定义提示：可以将设置的多种动态效果保存成自定义样式，以方便下次对图像进行相同效果设置时使样式，以方便下次对图像进行相同效果设置时使用。只要执行【效果】面板菜单中的【选项】用。只要执行【效果】面板菜单中的【选项】/【另存为样式】，在下一次我们打开【效果】面【另存为样式】，在下一次我们打开【效果】面板菜单就可以看

10、到我们自己保存的样式名称。删板菜单就可以看到我们自己保存的样式名称。删除自定义样式可以在【样式】面板中执行。除自定义样式可以在【样式】面板中执行。13.3 优化图像的输出优化图像的输出l前面我们在第前面我们在第11章的章的11.5.3节中已经介绍过利用【导出节中已经介绍过利用【导出向导】将文档输出。在本节中，我们将具体介绍如何对向导】将文档输出。在本节中，我们将具体介绍如何对图像优化后再输出。优化的目的主要是使将输出的图像图像优化后再输出。优化的目的主要是使将输出的图像选择一种合适的压缩方式，达到即能减小文件大小，又选择一种合适的压缩方式，达到即能减小文件大小，又能兼顾图像质量的效果。能兼顾图

11、像质量的效果。l优化主要包括选择文件格式和调整图形中的颜色两个方优化主要包括选择文件格式和调整图形中的颜色两个方面。不同的图像具有不同的存储格式，每种格式都有一面。不同的图像具有不同的存储格式，每种格式都有一组唯一的选项，所以不同格式的图像文件对应不同的优组唯一的选项，所以不同格式的图像文件对应不同的优化存储过程。化存储过程。13.3 优化图像的输出优化图像的输出1.JPEG文件的优化文件的优化2.GIF文件的优化文件的优化3.其他格式的优化设置其他格式的优化设置1.JPEG文件的优化文件的优化lJPEG总是以总是以 24 位颜色保存和导出，它不存在调色板设置的位颜色保存和导出，它不存在调色板

12、设置的问题，当选择问题，当选择 JPEG 图像时，颜色表为空。下面具体介绍图像时，颜色表为空。下面具体介绍JPEG格式中的优化设置，对应格式中的优化设置，对应JPEG格式的优化面板如上图格式的优化面板如上图所示。所示。l预设模式：【预设模式：【JPEG-较高品质】和【较高品质】和【JPEG-较小文件】。前较小文件】。前者导出的图像质量较高，但文件大小也更大，后者为了得到者导出的图像质量较高，但文件大小也更大，后者为了得到更小的文件，而牺牲了图像的质量。更小的文件，而牺牲了图像的质量。l色板，决定原图中透明的区域在输出时的颜色。色板，决定原图中透明的区域在输出时的颜色。l品质，在【预设模式】的基

13、础上，对图像的压缩质量做进一品质，在【预设模式】的基础上，对图像的压缩质量做进一步的微调。其参数的值越高，图像质量越好，对应文件也越步的微调。其参数的值越高，图像质量越好，对应文件也越大。如图大。如图13-26所示，左图：品质所示，左图：品质90，文件大小，文件大小50.90k；右图：；右图：品质品质20，文件大小，文件大小7.73k。1.JPEG文件的优化文件的优化l平滑，对图像中尖锐的颜色边界做模糊处理，较大的【平滑】参数平滑，对图像中尖锐的颜色边界做模糊处理，较大的【平滑】参数值会减小文件的大小，但图像质量也受一定影响。值会减小文件的大小，但图像质量也受一定影响。l除了除了【优化优化】面

14、板上显示的，在面板的选项菜单中，还有两种优化面板上显示的，在面板的选项菜单中，还有两种优化参数可以设置：参数可以设置：l连续的连续的JPEG，选中该参数，图像在浏览器中的显示效果将随着图，选中该参数，图像在浏览器中的显示效果将随着图像下载过程逐渐地由模糊变得清晰。像下载过程逐渐地由模糊变得清晰。l锐化锐化JPEG边缘，保护优化后的图像中的细节颜色边缘，以保持这边缘，保护优化后的图像中的细节颜色边缘，以保持这些区域的清晰度。选择【锐化些区域的清晰度。选择【锐化JPEG 边缘】将增加文件大小。边缘】将增加文件大小。lFireworks MX 2004还扩展了还扩展了JPEG的优化的功能。的优化的功

15、能。l选择性选择性JPEG功能，可以设置同一图像的不同区域采用不用级别压功能，可以设置同一图像的不同区域采用不用级别压缩，如图像的重点区域采用较高品质的压缩级别，其他区域则采用缩，如图像的重点区域采用较高品质的压缩级别，其他区域则采用低品质的压缩级别，这样即可以突出图像的重点又可以适当减小图低品质的压缩级别，这样即可以突出图像的重点又可以适当减小图像文件的大小，如图像文件的大小，如图13-27所示。所示。2.GIF文件的优化文件的优化lGIF文件格式也是一种广泛应用的网络图形格文件格式也是一种广泛应用的网络图形格式，虽然它只包含式，虽然它只包含256种以下的颜色，但优化种以下的颜色，但优化时有

16、很多种不同的设置，优化面板如图时有很多种不同的设置，优化面板如图13-29所示。下面介绍几种与所示。下面介绍几种与JPEG格式不同的优化格式不同的优化参数设置。参数设置。3.其他格式的优化设置其他格式的优化设置l除了除了JPEG和和GIF两种格式外，还有两种格式外，还有PNG、TIFF、BMP和和PICT等图形文件格式。这些格式的优化等图形文件格式。这些格式的优化参数设定都和参数设定都和GIF格式的优化参数设定非常相似。格式的优化参数设定非常相似。l提示：所有这些在优化面板上的设置，都可以在提示：所有这些在优化面板上的设置，都可以在选择【导出预览】时设置或修改。选择【导出预览】时设置或修改。操作题操作题l导入一幅有花朵图案的图片，利用导入一幅有花朵图案的图片，利用【套索套索】工具工具或或【魔术棒魔术棒】工具选取花朵，为其设置动态效果，工具选取花朵，为其设置动态效果，达到改变花朵颜色的目的。达到改变花朵颜色的目的。l(2)导入一幅图片，在导入一幅图片，在【预览预览】效果中设置不同效果中设置不同压缩比和文件格式，通过对比图像效果，找到图压缩比和文件格式，通过对比图像效果，找到图像优化的最佳方案。像优化的最佳方案。