Photo shop在网页制作中的运用探索

周莲波

(营口职业技术学院，辽宁 营口 115000)

Photoshop作为目前公认的，功能完善、性能稳定的平面图像处理软件，普遍应用于美术设计、二维广告设计、图像处理等领域，它拥有方便单独保存效果的图层工具、有利于浏览下载图片的切片工具、可以保存为矢量图形的钢笔工具等几大特色，在网站页面的设计中，发挥着越来越重要的作用。

1 Photoshop在网站页面设计上的应用

首先，在网站的规划中，页面的布局直接影响到整个网站是否易于浏览、链接、功能区是否醒目、是否能迅速攫取观者眼球。进行页面布局经常用到Dreamweaver的表格或者框架工具，这种Dreamweaver自带的工具简单、易于修改，很适合简单的页面设计。但是对于背景复杂或者导航条、功能模块不是矩形的情况，就需要运用到Photoshop来进行布局设计了。

Photoshop的图层工具和强大的图像处理功能，能够对整个网站页面的效果进行完整的设计和修饰。下面就Photoshop进行网页布局设计的流程进行简单地介绍。

1.1 首先新建一个图像文件

宽度和高度取决于网站页面的大小，一般和浏览器的分辨率相对应，常用的分辨率是1280*800像素的话，图像宽和高就可以设定成1260*780，颜色模式为RGB（红、绿、蓝），这里指的是光的三原色，而不是绘画的三原色红、黄、蓝，太阳光经过棱镜折射为光的三原色红绿蓝，其他的颜色都可以由这三种颜色的光叠加而成，形成了最接近大自然的各种缤纷色彩，在Photoshop中，运用RGB颜色的变化来表现光影的效果，能使处理后的图像作品尽可能贴近现实，使视觉效果能够与人的视觉感受形成一种沟通，产生心灵的共鸣。

1.2 运用Photoshop进行页面布局的设计

不同功能的网站，主题不同，设计的方式也是多种多样。根据科学研究，通常观者眼球运动造成的热点效应聚焦于网页的左上角，也就是说，用户浏览网页时，首先观察网页的左上部和上部，然后再往下阅读，呈现出类“F”的形状。所以页面布局设计上，网站的站标、站名、导航栏、热点、头条等最重要的元素应该确保集中在这些关键区域内。主题的表现主要是通过造型的设计来体现的，造型的巧妙运用不仅能给观者带来极大的视觉享受，而且能更好地表现网站主题，突出网站功能。 基础的布局有“F”字型、“H”字型、“E”字型、“日”字型、“国”字型等，例如综合性网站一般都采用“国”字型布局，即最上面是网站的标示以及横幅广告条，接下来就是网站的主要内容，左右各一小列为小字标题内容，中间是主要部分，图文并茂，突出内容来吸引眼球，最下面是网站的一些基本信息如联系方式、版权声明等。这种布局结构是最常见的一种类型。

用Photoshop进行页面设计，尤其在突出设计感，需要用别致的造型强有力的体现网站主题的个人网站、企业网站的设计中，Photoshop因其功能强大的图像处理能力承担着重要的作用。在页面布局环节，可以先用线条在页面上画个“T”字，其中竖线偏左些，将画面分割成三部分，最上面是网站标志、名称、广告条，左侧是导航栏，右侧最大的空间留给网站主要内容；接下来建立不同的图层，分别把这些内容放在不同的图层里进行绘制、处理。Photoshop的图像整合、渲染功能可以轻松完成这些任务。

1.3 运用Photoshop进行网站元素的色彩搭配

色彩是很神奇的东西，美丽而且丰富，它可以代表情感，也可以象征不同的含义。一般来说，红色是火和血的颜色，热烈、喜庆，象征生命；黄色是明度最高的颜色，艳丽、明快，象征光明。绿色是大自然的颜色，平和、新鲜，象征安全与稳定；蓝色是天空和大海的颜色，整洁、沉静，象征平和与开阔；白色能给人以纯洁与高雅的感觉，象征天真与圣洁。一个网站的页面在视觉上是一个整体，只有达到了和谐、悦目的视觉效果，才能够吸引观者深入了解网站的内容。第一步首先需要确定一种能够表现网站主题的主体色，选择主体色后，就可以应用颜色的近似和对比来完成整个页面的配色方案了。对比色运用得当，可以产生强烈的视觉效果，给观者也不俗的印象，但是考虑到网页的适应性，应该尽量让颜色清淡些或者使用网页安全色。Photoshop提供了专门的色板面板，为选择近似色提供了方便。

