Photoshop网页设计中制作Web水晶按钮

12.3.3Web水晶按钮

图12-3-26

在浏览网页中我们经常会看到一些漂亮的水晶似的按钮，那么下面我们就通过使用ps的选区以及图层混合模式等工具制作这样一个web水晶按钮。

1.首先我们打开ps，新建一个500*500像素大小的图像，Ctrl+R打开标尺，做两条辅助线，如图12-3-27所示。

图12-3-27

2.然后选择椭圆选框工具，按住Shift+Alt键，从辅助线中心焦点进行绘制，如图12-3-28所示。然后选择渐变工具，设置渐变的颜色，然后进行填充，如图12-3-29所示。

图12-3-28图12-3-29

3.接下来，我们将选择【选择】菜单，【修改】，选择【收缩】。弹出【收缩选区】对话框，如图12-3-30所示。

图12-3-30

4.单击【确定】，选区被收缩，我们新建一个图层再次选择渐变工具对其进行填充，效果如图12-3-31所示。我们再次新建一个图层，执行上面的操作。这里的收缩量我们设为10像素。颜色我们选择淡紫进行填充，效果如图12-3-32所示。

图12-3-31图12-3-32

5.接着我们再次重复上面的步骤，如图12-3-33所示。下面我们开始制作按钮的高光部分，我们将选区移动，如图12-3-34所示。

图12-3-33图12-3-34

6.我们Ctrl+L打开色阶，调整其色阶值，如图12-3-35所示。

图12-3-35

1.我们选择椭圆选区工具，新建一个图层，绘制一个小椭圆对其进行填充，颜色为白色，填充后，调整到合适的位置，作为按钮的高光点。如图12-3-36所示。高光点绘制完后，我们选择【钢笔】工具，新建一个图层，再次绘制高光形状，为图层3绘制高光，如图12-3-37所示。

图12-3-36图12-3-37