网页中图形图像的高级.ppt

《网页中图形图像的高级.ppt》由会员分享，可在线阅读，更多相关《网页中图形图像的高级.ppt（44页珍藏版）》请在三一办公上搜索。

1、第14章 网页中图形图像的高级应用,图形和图像都是图片。图形注重“形”，是一个一个由线构成的几何图形，也许是曲线又或者是直线做出的图片，它属于矢量图，通常以.bmp扩展名进行命名，指由GPU运算生成的几何图形或几何图形集合。图像可以是一幅画，它注重“色彩”，属于位图，通过以.jpeg、.tiff为扩展名进行命名，指已经由软硬件处理过的图形。本章针对图形图像具体进行有关内容的探讨。,14.1 矢量图形,计算机中显示的图形可以分为位图和矢量图二类。矢量图无论放大、缩小或旋转等都不会失真，一般体积较小。正因为矢量图的这些特点，越来越多的网站在制作网页时选择使用矢量图作为页面图片。Adobe公司的Il

2、lustrator、Corel公司的CorelDRAW是众多矢量图形设计软件中的佼佼者。这一节通过矢量图的制作过程，来介绍有关矢量工具。,14.1.1 认识矢量图形,因为矢量图放大后，图像效果不会失真，所以在Flash制作等一些要求高保真的场合，它被人们广泛应用着。同时，矢量图还具有占用空间小的特点，同样的条件下由于网页制作的需求，人们更多地会选择它。并且，此类图形还不受分辨率的限制。矢量图以几何图形居多，图形可以无限放大，不变色、不模糊。常用于图案、标志、VI、文字等设计。常用软件有：CorelDraw、Illustrator、Freehand、XARA等。,1什么是矢量图形矢量图形又常被称

3、作面向对象图形或绘图图形。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。多次移动和改变它的属性，并不会影响图例中的其它对象。如图所示，是一矢量图形的应用实例。,2分辨率与“我”何干在处理位图时，我们知道需要重点考虑分辨率这一因素，但是矢量图会告诉你，分辨率与“我”何干哦？操作位图时，分辨率既会影响最后输出的质量也会影响文件的大小。但是，在矢量图这里，分辨率是没办法影响它的。3开放路径对象和封闭路径对象对象可以有一条封闭路径或者一条开放路径。开放路径对象的两个端点是不相交的。封闭路径对象就是那种两个端点相连构成连续路径的对象。开放路径

4、对象既可能是直线，也可能是曲线，封闭路径对象包括圆、正方形、网格、自然笔线、多边形和星形等。封闭路径对象是可以填充的，而开放路径对象则不能填充。,14.1.2 制作矢量图形,在Flash动画中，经常通过矢量图形来进行相关应的动态图的效果的实现。在对矢量图形有了初步认识之后，接下来让我们一起来学习有关绘制与填充。对于矢量图形，经常需要使用Fireworks软件来制作。它的处理主要包括有以下内容：1矢量路径这里提到的矢量路径共有三类，分别是直线、曲线、自由路径。有关它们的创建方法，下面进行详细讲述。具体内容包括：（1）直线的创建方法（2）曲线的创建方法（3）自由路径的创建方法,2矢量形状矢量形状包

5、括矩形、椭圆、多边形、星形以及其它特定的几何形状。在Fireworks中主要提供有如图所示的相应关于形状的功能。在下面的内容中将详细为大家介绍有关此方面的操作、创建方法。（1）矩形的创建方法（2）椭圆形的创建方法（3）多边形的创建方法（4）星形的创建方法（5）特定形状的创建方法,3自动形状创建自动形状的方法是，单击“窗口”|“自动形状”命令，在弹出的如图1所示的“自动形状”面板中进行相应图形的拖动选择，即可实现。如图2所示，是应用“自动形状”面板实现的，可用于网页制作的部分矢量图形的效果图。图1 图2,4使用笔触笔触可以应用到矢量路径、矢量图形或文本上。通过设置笔触属性，可以使下一个绘制的矢量

