Photoshop在网页制作中的应用研究.docVIP

Photoshop在网页制作中的应用研究 　　摘 要：图像是网页中重要的要素之一，关系到网页的整体视觉效果，影响着网页的打开速度。对网页中图像元素的处理是网页制作中的重要环节。 　　关键词：Photoshop软件；网页图像；图像处理 　　中图分类号：G632 文献标识码：B 文章编号：1002-7661（2015）23-339-01 　　从视觉方面来看，网页由文字、图像和动画组成，三者之间的有机结合才能表现出色的视觉效果，图像是其中重要的视觉表现要素，占据了网页视觉空间的绝大部分，图像质量的高低直接影响网页的价值。Photoshop在图像处理方面有着出色的表现，方便快捷地处理网页图像。能够优化网页图像的质量，增加网页的美观度，提高网页的下载速度，提高网页的制作效率。 　　一、正确输出图像，优化网页速度 　　网页的下载速度不仅直接影响到用户的浏览体验、还关系到网页在搜索引擎中的排名参数。因此，优化网页、使之能快速下载是网页制作中必须考虑的因素。优化网页，提高下载速度的方法有很多，其中图像的正确处理极其重要。 　　1、采用合适的图像精度。网页是提供给阅读者在显示器上观看的，根据显示器的特性，图像的精度一般采用72dpi即可，这是屏幕分辨率，太高的分辨率并不能增强效果，反而会降低下载速度。有些图像原始文件的尺寸很大，而在网页中显示的区域是有限的，很多时候设计者采用在DW中缩小图像来实现，在DW中缩小图像并没有真正改变图像的大小，下载需要较长的时间，所以在输出图像时，要采用合适的大小，降低输出的精度。 　　2、选择合适的颜色深度。Gif格式的图像文件色彩深度越少文件也就越小，在肉眼可以接受的范围内，尽量将gif文件的色彩数量降低，对图像文件的大小进行有效的优化。如小图标、按钮、背景图案等图像文件对色彩的要求并不高，这些图像输出一般采用gif格式。对颜色要求不高的图像，采用64色的图像对比256色图像，输出后可以少掉一半还多的字节数，且效果完全能满足视觉要求。每个网站这种小图像往往会有几百张，每张图片都节省一些，最终可以节省很多空间。 　　3、输出正确的图像格式。不同的图像格式由于采用的压缩方法不同，显示效果差不多的图像其文件大小会有很大的差别。一般情况下色彩较少的图片使用png-8、gif格式文件，色彩变化丰富的图像则使用jpg格式，如果要使用在多种背景中，需要输出为透明格式时就需要选用gif格式。 Jpg格式的图片，需综合对比压缩品质高、中、低下的效果，尽量选择效果好且压缩品质较低的选项。输出图像时，可使用Photoshop的“存储为web所用格式”功能来输出，使用“存储为web所用格式”可以压缩约50%。 　　二、使用Photoshop进行网页布局 　　在网站规划建设中，网页布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼球，直接关系到网站的点击率。所以网页布局设计是否美观、规范、合理越来越受到网页制作师的重视。 　　1、布局规划。在设计网站的过程中，事先进行布局规划也是提高网站开发效率的有效方法。设计者在设计网站的过程中需要反复与客户进行交流、沟通、修改，而客户更看重就是布局的效果与使用的便捷性。当布局确定后，内容的组织、程序的设计就由程序设计者完成了。避免了程序设计好后反复修改界面的复杂性。Photoshop在设计布局中还有如下优势：Photoshop的灵魂是图层，每层可以放置不同的元素，图层之间可以相互链接，也可单独存放，每个图层上的图像位置可以随意挪动，每个图层上的图像大小、色阶、亮度、饱和度透明度等可单独设置。如此灵活的功能，完全可以让设计者随心所欲设计而不受任何约束。一个打开、下载速度慢的网站是没有价值的，心理学研究表明一个网站的下载时间超过10秒，人们会自动转向其它网站。决定下载速度的因素很多，其中网页大小、网页元素的优化和网络配置是重要的因素。其中网页大小与网页元素的优化是设计者需要解决的，使用Photoshop设计的网页经过裁切、整合处理后体积会小得多。 　　2、布局要点。网页文档一般为1007*600和708*800像素，分辨率为72像素。一般情况下，大型网站不要超过3屏。网站背景颜色与文件颜色要统一协调，导航字体一般用黑体，正文一般用宋体，其它字体可能会因为客户的浏览器不兼容而给工作带来麻烦。如果为增强页面效果用到其它字体，最好在Photoshop中制作然后切分。图文搭配要合理，图像大小要合乎美学原则，不能太大，一般用缩略图较好，如果要显示更多的图片细节，不妨给缩略图链接一个大的图片。要精确定位网页元素，可用对齐参考线的方法来实现，而参考线的精确定位可以借助标尺和网格来实现。网站的Logo、Banner或导航条等都是事先设计好的，有固定大小，在做这些区域时尺寸一定要