《网页设计与制作-电子教案-陈彦许 第6章 动态网页设计初步gai》由会员分享，可在线阅读，更多相关《网页设计与制作-电子教案-陈彦许 第6章 动态网页设计初步gai（68页珍藏版）》请在金锄头文库上搜索。
1、第6章 处理网页中的图像,【学习目标】,61 图像处理基础知识,611像素与图像分辨率,（1）像素 像素是位图图像的基本组成单位，它是一个有颜色的小方块，位图图像是由许多小方块组成，以行和列的方式排列，图6-1是将位图图像部分放大后看到的效果。,图6-1 像素,（2）图像分辨率 图像分辨率指图像文件包括细节的信息和数量，就是单位面积内包含的像素数量。分辨率直接影响着图像文件的大小和图像质量的好坏，分辨率越高，图像文件越大，图像质量越好。,61 图像处理基础知识,612 RGB色彩模式,人眼能够看到的只是光谱的一小部分，通常被称为可见光谱。色彩模型旨在描述人眼看到的和使用的颜色。每个色彩模型代表
2、一种描述和分类色彩的方法，而所有的色彩模型都是用数值来代表可见的色彩光谱。数字图像处理常用的颜色模式有很多，包括灰度模式、RGB模式和CMYK模式。网页中的图像与图像处理都是基于RGB色彩模式的。 GB模型也称为加色模型，RGB模型通常用于光照、视频和屏幕图像编辑。RGB色彩模式使用RGB模型为图像中每一个像素的RGB分量分配一个0255范围内的强度值。 RGB图像是符合RGB颜色模型的，图像中每一个像素的颜色由存储在相应位置上的红、绿、蓝颜色分量共同决定。RGB图像是24位图像，红、绿、蓝分别占用8位，理论上可以包含16M种不同的颜色。,61 图像处理基础知识,613位图与矢量图,位图是由不
3、同亮度和颜色的像素所组成，适合表现大量的图像细节，可以很好的反映明暗的变化、复杂的场景和颜色，它的特点是能表现逼真的图像效果，但是文件比较大，并且缩放时清晰度会降低并出现锯齿。位图有种类繁多的文件格式，常见的有JPEG、PCX、BMP、PSD、PIC、GIF和TIFF等。 位图图像效果好，但放大以后会失真，图6-2中的右图是将左图放大后的效果。,图6-2 位图放大后失真,61 图像处理基础知识,613位图与矢量图,而矢量图则使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的，所以矢量图形文件一般较小。矢量图形的优点是无论放大、缩小或
4、旋转等都不会失真；缺点是难以表现色彩层次丰富的逼真图像效果，而且显示矢量图也需要花费一些时间。矢量图形主要用于插图、文字和可以自由缩放的徽标等图形。一般常见的文件格式有AI等。 矢量图图像效果差，放大以后不会失真。,61 图像处理基础知识,614网页图像的格式,每一种图像文件均有一个文件头，在文件头之后才是图像数据。文件头的内容一般包括文件类型、文件制作者、制作时间、版本号、文件大小等内容。各种图像文件的制作还涉及到图像文件的压缩方式和存储效率等。常用的图像文件存储格式主要有BMP、JPG、PCX、TIFF以及GIF等。在网页中常用的图像格式包括JPG和GIF两种。 （1）JPG格式 PEG是
5、Joint Photographic Experts Group（联合图像专家组）的缩写，文件后辍名为“jpg”或“.jpeg”，是目前网络上最流行的图像格式，是可以把文件压缩到最小的格式。JPEG是一种有损压缩格式，能够将图像压缩在很小的储存空间。JPEG压缩技术十分先进，它用有损压缩方式去除冗余的图像数据，在获得极高的压缩率的同时能展现十分丰富生动的图像，换句话说，就是可以用最少的磁盘空间得到较好的图像品质。在 Photoshop软件中以JPEG格式储存时，提供11级压缩级别，以010级表示。其中0级压缩比最高，图像品质最差。 （2）GIF格式 GIF是Graphics Interchan
6、ge Format的缩写，它是CompuServe公司于1987年推出的，全称是图形交换文件格式。该形式存储的文件主要是为不同系统平台上交流和传输图像提供方便。它是在Web及其他联机服务上常用的一种文件格式，用于超文本标记语言（HTML）文档中的索引颜色图像，但图像最大不能超过64MB，颜色最多为256色。 GIF图像文件采取LZW压缩算法，存储效率高，支持多幅图像定序或覆盖，交错多屏幕绘图以及文本覆盖。,61 图像处理基础知识,614网页图像的格式,GIF主要是为数据流而设计的一种传输格式，而不是作为文件的存储格式。换句话说，它具有顺序的组织形式。GIF有五个主要部分以固定顺序出现，所有部分
7、均由一个或多个块（block）组成。每个块的第一个字节中存放标识码或特征码表示。这些部分的顺序为：文件标志快、逻辑屏幕扫描块、可选的“全局”色彩表快（调色板）、各图像数据块（或专用的块）以及尾块（结束码）。 GIF格式支持动画，支持透明。,61 图像处理基础知识,615 了解Photoshop,Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。 Photoshop主要是用来做图、扣图、图像的修复和调色以及图像的合成。 （1）Photoshop的界面 Ph
8、otoshop程序界面是指整个工作区，它是进行图像编辑的基础。Photoshop安装后第一次运行或者没有改变任何一个窗口组件的窗口界面称为默认工作区。合理的工作区组成可以为高效地图像编辑提供服务。工作区主要包括应用程序栏、菜单栏、工具箱、控制面板、图像窗口、调板组、状态栏等，如图6-3所示。,图6-3 Photoshop CS4的桌面环境,61 图像处理基础知识,615 了解Photoshop,（3）图像的打开 执行“文件”|“打开”命令，或按组合键“Ctrl+O”，弹出“打开”对话框，如图6-5所示。在“查找范围”下拉列表中指定文件的路径，在文件窗口中选择要打开的文件，选择“打开”按钮，图像
9、窗口中就会显示打开的图像。 “文件”|“最近打开文件”子菜单中列出了最近编辑过的文档，如图6-6所示。,图6-5 “打开” 对话框,图6-6 最近打开的文件,61 图像处理基础知识,615 了解Photoshop,（4）保存图像 执行“文件”|“存储”命令，可以保存图像文件。如果在制作过程中添加了新图层或通道，或对新建文件编辑后首次保存，则执行该命令时会打开“存储为”对话框，以便对其名称与格式进行设置。 执行“文件”|“存储为Web和设备所有格式”命令，可以把当前图像文件保存成Web专用文件，同时可以对图像的颜色和文件的容量进行优化，如图6-7所示。,图6-7 “存储为Web和设备所有格式”
10、对话框,注意：在图像设计或编辑过程中，应每隔一段时间就执行一次保存命令，避免由于计算机的意外故障而造成一些不必要的损失。保存的快捷键是Ctrl+S。,注意,62 Photoshop图像绘制,621画笔工具的使用,画笔工具可在图像上用当前的前景色绘制图像，画笔工具创建颜色的柔描边。绘画工具在使用前，应先设置前景色。 画笔工具的控制面板选项主要用于设置画笔的形状与大小、混合模式、不透明度、流量等，图6-8是画笔工具的控制面板。,图6-8 “画笔工具”的控制面板,其中，“画笔”下拉选项用于选择画笔和设置画笔的形状与大小，Photoshop提供了多种默认的画笔预设，如图6-9所示。,图6-9 Phot
11、oshop自带的画笔,62 Photoshop图像绘制,621画笔工具的使用,除了使用Photoshop默认的画笔以外，还可以自定义画笔，下面以高楼的制作实例说明自定义画笔的使用和定义方法。,图6-10 新建图层,图6-11画笔主直径设置,62 Photoshop图像绘制,621画笔工具的使用,除了使用Photoshop默认的画笔以外，还可以自定义画笔，下面以高楼的制作实例说明自定义画笔的使用和定义方法。,图6-12 使用画笔绘制楼的外轮阔,提示：使用画笔时配合按下Shift键可以绘制直线 。,62 Photoshop图像绘制,621画笔工具的使用,除了使用Photoshop默认的画笔以外，还
12、可以自定义画笔，下面以高楼的制作实例说明自定义画笔的使用和定义方法。,图6-13 建立的选区,62 Photoshop图像绘制,621画笔工具的使用,除了使用Photoshop默认的画笔以外，还可以自定义画笔，下面以高楼的制作实例说明自定义画笔的使用和定义方法。,图6-14 描边,62 Photoshop图像绘制,621画笔工具的使用,除了使用Photoshop默认的画笔以外，还可以自定义画笔，下面以高楼的制作实例说明自定义画笔的使用和定义方法。,图6-15 定义画笔,62 Photoshop图像绘制,621画笔工具的使用,除了使用Photoshop默认的画笔以外，还可以自定义画笔，下面以高楼
13、的制作实例说明自定义画笔的使用和定义方法。,图6-16 选择画笔形状,图6-17 设置画笔属性,62 Photoshop图像绘制,621画笔工具的使用,除了使用Photoshop默认的画笔以外，还可以自定义画笔，下面以高楼的制作实例说明自定义画笔的使用和定义方法。,图6-18 使用画笔,62 Photoshop图像绘制,621画笔工具的使用,除了使用Photoshop默认的画笔以外，还可以自定义画笔，下面以高楼的制作实例说明自定义画笔的使用和定义方法。,图6-19 画笔设置,62 Photoshop图像绘制,621画笔工具的使用,除了使用Photoshop默认的画笔以外，还可以自定义画笔，下面
14、以高楼的制作实例说明自定义画笔的使用和定义方法。,图6-20 高楼,62 Photoshop图像绘制,621画笔工具的使用,除了使用Photoshop默认的画笔以外，还可以自定义画笔，下面以高楼的制作实例说明自定义画笔的使用和定义方法。,图6-21 最终效果,62 Photoshop图像绘制,622图案的使用与定义,Photoshop中也使用图案进行图像的制作，图案图章工具就是使用图案做图的工具。Photoshop提供了比较丰富的图案，使用图案图章工具需先从属性面板中选择要填充的图案，如图6-22所示。,图6-22 图案选择,62 Photoshop图像绘制,622图案的使用与定义,在列表中选
15、择相应的图案组，如“自然图案”、“岩石图案”等，应用效果如图6-23所示。,62 Photoshop图像绘制,622图案的使用与定义,Photoshop中还提供了用户的自定义图案功能。下面以网页背景的制作为例演示自定义图案的步骤。,62 Photoshop图像绘制,622图案的使用与定义,Photoshop中还提供了用户的自定义图案功能。下面以网页背景的制作为例演示自定义图案的步骤。,图6-24 拾色器,62 Photoshop图像绘制,622图案的使用与定义,Photoshop中还提供了用户的自定义图案功能。下面以网页背景的制作为例演示自定义图案的步骤。,提示：灰白格代表透明。,62 Pho
16、toshop图像绘制,622图案的使用与定义,62 Photoshop图像绘制,622图案的使用与定义,62 Photoshop图像绘制,622图案的使用与定义,62 Photoshop图像绘制,622图案的使用与定义,62 Photoshop图像绘制,622图案的使用与定义,62 Photoshop图像绘制,622图案的使用与定义,62 Photoshop图像绘制,622图案的使用与定义,填充效果如图所示。,62 Photoshop图像绘制,623矢量工具的使用,Photoshop提供了多种形状工具用来快速创建矢量图形，包括矩形工具、圆角矩形工具、椭圆工具、多边形工具、直线工具和自定形状工具。 下面以简笔画的制作说明矢量工具的使用。,62 Photoshop图像
