Photoshop 6.0立体按扭的制作

Photoshop 6.0立体按扭的制作

在网页上，按扭是实现交互效果的重要途径。创建和设置完整的按扭可以引导浏览者选择自己喜欢内容或栏目，因此按扭的生动性、新颖性直接决定了页面的访问量。虽然网页按扭的形式多种多样，甚至有些看起来也很复杂，但只要掌握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

本例制作的只是按扭的外型，将按扭放置到网页上时，只要根据需要，设置其目标链接就能实现按扭特有的交互功能，相信效果酷酷的按扭，肯定能给自己的主页增加一定的访问量。：）