第2章网页图形图像设计.pptVIP

2.3.1 图像的布局 动态网页设计教程——美工与技术 2.3.2 图像尺寸与规格 网页中所使用的图形，大部分都是使用JPG、GIF、PNG三种格式。GIF文件因为只有256中颜色，因此文件最小。用JPG处理照片比较合适，因为里面包含许多色彩的缓和变化。不管是哪种，做好后都应压缩以给图片减肥，但不要压的太多而失真。这两种格式除了具有压缩比高、利于浏览和下载的优点外，还具有跨平台的特性。不管浏览者使用何种操作系统或浏览工具，都可以直接从浏览器上看到这两种格式的图片。PNG格式支持网页下载过程先显示出轮廓然后逐步清晰的方式，但文件大小最大，不存在优势。 动态网页设计教程——美工与技术 2.3.2 图像尺寸与规格 网页图片的特点是图片质量不需很高。因为网络图片一般只显示于计算机的显示器上，受显示器最小分辨率的限制，即使图片的分辨率很高，颜色深度很大，我们的肉眼也经常无法把它和一幅处理过的普通图片区分开来。一般来说，打印分辨率为72dpi（像素/英寸）是大多数图片最佳选择；另一个特点是，图片要尽量小。网络页面的图片用于网络的传输，受到带宽的限制,文件的大小越小，下载的时间就会越短。 在设计效果图时，我们需要注意，由于网页是需要用浏览器打开显示的，需要考虑浏览器的菜单、工具栏、滚动条等窗口元素所占据的空间，不考虑插件的问题，当显示器的屏幕分辨率为800×600像素时，网页效果图尺寸设计成775×435是可以的。当显示器的屏幕分辨率为1024×768像素时，网页尺寸设计成1003×600像素是可以的，注意设置网页的左右、上下边距为0。 动态网页设计教程——美工与技术 2.3.3 图像切片与优化 制作网页图像切片的目的是为了获得图片素材并对图片进行优化，使得整个图片分为多个不同的小图片分开下载，这样下载的时间就大大地缩短了，从而提高网页加载的速度，能够通过网页设计软件实现效果的部分，就不需要切片，而必须用图像的地方，则一定要切片。另外，通过切片可以导出不同类型的图片，从而有效的减小图片的大小，再有就是切片之后的图片便于设置超级链接。 动态网页设计教程——美工与技术 Company Logo 2.3.3 图像切片与优化 所谓优化是指图片尽可能的小，既包括文件的大小，又包括尺寸的大小，能用均匀过度颜色或单一颜色尽可能使用，尽量使用GIF文件格式。能用一个像素宽度解决背景的平铺问题就绝对不用两个像素。能用背景颜色表示的就绝不用背景图片。图像优化应根据文件类型选择不同的文件格式。例如，如果图中重复颜色区域较多的话，则适于使用GIF格式，如果图中重复颜色区域较多的话，则适于使用GIF格式，对于这种格式，可以在Fireworks软件优化面板中使用抖动来补偿因颜色减少而造成的图像质量下降。对于JPEG格式，可以在Fireworks软件优化面板中使用平滑来使图像稍微模糊，从而减小图像大小，一般照片使用 JPEG格式更好一些。 动态网页设计教程——美工与技术 2.3.4 图像数量 图像要做到精炼简介，数量过多，图片所占的空间过大，都会影响网页的下载速度。因此网页中放置图片一定要做到少而精。如果图片的内容与网页的主题不相符，就会干扰浏览者的注意力。在设计边框等装饰性图案时，尽可能考虑用CSS样式中的线形，尽可能将花纹与背景图片分开处理，这样在设计背景加图案时，背景将能够重复使用，从而减少图像的数量。 动态网页设计教程——美工与技术 2.4 网页图形图像设计的技巧 在网页设计时，运用组合、对比、均衡、节奏、统一等构成方法将它们进行安排，互相补充，互相衬托，就可以创造出形式多样，引人注目的网页，从而将网站的信息有效地传达给浏览者。 动态网页设计教程——美工与技术 2.4.1 合理造型，精于构成 动态网页设计教程——美工与技术 2.4.1 合理造型，精于构成 设计分析：上海大众昆明公司网页加载的过程中将公司圆形标志展现在屏幕中央，给人以焦点的感觉，形成视觉的注意。将线运用曲线方式展现，形成流畅的曲线美，使网页效果特性十足。打破方形的布局，将面的造型进行创造，形成一种不安定、新奇感。将点线面进行融合设计，突出网页诉求的重点，通过色彩与比例关系，通过对比将人们的视线引入，配以整齐的导航链接，形成其独特的艺术风格，给人大气与稳重的感觉。 设计指导：从上海大众的网页中我们可以看出这是一个点线面构成设计俱佳的网页，从中分析其成功之处在于合理处理造型，并保持一致性，简单中求变化，和谐中求创新。 动态网页设计教程——美工与技术 2.4.2 量体裁衣，巧用造型 动态网页设计教程——美工与技术 2.4.2 量体裁衣，巧用造型 动态网页设计教程——美工与技术 2.4.2 量体裁衣，巧用造型 设计分析：SONY公司的网站图像的设计中，采用了方形的设计，使整个网页