6、对象具有新的笔触属性。具体操作方法是，在画布上选择一个矢量图形，鼠标单击“属性”面板中笔触的相应选项进行设置即可。如图所示，是矩形矢量图的相应的笔触的属性，包括边缘、纹理、圆度等。,如图所示，是一针对笔触的相应属性效果应用后的矢量图。通过笔触分别实现了实线、3D、彩色蜡笔、轮廓和荧光等下述效果。,5使用填充在Fireworks内置了种标准填充方式：单色填充、抖动填充（Web仿色填充）、图案填充和渐变填充。可以改变填充的各种属性，包括颜色、边缘、纹理和透明度。因为不同标准的填充方式略有区别，所以在属性面板的设置操作时，除了基本操作外，还需要根据不同的方式进行相应的变动。下面针对这些进行具体介绍。

7、（1）单色填充单色填充是使用单一颜色对矢量路径、图形或文本进行填充。具体操作方法是，在“属性”面板中，“填充”的相应选项中进行设置即可，如图所示。,如图所示，是应用了单色填充的效果截图，在网页制作过程中，在矢量图的制作与应用时，可作为大家的参考。,（2）抖动填充Fireworks提供了Web仿色填充，即混合两种Web可靠颜色来模拟一种非可靠的Web颜色。关于抖动填充的具体操作方法是，选择要填充的对象，在填充面板的类别下拉列表中选择“网页抖动”，设置颜色。如果想设置透明效果，可勾选“透明”复选框，如图1所示。如图2所示，是应用了抖动填充的效果截图，在网页制作过程中，在矢量图的制作与应用时，可作为

8、大家的参考。图1 图2,（3）渐变填充渐变填充是使用两种或两种以上的颜色按照一定的组合规律来填充对象。关于渐变填充的操作方法是，选择要填充的对象，在填充面板的类别下拉列表中选择填充的方案。在Fireworks中共为大家提供了如图1所示的12种方案。这里选择“波纹”的填充方案，单击“填充颜色”按钮，在弹出的“编辑渐变”窗口，进行相应的效果的实现，如图2所示。图1 图2,如图所示，是应用了渐变填充的效果截图，在网页制作过程中，在矢量图的制作与应用时，可作为大家的参考。,（4）图案填充图案填充是使用图案位图重复拼接来填充对象。关于图案填充的操作方法是，选择要填充对象，在填充面板的类别下拉列表中选择“

9、图案填充”。系统提供的图案有限，可以通过“其它”这一选项，在弹出的“定位文件”对话框中，选择想要添加的图片作为填充的方案，如图1所示。如图2所示，是应用了图案填充的效果截图，在网页制作过程中，在矢量图的制作与应用时，可作为大家的参考。图1 图2,14.1.3 矢量工具应用,矢量工具用于制作矢量图，有此类作用的工具不止一种，如前面已经提到的Fireworks软件。“贝塞尔工具”是所有绘图类软件中，最重要的工具之一。下面针对几类常用的矢量工具软件进行讲解，帮助大家掌握它们的功能以及相关内容。1Fireworks2Photoshop3CorelDRAW（1）绘制线段（2）封闭的对象效果（3）绘制曲线

10、,14.1.4 矢量图与位图,位图图形由排列成网格的称为象素的点组成。图像由网格中每个象素的位置和颜色值决定。编辑位图图形时，修改的是象素，位图图形与分辨率有关，放大位图图形会使图像的边缘呈锯齿状。下面为大家详细介绍有关矢量图与位图的不同。1位图像素、分辨率2矢量图优、缺点优点：（1）文件小；（2）图像元素对象可编辑；（3）图像放大或缩小不影响图像的分辨率；（4）图像的分辨率不依赖于输出设备；缺点：（1）重画图像困难；（2）逼真度低，要画出自然度高的图像需要很多的技巧。,3矢量图与位图的转换在了解了矢量图和位图之后，接下来，具体为大家介绍相关的转换方法。因为矢量图形是使用数学方法，按照点、线、

11、面的方式形成的，在缩放时不会产生失真效果；位图图像则是使用物理方法，按照点阵的方式绘制出来的，由像素的点阵组成的，图像在缩放和旋转变形时会产生失真现象。由此，为了应用滤镜功能和位图的颜色遮罩功能，需要把矢量图用CorelDRAW转化为位图。其方法如下：（1）选择（2）执行操作（3）分辨率与颜色模式的选择,14.2 Fireworks图形图像处理,Fireworks是一款在网页制作中，被广泛用来处理图形图像的软件。针对它在网页页面中的作用突出，在本节中，具体通过几个实例的制作方法以及相应的内容，来帮助大家更好地掌握有关于本软件的具体的内容与操作应用。,14.2.1 动态元件的制作与应用,借助Fi

