校园网站的设计与制作

校园网站的设计与制作

“听者有心”的首页

创建背景

这个网页可以说是采用了二分栏结构，却有一些变化，包括网页上方占很大面积的Banner、栏目名称以及网页下方放置版权信息的区域，都为传统的二分栏结构注入了一些新的元素，让网页不那么规矩，更加迎合学生的品位。而背景对于这个网页来说也非常重要，用淡雅的蓝色与“听者有心”这个网页标题相呼应，使浏览者打开网页的一瞬间就有

- 297 -

一种清新脱俗的感觉，进而产生亲切感。

1. 打开Photoshop，按【Ctrl+N】，新建一个宽“760px”，高“900px”的文件，将它命名为“听者有心”。

2. 按【Ctrl+A】进行全选，填充淡蓝色（R228，G246，B244）；新建图层，将其命名为“灰色”，在页面的上下分别创建高为“30px”和“100px”的矩形选区，填充上浅灰色（R236，G236，B236）。如图所示。

上下分别填充浅灰色

3. 新建一个图层命名为“灰色线条”，在两处浅蓝色和浅灰色的交界处用铅笔画出两

- 298 -

条“1px”粗细的灰色（R204，G204，B204）线条，拖动鼠标的时候记住按住【Shift】，这样画出的线条才能笔直。

4. 再新建一个图层命名为“白色”，在灰色线条和浅蓝色交界处分别创建“30px”和“6px”高度的选区，填充上白色。回到【灰色线条】图层，在页面上部白色区域的下面画上一线条，最后再回到【白色】图层，在灰色线条和浅蓝色交界处分别创建“6px”高度的选曲，填充上白色。页面上部的效果如图1-3所示，下部的效果如图1-4。

1- 1 页面上部效果图

1- 2 页面下部效果图

大家可以看出上部的浅灰色和白色区域是用来放栏目名称的，而下部的浅灰色区域是用来放版权信息的。而灰色的线条一是作划分，二是作装饰。上下两条“6px”高的白色区域则是用来划分信息区和上下部的。背景制作完成后就要挑战那梦幻效果的Banner啦。

制作梦幻效果

位于网页偏上部位的那个Banner可以说是整个网页的灵魂元素。优美的弧线、渐变

- 299 -

的蓝色、舞动的人影和梦幻的白色圆点，无一不体现出青年的活力。

1. 在【图层】面板中创建新组，命名为“梦幻Banner”，在组中新建图层，命名为“灰色背景”，转换到【路径】面板，新建【路径1】，绘制如图2-1所示的路径，按住Ctrl键的同时单击【路径】的缩览图创建选区，填充浅灰色（R236，G236，B236）。

图2- 1绘制【路径1】

2. 新建图层并命名为【渐变背景】，在【路径】面板中新建【路径2】，再回到【路径1】，按【Ctrl+C】进行复制，再单击【路径2】，按【Ctrl+V】粘贴，然后对【路径2】其中的几个锚点及其方向线进行调节，创建选区后如图12-2-2所示填充渐变色，渐变色从深蓝色（R46，G132，B165）到浅蓝色（R154，G230，B235），填充后效果如图2-3所示。

- 300 -

图2- 2 填充渐变背景

图2- 3 填充渐变后效果

3. 新建“圆”图层，画一系列带圆环的圆，圆的颜色为湖蓝色（R52，G187，B216），圆环的颜色偏绿一些（R47，G171，B189），利用如图2-4所示的工具按钮将其排列整齐。

图2- 4 【对齐与分布】工具按钮

4. 按住【Ctrl】键的同时单击【圆】图层，可以看见圆被选中，这时在【通道】面板中新建【Alpha 1】通道，由白色到黑色从左到右拉出渐变，再按住【Ctrl】键的同时单击

- 301 -

【Alpha 1】通道，再回到【图层】面板，按【Ctrl+Shift+I】进行反选，再按【Delete】键删除，最后把【圆】图层的【不透明度】调整到“25%”，得到如图12-2-5所示的效果。

图2- 5 画上一系列的圆

5. 添加舞动的人影。为了给页面增加一点活力的元素，作者找到了这些人影，将他们放在合适的位置，并且删除超出弧线的部分，如图2-6所示。

图2- 6 添加舞动的人影

6. 添加网页标题。这里用的方正综艺简体40点，放好位置以后右击该图层的缩览图，选择【混合选项】菜单，在弹出的对话框中设置【填充不透明度】为“25%”，得到如图2-7所示的效果。

