网站设计与建设-在线预览.pptxVIP

网 站 设 计 与 建 设 Website design and developments;第3章 图形与Web设计;3．1 网站图像的重要性;3．2 网站图像常用规则;④图像的文件尺寸应该要足够小 ⑤图像尽量避免使用高分辨率的真彩照片;3．3 数字图像;4．图像分辨率;5．显示器设备分辨率;2．颜色深度(像素深度);调色板 在一个窗口可以显示256种颜色，每一副图像都具有独立的256个调色板，显示时更换调色板便可满足各幅图像的颜色要求。系统在系统调色板中保存着256种颜色。;8．抖动;Web安全的颜色调色板 Web 安全颜色是浏览器使用的由8位显示器支持的 216 种颜色，与平台无关。 在 8 位屏幕上显示颜色时，浏览器将图像中的所有颜色更改成这些颜色。;10．图像压缩;3．4 位图图像和矢量图形;常用的位图图像工具有： ①Adobe Photoshop ② Adobe Fireworks ③Microsoft 画图 ④Corel Paint Shop Pro X ⑤Corel Painter IX;Photoshop人物照片换头术; 使用“套索工具”围绕头部绘制一个如图3所示的选区。; 选择工具箱中的“橡皮擦工具”，设置合适的画笔大小(可以按快捷键[或]来改变画笔大小)，适当放大视图，然后沿头像的面部边缘擦除多余的像素， 选择工具箱中的“仿 制图章工具”，如果 此前擦除像素后露出 了底部图层中的耳朵，则现在需要将它去除。克隆背景像素，将耳 朵掩盖掉; 选择菜单命令“图像|调整|色相/饱和度” ，对两个图层都进行色相/饱和度调整，以使得两部分的色调能够互相吻合，使人看不出破 绽。;矢量图形(Vector) 矢量图形由被称为矢量的数学对象定义的线条和曲线组成。 矢量根据图像的几何特性描绘图像。 调整其大小或更改其颜色时不会降低图形的品质，;常用的矢量图形工具有： ①Adobe Illustrator CS3 ②Adobe Flash ③CorelDRAW Graphics Suite X3;Adobe Illustration;3．5 常用图形文件格式;1)GIF;无损压缩。 基于LZW算法的连续色调的无损压缩格式。 提取原始文本文件数据中的不同字符，基于这些字符创建一个编译表，然后用编译表中的字符的索引来替代原始文本文件数据中的相应字符，减少原始数据大小。 看起来和调色板图象的实现原理差不多 其压缩率一般在50%左右 GIF 压缩格式的优点之一: “渐显” GIF与只包含少??清晰颜色的图像（如线条画和黑白图像）一起使用时，GIF 格式的图形为最佳选择;2)JPEG;3)JPEG2000 JPEG2000 作为JPEG的升级版 JPEG2000 同时支持有损和无损压缩，而 JPEG 只能支持有损压缩。 实现渐进传输，即先传输图像的轮廓，然后逐步传输数据，不断提高图像质量，让图象由朦胧到清晰显示 JPEG2000还支持所谓的“感兴趣区域”特性，可以任意指定影像上感兴趣区域的压缩质量，还可以选择指定的部份先解压缩。 JPEG 2000 和 JPEG 相比优势明显，且向下兼容 JPEG2000可应用于传统的JPEG市场，如扫描仪、数 码相机等，亦可应用于新兴领域，如网路传输、无线通讯等等。;4)PNG;5) BMP;6)TIFF;7)PSD Photoshop的专用格式Photoshop Document（PSD）。 包含有各种图层、通道、遮罩等多种设计的样稿，以便于下次打开文件时可以修改上一次的设计。 8)SWF 利用Flash可以制作出一种后缀名为SWF（Shockwave Format）的动画， 这种格式的动画图像能够用比较小的体积来表现丰富的多媒体形式。 SWF动画是基于矢量技术制作的;9)SVG：;?xml version=1.0 standalone=no? svg width=15cm height=10cm viewBox=0 0 1500 1000 xmlns=/2000/svg xmlns:xlink=/1999/xlink desc圆形实例/desc circle cx=100 cy=350 r=100 fill=red stroke=blue stroke-width=5 / circle cx=300 cy=350 r=200 fill=green stroke=blue stroke-width=5 / circle cx=700 cy=350 r=300 fill=blue stroke=blue stroke-width=5 / /svg