12、reworks，可以帮助实现“图形”、“按钮”、和“动画”三种元件的创建。这里实现的效果，都是通过把元件从文档库里面直接拖出来进行的，这类元件统称为静态元件。那什么是动态元件？该如何制作它呢？下面来为大家揭晓。,1什么是动态元件若想要改变按钮的文字、长、宽、以及鼠标移动、按下等属性，可以在“元件定义”面板进行设置。因为该元件在库里面只存在一个，所以称其为动态元件。在如图所示的截图中，就是关于元件的效果图。,2动态元件的制作与应用在了解了动态元件之后，接下来为大家介绍有关它的制作与应用的方法。关于这部分的内容，这里通过一简单的操作实例，来帮助我揭开它的“面罩”。（1）绘制图形（2）编辑（3）保存

13、（4）脚本（5）应用,14.2.2 制作水波gif动画,在很多的动图中，都应用了动态如水波的效果。那么要怎么才能实现它呢？在接下来的内容中，将一一来为大家进行解答。如图所示，是一用Fireworks制作的水波动画。这里通过此实例图的制作与实现方法的介绍，来讲述有关水波动画的相关内容。1导入图片2编辑3色彩模式调整4帧的设置,14.3 Photoshop图形图像处理,Photoshop的图形图像处理的强大功能，相信大家都有所耳闻。在这一节中，具体针对它的相关图形图像制作、编辑等操作内容，进行一系列的介绍。主要通过几个应用实例，在今后的网页制作图形图像处理时能有所帮助的内容，来执行详细叙述。,14

14、.3.1 使用画笔笔尖形状,在Photoshop中，画笔是使用最多的功能之一，笔尖形状正是其中的一项。“画笔笔尖形状”项目的设置与应用技巧，通过设置此项目，可以设置画笔笔尖的样式、直径、硬度，还可以设置画笔的翻转、角度、圆度和间距等。马上就为大家来介绍其功能。,关于画笔的相关属性设置，可以在“画笔”调板中实现。在打开后，关于“画笔笔尖形状”、“大小”、“角度”、“圆度”、“硬度”、“间距”和“画笔”都可以在此面板中执行相应的选项，具体内容如图所示。1设置2绘制,14.3.2 投影和内阴影,为图层后面添加阴影，就是Photoshop中经常使用的投影效果的实现方法之一。在图片的技术处理时，投影和内

15、阴影是较普遍的效果。在此段内容中，将要讲解的就是关于此类操作的相关的应用。具体内容如下：1投影2内阴影,14.3.3 蒙版工作原理,在Photoshop中，蒙版就像是特定的遮罩，控制着图层或图层组中的不同区域如何隐藏和显示。简单的说，蒙版就是控制照片不同区域曝光的传统暗房技术。蒙版有快速蒙版、图层蒙版、矢量蒙版，以及剪贴蒙版之分。下面，从蒙版的工作原理、蒙版的类型、蒙版的使用方法与技巧等内容为出发点，介绍蒙版的工作原理，详细介绍四类蒙版的操作。1快速蒙版2图层蒙版3矢量蒙版4剪贴蒙版,14.4 标尺、参考线和网格,标尺、参考线和网格是Photoshop软件系统中的辅助工具，他们可以帮助我们在绘

16、制和移动相关内容的过程中，更精确地对该制作和移动内容进行定位与对齐。如果合理地、有效地使用标尺、参考线和网格，将大大提高网页的档次。下面，将分别对标尺、参考线和网格的相关内容进行具体介绍。,14.4.1 标尺,photoshop中标尺的主要作用就是度量当前图像的尺寸，同时对图像进行辅助定位，使图像的编辑更加准确。操作时执行菜单中的“视图|标尺”命令，即可在当前文件的页面中显示标尺，如图所示1所示。如果要将文件中的标尺隐藏，可再次执行菜单中的“视图|标尺”命令即可。图2是没有显示标尺的Photoshop的编辑界面，对于标尺应用于否的界面的应用的便捷于否相应大家已经一目了然。图1 图2,在进行了标

