摘 要:网页制作的工具很多,方法很多。目前通用的网站制作工具是Dreamweaver,图像是网页中必不可少的元素,Photoshop因其图像处理的强大功能在网页制作中也发挥着巨大的作用。正确使用Photoshop处理图像可以增加网页的美观,提高网页的下载速度,提高网页的制作效率。
关键词:网页优化;图像格式;图像特效;网页布局
网络已成为人们生活的重要组成部分,由此一个新兴的专业——网页设计诞生了。网页设计的工具很多,目前使用最为广泛的是Dreamweaver(简称DW)。实际上DW仅是一个网页元素的组织者,它把构成网页的各文字、图像、声音、视频、动画等元素有机的组织在一起。网页的美观效果主要取决于文字、图像的有机结合。在网页设计过程中,Photoshop有着极大的作用。但很多人对Photoshop这个图象软件在网页设计中对网页元素的整合作用认识不足,没有使这个软件发挥其应有的作用。针对此现象,本文根据实践经验对Photoshop在网页设计中的作用进行了阐述。
一、 正确输出图像,优化网页速度
网页的下载速度不仅直接影响到用户的浏览体验、还关系到网页在搜索引擎中的排名参数。因此,优化网页、使之能快速下载是网页制作中必须考虑的因素。优化网页,提高下载速度的方法有很多,其中图像的正确处理极其重要。
1、 采用合适的图像精度
网页是提供给阅读者在显示器上观看的,根据显示器的特性,图像的精度一般采用72dpi即可,这是屏幕分辨率,太高的分辨率并不能增强效果,反而会降低下载速度。有些图像原始文件的尺寸很大,而在网页中显示的区域是有限的,很多时候设计者采用在DW中缩小图像来实现,在DW中缩小图像并没有真正改变图像的大小,下载需要较长的时间,所以在输出图像时,要采用合适的大小,降低输出的精度。
2、 选择合适的颜色深度
Gif格式的图像文件色彩深度越少文件也就越小,在肉眼可以接受的范围内,尽量将gif文件的色彩数量降低,对图像文件的大小进行有效的优化。如小图标、按钮、背景图案等图像文件对色彩的要求并不高,这些图像输出一般采用gif格式。对颜色要求不高的图像,采用64色的图像对比256色图像,输出后可以少掉一半还多的字节数,且效果完全能满足视觉要求。每个网站这种小图像往往会有几百张,每张图片都节省一些,最终可以节省很多空间。
3、 输出正确的图像格式
不同的图像格式由于采用的压缩方法不同,显示效果差不多的图像其文件大小会有很大的差别。一般情况下色彩较少的图片使用png-8、gif格式文件,色彩变化丰富的图像则使用jpg格式,如果要使用在多种背景中,需要输出为透明格式时就需要选用gif格式。
在DW中对切片进行整合时,要考虑以下几个原则:能使用纯颜色代替区域不要使用图像文件,能用小图像代替的就不要用大图像,切片区域要尽量整齐规整以防止在使用过程中表格错位。
三、 设计图像特效
在网页设计过程中,往往需要一些特殊的效果美化网页。如虚线、变幻线、阴影、圆角表格、异型表格装饰等等,这些效果在DW中无法直接实现,可以先在Photoshop中绘制相应
效果,然后裁切成小图片在DW中进行整合即可。
在网页设计中,最常用的字体是黑体和宋体,其它的字体在客户浏览器中可能不支持,为了保证客户所看到的网页效果与设计效果一致,对于标题、广告等需要使用特殊字体的内容,都需要在Photoshop中设计好后,转换成图像文件整合到网页中。.北京:兵器工业出版社,2008.375~390.