2016-06-13 00:00:00肖兰 PS图像处理
photoshop是一个功能强大的图像处理软件,不仅适用于广告用图、美术摄影作品的处理,也广泛用于网页图像元素的处理。下面是YJBYS小编为大家搜索整理的关于上好photoshop图像处理课程的方法与技巧,欢迎参考阅读,希望对大家有所帮助!想了解更多相关信息请持续关注我们应届毕业生培训网!
网页制作的工具很多,目前使用最为广泛的是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格式。
[PS图像处理]热门推荐
201
人