17、尺的显示与隐藏方法的介绍，大家还需要掌握它的设置方法。当标尺的刻度合理与否，将直接影响到界面中图像的设计。其具体操作方法是，单击“编辑”|“首选项”|“单位与标尺”命令，在弹出的“首选项”对话框，“单位与标尺”选项下的“单位”与“列尺寸”的文本框与下拉列表框中，即可进行相应的参数值设置，如图所示。标尺的单位、参考线的颜色、样式都是可以设置的。,14.4.2 参考线,参考线是浮在整个图像窗口中但不被打印的直线。用户可移动、删除或锁定参考线。它的具体实现方法是：当执行“视图|新参考线”时，在弹出的对话框中设置各选项参数，可以精确的在当前文件中新建参考线。如图所示。参考线有二种方式，一种是水平取向，

18、另一种是垂直取向。,14.4.3 网格,网格在默认情况下显示为非打印的直线，也可显示为网点。网格是由显示在文件中的一系列相互交叉的直线所构成。执行菜单中的“视图”|“显示”|“网格”命令，即可在当前打开的文件的页面中显示网格，如图所示。如果想将文件中的网格隐去，可再次执行菜单中的“视图”|“显示”|“网格”命令即可实现。,14.5 Photoshop CS5新增功能,Photoshop从最初始版本，到今天的CS5，乃至今后的更高版本的出现。该软件在进行版本的更换时，都会加入不同的功能。这里针对CS5新增的一些功能，借助一系列简单的实例操作，来帮助大家更进一步了解它。同时，进一步学习Photos

19、hop的操作技巧。,14.5.1“Mini Bridge中浏览”命令,借助更灵活的分批重命名功能轻松管理媒体，使用Photoshop CS5中的“Mini Bridge中浏览”命令，可以方便的在工作环境中访问资源。具体操作方法是：单击“文件”|“在Mini Bridge中浏览”命令，在打开的Mini Bridge面板中，根据相应的按钮功能，即可应用这些新的增加的功能，如图所示。,14.5.2“选择性粘贴”命令,使用“选择性粘贴”中的“原位粘贴”、“贴入”和“外部粘贴”命令，可以根据需要在复制图像的原位置粘贴图像，或者有所选择的粘贴复制图像的某一部分。合理使用此方法，可以帮助我们在实际制作过程中

20、，减省时间，以提高操作效率。,14.5.3“操控变形”命令,使用新增的“操控变形”命令，可以在一张图像上建立网格，然后使用“图钉”固定特定的位置后，拖动需要变形的部位。例如，轻松伸直一个弯曲角度不舒服的手臂。其具体操作方法如下：,打开需要编辑的图像，单击“编辑”|“操控变形”命令，这时在图像上出现网格，然后通过调整网格上的点就可进行相应的变形了。如图是原图进行了命令后出现的网格效果图。,14.5.4“合并到HDR Pro”命令,使用“合并到HDR Pro”命令，可以创建写实的或超现实的“HDR”图像。借助自动消除叠影以及对色调映射，可更好的调整控制图像，以获得更好的效果，甚至可使单次曝光的照片

21、获得“HDR”图像的外观。具体应用的操作方法如下：,启动Photoshop CS5，单击“文件”|“自动”|“合并到HDR Pro”命令，在弹出的对话框中单击“浏览”按钮，选择相应的文件，最后单击“确定”按钮完成。这里要合并的图像大小必须是一致的，否则将无法实现，具体如图所示。,14.5.5 精确的完成复杂选择,使用“魔棒”工具，轻击鼠标就可以选择一个图像中的特定区域，轻松选择复杂的图像元素，再单击“调整边缘”命令，可以消除选区边缘周围的背景色，自动改变选区边缘并改进蒙版，使选择的图像更加的精确，甚至精确到细微的毛发部分。如图所示，是一通过此功能实现的，毛发处理前后的效果对比图。,14.5.6

22、 内容感知型填充,使用“内容识别”填充，可以删除任何图像细节或对象。这一突破性的技术与光照、色调及噪声相结合，使删除的图像内容看上去似乎本来就不存在。因为图像素材的局限，我们需要删除图像内容是经常用到的，合理运用该方法能够大大提升图像的档次。,14.6 本章小结,本章从图形图像的处理方法出发，针对一些在网页制作过程中较复杂的应用内容进行了介绍。具体包括Photoshop CS5版本中新增的内容，这是一掌握起来比较困难的内容。对于相应的Fireworks中的相应功能也是需要大家重点掌握的，因为制作网页我们单单通过一种软件是无法达到和实现最完美的制作与处理效果的。除了上述内容，文中提到的矢量图这一部分内容大家是一定要熟记，这是图形图像在网页中比较重要的一类。,