《网页设计与制作第13章位图图像的编辑.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第13章位图图像的编辑.ppt（22页珍藏版）》请在三一办公上搜索。
1、第13章 位图图像的编辑,第13章 位图图像的编辑,学习目标：通过本章的学习，要求掌握创建位图图像的方法，学会编辑图像，优化、导出图像，能够用Firesorks熟练处理图像。,第13章 位图图像的编辑,13.1创建编辑位图图像13.2 图像效果的应用13.3优化图像的输出,13.1创建编辑位图图像,13.1.1 创建位图图像图像部分区域的选取编辑位图图像,13.1.1 创建位图图像,创建位图的方法很简单，可以直接选择【导入】命令，导入一幅位图图像，也可以将已经存在的路径对象转换成位图，或者直接利用位图编辑工具铅笔或刷子创建新的位图。,图像部分区域的选取,1.【选取】工具2.【套索】工具3.【魔
2、术棒】工具4.选取区域的控制,编辑位图图像,1.对象的操作2.铅笔工具3.刷子工具4.油漆桶工具5.橡皮图章工具6.模糊工具组7.橡皮擦工具8.裁切工具,13.2 图像效果的应用,掌握了创建和编辑位图的基本方法后，我们将开始学习如何对图像应用各种动态效果。Fireworks MX 2004中动态效果主要是通过【滤镜】菜单和属性面板上的【效果】菜单来实现的，两者的多数选项是相同的，应用的效果也相同，可执行的后果却不相同。从【效果】菜单中应用某种效果，随时可以重新编辑或通过【删除效果】按钮删除该效果的应用，但是应用滤镜产生的效果是永久性的，除非撤消这次执行命令的操作，否则不能取消【动态效果】对图像
3、的改变。为图像设置动态效果的目的，主要是为了较好的控制图像色彩和色调，使图像达到最佳效果。Fireworks MX 2004提供了多种控制和调节图像色彩及色调的方法。,13.2 图像效果的应用,13.2.1 调整色调范围调整亮度和对比度调整色相和饱和度应用颜色填充动态效果应用其他动态效果,13.2.1 调整色调范围,1.自动色阶2.反转3.色阶4.曲线,调整亮度和对比度,亮度是图像的明亮程度，对比度是指不同颜色之间的差异。从【添加效果】/【调整颜色】中打开【亮度/对比度】对话框，如图13-21所示，滑块调节的范围从【-100100】。值为正，表示增加了图像的亮度和对比度，反之是降低图像的亮度和
4、对比度。,调整色相和饱和度,调整色相是指调整多种颜色之间的比例，例如，白光是由红、橙、黄、绿、青、蓝、紫7种颜色按一定比例组成，每一种颜色代表一种色相，通过调整色相可以使白光变成其他颜色的效果。饱和度指图像颜色的彩度。从【添加效果】/【调整颜色】打开【色相/饱和度】对话框，修改参数的值，得到如图13-22所示效果。,应用颜色填充动态效果,应用这种动态效果可以将图像更改成其他颜色。从【添加效果】/【调整颜色】中执行【颜色填充】命令，系统会将默认的颜色填充到对象当中，同时出现如图13-23所示面板，可以对填充色及填充透明度进行修改，这时图象的填充效果又会对应发生变化。,应用其他动态效果,除了前面介
5、绍的对图像的【颜色和色调】应用【调整颜色】菜单下的动态效果，我们还可以对图像应用斜角和浮雕、投影和光晕、颜色校正、模糊和锐化等多种动态效果。如图13-24（a）所示，可以很容易的设置这些动态效果。例如，我们从【效果】面板菜单中选择【模糊】/【放射状模糊】，并设置参数【数量】为15，【品质】为30，得到效果如图13-24（c）所示：,应用其他动态效果,提示：可以将设置的多种动态效果保存成自定义样式，以方便下次对图像进行相同效果设置时使用。只要执行【效果】面板菜单中的【选项】/【另存为样式】，在下一次我们打开【效果】面板菜单就可以看到我们自己保存的样式名称。删除自定义样式可以在【样式】面板中执行。
6、,13.3 优化图像的输出,前面我们在第11章的节中已经介绍过利用【导出向导】将文档输出。在本节中，我们将具体介绍如何对图像优化后再输出。优化的目的主要是使将输出的图像选择一种合适的压缩方式，达到即能减小文件大小，又能兼顾图像质量的效果。优化主要包括选择文件格式和调整图形中的颜色两个方面。不同的图像具有不同的存储格式，每种格式都有一组唯一的选项，所以不同格式的图像文件对应不同的优化存储过程。,13.3 优化图像的输出,JPEG文件的优化GIF文件的优化其他格式的优化设置,1.JPEG文件的优化,JPEG总是以 24 位颜色保存和导出，它不存在调色板设置的问题，当选择 JPEG 图像时，颜色表为
7、空。下面具体介绍JPEG格式中的优化设置，对应JPEG格式的优化面板如上图所示。预设模式：【JPEG-较高品质】和【JPEG-较小文件】。前者导出的图像质量较高，但文件大小也更大，后者为了得到更小的文件，而牺牲了图像的质量。色板，决定原图中透明的区域在输出时的颜色。品质，在【预设模式】的基础上，对图像的压缩质量做进一步的微调。其参数的值越高，图像质量越好，对应文件也越大。如图13-26所示，左图：品质90，文件大小50.90k；右图：品质20，文件大小7.73k。,1.JPEG文件的优化,平滑，对图像中尖锐的颜色边界做模糊处理，较大的【平滑】参数值会减小文件的大小，但图像质量也受一定影响。除了
8、【优化】面板上显示的，在面板的选项菜单中，还有两种优化参数可以设置：连续的JPEG，选中该参数，图像在浏览器中的显示效果将随着图像下载过程逐渐地由模糊变得清晰。锐化JPEG边缘，保护优化后的图像中的细节颜色边缘，以保持这些区域的清晰度。选择【锐化JPEG 边缘】将增加文件大小。Fireworks MX 2004还扩展了JPEG的优化的功能。选择性JPEG功能，可以设置同一图像的不同区域采用不用级别压缩，如图像的重点区域采用较高品质的压缩级别，其他区域则采用低品质的压缩级别，这样即可以突出图像的重点又可以适当减小图像文件的大小，如图13-27所示。,2.GIF文件的优化,GIF文件格式也是一种广
9、泛应用的网络图形格式，虽然它只包含256种以下的颜色，但优化时有很多种不同的设置，优化面板如图13-29所示。下面介绍几种与JPEG格式不同的优化参数设置。,3.其他格式的优化设置,除了JPEG和GIF两种格式外，还有PNG、TIFF、BMP和PICT等图形文件格式。这些格式的优化参数设定都和GIF格式的优化参数设定非常相似。提示：所有这些在优化面板上的设置，都可以在选择【导出预览】时设置或修改。,操作题,导入一幅有花朵图案的图片，利用【套索】工具或【魔术棒】工具选取花朵，为其设置动态效果，达到改变花朵颜色的目的。(2)导入一幅图片，在【预览】效果中设置不同压缩比和文件格式，通过对比图像效果，找到图像优化的最佳方案。,
