在网页上,按扭是实现交互效果的重要途径。创建和设置完整的按扭可以引导浏览者选择自己喜欢内容或栏目,因此按扭的生动性、新颖性直接决定了页面的访问量。虽然网页按扭的形式多种多样,甚至有些看起来也很复杂,但只要掌握Photoshop
6.0的基本知识,运用各种技巧,都是可以实现的。而且较之于其它同类处理软件,实现这些效果更为简单。在这一实例中,就介绍利用Photoshop
6.0强大的图形处理功能来制作富有立体感的按扭。
制作立体按扭的技术要领是各种渐变颜色的运用,以实现逼真的3D效果。下面以Step-by-Step的形式,分步来介绍。、按Ctrl+N键,新建一个Width(宽度)为300 pixels,Height(高度)为150
pixels,分辨率为72 ppi的RGB图像文件,并选择喜欢的颜色填充背景图层;、激活通道面板,单击Create new channel按扭,新建一个名“mask”的通道;
1、选择矩形工具,绘制一个白色矩形,取消选择,选择mage > Adjust >
Levels命令,在Levels面板上设置参数为140,1.00和150。然后回到Layer面板,新建一层,选择Selection
> Load Selection命令,在将通道转成选区;
2、单击按扭,或直接使用快捷键“D”,使前景色为黑色,背景色为白色。选择角度渐变工具,然后从矩形选择区域的左下角按下鼠标并拖动至右上角,此时可得效果如3所示效果:
3、选择Select > Modify > Contract命令,激活Contract
Select对话框,输入数值2,使选择区域缩小2个像素单位:
4、使用合适的颜色填充选择区域,然后取消选择,这时的按扭效果如图5所示:
5、按扭已初步实现了立体效果,具有了我们较为熟悉的Windows风格,但略显单调。下面继续介绍在此基础上添加修饰,使其更具有三维效果。
下面几个步骤将实现在按扭上内嵌入几条立体纹理。方法较为简单,但效果不错。就先跟着我来做吧:、新建一图层Layer
2。选中单行选择工具,按住Shift键的同时,在按扭适当位置上单击,得到多个成行的选择区域。
6、选择Edit >
Stroke命令,在打开的对话框中设置线宽为1像素单位,颜色为白色。单击OK确定,取消选择,可以得到如图7所示的效果:
7、复制Layer,在新图层上,按Ctrl+I键取反色。单击按扭,选择移动工具,使用键盘的方向键,向上按击一下,使黑色线条向上移动一个象素单位,效果如图8所示:
8、使用快捷键Ctrl+E向下合并图层。然后用移动工具将合并的三条线段,调节至适当位置。若想将超出按扭外的多余部分删除,可以在按住Ctrl键的同时,在Layer面板上选中Layer
1图层名得到选择区域,然后按Ctrl+Shift+I键反选,再按Delete键删除即可,效果如图9:
9、完成了纹理嵌入,下面给按扭文字位置也做出适当效果:、再新建一层,用矩形选择工具在需要输入按扭文字的位置做出一矩形区域,如图10
10、选择线形渐变工具,定义好较深的前景色和适当的浅色背景色,加强阴影产生的对比度。并在按住Shift的同时,用鼠标自上而下拖动,填充渐变色,产生内凹的效果,使用Ctrl
+ D键,取消选择,得如图11效果:
11、新建一层,使用文字工具输入需要的文字,就完成了按扭的制作:
12、本例制作的只是按扭的外型,将按扭放置到网页上时,只要根据需要,设置其目标链接就能实现按扭特有的交互功能,相信效果酷酷的按扭,肯定能给自己的主页增加一定的访问量。:)
使用Photoshop还可以制作出很多各种眩目的效果,但基本方法都是一样的,只要发挥主观能动性,熟练运用各种技巧,相信各位读者都能做出自己满意的作品。
|