动态网页设计初步ga

《动态网页设计初步ga》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章处理网页中的图像【学习目标】2.学会基本的图像处理工具的使用法3.掌握photoshop中扣图的方法1.掌握图像处理的基本概念4.学会使用photoshop制作网页Logo、网页背景及效果图6．1图像处理基础知识6．1．1像素与图像分辨率（1）像素像素是位图图像的基本组成单位，它是一个有颜色的小方块，位图图像是由许多小方块组成，以行和列的方式排列，图6-1是将位图图像部分放大后看到的效果。图6-1像素（2）图像分辨率图像分辨率指图像文件包括细节的信息和数量，就是单位面积内包含的像素数量。分辨率直接影响着

2、图像文件的大小和图像质量的好坏，分辨率越高，图像文件越大，图像质量越好。6．1图像处理基础知识6．1．2RGB色彩模式人眼能够看到的只是光谱的一小部分，通常被称为可见光谱。色彩模型旨在描述人眼看到的和使用的颜色。每个色彩模型代表一种描述和分类色彩的方法，而所有的色彩模型都是用数值来代表可见的色彩光谱。数字图像处理常用的颜色模式有很多，包括灰度模式、RGB模式和CMYK模式。网页中的图像与图像处理都是基于RGB色彩模式的。GB模型也称为加色模型，RGB模型通常用于光照、视频和屏幕图像编辑。RGB色彩模式使用RG

3、B模型为图像中每一个像素的RGB分量分配一个0~255范围内的强度值。RGB图像是符合RGB颜色模型的，图像中每一个像素的颜色由存储在相应位置上的红、绿、蓝颜色分量共同决定。RGB图像是24位图像，红、绿、蓝分别占用8位，理论上可以包含16M种不同的颜色。6．1图像处理基础知识6．1．3位图与矢量图位图是由不同亮度和颜色的像素所组成，适合表现大量的图像细节，可以很好的反映明暗的变化、复杂的场景和颜色，它的特点是能表现逼真的图像效果，但是文件比较大，并且缩放时清晰度会降低并出现锯齿。位图有种类繁多的文件格式，常

4、见的有JPEG、PCX、BMP、PSD、PIC、GIF和TIFF等。位图图像效果好，但放大以后会失真，图6-2中的右图是将左图放大后的效果。图6-2位图放大后失真6．1图像处理基础知识6．1．3位图与矢量图而矢量图则使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的，所以矢量图形文件一般较小。矢量图形的优点是无论放大、缩小或旋转等都不会失真；缺点是难以表现色彩层次丰富的逼真图像效果，而且显示矢量图也需要花费一些时间。矢量图形主要用于插图、文字和可以

5、自由缩放的徽标等图形。一般常见的文件格式有AI等。矢量图图像效果差，放大以后不会失真。6．1图像处理基础知识6．1．4网页图像的格式每一种图像文件均有一个文件头，在文件头之后才是图像数据。文件头的内容一般包括文件类型、文件制作者、制作时间、版本号、文件大小等内容。各种图像文件的制作还涉及到图像文件的压缩方式和存储效率等。常用的图像文件存储格式主要有BMP、JPG、PCX、TIFF以及GIF等。在网页中常用的图像格式包括JPG和GIF两种。（1）JPG格式PEG是JointPhotographicExperts

6、Group（联合图像专家组）的缩写，文件后辍名为“．jpg”或“.jpeg”，是目前网络上最流行的图像格式，是可以把文件压缩到最小的格式。JPEG是一种有损压缩格式，能够将图像压缩在很小的储存空间。JPEG压缩技术十分先进，它用有损压缩方式去除冗余的图像数据，在获得极高的压缩率的同时能展现十分丰富生动的图像，换句话说，就是可以用最少的磁盘空间得到较好的图像品质。在Photoshop软件中以JPEG格式储存时，提供11级压缩级别，以0~10级表示。其中0级压缩比最高，图像品质最差。（2）GIF格式GIF是Gra

7、phicsInterchangeFormat的缩写，它是CompuServe公司于1987年推出的，全称是图形交换文件格式。该形式存储的文件主要是为不同系统平台上交流和传输图像提供方便。它是在Web及其他联机服务上常用的一种文件格式，用于超文本标记语言（HTML）文档中的索引颜色图像，但图像最大不能超过64MB，颜色最多为256色。GIF图像文件采取LZW压缩算法，存储效率高，支持多幅图像定序或覆盖，交错多屏幕绘图以及文本覆盖。6．1图像处理基础知识6．1．4网页图像的格式GIF主要是为数据流而设计的一种传输

8、格式，而不是作为文件的存储格式。换句话说，它具有顺序的组织形式。GIF有五个主要部分以固定顺序出现，所有部分均由一个或多个块（block）组成。每个块的第一个字节中存放标识码或特征码表示。这些部分的顺序为：文件标志快、逻辑屏幕扫描块、可选的“全局”色彩表快（调色板）、各图像数据块（或专用的块）以及尾块（结束码）。GIF格式支持动画，支持透明。6．1图像处理基础知识6．1．5了解PhotoshopPh