第14章网页中图形图像的高级.ppt

第14章 网页中图形图像的高级应用 图形和图像都是图片。图形注重“形”，是一个一个由线构成的几何图形，也许是曲线又或者是直线做出的图片，它属于矢量图，通常以.bmp扩展名进行命名，指由GPU运算生成的几何图形或几何图形集合。图像可以是一幅画，它注重“色彩”，属于位图，通过以.jpeg、.tiff为扩展名进行命名，指已经由软硬件处理过的图形。本章针对图形图像具体进行有关内容的探讨。 14.1 矢量图形 计算机中显示的图形可以分为位图和矢量图二类。矢量图无论放大、缩小或旋转等都不会失真，一般体积较小。正因为矢量图的这些特点，越来越多的网站在制作网页时选择使用矢量图作为页面图片。Adobe公司的Illustrator、Corel公司的CorelDRAW是众多矢量图形设计软件中的佼佼者。这一节通过矢量图的制作过程，来介绍有关矢量工具。 14.1.1 认识矢量图形 因为矢量图放大后，图像效果不会失真，所以在Flash制作等一些要求高保真的场合，它被人们广泛应用着。同时，矢量图还具有占用空间小的特点，同样的条件下由于网页制作的需求，人们更多地会选择它。并且，此类图形还不受分辨率的限制。矢量图以几何图形居多，图形可以无限放大，不变色、不模糊。常用于图案、标志、VI、文字等设计。常用软件有：CorelDraw、Illustrator、Freehand、XARA等。 1．什么是矢量图形 矢量图形又常被称作面向对象图形或绘图图形。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。多次移动和改变它的属性，并不会影响图例中的其它对象。如图所示，是一矢量图形的应用实例。 2．分辨率与“我”何干 在处理位图时，我们知道需要重点考虑分辨率这一因素，但是矢量图会告诉你，分辨率与“我”何干哦？操作位图时，分辨率既会影响最后输出的质量也会影响文件的大小。但是，在矢量图这里，分辨率是没办法影响它的。 3．开放路径对象和封闭路径对象 对象可以有一条封闭路径或者一条开放路径。开放路径对象的两个端点是不相交的。封闭路径对象就是那种两个端点相连构成连续路径的对象。开放路径对象既可能是直线，也可能是曲线，封闭路径对象包括圆、正方形、网格、自然笔线、多边形和星形等。封闭路径对象是可以填充的，而开放路径对象则不能填充。 14.1.2 制作矢量图形 在Flash动画中，经常通过矢量图形来进行相关应的动态图的效果的实现。在对矢量图形有了初步认识之后，接下来让我们一起来学习有关绘制与填充。对于矢量图形，经常需要使用Fireworks软件来制作。它的处理主要包括有以下内容： 1．矢量路径 这里提到的矢量路径共有三类，分别是直线、曲线、自由路径。有关它们的创建方法，下面进行详细讲述。具体内容包括： （1）直线的创建方法 （2）曲线的创建方法 （3）自由路径的创建方法 2．矢量形状 矢量形状包括矩形、椭圆、多边形、星形以及其它特定的几何形状。在Fireworks中主要提供有如图所示的相应关于形状的功能。在下面的内容中将详细为大家介绍有关此方面的操作、创建方法。 （1）矩形的创建方法 （2）椭圆形的创建方法 （3）多边形的创建方法 （4）星形的创建方法 （5）特定形状的创建方法 3．自动形状 创建自动形状的方法是，单击“窗口”|“自动形状”命令，在弹出的如图1所示的“自动形状”面板中进行相应图形的拖动选择，即可实现。 如图2所示，是应用“自动形状”面板实现的，可用于网页制作的部分矢量图形的效果图。 图1 图2 4．使用笔触 笔触可以应用到矢量路径、矢量图形或文本上。通过设置笔触属性，可以使下一个绘制的矢量对象具有新的笔触属性。具体操作方法是，在画布上选择一个矢量图形，鼠标单击“属性”面板中笔触的相应选项进行设置即可。如图所示，是矩形矢量图的相应的笔触的属性，包括边缘、纹理、圆度等。 如图所示，是一针对笔触的相应属性效果应用后的矢量图。通过笔触分别实现了实线、3D、彩色蜡笔、轮廓和荧光等下述效果。 5．使用填充 在Fireworks内置了４种标准填充方式：单色填充、抖动填充（Web仿色填充）、图案填充和渐变填充。可以改变填充的各种属性，包括颜色、边缘、纹理和透明度。因为不同标准的填充方式略有区别，所以在属性面板的设置操作时，除了基本操作外，还需要根据不同的方式进行相应的变动。下面针对这些进行具体介绍。 （1）单色填充 单色填充是使用单一颜色对矢量路径、图形或文本进行填充。具体操作方法是，在“属性”面板中，“填充”的相应选项中进行设置即可，如图所示。 如图所示，是应用了单色填充的效果截图，在网页制作过程中，在矢量图的制作与应用时，可作为大家的参考。