刚开始做网页的时候,我们虽然只会做几个表格、插入一些图片,但我们还是为自己能做出一个自己的网页而兴奋不已。可是时间一久,我们又不满足于只做表格和插入图片了。看看别人做的网页现代感十足,我们不禁也想尝试。那么现在就来试着做一个自己的现代感网页吧。在这个例子里,我们假想为一个名为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 基本框架效果图
[NextPage]
步骤4 制作横贯整个画面的管道
执行【图层】|【新键】|【图层】命令(快捷键Shift+Ctrl+N)打开“新图层”对话框,输入名称为“管道”,按【好】按钮。然后先执行【选择】|【取消选择】命令(快捷键Ctrl+D)取消刚才制作的长方形选区,再选择【矩形选框工具】按钮(快捷键 M),拖动鼠标制作一个长条形的选区,如图7-2-7所示。
图7-2-7 选择长条形区域
要制作管道的立体金属效果,需要使用渐变工具。选择【渐变工具】按钮(快捷键 G),如图7-2-8所示。
图7-2-8 渐变工具
单击工具栏上的【点按可编辑渐变】按钮打开“渐变编辑器”对话框,如图7-2-9所示。
输入名称为“管道”,在渐变色带下方单击建立三个色标,把左右两个色标分别拖动到两边,分别双击两边的色标打开拾色器,把颜色都设置为黑色。单击中间的色标,再双击打开拾色器,把颜色设置为白色,再输入位置为50%。接着单击中间色标左边的停止点,输入位置为70%,单击中间图标,再单击右边停止点,输入位置为30%,完成后按【新建】按钮。如果按照上面的属性进行设置,可以得到如图7-2-10的效果。
提示:渐变编辑器的渐变色带下方有两种控制点,一种是色标,一种是停止点,两种控制点都可以通过单击选择,并且下方会出现其对应的属性。通过对渐变编辑器中渐变色带下方的区域进行操作,可以增加或删除色标。单击渐变色带下方空白区域为添加一个色标,单击选择某个色标,再按Del键可以删除色标。在这个例子中我们将反复用到渐变,所以熟悉渐变编辑器的用法是很重要的。
图7-2-9 点按可编辑渐变
图7-2-10 渐变编辑器对话框
按住Shift键拖动鼠标在选择区域上面制作渐变,如果你觉得用普通的100%显示的图像难以进行操作的话,可以选择【缩放工具】按钮(快捷键Z)放大图像。如图7-2-11所示。完成后效果如图7-2-12所示。
提示:在这个例子的制作中,有很多是“象素级”的操作,既要把图像放大很多倍进行操作,如图7-2-11就是放大成600%后的效果。要放大图像,可以使用【缩放工具】,其基本操作是单击图像放大。双击工具面板上的【缩放工具】按钮(快捷键Z)则可以使图像恢复的100%大小。另外还可以在“导航器”面板里面输入图像显示大小。
图7-2-11 拖动鼠标制作渐变
图7-2-12 管道图像效果图
[NextPage]
一条管道已经制作好了,我们复制出另一条管道,并移动它的位置使之位于黑色区域下端。首先执行【窗口】|【显示图层】(如果图层面板已显示,此步可免),在“管道”图层上单击右键,执行【复制图层…】命令打开“复制图层”对话框,按【好】,或者拖动“图层3”到图层面板上的【创建新的图层】按钮上放开,即可复制“管道”图层。然后在图层面板上选择“管道 副本”,拖动图像到黑色区域下端,效果如图7-2-13所示。
图7-2-13 管道最后效果图
步骤5 制作覆盖在管道上面的金属面板
首先执行【图层】|【新键】|【图层】命令(快捷键Shift+Ctrl+N)打开“新图层”对话框,输入名称为“面板1”,按【好】按钮。然后选择【矩形选框工具】按钮(快捷键 M),拖动鼠标在上面一条管道的上面制作一个长方形的选区,再执行【选择】|【修改】|【平滑】命令打开“平滑选区”对话框,输入“取样半径”为2,按【好】按钮,如图7-2-14所示。
图7-2-14 制作长方形选区
接下来使用渐变工具制作出金属效果。首先选择【渐变工具】按钮(快捷键 G),再单击工具栏上的【点按可编辑渐变】按钮打开“渐变编辑器”对话框。
输入名称为“面板”,在渐变色带下方单击建立三个色标,三个色标从左到右分别输入为:第一个色标颜色为深灰(R:45 G:46 B:46),位置0%,第二个色标颜色为浅灰(R:162 G:161 B:161),位置71%,第三个色标颜色为中深灰(R:92 G:92 B:91),位置为100%,然后由左到右输入两个停止点的属性,首先单击第一个色标使第一个停止点出现,单击停止点,输入位置为56%,再单击第二个色标使第二个停止点出现,输入位置为61%,按【新建】按钮,再按【好】按钮,如图7-2-15所示。
小常识:在这个例子里面,使用渐变来制作金属效果。通过设置色标和停止点的位置,可以模拟出金属表面的光泽。
图7-2-15 渐变编辑器对话框
拖动鼠标制作出渐变效果,再设置前景色为黑色,执行【编辑】|【描边】打开“描边”对话框,输入宽度为1,位置选择“居中”,按【好】按钮,效果如图7-2-16所示。
图7-2-16 金属面板效果
[NextPage]
步骤6 制作另外一个金属面板
做到这里,读者应该已经对如何制作金属面板效果有了一定的了解。我们用同样的方法制作另一个金属面板,不过为了不重复,我们稍微改变一下下面金属面板的形状。
首先选择【矩形选框工具】按钮(快捷键 M),拖动鼠标在下面管道的上制作一个长方形的选区,再按住Shift键,拖动鼠标制作另一个长方形选区,和刚刚制作的长方形选区并在一起,如图7-2-17所示。
图7-2-17 制作选区
然后选择【渐变工具】按钮(快捷键 G),在工具栏中选择刚才建立的“面板”渐变,拖动鼠标制作渐变。再设置前景色为黑色,执行【编辑】|【描边】打开“描边”对话框,输入宽度为1,位置选择“居中”,按【好】按钮,效果如图7-2-18所示。
图7-2-18 金属面板效果图
步骤7 修饰钢铁面板的效果
首先选择【矩形选框工具】按钮(快捷键 M),拖动鼠标在下面面板的上制作一个小长方形的选区,如图7-2-19所示,再执行【图像】|【调整】|【亮度/对比度】命令打开“亮度/对比度”对话框,输入“亮度”为-40,按【好】按钮。
调整亮度后的面板边界不明显,所以我们为它加了一条边线。首先选择【缩放工具】按钮(快捷键Z),把图像显示扩大为700%,再选择【矩形选框工具】按钮(快捷键 M),拖动鼠标制作一个只有一个象素宽的选区,如图7-2-20所示,然后执行【图像】|【调整】|【亮度/对比度】命令打开“亮度/对比度”对话框,输入“亮度”为-70,按【好】按钮。这时确定【矩形选框工具】按钮(快捷键M)被选择,按键盘上方向键向左键使一个象素宽的选区向左移动一个象素,同样执行【图像】|【调整】|【亮度/对比度】命令,输入“亮度”为30,按【好】按钮,完成后效果如图7-2-21所示。
图7-2-19 选择一个小长方形选区
图7-2-20 一个象素宽的选区
图7-2-21 面板效果图
[NextPage]
现在我们接着再做几个装饰性的铁环。首先执行【图层】|【新键】|【图层】命令(快捷键Shift+Ctrl+N)打开“新图层”对话框,输入名称为“铁环”,按【好】按钮。选择【缩放工具】按钮(快捷键B),把图像显示扩大为700%。然后把前景色设置为黑色,选择【铅笔工具】按钮(快捷键B),在“管道”上拖动鼠标画一个长比管道长一点、宽三象素并且缺四个角的长方形,再把前景色设置为深灰色(R:89 G:89 B:89),在长方形内上、下角各点一下。同样,把前景色设置为浅灰色(R:180 G:180 B:180),在长方形内上、下角各点一下,效果如图7-2-22所示。
提示:铁环为什么要这么做呢?只要想一下,现实中我们看到的铁环由于光的照射,会产生两边暗、中间亮的效果,同样的道理,我们制作铁环的时候也是中间暗、两边亮。
一个铁环制作完成后,我们就不必再重复同样的操作了,我们所要做的,只是复制刚刚做的“铁环”图层,移动复制的铁环的位置。如此重复,做出十几个铁环,最后效果如图7-2-23所示。
图7-2-22 铁环效果图
图7-2-23 铁环最后的效果图
步骤8 添加一条天线和一个面板
首先制作天线的杆,新建一个名为“天线”的图层,然后选择【矩形选框工具】按钮(快捷键M),拖动鼠标在上面面板的左边制作一个长方形选区,再选择【渐变工具】按钮(快捷键G),在工具栏中选择刚才建立的“管道”渐变,拖动鼠标制作一个渐变,效果如图7-2-24所示。
接着执行【编辑】|【自由变换】命令(快捷键Ctrl+T),然后在图像上按右键,出现弹出菜单,执行【透视】命令,然后拖动上面的控制点,使长方形变成三角形,按【进行变换(Return)】按钮(快捷键Ctrl+Enter)。
接着我们加上一个圆球。首先选择【椭圆形选框工具】按钮(快捷键M),按住Shift键拖动鼠标在天线杆顶端制作一个圆形选区。再选择【渐变工具】按钮(快捷键G),把前景色设置为白色、背景色设置为黑色,再在工具栏里选择“从前景到背景的渐变”,如图7-2-26所示,再选择【径向渐变】按钮,如图7-2-27所示。然后拖动鼠标制作一个径向渐变,效果如图7-2-28所示。
提示:【渐变工具】中【线性渐变】可以产生面板效果,【径向渐变】则可以产生圆球的效果。我们平时见到的很多金属效果,除了直接用3D软件进行制作,很多就是通过各种渐变效果得到的。
图7-2-24 制作长方形选区并制作渐变
图7-2-25 拖动控制点使图像变形
图7-2-26 选择“从前景到背景的渐变”
图7-2-27 选择“径向渐变”
图7-2-28 径向渐变效果图
[NextPage]
我们已经完成天线的制作,这时要注意在图层面板里把“天线”图层置于“面板 1”图层的下面。然后我们再复制“面板 1”图层为“面板 1 副本”,并把复制的图象移动到右边,可以看到我们把左边整个面板都复制了,但我们只要上面的面板,所以选择【矩形选框工具】按钮(快捷键M),在下面的面板上建立一个选区,然后按Del键删除,完成后效果如图所示。
到这里,机械面板的大体框架就制作完成了,接下来我们还要继续为机械面板增加网站向导面板和“What’s new”面板。
图7-2-29 面板效果图
7.2.2 制作网站向导面板和“What’s new”面板
一个网站首页往往有向导链接和“What’s new”等内容,我们在设计网页布局的时候,把左边两个面板之间的空间留下来做向导面板,而两个面板下面的区域则制作一个“What’s new”面板。
步骤9 制作向导面板的底板
首先新建一个名称为“向导面板”的新图层。选择【矩形选框工具】按钮(快捷键M),拖动鼠标在左边两个面板之间制作一个长方形选区,接着执行【选择】|【修改】|【平滑】命令打开“平滑选区”对话框,输入“取样半径”为2,按【好】按钮。再把前景色设置为灰色(R:142 G:142 B:142)。然后执行【编辑】|【填充…】命令(快捷键Alt+BackSpace)打开“填充”对话框,按【好】按钮。然后设置前景色为黑色,执行【编辑】|【描边】打开“描边”对话框,输入宽度为1,位置选择“居中”,按【好】按钮,效果如图7-2-30所示。
提示:读者学习制作这个例子到这里,相信已经基本知道了制作面板的方法,总结起来无非是先制作一个长方形选区,再制作渐变,最后描边。读者完全可以自己再试着做一些变化,如做一些非长方形形状的选区、改变渐变效果,只要多试多练,读者也可以制作出有自己特色的金属效果。
图7-2-30 制作向导面板
我们再为底板加上光影效果。执行【滤镜】|【渲染】|【光照效果】命令,打开“光照效果”对话框,选择光照类型为“全光源”,调整“强度”为29、“光泽”为32、“材料”为-10、“曝光度”和“环境”都为0,再调整左边全光源灯泡的位置和范围,按【好】按钮,如图7-2-31所示。最后在图层面板里输入“向导面板”图层的透明度为70%,完成后效果如图7-2-32所示。
提示:我们看到,要制作金属感或者塑料感的效果,就是要做出这些材料在光照下的不同反射。渐变效果是制作金属效果的一种方法,同样,光造效果也是一种方法。
图7-2-31 光照效果对话框
图7-2-32 向导面板底板效果图
[NextPage]
步骤10 加上几个链接按钮
首先新建一个名称为“按钮”的图层。选择【矩形选框工具】按钮(快捷键M),拖动鼠标制作一个长方形选区,再按住Alt键,减去长方形选区的一部分,如图7-2-33所示。
然后选择【渐变工具】按钮(快捷键 G),在工具栏中选择刚才建立的“面板”渐变,拖动鼠标制作渐变。再设置前景色为黑色,执行【编辑】|【描边】打开“描边”对话框,输入宽度为1,位置选择“居中”,按【好】按钮,效果如图7-2-34所示。
我们复制刚刚做好的按钮的一部分,移动它的位置到右边,执行【编辑】|【自由变换】命令(快捷键Ctrl+T),然后在图像上按右键,出现弹出菜单,执行【水平翻转】命令。最后选择【铅笔工具】按钮(快捷键B),设置前景为黑色,画出四条横线,再设置前景为白色,画两条白线,选择【油漆桶工具】按钮(快捷键G),把按钮的底填充为灰色(R:142 G:142 B:142),这样一个按钮就完成了,效果如图7-2-35所示。
我们再复制刚刚做好的按钮图像,在向导面板底板上排成一排。完成后,再在按钮图像上加上提示文字,整个向导面板就完成了,效果如图7-2-36所示。
提示:这个例子中的按钮是比较简单的,读者可以用上面学到的制作金属效果的方法,再制作更精美的按钮图像,比如为按钮加几个铁环。
图7-2-33 按钮的选区
图7-2-34制作按钮
图7-2-35 按钮效果图
图 7-2-36 向导面板效果图
小技巧:在Photoshop中,有很多时候要修改设置的参数。一般情况会在取值框的右侧有一个黑三角,点击它会出现一个滑动标尺,拖动标尺就可以修改取值了,但有时不会十分精确。这时可以按键盘上的向上箭头键(每按一下表示取值加一)和向下箭头键(每按一下表示取值减一),来准确调整数值。如果按住"Shift"键不放,那么每按一下表示取值加10或减10。
[NextPage]
步骤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这个软件)。来吧,用学到的知识,做自己风格的面板!