第六部分-----------------------------------------------

第六章 成家立“页”在今朝— — 网页设计实战

Internet 以及由其衍生出来的网络文化如同飓风一样，在我们目不暇接的时候，向我们展示了它无穷的魅力。经常在网络漫游，您是不是曾经感慨过那绚烂多彩的图片，那令人耳目一新的设计，以及使您拍手叫绝的创意呢？ 那一个个展示个人风采的个人网站，是否也使您产生过成家立“页”的想法呢？网页的制作历史悠久，从网络产生那一天起，就在不断地发展。从早期的编写HTML纯文本网页，到现在的整合文字、图片、动画的动感网页的产生，这都是由于网络带宽的增加以及制作技术的飞速发展而带来的成果。Adobe 公司深刻地注意到了这一点，因此从Photoshop5.5 版本开始，将ImageReady2.0紧密结合到其中，使网页制作技术中关于压缩图文件、切割图像、制作图像超链接等在过去看来非常棘手的环节，都能够一气呵成。这些技术在6.0版本中得到了更进一步的增强。在经过了前五章的讲座之后，我们这次的“Photoshop新手上路”的连载也已经接近尾声了。在本次的讲座中， 我将带领您使用P h o t o s h o p 6 . 0 以及其整合的ImageReady3.0，设计一个个人主页，同时也算是对以前讲座的一个总复习。对于网页设计而言，它与平面设计具有许多共同点，所使用软件的手法大同小异，但是考虑到网络这个载体的特殊性，网页的设计又和平面设计具有很大的差异。考虑到网络下载速度以及浏览者视觉效应等方面的问题，主要表现在对于图片的优化和对整体色调的调整和配置上，这是我们在使用ImageReady的过程中要特别注意的问题。

(1)启动Photoshop6.0，新建一个文件。我们将通过制作一个个人网站的主页面作为实例给大家讲解。我们不要急于在工作区中开始设计，首先规划一下我们整个网页的色调，采用一种色彩系列，往往可以给浏览者比较好的视觉效果，比如：黑色－灰色－白色； 深蓝－浅蓝－白色。在我们这个实例中使用的是以深蓝色为主色调的设计页面，因此，我们设定前景色为深蓝色（R:0;G:0;B:1 7 0 ），然后使用“喷筒”工具在工作区中填色。

（2)在图层面板中新建一个图层，设定为“线条层”。使用“路径”系列工具，在画布上调整出如图1 所示的一个闭合的曲线区域，并且在路径面板中转换成选择区，调整前景色的颜色，设定为纯蓝色（R:0;G:0;B:255），使用“喷筒”工具填色。

（3)复制刚才的“线条层”，并使用移动工具，将其向左边少量的移动一下位置，再次使用喷筒，设定前景色为暗蓝色（R ：0 ；G ：0 ；B ：1 0 0 ），给复制的新线条着色。好，这样，我们这个网页的大概的背景就制作完成了，如图2 所示。

（ 4 ) 制作网站标题。通过Photoshop 来完成网页设计，无论是制作哪种方式的特效字体，都不用担心位置或者调整方面的问题，这对于使用过Dreamweaver来完成网页制作的读者来说，我想一定深有体会。在Dreamweaver中，不要说网站的标题的设置，就是一段文字的录入，对于位置的调整也常常令我们这些初学者挠头。现在在Photoshop 中，一切的输入对象都以这种图形的方式解决，对于它们，我们所要做的就是移动图层来改变位置。我们这个个人主页的名字叫做“梦工场工作室”，现在输入文字，并且设定一下“文字方式”，我在这里只是设定了一个“阴影”，如图3所示。

（5）制作按钮。对于按钮的制作，在各种杂志上都有介绍，方法各有千秋，这里我使用了KPT3外挂滤镜组中的KPT Spheroid Designer（球体设计师），这个外挂滤镜可以在顷刻之间为我们制作出来晶莹剔透的具有立体光泽的球体，使用起来非常的方便，运行界面如图4 所示。下面，新建一个文件，要求长和宽相等，这样可以保证KPT Spheroid Designer设计出来的球体是标准的圆形。运行KPTSpheroid Designer，调整光泽和颜色到自己满意的程度为止，回到工作区，一个按钮非常轻松地就可以完成了（如图5 所示）。

（6) 将完成的这个球体选择出来，拖拽到我们设计的这个网页中，复制4 个，并且沿着曲线进行排列。分别对应按钮，输入栏目引导文字，并且设定“图层方式”，我这里使用的是“内发光”效果，这一步完成后如 所示。

（7)我在第四章的滤镜讲座中，给大家介绍了一款KPT6外挂滤镜组，其中的Skyeffects那出众的效果，相信大家不能忘记吧。对于现在这个网页，为了体现一种极具冲击力的视觉效果，我再给大家介绍一款KPT6中的外挂滤镜KPT Lensflare，这个滤镜是针对Photoshop中内置的Lens Flare参数过于简单、效果单一的缺点而开发出来的，专门用于制作镜头光晕的外挂滤镜，界面如图7所示。像Skyeffects一样，KPT Lensflare也具有强大的预设库，而且针对镜头光晕的各个组成部分，参数众多，效果非凡。图8就是通过这个外挂滤镜完成的一种镜头光晕的效果，具体使用方面的问题大家可以慢慢来体会。好了， 现在我们这个网页在Photoshop中的设计任务就告一段落了，剩下的就是到ImageReady中，进行一些发布前的设定工作了。刚刚我们在Photoshop 中介绍的制作步骤，相对来讲是比较简单的，因为这都是我们以前所学习过的，那么接下来，我们就要进入到ImageReady中，完成我们这个网页的制作。对于我们目前完成的这个图片，只能说这是一张平面设计作品，我们还不能在网络上发布。目前一般人仍然在通过电话线上网，普及使用宽带互联网的日子离我们还为时尚远。因此，在有限的带宽下，限制图像的大小以及维持图像的品质是设计者最重要的课题。在我们这个实例中，ImageReady 的功能主要有两个，切割图片以及优化图像。

(8)点击Photoshop工具条下方的“转换到ImageReady”按钮，进入到ImageReady中。