PhotoShop 在网页设计中的作用

智慧 河南省交通高级技工学校

近年来，在“实施科教兴国战略和人才强国战略”的指导思想下，信息技术得到了广泛的应用，信息产业也在社会经济发展中起着举足轻重的作用。而互联网技术的不断发展也影响着大家的生活，它已经不仅仅局限于构建日常生活中通信与交流的平台。同时也成功地渗透到了商业活动当中。现在，越来越多的企事业单位、政府机关均在网上设立了自己的门户网站。为本单位增加宣传、展示、互动的辐射面积，并取得意想不到的收益。而随着社会经济的发展和全球经济一体化进程的加快，电子商务行业越来越受到人们的重视。更随着诸如淘宝等商业网站的出现，让人门足不出户就可以购买到称心如意的商品。而所有这些，都需要通过网页设计来实现。

一个好的网站，不仅能够体现本站的特点，体现企事业单位的主要主体思想与理念，把所要表达的思想在网站中快速的展现到公众的面前。更要吸引人们的目光，让人们时时关注。而优秀的电子商务网站，可以通过图文并茂的方式，引起人们的购买欲望。所有这些，都需要设计网页的时候用心勾画，精心制作。如果只有文字，是无论如何都达不到理想的效果的。而网站中最好的设计模式就是采用图文并茂的方式来体现网站的特色与内容。

平面处理软件PhotoShop 在网页设计中具有着不可替代的重要的作用。要想设计一个好的网站，设计出图文并茂，引人注目的网页，网页设计者必须根据实际情况，用Photo Shop 软件对站点结构进行规划。那么用平面处理软件PhotoShop 进行网站网页的设计，都有着什么样的作用呢？

首先，使用平面设计软件PhotoShop 设计网页有它独特的多层的灵活性，和可以加快浏览的下载速度的优点。

网页制作的工具很多，目前最常用的是Dreamweaver（简称DW），它把构成网页的文字、图像、声音、视频、动画等元素有机的结合起来。而平面处理软件PhotoShop（以下简称：PS）就是网页设计中图文的主流方法。它是一个功能强大的图像处理软铁。可以按照预想的效果和思路在PS 中分层摆放网页元素，并利用自己掌握的图像处理的技巧方法让图像更加的美观，并使图层与图层之间过渡自然，把整个图像文件更好地融合在一起，让元素与整个网页的主题相一致，使整个页面成为一个协调的整体。

1、多层的灵活性。PS 的灵魂是图层，一个完美的网页设计作品往往有许许多多的元素组成。大到作为Banner 的横幅图像，小到一个项目符号的圆点或线条。层的功能就是能够对这些元素单独进行修改和编辑，而不影响其他的元素；在制作过程中，可以给图层添加样式、添加蒙版、改变叠放的顺序；可以对每一个图层进行图像的单独设计，给这一层的图像设置色阶、饱和度、亮度、大小、曲线等等效果。PS 的各个图层之间即是单独存在的，又是相互联系的。每一个图层上的图像位置都可以随意的移动而不会影响到其他图层中图像的位置。如此灵活的功能，完全可以让设计者自己发挥和创意，灵活运用，设计出理想的网页。

2、加快浏览的速度。互联网有一项著名的8 秒原则，即用户在访问Web网页时，如果页面打开的时间超过8秒，访问者就会感到不耐烦，如果下载需要太长时间，他们就会直接关闭网页，放弃访问。而用PS软件制作网页时，就可以对网页的大小以及网页元素的大小进行适当的调整，让最后生成的网页的体积大大减小，相同的元素会因为其格式的变化而提高下载的速度，因此，在一定程度上来说，PS 是提高页面下载速度的有效的工具。

其次，Photo Shop 在网页设计布局当中可以更好地把握以下几个方面。

1、网页文档的尺寸与分辨率。目前网页查看最常使用的浏览器分辨率大致有：1024*768 像素、1280*768 像素、1360*800 像素、1440*900像素及1600*900像素。但浏览器本身还要留出一定的空间，才能保证不会出现水平滚动条和垂直滚动条。以1024*768 像素分辨率为例，网页常常要设置为1001*600像素，分辨率为72像素较为合适。当然，这也需要根据实际情况进行调整，太高的分辨率并不能增强效果，反而会降低下载的速度。

2、网页设计前的准备元素。要考虑到页面的整体风格，页面的区域划分，一般情况下把网页分为以下几个部分：背景、头文件部分（即：header 部分)、文件主体部分（即：body 部分）、文件底部（即：footer 部分)。

3、分层的重要性。网页当中包含非常多的元素，比如，头部的logo 标志、广告条banner、以及链接的文本，插图、背景、渐变效果、底部菜单等等。在制作的时候，把它们分别放在不同的图层之上，方便随时修改或增加新的内容。

