当前位置:首页>ps实例教程>ps网页设计>网页模板>教程内容

photoshop与网页布局设计的关系

来源:未知 作者:福特少普ps 学习:12094人次
当今网络已经成为人们生活的重要组成部分,由此一个新兴的专业---网页设计诞生了。部分技工学校为适应这个职业对人才的需求纷纷开设了网络工程专业。但是在培养网页设计人员的过程中一些教师由于缺乏网页设计实践经验,对photoshop这个图象软件在网页设计中对网页元素的整合作用认识不足,没有使这个软件发挥其应有的作用。本文针对这个现象,对photoshop在网页设计和规划中的作用和意义以及运用photoshop进行网页规划时应注意的问题作了论述,特别是对photoshop的切片功能和操作方法做了详细的说明,这对于初学网页设计的人员来说更具有指导意义。  关键词:网页设计 photoshop布局
  现在是IT时代,几乎没有哪一行能和网络脱离关系,因此网站的规划与建设已经成为一项专门职业。在网站规划建设中,网页布局设计是其至关重要的一环,它关系到网站能否吸引更多人的眼球,直接反映网站的点击率,而点击率正是网站的生命所在。所以网页布局设计是否美观、规范、合理越来越受到网页设计师的重视。
  网页布局设计的软件很多,如Dreamweaver 、FrontPage等都可胜任,但是初学者往往是一上手就使用Dreamweaver等进行规划布局,结果使网站建设延期,下载速度降低,更糟的是合同违约,失掉客户,造成不可估量的损失。纠其原因,关键是忽视了photoshop在网页规划布局中的作用。初学者知道photoshop是图像处理软件,但只是把它用来解决一般图像裁切、调整、优化,而忽视它在网页布局设计中的重要作用。
一、photoshop在网页布局设计中的作用


案例一:IBM中文官方网站

案例二:清华大学中文官方网站
  通过以上案例,我们发现这些网站设计风格简约,页面布局规范,有章可循,栏目放置有序,主次关系分明,浏览速度很快,其实从专业角度看这些都是photoshop的功劳。
  1、 photoshop在网页布局计划中的作用
  ①布局灵活:photoshop的灵魂是图层,每层可以放置不同的元素,图层之间可以相互链接,也可单独存放,每个图层上的图像位置可以随意挪动而不影响其它图层的图像位置,每个图层上的图像大小、色阶、亮度、饱和度透明度等可单独设置而不影响其它图层上的图像。如此灵活的功能,完全可以让设计者随心所欲设计而不受任何约束,而Dreamweaver等软件给设计者提供出自由度降低很多,其效果也会大打折扣。
  ②修改方便:网站建设前期首先要与客户签定合同,签定合同时客户最关心的是自己的网站是什么样子,这时设计者不可能拿出建好的网站给客户演示,这样一是成本太高,合同能否签定还不一定;二是保护知识产权,有的客户拿走设计方案交给别的公司去做,自己岂不成了给别人做嫁衣裳。最好的办法是拿出在photoshop中做出的效果图给客户看。一般情况下,客户一次满意率非常低,总会提出修改意见,而且还会不断地提出修改方案。这时我们就可以利用photoshop的强大功能按客户的要求方便地进行修改和优化,直到客户满意为止。如果在Dreamweaver下,每做一次大的修改,几乎跟重新设计一样费时费力,而且还不一定能达到客户要求。
  ③加快浏览进度。一个设计不美观不规范的网站是没有生命力,同样一个打开、下载速度慢的网站也是没有存在的价值。心理学研究表明,选择性越多,人的忍耐性越差;可选择性越大,人的忍耐性越低。在互联网高度发展的今天,同类网站多如牛毛,人们没必要在一个网站前停驻静侯你一点一点地下载、打开、测试、显示。一般情况下,下载速度一旦超过10秒,人们会自动转向其它网站。决定下载速度的因素很多,如服务器配置标准、网络传输介质、客户机的配置以及同时点击人数的多少等。但是在这些条件相同时,网页大小及网页元素的优化和配置就是唯一的因素。使用photoshop设计的网页经过裁切后体积相对要小得多,相同的元素因为其格式变化也会大大提高下载速度,因此photoshop就成了提高速度,提高点击率的制胜法宝。

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
海盗十二郎2011-03-10 11:36
<给力>
帅帅来了2010-12-08 06:26
正在学网页制作呢
GOGOW2010-11-25 05:41
谢谢分享
朝朝暮暮2010-10-29 10:28
这篇文章挺好的!
wangxiaoyu2010-10-29 05:41
<给力>
没哥2010-10-23 12:04
恩,好东西,收获良多

关注大神微博加入>>

网友求助,请回答!