总之，在页面设计过程中，只要牢记整个页面设计的五大原则，即统一、连贯、分割、对比及和谐，把整个页面当成一个整体来考虑，统一风格、内容连贯、板块分割清晰、对比鲜明，才能设计出优秀、和谐的页面来。

2 Photoshop在网站元素设计上的应用

一个完整的网站包含很多必备的元素，其中LOGO、广告栏GIF动画、背景底纹、导航按钮等都可以运用Photoshop进行简单快捷的操作。

2.1 网站LOGO制作

一个好的网站LOGO，设计上需要富于个性、新颖独特、简练明朗、通俗易记，并且符合美学原理，尤其要突出辨别性及独特性。例如新浪网，新浪的LOGO中i字母上的点用了表象性手法处理成一只眼睛，而这又使整个字母i象一个小火炬，这样，即向人们传达了“世界在你眼中”的理念，激发人们对网络世界的好奇，又使人们容易记住新浪网的域名。”例如人人网，它的LOGO由两个抽象的人字变形，人字成圈形寓意每个人的人际圈，同时俩个人字中间发生交集。象征着人人网是一个人与人的沟通、分享平台，分享真实、沟通快乐。

通常企业标志设计出来，既可能放大到海报、门匾上，也可能缩小到胸卡、名片上，是需要使用专门制作矢量图形的工具来设计，保证放大缩小都不失真，例如Illustrater。不过Photoshop的钢笔工具既可以用来绘制矢量图，又可以将图片保存为较小的JPG格式，解决了矢量图文件过大，无法上传网页的缺点。

2.2 广告栏GIF动画的制作

广告栏一般位于LOGO的右侧，居于网页醒目的位置，内容一般是广告或者是企业精神、口号等，基本上都是采取图像自动切换、反复播放的模式，用Photoshop和ImageReady软件的配合，可以做出既简单又易于网页存储的GIF动画文件，它避免了SWF自动播放需要安装插件的弊端，而且操作简单、容易上手。下面以一条500*200像素的广告条为例，详细列下操作步骤供读者参考。

首先新建500*200像素的新文件；将4张素材图片分别复制粘贴到文件的1、2、3、4图层里，调整4个图层的图像，使之不失真并和谐有美感；分别在图层1、2、3、4之上建立文本图层，写上广告语，分别和图层1、2、3、4合并，完成图文并茂的4个新图层；点击ImageReady图标，在此文件基础上打开软件；打开“动画”面板，复制当前帧，连点3下，使帧数为4；分别对每一帧操作，使每一帧只显示一个图层的内容；设置延迟秒数；将优化结果存储为GIF格式保存。

2.3 最简单的背景底纹制作

网页的背景图片是无限循环填充的，也就是说，只要对网页设置了一个背景元素，这个元素图片就会无缝连接的填充整个页面，例如制作一个条纹状背景图，只需要建立一个1*2像素大小的文件即可，如同“日”字格，在上下格里填充不同的颜色，保存为JPG格式，这个底纹就制作完成了，当背景填充完毕，展现在观者眼前的就是条纹背景了，而这个背景文件仅仅几k大小。

2.4 网页按钮制作

Photoshop的样式面板提供了多种多样的按钮效果，为网页中的超级链接及按钮的制作提供了很大的方便。

在运用Photoshop进行网页元素的制作时，需要牢记以下几点：一是新建文件时，大小一定要以像素为单位，并且和网页中规划出的大小一样，确保放进网页的图像不失真、不移位；二是图像保存时，一般为JPG格式，有透明像素的情况保存为GIF格式，运用Photoshop处理的源文件另外保存为PSD格式以备修改之用；三是利用切片工具进行大图片的切割时一定要依靠参考线，和网页中表格布局的尺寸一致，避免留白、爆边等问题的出现。

总之，Photoshop在网页制作中的运用越来越广泛的被人们所熟识，在图像处理和网页设计等领域有越来越多的应用技巧有待讨论和探索。

［1］孙素华.网页设计从入门到精通[M].北京：中国青年出版社，2011：438-457.

［2］北大青鸟信息技术有限公司.使用Photoshop设计网站[M].北京：科学技术文献出版社，2008：5-6.

［3］刘丽君，陈强.浅谈 Photoshop 在网页制作中的应用[J].科技广场，2007（7）：167-168.

［4］王永生，钱俊.PhotoShop 中常用的图形图像格式[J].广东印刷，2003（6）：20-21.