Photoshop 网页布局设计的关系

　　关键词：网页设计 Photoshop 布局

　　现在是IT时代，几乎没有哪一行能和网络脱离关系，因此网站的规划与建设已经成为一项专门职业。在网站规划建设中，网页布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼球，直接反映网站的点击率，而点击率正是网站的生命所在。所以网页布局设计是否美观、规范、合理越来越受到网页设计师的重视。

　　网页布局设计的软件很多，如Dreamweaver 、FrontPage 等都可胜任，但是初学者往往是一上手就使用Dreamweaver等进行规划布局，结果使网站建设延期，下载速度降低，更糟的是合同违约，失掉客户，造成不可估量的损失。纠其原因，关键是忽视了Photoshop在网页规划布局中的作用。初学者知道Photoshop是图像处理软件，但只是把它用来解决一般图像裁切、调整、优化，而忽视它在网页布局设计中的重要作用。

一、Photoshop在网页布局设计中的作用

案例一:IBM中文官方网站

案例二:清华大学中文官方网站

　　通过以上案例，我们发现这些网站设计风格简约，页面布局规范，有章可循，栏目放置有序，主次关系分明，浏览速度很快，其实从专业角度看这些都是Photoshop的功劳。

　　1、 Photoshop在网页布局计划中的作用

　　①布局灵活：Photoshop的灵魂是图层，每层可以放置不同的元素，图层之间可以相互链接，也可单独存放，每个图层上的图像位置可以随意挪动而不影响其它图层的图像位置，每个图层上的图像大小、色阶、亮度、饱和度透明度等可单独设置而不影响其它图层上的图像。如此灵活的功能，完全可以让设计者随心所欲设计而不受任何约束，而Dreamweaver等软件给设计者提供出自由度降低很多，其效果也会大打折扣。

　　②修改方便：网站建设前期首先要与客户签定合同，签定合同时客户最关心的是自己的网站是什么样子，这时设计者不可能拿出建好的网站给客户演示，这样一是成本太高，合同能否签定还不一定;二是保护知识产权，有的客户拿走设计方案交给别的公司去做，自己岂不成了给别人做嫁衣裳。最好的办法是拿出在Photoshop中做出的效果图给客户看。一般情况下，客户一次满意率非常低，总会提出修改意见，而且还会不断地提出修改方案。这时我们就可以利用Photoshop的强大功能按客户的要求方便地进行修改和优化，直到客户满意为止。如果在Dreamweaver下，每做一次大的修改，几乎跟重新设计一样费时费力，而且还不一定能达到客户要求。

　　③加快浏览进度。一个设计不美观不规范的网站是没有生命力，同样一个打开、下载速度慢的网站也是没有存在的价值。心理学研究表明，选择性越多，人的忍耐性越差;可选择性越大，人的忍耐性越低。在互联网高度发展的今天，同类网站多如牛毛，人们没必要在一个网站前停驻静侯你一点一点地下载、打开、测试、显示。一般情况下，下载速度一旦超过10秒，人们会自动转向其它网站。决定下载速度的因素很多，如服务器配置标准、网络传输介质、客户机的配置以及同时点击人数的多少等。但是在这些条件相同时，网页大小及网页元素的优化和配置就是唯一的因素。使用Photoshop设计的网页经过裁切后体积相对要小得多，相同的元素因为其格式变化也会大大提高下载速度，因此Photoshop就成了提高速度，提高点击率的制胜法宝。

　　二、用Photoshop设计网页布局应注意的几个问题

　　1、 网页文档尺寸与分辨率。网页文档一般为1007*600和708*800像素，分辨率为72像素，这是屏幕分辨率，太高的分辨率并不能增强效果，反而会降低下载速度。一般情况下，大型网站不要超过3屏。

　　2、 颜色：网站背景颜色与文件颜色要统一协调，一般不要超过两种，一些网站被批评为脏、乱、差，其要害是颜色搭配不合理，或者太多，给人一种不舒服的感觉。

　　3、 字体，标题。导航字体一般用黑体，正文一般用宋体，其它字体浏览器不兼容，可能造成调试时出错，给工作带来麻烦。如果为增强页面效果用到其它字体，则最好在用Dreamweaver前在Photoshop切分及图片，字体的颜色设置要考虑到整个页面效果。

　　4、 布局格式：虽然效果图是用Photoshop设计的，但一定要兼顾到Dreamweaver对页面布局的要求，Dreamweaver下网页布局是使用‘国’字形，还是其他模式，是否使用框架，使用框架的类型是哪一种，都是在设计前要考虑到的。否则会造成效果图与最后的网站布局出现出入，给客户和自身带来麻烦和损失。

　　5、 图文搭配：一个好的网站是图片多好还是文字多好，这要视网站的功能、行业、目的而定，但有个原则就是图文合理配置，而图片则要按一定的空间分布进行和谐分布。另外，图片大小要合乎美学原则，不能太大，一般用缩略图较好，如果要显示更多的图片细节，不妨给缩略图链接一个大的图片。

　　6、科学使用参考线。参考线是设计页面布局的有效辅助工具，我们可以先用横参考线将网页布局分成几大版块，然后用竖参考线将每个板块按我们的思路分为几个小板块，最后再整体观察一下。要精确定位网页元素，可用对齐参考线的方法来实现：“视图”—“对齐到”—“参考线”，而参考线的精确定位可以借助标尺和网格来实现，这里要注意的是网站的Logo和Banner或者导航条等都是事先设计好的，有固定大小，在做这些区域时尺寸一定要按照这些元素尺寸设计，不能有丝毫差错，否则进入DreamWeaver整合时，则可能出现空边或撑开表格的现象。

　　三、“切片”工具是Photoshop通向DreamWeaver的桥梁。

　　利用Photoshop效果图最终与客户签合同后，还不是Photoshop设计网页布局的终结，而还有关键的一步，就是“切片”，只有正确地切片后，DreamWeaver才能对效果图进行有效的整合，Photoshop在网页布局中的积极作用才发挥到了极致。要完成“切片”这关键的一步，应遵循以下原则：

　　1、必须依靠参考线。设计时用到参考线，切图时更要用好参考线。参考线能保证我们切出图在同一表格中的尺寸统一协调，有效避免“留白”和“爆边”。

　　2、 Logo和Banner必切。如果效果图中存在Logo和Banner,我们必须切片这部分，主要是为预先设计的Logo和Banner留下空间，在DreamWeaver整合时最好不用Logo和Banner的切片，而是直接用Logo和Banner原文档，这是提高Logo和Banner效果的需要。

　　3、虚线和转角形状必切。虚线和转角形状在DreamWeaver 不能实现，只能使用Photoshop切片。

　　4、渐变必切。这也是Dream Weaver实现不了的。

　　5、大图必切。大的图像必须切分成均匀图，这样可以提高网页下载速度。

　　6、特殊文字效果必切。除黑体和宋体外，其他字体必须切片。DreamWeaver下最有效的字体只有宋体和黑体，其它字体浏览器也要能不兼容。

　　7、导航条必切。一般情况下导航条都是特别设计的，其效果在Dream Weaver下不能实现，因此必须形成切片供后期使用。

　　8、有效存储切片。存储切片的文件夹必须位于站点的根目录下，文件夹名必须是英文名字。存储切片时用“文件—存储为web所用格式”命令。切片存储格式要求一般存为Gif格式。Gif占用体积小。要求较高的图像存储为JPEG格式，JPG格式显示更多的图片细节。

　　当然，网页布局的设计软件的使用依设计者习惯、爱好、风格不同而不一样。笔者在此只是谈一下一般的规律，以供广大网页设计初学者参考。