首先新建一个名称为“按钮”的图层。选择【矩形选框工具】按钮(快捷键M)，拖动鼠标制作一个长方形选区，再按住Alt键，减去长方形选区的一部分，如图7-2-33所示。
然后选择【渐变工具】按钮（快捷键 G），在工具栏中选择刚才建立的“面板”渐变，拖动鼠标制作渐变。再设置前景色为黑色，执行【编辑】｜【描边】打开“描边”对话框，输入宽度为1,位置选择“居中”，按【好】按钮，效果如图7-2-34所示。
我们复制刚刚做好的按钮的一部分，移动它的位置到右边，执行【编辑】｜【自由变换】命令（快捷键Ctrl+T），然后在图像上按右键，出现弹出菜单，执行【水平翻转】命令。最后选择【铅笔工具】按钮(快捷键B)，设置前景为黑色，画出四条横线，再设置前景为白色，画两条白线，选择【油漆桶工具】按钮(快捷键G)，把按钮的底填充为灰色（R:142 G:142 B:142），这样一个按钮就完成了，效果如图7-2-35所示。
小技巧：在Photoshop中，有很多时候要修改设置的参数。一般情况会在取值框的右侧有一个黑三角，点击它会出现一个滑动标尺，拖动标尺就可以修改取值了，但有时不会十分精确。这时可以按键盘上的向上箭头键（每按一下表示取值加一）和向下箭头键（每按一下表示取值减一），来准确调整数值。如果按住"Shift"键不放，那么每按一下表示取值加10或减10。
步骤11 制作“What’s new”面板的机械臂
“What’s new”栏目是很多网站都有的内容，在这个栏目里我们可以很快知道网站最近更新的内容和网站建设的动态。
首先新建一个名称为“What’s new面板”的新图层。选择【矩形选框工具】按钮（快捷键 M），拖动鼠标制作一个小长方形的选区，再执行【选择】｜【修改】｜【平滑】命令打开“平滑选区”对话框，输入“取样半径”为2，按【好】按钮。
选择【渐变工具】按钮（快捷键 G），再单击工具栏上的【点按可编辑渐变】按钮打开“渐变编辑器”对话框。
输入名称为“面板2”，在渐变色带下方单击建立三个色标，三个色标从左到右分别输入为：第一个色标颜色为深灰(R:147 G:147 B:147)，位置0%，第二个色标颜色为浅灰(R:162 G:162 B:162),位置71%，第三个色标颜色为中深灰（R:92 G:92 B:91），位置为100%，然后由左到右输入两个停止点的属性，首先单击第一个色标使第一个停止点出现，单击停止点，输入位置为56%，再单击第二个色标使第二个停止点出现，输入位置为61%，按【新建】按钮，再按【好】按钮，如图7-2-37所示。
设置完渐变后，拖动鼠标制作一个渐变。再设置前景色为黑色，执行【编辑】｜【描边】打开“描边”对话框，输入宽度为1,位置选择“居中”，按【好】按钮，效果如图7-2-38所示。
接着选择【橡皮擦工具】按钮(快捷键E)，在工具栏里选择“模式”为“画笔，“画笔”为“柔角9象素”画笔，然后拖动鼠标擦除上面一部分图象，擦除后效果如图7-2-39所示。
图 7-2-37 渐变编辑器对话框
图7-2-38 机械臂效果图
图7-2-39 擦除一部分后的效果图
首先新建一个名称为“管道2”的新图层。选择【矩形选框工具】按钮(快捷键M)，拖动鼠标制作一个长条形选区，再选择【渐变工具】按钮(快捷键G)，在工具栏中选择已经建立的“管道”渐变，拖动鼠标制作一个渐变。
然后选择【矩形选框工具】按钮（快捷键 M），拖动鼠标在管道的上端制作一个长方形的选区，再执行【选择】｜【修改】｜【平滑】命令打开“平滑选区”对话框，输入“取样半径”为2，按【好】按钮。
然后选择【渐变工具】按钮（快捷键 G），在工具栏中选择刚才建立的“面板”渐变，拖动鼠标制作渐变。再设置前景色为黑色，执行【编辑】｜【描边】打开“描边”对话框，输入宽度为1,位置选择“居中”，按【好】按钮，效果如图7-2-40所示。
选择【椭圆选框工具】按钮(快捷键M)，拖动鼠标在管道的下端制作一个圆形选区，再设置前景色为黑色，执行【编辑】｜【描边】打开“描边”对话框，输入宽度为1,位置选择“居中”，按【好】按钮。
然后执行【选择】｜【修改】｜【收缩】打开“收缩”对话框，输入“收缩量”为1，按【好】按钮，再设置前景色为灰色（R:142 G:142 B:142），执行【编辑】｜【描边】打开“描边”对话框，输入宽度为1，按【好】按钮。
执行【选择】｜【修改】｜【收缩】打开“收缩”对话框，输入“收缩量”为1，按【好】按钮，再设置前景色为灰色（R:205 G:205 B:205），执行【编辑】｜【描边】打开“描边”对话框，输入宽度为2，按【好】按钮。
执行【选择】｜【修改】｜【收缩】打开“收缩”对话框，输入“收缩量”为2，按【好】按钮，再设置前景色为黑色，执行【编辑】｜【描边】打开“描边”对话框，输入宽度为1，按【好】按钮。
最后把前景色设置为灰色(R:142 G:142 B:142)，选择【油漆桶工具】按钮，填充画好的圆圈，最后效果如图7-2-41所示。
提示：读者可以看到，这里我们制作圆圈所用的方法是直接用改变前景颜色和描边。其实只要照着表现光照效果的目标，用什么方法都是可以的，关键是看哪一种比较方便。读者可以想想看，除了渐变效果、光照效果和直接描边，还有什么方法可以制作金属效果呢？
图7-2-40 管道2效果图
图7-2-41 管道2效果图
[NextPage]
步骤13 继续制作机械臂
首先新建一个名称为“机械臂”的图层，选择【椭圆形选框工具】按钮(快捷键M)，按住Shift键拖动鼠标在圆形中间再制作一个圆形选区。再选择【渐变工具】按钮(快捷键G)，把前景色设置为白色、背景色设置为黑色，再在工具栏里选择“从前景到背景的渐变”。再选择【径向渐变】按钮，拖动鼠标制作一个径向渐变。
新建一个名称为“机械臂2”的图层，选择【矩形选框工具】按钮(快捷键M)，拖动鼠标制作一个长条形选区，再选择【渐变工具】按钮(快捷键G)，在工具栏中选择已经建立的“管道”渐变，拖动鼠标制作一个渐变。效果如图7-2-42所示
新建一个名称为“机械臂3”的图层，选择【矩形选框工具】按钮(快捷键M)，拖动鼠标在管道上制作一个长条形选区。设置前景色为黑色，执行【编辑】｜【描边】打开“描边”对话框，输入宽度为1，按【好】按钮。
设置前景色为深灰色（R:19 G:19 B:19），选择【铅笔工具】按钮（快捷键B），拖动鼠标在方框内沿右边和下边各画一条一象素宽的线，再设置前景色为浅灰色（R:48 G:48 B:48），同样拖动鼠标在方框内沿左边和上边各画一条一象素宽的线。
设置前景色为灰色（R:115 G:115 B:115），选择【油漆桶工具】按钮（快捷键G），填充剩下的空间，再选择【文字工具】按钮，输入“What’s New”字样，效果如图7-2-43所示。
最后制作一个放置“What’s New”内容的面板。首先新建一个名称为“面板3”的图层。选择【矩形选框工具】按钮(快捷键M)，拖动鼠标制作一个长方形选区，接着执行【选择】｜【修改】｜【平滑】命令打开“平滑选区”对话框，输入“取样半径”为2，按【好】按钮。再把前景色设置为灰色（R:142 G:142 B:142）。然后执行【编辑】|【填充…】命令（快捷键Alt+BackSpace）打开“填充”对话框，按【好】按钮。然后设置前景色为黑色，执行【编辑】｜【描边】打开“描边”对话框，输入宽度为1,位置选择“居中”，按【好】按钮。
为了真实，我们又加上光影效果。执行【滤镜】｜【渲染】｜【光照效果】命令，打开“光照效果”对话框，选择光照类型为“全光源”，调整“强度”为29、“光泽”为32、“材料”为-10、“曝光度”和“环境”都为0，再调整左边全光源灯泡的位置和范围，按【好】按钮，如图7-2-2所示。最后在图层面板里输入“面板3”图层的透明度为70%。
再加上一些文字，“What’s New”面板就完成了，效果如图7-2-44所示。
图7-2-42 机械臂效果图
图7-2-43 机械臂效果图2
图7-2-44 “What’s New”面板
[NextPage]
7.2.3 制作背景图象
到这里，整个网页已经大致成形了。我们发现背景太单调，于是又使用一些代表高科技的素材图像。
步骤14 调用电路板图片
打开“电路板.jpg”文件，全选图像，并把图像拷贝到“网页”窗口，拖动鼠标调整图像的位置。再按住Ctrl键单击一开始建立的“基本框架”图层，执行【选择】｜【反选】命令反选选区(快捷键Shift+Ctrl+I)，按Del键删除不要的部分。最后在图层面板中调整“电路板”图层的透明度为80%，并且调整其位置，使其位于面板图层下面，效果如图7-2-45所示。
执行【图像】｜【调整】｜【反相】命令（快捷键Ctrl+I），接着执行【图像】｜【调整】｜【去色】命令（快捷键Shift+Ctrl+U），最后执行【图像】｜【调整】｜【色彩平衡】命令（快捷键Ctrl+B）打开“色彩平衡”对话框，输入色阶的第一个数值为－30，第三个数值为80，按【好】按钮，效果如图7-2-46所示。
图7-2-45 制作背景图像
图7-2-46 调节背景图像
步骤15 调用键盘图片
打开“键盘.jpg”文件，选取键盘的图像，拷贝到“网页”窗口。执行【编辑】｜【自由变换】命令（快捷键Ctrl+T），按住Shift键拖动控制点调整图像的大小，再拖动鼠标移动图像的适当位置，如图7-2-47所示。
按住Ctrl键单击“基本框架”图层，执行【选择】｜【反选】命令反选选区(快捷键Shift+Ctrl+I)，按Del键删除不要的部分。
执行【图像】｜【调整】｜【去色】命令（快捷键Shift+Ctrl+U），最后执行【图像】｜【调整】｜【色彩平衡】命令（快捷键Ctrl+B）打开“色彩平衡”对话框，输入色阶的第一个数值为－30，第三个数值为80，按【好】按钮。
按住Ctrl键单击“键盘”图层，执行【选择】｜【存储选区】命令，输入名称为“键盘”，按【好】按钮。单击“通道”标签进入“通道”面板，再单击“键盘”通道，如图7-2-48所示。
选择【渐变工具】按钮(快捷键G)，把前景色设置为白色、背景色设置为黑色，再在工具栏里选择“从前景到背景的渐变”，拖动鼠标建立一个渐变，如图7-2-49所示。
单击“通道”面板中的“RGB”通道，回到正常的显示模式，执行【选择】｜【载入选区】命令，“通道”选择“键盘”，按【好】按钮。执行【选择】｜【反选】命令(快捷键Shift+Ctrl+I)反选选区，按Del键删除图像，效果如图7-2-50所示。
提示：“通道”是PhotoShop里面一个很有用的功能，本例子用它制作渐变的选区，使图像平滑的融入背景。“通道”还有其他作用，比如取出物体背景等。
图7-2-47 调整键盘图像
图7-2-48 通道面板
7-2-49 建立渐变
7-2-50 调整键盘图像
步骤16 添加主题文字
最后我们再加上CyberNet字样，整个网页就完成了，最终效果如图7-2-51所示。
图7-2-51 最终效果图
举一反三：
本例子用渐变效果、光照效果等制作具有金属效果的网页框架、面板和按钮，其实金属效果还可以用到其他方面，比如制作QQ、Wimamp等可以换肤的软件的面板。读者可以试着用本例子学到的知识试试做QQ的面板（相信只有你的电脑可以上网，就有QQ这个软件）。来吧，用学到的知识，做自己风格的面板！
设为主页
收藏本站
相关文章: