图像尽量避免使用高分辨率的真彩照片使用Web标准调色板.PPT

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材 山东大学计算机科学与技术学院 《 网 站 规 划 与 网 页 设 计 》 《 网 站 规 划 与 网 页 设 计 》 普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材 山东大学计算机科学与技术学院 第3章 图形与Web设计 * 网站图像的重要性 Web图像设计原则 数字图像基本概念 位图和向量图像 Web图像文件格式 概 述 * 网站图像的重要性：不同于一般图像 网站的徽标、网站艺术体名称、导航、按钮、新闻照片和页面修饰等，无一能离开图像。 网页中的文字信息分为两种：一种为HTML的纯文本，另一种为图像中的文字信息。 图像除了给我们视觉冲击效果外，还为网站主体表达了寓意。 图像要求：爽心悦目、简洁、贴现网站的本质。 图像重点考虑的问题：文件大小、下载速度、禁止滥用图形、协调。 Intranet面向功能；Internet面向展示。 * 网站图像的重要性 – 续 * Web图像设计原则 网站徽标应适宜大小放在主页左上方 网站标题应放在主页徽标的右边 网站图像与网站色系协调一致 图像的文件尺寸应该要足够小，图像大小适于展现窗口即可。 图像尽量避免使用高分辨率的真彩照片 使用Web标准调色板，避免抖动 尽可能使用纯色，混合颜色会加大文件 在网页中勿滥用图像 Internet和Intranet的图像区别 切割大幅图像 * 3.数字图像的基本概念 数字图像可以被看成一个矩阵或一个二维数组 像素：计算机显示器是由行列组成栅格，每一个栅格可以显示一个图像元素，这些图像元素叫做像素。像素是计算机显示器显示的最小单元，每一个像素在某一时刻只能显示一种颜色 。 颜色深度：使用颜色位数描述颜色的深度，用来度量图像中有多少颜色信息可用于显示或打印像素。颜色深度决定了每一个像素可以显示多少颜色。表示颜色的位值2的指数，即位深度: 28=256，216=65536，224=16,777,216，232=16,777,216+8位灰度掩模； * 3.数字图像的基本概念 – 续1 显示器分辨率：显示图像的精度，分辨率越高，显示的图像越清晰，图像文字越小。最常用的标准显示器的分辨率是800×600 (屏幕宽×屏幕高)。640*480，800*600，1024*768，1280*1024。 图像分辨率：以每英寸的像素数(PPI)来衡量，分辨率越高，在每英寸上看见得细节就越清楚，图像越精细，质量越好，数据量也越大。例如图像分辨率为500PPI，就是每英寸有500个像素。 显示器设备分辨率：显示器上每单位长度显示的像素或点的数量，通常以点/英寸 (dpi) 来表示。大多数新显示器的分辨率大约为 96 dpi，而较早的 Mac OS 显示器的分辨率为 72 dpi。 * 3.数字图像的基本概念 – 续2 打印机分辨率：所有激光打印机(包括照排机)产生的每英寸的油墨点数 (dpi)。多数桌面激光打印机的分辨率为 600 dpi，而照排机的分辨率为 1200 dpi 或更高。喷墨打印机产生的是极小的墨粒，而不是实际的点；但大多数喷墨打印机的分辨率均约为 300 到 720 dpi。 调色板：在一个窗口可以显示256种颜色，每一副图像都具有独立的256个调色板，显示时更换调色板便可满足各幅图像的颜色要求。系统在系统调色板中保存着256种颜色。 * 3.数字图像的基本概念 – 续3 抖动：是在图像调色板和系统调色板之间调和，图像调色板上的颜色被和系统调色板上匹配的颜色所替代，如果系统不能找到匹配的颜色，它会使用它认为合适的颜色，这就可能导致异常的颜色组合！为了防止抖动的发生，图像应该使用Web安全颜色调色板上的颜色。 Web安全的颜色调色板：浏览器仅保证了216种颜色，每一个浏览器最多可以显示256种颜色，操作系统使用其中的40种专属颜色，因此Web图像只可以使用剩余的216种颜色，所有其他的颜色都要抖动，即用这216种相近的颜色所取代。 * 3.数字图像的基本概念 – 续4 图像压缩：是指以较少的比特有损或无损地表示原来的像素矩阵的技术。 Web图像大小一般应该为几K字节到几十K字节，不应该太大。 * 4.位图图像 位图：位图图像(栅格图像)使用颜色网格(像素）来表现图像。每个像素都有自己特定的位置和颜色值，显示速度比矢量图形快。 PNG、JPEG、GIF格式都是位图。 如果增加图像的尺寸，文件的大小就会增加。 当放大查看时，位图由一系列的小方块表示，每一个方块使用同一种颜色。 在处理位图像时，所编辑的是像素，而不是对象或形状。 缺点：原始文件尺寸大，适用于照片阴影等。 位图处理工具： Adobe Photoshop CS6 Adobe Fireworks