效果预览

刚开始做网页的时候，我们虽然只会做几个表格、插入一些图片，但我们还是为自己能做出一个自己的网页而兴奋不已。可是时间一久，我们又不满足于只做表格和插入图片了。看看别人做的网页现代感十足，我们不禁也想尝试。那么现在就来试着做一个自己的现代感网页吧。在这个例子里，我们假想为一个名为CyberNet的网站设计一个网站首页。既然叫Cyber(先进的)，那么我们就要用代表高科技的机械、计算机等图像充分表现代感。在这里，Photoshop起的其实是打草稿的作用，既我们先用Photoshop做出网页的效果图，然后再用Imageready、Dreamweaver等进行后期加工。最后效果如图7-2-1所示。

图7-2-1 最终效果图

知识提要

◇ 选区轮廓的建立和调整

◇ 渐变工具的灵活使用

◇ 使用光照滤镜模拟金属效果的方法

制作步骤

7.2.1 制作机械面板大体框架

在这一小节里，我们制作代表科技感的机械图像。

步骤1 创建图像文件

首先我们执行【文件】菜单中的【新建】命令，或者按快捷键Ctrl+N,打开“新建”对话框，输入图像图名称为“网页”，然后把图像的宽度设置为800像素；高度设置为600像素；图像模式设置为RGB颜色。完成后按【好】按钮，如图7-2-2所示。

图7-2-2 新建文件

步骤2 制作背景色

我们初步设定整幅图的主色调为表现科技感的蓝色。首先单击【设置前景色】按钮打开“拾色器”对话框，输入R为0、G为22、B为83，把前景色设置为蓝色，如图7-2-3所示。然后执行【编辑】|【填充…】命令打开“填充”对话框，按【好】按钮，或者按快捷键Alt+BackSpace用前景色填充图像。如图7-2-4所示。

提示：在这个例子里面，我们用“R:xx G:xx B:xx”的格式来表示颜色的取值，比如R:10 G:10 B:10就表示在“拾色器”对话框里输入R为10、G为10、B为10。

图7-2-3 拾色器对话框

图7-2-4 填充对话框

步骤3 制作出机械面板的大体框架

执行【图层】｜【新键】｜【图层】命令（快捷键Shift+Ctrl+N）打开“新图层”对话框，输入名称为“基本框架”，按【好】按钮。然后选择【矩形选框工具】按钮（快捷键 M），拖动鼠标制作一个长方形的选区，长方形的宽大约为四分之一图像高，顶部大约在图像六分之一高处，如图7-2-5。然后把前景色设置为黑色（R:0 G:0 B:0），执行【编辑】|【填充…】命令（快捷键Alt+BackSpace）打开“填充”对话框，按【好】按钮，用前景色填充图像，效果如图所示7-2-6。

图7-2-5 矩形选框工具

图7-2-6 基本框架效果图

网站推荐：E2 Desktop是国内比较高水平的一个壁纸类站点，与其他杂乱的壁纸站不同，这个站点界面十分清新，收录的内容也与众不同，十分适合喜欢搞设计的人。网址：http://www.yourthink.com/e2/