第三，PhotoShop 在设计网页布局当中应该遵循的原则。

一个完整的网页，当中既有文字又有图片。根据需要，还可以添加动画、视频等等。文字和图片需要同时在网页中体现出来，让浏览网页的用户既看到了想要看的信息，又在视觉上感到愉悦。这就需要把图片和文本进行合理的布局和编排，使其组成一个有机的整体展示给用户。但如何才能更好地把这些网页元素进行合理的布局呢？这就需要在设计网页当中，遵循一定的设计原则来进行。

下面我们详细了解一下网页布局中应该遵循的原则。

1、要注意图文混合排版。文本和图片要具有相互补充的视觉效果。如果页面中的图像太多，文字太少，就会降低页面的信息容量；而如果页面中的文字太多，没有图像搭配，就会显得沉雍无趣，缺乏生气。一个优秀的网站，图片量和文字量应该以网站的功能、行业和目的而定；文字与图片相互依托，合理搭配，才能制作出形式生动、内容丰富多彩的网页。

2、要注意疏密交错搭配。网页中重复的形式过多，就会使页面显得呆板，容易使浏览者产生视觉疲劳。因此，在内容的安排上要适当地留白，适当地运用空格，改变行间距和字间距来制造变化的效果。在一定程度上打破页面过于呆板、平淡的格局；在对称性方面，既要使用对称美，又要兼顾独特美，搭配均衡的网页，生动活泼富于变化，可以给网页增加一定的生动性和趣味性；在色彩的运用上，可以适当使用颜色对比，用以形成鲜明的视觉效果。在网页中体现个体和主体的统一和协调。以免产生颜色搭配不合理的情况，也要避免颜色太多，给人一种不协调的感觉。

3、要注意强调整体性。这在网页设计中占据着关键的位置，起着主导的作用。网页上的整体包括内容和形式上的整体性。在用PhotoShop 设计网页中，主要体现在设计形式上的整体性。从网页的版面、色彩、风格入手。在网页中所有的元素设计都要进行整体考虑，以周密的结合和精确的定位，来获得页面的整体效果。不论使用什么样的结构，都要经过巧妙的整合，使页面产生和谐的美感。

4、要注意突出主题。一个优秀的网页设计作品必须条理清晰，主题分明。网页的设计紧紧围绕着网站的主题进行。从空间层次、视觉次序、主次关系等进行有条理的把握和运用。在空间设计上要放大主体；从视觉出发上，重心一般放在中间偏上的位置，这个位置最能吸引浏览者的目光；在主次方面，应该在视觉中心以外的地方安排一些稍微次要的内容，或者增加一些空白，让被强调的主体形象更加地鲜明突出。

第四，Photo Shop中的“裁切”工具是联系Dreamweaver的桥梁。

在PhotoShop 中设计的网页布局效果图，是不能直接在网页编辑软件Dreamweaver 当中使用的，必须用“裁切”的工具，正确的裁切以后，才能在Dreamweaver 中对效果图进行有效的整合。这让Photo Shop 在网页设计中的作用发挥到了极致。在“裁切”的过程中需要注意以下几个方面：

1、要以参考线为依托。在设计时要用参考线，切图时更要用好参考线。参考线能够保证我们切出的图片的尺寸和表格的尺寸相统一，有效避免“留白”的情况。参考线可以保证我们切出的图在同一表格中的尺寸同一协调。

2、要注意按照网页各部分结构来划分切片。设计中的虚线、圆角必须单独切片，这些都是在Dreamweaver 中实现不了的。大图必须切成均匀的小图，这样可以提高网页下载的速度。特殊文字必须单独切片，这样可以避免浏览器的不兼容。

3、除保存好原文件外，要有效地存储切片。即存储切片时，使用“文件”菜单下的“存储为WEB 所用格式”命令进行保存。切片的格式要求存为GIF 格式，这种格式压缩比高，占用体积较小，要求高的图像存储为JPEG 格式，JPG 格式可以显示更多的图片细节。

现在，网页中的艺术设计，越来越被网站建设者所重视。一个好的网页就是艺术与技术的结合，既要内容详实，又要视觉新颖，宏观大气。还要布局合理，把内容的层次性和空间性突显出来，现代网络不断地更新发展，网页设计只有掌握了各种网络的技术规律，通过多样的视觉形式，设计样式，注重技术与功能和艺术之间的关系，相辅相成。才能满足未来大众对网页信息的高层次要求。

总之，PHotoShop 在网页设计中发挥着至关重要的作用。在网页设计的每一个环节，都有PS 的影子。网页设计人员应该在网页设计中，正确输出图像、优化网页速度以及进行网页布局等等方面，着手对PhotoShop 在网页设计中的作用进行分析，才能更好地利用PS设计出更多优秀的网页设计作品。