Photoshop在网页设计前期的感化作用

蒋秋瑾

摘要：网页已成为信息化时代人与人、人与物交流的必要工具，一个布局独特，画面精美的网页必然使人流连忘返，给企业带来莫大的效益，要设计这样一个网页，要求设计人员要有丰富的智慧和技能，而在众多网页设计软件中，Photoshop在网页设计前期的感化作用是不可忽视的，使用Photoshop制作网页可以突破dreamweaver布局时的种种局限性，令设计师更加自由地进行设计构图，表现手法也丰富多样。本文我就Photoshop这个图象处理软件在网页设计前期对网页元素和网页结构的整合感化意义以及用Photoshop设计网页结构应注意的细节，特别是对Photoshop的切片功能和操作做一些简要的介绍，以供初学者参考。

关键词：网页设计 Photoshop 切片

近几年信息技术的发展，使Internet已经和许多人的日常生活密不可分，而在互联网中承担重要角色的网页，是企业宣传和展示的一个非常好的媒介，同时也是与用户沟通的重要桥梁。而要想制作一个有看点、有观众、长盛不衰的网站，一定要有自己独特的风格，才能使浏览者驻目，并印象深刻。达到这一点，Photoshop在网页设计中的感化作用是不可忽视的。

Photoshop是图形图像领域最领先的处理软件之一，在平面设计、网页设计、三维设计、数码照片处理等诸多领域广泛应用。正因为此，它在制作网页时更担任了关键的角色。

一、Photoshop在规划网页效果中的感化

浏览过诸如IBM中文官方网站、清华大学中文官方网站、还有由我完成制作的河南交通职业技术学院门户网站……我们发现这些网站设计简约，页面结构规范，有章可循，栏目放置有序，主次关系分明，浏览速度很快，其实从专业角度看这些都是Photoshop的功勋。

1、结构矫捷

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

2、点窜便利

网站设计前期首先要与客户签定合同，签定合同时客户最关心的是自己的网站是什么样子，这时设计者不成能拿出建好的网站给客户演示，这样一是成本太高；二是维护常识产权。最好的法子是拿出在Photoshop中做出的效果图给客户看。这时我们就可以操纵 Photoshop的强大功能按客户的要求便利地进行点窜和优化，直到客户满意为止。若是在Dreamweaver下，每做一次大的点窜，几乎是从头设计一样费时吃力，而且还不必然能达到客户要求。

3、加速浏览进度

一个设计不美观不规范的网站是没有生命力，同样一个打开、下载速度慢的网站也是没有存在的价值。心理学研究证明：选择性越多，人的忍耐性越差；可选择性越大，人的忍耐性越低。抉择下载速度的原因良多，而网页大小及网页元素的优化和设置是一个关键的因素。利用Photoshop设计的网页经过裁切后体积相对要小得多，就大大加快了网页的浏览速度。

二、用Photoshop进行网页设计的细节感化

在进行网页设计时，我们应注意的一些设计中的细节和参数。

1、网页文档尺寸与分辩率。在1024*768分辨率的显示器下，网页文档为宽1000像素 *高600像素是满屏显示，宽和高可根据需要进行调整，分辩率一般不低于72像素。把握这个参数，大型网站一般不要跨越3屏。

2、 颜色。采用RGB色彩模式，网站背景景颜色与文件颜色要统一协调，一般不要跨越三种色调，一些网站给人感觉脏、乱、差，其关键是颜色搭配不合理，或者太多。

3、字体，题目。导航字体一般用黑体，正文一般用宋体，其它字体浏览器不兼容，若是为增强页面效果用到其它字体，则最好在Photoshop切分成图片，字体的颜色、形态设置要考虑到整个页面效果。

4、结构款式：要兼顾到 Dreamweaver对页面结构的要求，一般在Dreamweaver下网页结构是“国”字形，在这个前提下，是否利用框架，利用框架的类型是哪一种，都是在设计前要考虑到的。否则会造成效果图与最后的网站结构不符，给客户和自身带来损失和麻烦。

5、 图文搭配：一个好的网站以网站的功能、行业、目标而定，但有个原则就是图文合理搭配，而图片则要按给定的空间分布进行协调分布。此外，图片大小要合乎美学原则，不能太大，一般用缩略图较好，若是要显示更多的图片细节，不妨给缩略图链接一个大的图片。

6、科学利用参考线。参考线是设计页面结构的有用辅助工具，我们可以先用横参考线将网页结构分成几大版块，然后用竖参考线将每个板块按我们的思绪分为几个小板块，最后再整体调整查看一下。要切确定位置的网页元素，可用对齐参考线的方法来实现。

三、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款式显示更多的图片细节。

Photoshop在网页设计前期的感化作用是至关重要的，以上也是我在工作中对 Photoshop在网页设计前期应用的总结，简要概括，以供广大网页设计初学者参考，与广大网页设计爱好者共勉！