ps在html中的应用程序,网页制作中PS图像处理的应用

网页制作中PS图像处理的应用

photoshop是一个功能强大的图像处理软件，可以对各种格式的图像文件进行非常精细与独特的处理，不仅适用于广告用图、美术摄影作品的处理，也广泛用于网页图像元素的处理。下面YJBYS小编为大家搜索整理了关于网页制作中PS图像处理的应用，欢迎参考阅读，希望对大家有所帮助!想了解更多相关信息请持续关注我们应届毕业生培训网!

网页制作的工具很多，目前使用最为广泛的是Dreamweaver(简称DW)。实际上DW仅是一个网页元素的组织者，它把构成网页的各文字、图像、声音、视频、动画等元素有机的组织在一起。网页的美观效果主要取决于文字、图像的有机结合。在网页制作过程中，Photoshop有着极大的作用。但很多人对Photoshop这个图象软件在网页制作中对网页元素的整合作用认识不足，没有使这个软件发挥其应有的作用。针对此现象，本文根据实践经验对Photoshop在网页制作中图像处理的应用进行阐述。

一、正确输出图像，优化网页速度

网页的下载速度不仅直接影响到用户的浏览体验、还关系到网页在搜索引擎中的排名参数。因此，优化网页、使之能快速下载是网页制作中必须考虑的因素。优化网页，提高下载速度的方法有很多，其中图像的正确处理极其重要。

1.采用合适的图像精度

网页是提供给阅读者在显示器上观看的，根据显示器的特性，图像的精度一般采用72dpi即可，这是屏幕分辨率，太高的分辨率并不能增强效果，反而会降低下载速度。有些图像原始文件的尺寸很大，而在网页中显示的区域是有限的，很多时候设计者采用在DW中缩小图像来实现，在DW中缩小图像并没有真正改变图像的大小，下载需要较长的时间，所以在输出图像时，要采用合适的`大小，降低输出的精度。

2.选择合适的颜色深度

Gif格式的图像文件色彩深度越少文件也就越小，在肉眼可以接受的范围内，尽量将gif文件的色彩数量降低，对图像文件的大小进行有效的优化。如小图标、按钮、背景图案等图像文件对色彩的要求并不高，这些图像输出一般采用gif格式。对颜色要求不高的图像，采用64色的图像对比256色图像，输出后可以少掉一半还多的字节数，且效果完全能满足视觉要求。每个网站这种小图像往往会有几百张，每张图片都节省一些，最终可以节省很多空间。

3.输出正确的图像格式

不同的图像格式由于采用的压缩方法不同，显示效果差不多的图像其文件大小会有很大的差别。一般情况下色彩较少的图片使用png-8、gif格式文件，色彩变化丰富的图像则使用jpg格式，如果要使用在多种背景中，需要输出为透明格式时就需要选用gif格式。[1]Jpg格式的图片，需综合对比压缩品质高、中、低下的效果，尽量选择效果好且压缩品质较低的选项。输出图像时，可使用Photoshop的“存储为web所用格式”功能来输出，使用“存储为web所用格式”可以压缩约50%。

二、使用Photoshop进行网页布局

在网站规划建设中，网页布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼球，直接关系到网站的点击率。所以网页布局设计是否美观、规范、合理越来越受到网页制作师的重视。

1.布局规划

在设计网站的过程中，事先进行布局规划也是提高网站开发效率的有效方法。设计者在设计网站的过程中需要反复与客户进行交流、沟通、修改，而客户更看重就是布局的效果与使用的便捷性。当布局确定后，内容的组织、程序的设计就由程序设计者完成了。避免了程序设计好后反复修改界面的复杂性。Photoshop在设计布局中还有如下优势：

Photoshop的灵魂是图层，每层可以放置不同的元素，图层之间可以相互链接，也可单独存放，每个图层上的图像位置可以随意挪动，每个图层上的图像大小、色阶、亮度、饱和度透明度等可单独设置。如此灵活的功能，完全可以让设计者随心所欲设计而不受任何约束。

一个打开、下载速度慢的网站是没有价值的，心理学研究表明一个网站的下载时间超过10秒，人们会自动转向其它网站。决定下载速度的因素很多，其中网页大小、网页元素的优化和网络配置是重要的因素。其中网页大小与网页元素的优化是设计者需要解决的，使用Photoshop设计的网页经过裁切、整合处理后体积会小得多。

2.布局要点

网页文档一般为1007*600和708*800像素，分辨率为72像素。一般情况下，大型网站不要超过3屏。网站背景颜色与文件颜色要统一协调，导航字体一般用黑体，正文一般用宋体，其它字体可能会因为客户的浏览器不兼容而给工作带来麻烦。如果为增强页面效果用到其它字体，最好在Photoshop中制作然后切分。图文搭配要合理，图像大小要合乎美学原则，不能太大，一般用缩略图较好，如果要显示更多的图片细节，不妨给缩略图链接一个大的图片。

要精确定位网页元素，可用对齐参考线的方法来实现，而参考线的精确定位可以借助标尺和网格来实现。网站的Logo、Banner或导航条等都是事先设计好的，有固定大小，在做这些区域时尺寸一定要按照这些元素尺寸设计，否则进入DW整合时，可能出现空边或撑开表格的现象。

3.活用“切片”

利用Photoshop做好布局效果图后，关键的一步就是“切片”。只有正确地切片，DW才能对效果图进行有效的整合。

切片时要用好参考线。参考线能保证我们切出的图像在同一表格中的尺寸统一协调，有效避免“留白”和“爆边”。为提高Logo和Banner的显示效果，如果效果图中存在Logo和Banner，必须将这些切片然后在DW中用Logo和Banner的原文档替换。大的图像必须切分成均匀的图像，这样可以提高网页下载速度。导航条一般都是特别设计的，其效果在DW难以实现，所以也必须切片后供后期使用。存储切片的文件夹必须是英文名字，存储切片时建议使用用“文件—存储为web所用格式”命令。如无特殊要求，切片的存储格式要求使用Gif格式。