- 302 -

图2- 7 设置【填充不透明度】

7. 新建图层，命名为“浅蓝飘带”，在【路径】面板新建【路径3】，复制【路径2】到【路径3】，再改变一些锚点和方向线，改好后创建选区填充浅蓝色（R204，G255，B255），如图2-8所示。

图2- 8 制作浅蓝飘带过程

8. 复制【路径3】到新建的【路径4】上，调整某些锚点和方向线后创建选区，然后按【Delete】键删除【浅蓝飘带】图层上选区中的部分，再把这个图层的【不透明度】调整为“50%”，效果如图2-9所示。

- 303 -

图2- 9 制作好的浅蓝飘带

7. 最后可以说是点睛之笔了。新建【圆点】图层，运用画笔点缀出星星点点梦幻的圆点。选择柔角的画笔，调整画笔的大小，在你认为合适的地方点缀出朦胧的圆点，把它调整到【听者有心】图层的下面，最终Banner的效果如图2-10所示。

图2-10 梦幻Banner最终效果图

制作信息面板

1. 新建【信息面板】组，在组内新建图层，命名为“信息面板”。新建【路径5】，绘

- 304 -

制如图3-1所示的路径，创建选区之后填充白色。

图12-3- 1 绘制信息面板

2. 双击【信息面板】图层的缩览图，在弹出的对话框中勾选【描边】复选框，做如图3-2所示的设置，其中【颜色】为灰色（R204，G204，B204）。

- 305 -

图3- 2 【描边】设置

3. 绘制飘带。新建【路径6】，绘制如图3-3所示的路径。

图3- 3 绘制路径

- 306 -

4. 新建图层命名为“蓝绿飘带”，将【路径6】创建选区后渐变填充，渐变色为绿色（R131，G208，B126）到蓝色（R46，G132，B165），在【渐变编辑器】中再设置一个“50%”位置的颜色（R135，G211，B226）。填充好后，如图3-4所示删除掉一部分，使其看上去像是从信息面板中穿过一样。

图3- 4 填充渐变色

5. 在信息面板中输入首页显示的栏目标题，并新建图层命名为“修饰”，在该图层上作些修饰，如图3-5所示。图中修饰用的实际上是一些相互间隔“1px”的“1px×1px”大小的灰色小点，栏目标题下方是一行，而右边则是四行，读者可以图像放大以后操作。

- 307 -

图3- 5 写上栏目标题并作装饰

6. 用同样的小点来分隔栏目列表，并加上“more”按钮，如图3-6所示。

- 308 -

图3- 6 加上“more”按钮并作装饰

这样，信息面板就制作完成了，最后要做的是作整个页面的细节修饰。

进行细节修饰

1. 在页面上部的浅灰色和白色横条都是用来放栏目文字的，如果两部分除了颜色没有任何差别，会让浏览者觉得乏味，所以我们要作一点小变动。首先，新建图层，命名为【白色条纹】，在页面右上角绘制如图4-1所示的宽“270px”的图形，其中2条间隙高“2px”，中间的白色细线高“1px”。

- 309 -

图4- 1 绘制白色条纹

2. 创建一个矩形选区，在选区内右击后选择【变换选区】，把选区的宽度改为“7px”并旋转“45”度，移动到合适的位置后按【Delete】键删除【白色条纹】图层上不需要的区域，最后效果如图4-2所示。

图4- 2 变换选区后删除多余区域

3. 下面要做一些小符号，增加网页的趣味性。新建图层并命名为“绿色符号”，绘制如图12-4-3所示的小符号，颜色为草绿色（R170，G226，B12），这个小符号实际上是由3个间隔为“1px”的“3px×3px”大小的小方格组成的。

- 310 -

图4- 3 绘制绿色符号

4. 最后新建图层命名为“蓝色符号”，给栏目列表绘制一些蓝色的小符号，如图12-4-4所示。这些小三角符号的颜色为灰蓝色（R91，G127，B156），把图像放大到1600%可以看到他们的结构如图4-5所示。这样的小三角符号在网页中很常用，读者可以尝试不同尺寸符号的制作。这样，整个网页制作完成了，如图4-6所示。

- 311 -

图4- 4 绘制蓝色符号

图4- 5 小三角符号结构

- 312 -

图4- 6 最终完成效果图

- 313 -