《网页设计与制作应用教程》课件——CH9 网页图像基础知识.pptxVIP

第3版HTML5DreamweaverPhotoshopCSS3AnimateAdobeCC网页设计与制作应用教程

第三部分AdobePhotoshopCC应用篇

目录CONTENTSCH9网页图像基础知识CH10CH11CH12CH13CH14CH15PhotoshopCC2018初识图像校正和快速修复图像色彩调整蒙版和通道文字设计和矢量绘制制作网页主要元素CH16使用Photoshop设计网站页面

网页设计与制作第9章网页图像基础知识

网页图像基础? 图像分辨率位图与矢量图网页配色色彩原理ADCB延迟符号本章要点：

9.1基本概念像素和分辨率像素是组成图像的最小单位，它们就是一个个有颜色的方格，每一个像素都有一个明确的位置和色彩值，文件中的像素的多少决定着在屏幕上呈现的文件的大小，像素越多，文件越大，图像的品质越好。分辨率是指单位长度上像素的数目，其单位为像素/英寸(ppi,pixels/inch)。分辨率对于了解与制作数字图像是非常重要的。分辨率可以分为图像分辨率、屏幕分辨率、输出分辨率和位分辨率等。

位图和矢量图位图位图又称为点阵图像（或栅格图像），是由众多的像素点组成的。这些点可以进行不同的排列和染色以构成图样，当放大位图时，可以看见赖以构成整个图像的无数单个方块。位图与分辨率有关，这意味着，描述图像的数据被固定到一个特定大小的网格中。放大位图尺寸的效果是增大单个像素，这些像素在网格中重新进行分布，扩大位图放大到一定比例，这会使图像的边缘呈锯齿状，并且会丢失细节。在一个分辨率比图像自身分辨率低的输出设备上显示位图会降低图像品质。

位图和矢量图矢量图矢量图又称为向量图像，它是根据几何特性，以数学公式来定义的点、直线和曲线组成的图形，内容以线条和色块为主。文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。矢量图形与分辨率无关，这意味着，当更改矢量图形的颜色、移动矢量图形、调整矢量图形的大小、更改矢量图形的形状或者更改输出设备的分辨率时，其外观品质不会发生变化。进一步明确矢量图的特点就是放大后图像不会失真，和分辨率无关，文件占用空间较小，适用于图形设计、文字设计和一些标志设计、版式设计等。

位图矢量图

图像文件常用的图片格式只有PNG、GIF和JPEG三种。PNG格式是一种新型的图像格式，其压缩比高，且属于无损压缩，支持真彩色及透明背景等多种图像特征，并能够保存编辑时的所有信息，在任何时候都可以进行编辑和修改。但只有高版本的浏览器才支持这种文件格式，而且不能完全支持PNG格式文件的所有特性。GIF格式常用无损压缩算法，其压缩比高，文件较小，最多支持256色，同时支持静态和动态两种形式，适合显示色调不连续或具有大面积单一颜色的图像。JPEG格式常用有损压缩算法，支持真彩色，适合显示摄影或连续色调图像。随着JPEG格式文件品质的提高，文件的大小也随之增加。网页图片文件的格式

9.2色彩基础知识视觉所感知的一切色彩现象，都具有基本的构成要素。彩色中的任何一种颜色都包含3个基本要素——明度、色相和纯度。

明度是指光作用于人眼时所引起的明暗或深浅程度，即颜色的相对色调或明亮程度，通常也称为“亮度”、“光度”。人之所以能看到物体的明暗，是因为不同的物体反射的光的量不同。

色相是色彩中最主要的特征，是色彩所表现出来的相貌，是色彩的种类，又称“色度”。色相的差异与物体发射或反射的光波长有关，眼睛通过对不同光波波长的感受，可以区分不同的颜色。

纯度指色彩的纯粹纯度，又称“彩度”、“饱和度”、“艳度”。纯度取决于色彩波长的单一程度。简单的讲，光波波长越单纯，则色光越鲜明。不同的色相不但明度不同，纯度也不同。

三基色原理是指自然界常见的各种可见光，都可由红（Red）、绿（Green）、蓝（Blue）三种颜色光按不同比例相配而成。同样，绝大多数可见光也可以分解成红、绿、蓝三种色光。三基色原理

颜色模式颜色模式

RGB颜色模式在RGB颜色模式中，图像中的每个像素值都分成R、G、B三个基色分量，每个基色分量直接决定其基色的强度，这样产生的色彩称为真彩色。若R、G、B各用8位来表示各自基色分量的强度，每个基色分量的强度等级为28＝256种，图像可容纳224＝16M种色彩。这样得到的色彩可以较好反映原图的真实色彩，故称真彩色。

HSL颜色模式HSL（Hue、Saturation、Lightnes）颜色模式是用H、S和L三个参数来生成颜色。其中，H为颜色的色调，改变它的数值可以生成不同的颜色；S为颜色的饱和度，改变它可以改变颜色的深浅；L为颜色的亮度，改变它可以使颜色变亮或变暗。HSL颜色模式更符合人的视觉特性，更接近人对彩色的认识和解释。对某一颜色，人眼分辨不出其中R、G、B的比例