如何利用Photoshop绘制含图案的透明立体按钮

不知道大家看到网页上那些充满立体感效果的三维立体按钮，有什么想法，大家肯定会和我有一样的想法，认为虽然东西很小，肯定花费了制作人很大的功夫。那么这些三维立体按钮是如何被设计出来的呢？大家先看看下面的三维立体按钮，如果觉得喜欢的话，欢迎继续看下去。希望对您能有所启发！

图1

本教程在PHOTOSHOP7.0中实现，如参数设置面板有所不同，请参照7.0版本。

关注photoshop制作效果的网友们都知道，前段时间流行苹果机的图标，于是无论是会使用photoshop的还是追求真善美的朋友，都在自己的桌面掀起了一番应用苹果机图标风潮，其中应用最多数的数按钮。当时的按钮多数都是简洁的三维立体按钮加文字，并且颜色也偏向于素色。如：

图2

如今，三维立体按钮又发生了大变化!什么大变化??先别担心，技术上的变化不多，其实只是将素色加以发挥，向彩色倾移，并加上些色彩丰富的小插图而已，留意文章开始的图标示例就明白了。

好了，闲话少说，下面就让我以制作我的论坛图标为例子，一起进入三维立体按钮制作的教程：

一、绘制过渡色的圆形

先打开PHOTOSHOP7，按 Ctrl + N，新建一个 Width=48 pixels，Height=48 pixels 的空文档，设置选择工具为"Elliptical Marquee Tool-圆形"选择工具，双击鼠标，在工具面板上部出现的属性设置栏里设置：Feather=0 px,Anti-aliased,Style=fixed Size,Width=45 px,Height=45 px。设定选区为直径是45的圆。

图3

移动鼠标到画布上，点击鼠标左键，画出一个固定大小的圆形选择区。注意了，不是将选区置于画布中间，而是按键盘上的方向键，向左向上各移动 2 pixels，目的为后面做按钮阴影，突出按钮立体感做准备。当然，做完了过渡填充再移动也可以，这个由个人习惯定。

图4

任意选择一种前景色，并设置背景色为同一色系中颜色较浅一种，如图五：

图5

在这里多插入几句可有可无的话，我们在选择同一色系的颜色时，如果已经确定了前景色，想设置背景色，那么双击背景色，弹出颜色拾色器-Color Picker，此时鼠标形状就会变成一个吸管，就可移动此形状的鼠标到各个可取色的面板去选择一个喜欢的颜色，在此吸取前景色，这时拾色器自动选择了前景色，那么我们就可以在拾色器中快速地选择到同一色系不同色深的颜色了。

选择" Gradient Fill Tool -过渡填充工具"，在属性工具条中设置过渡色为"Foreground to Background-前景色到背景色"，过渡模式为"Linear Grandient-线形过渡"，设置完成后属性工具如下图所示：

图6

在选区中按"Shift"键，由上至下画过渡色，此步骤完成如下图：

图7

二、绘制初步三维立体感

按"Ctrl + D"消除选区，双击此层应用层样式"Add a Layer Style"，在"Layer Style-层样式"设置面板中选择"Drop Shadow-下拉阴影"，参数设置为：Distance=2，Size=2，其它为缺省值。如图八所示：

图8

再勾选"Inner Glow(内部发光)"，参数设置为： Blend Mode=Multiply，其它为缺省值。如图九所示：

图9

此步骤完成画布上已经初步显示出三维立体按钮的基本模样了，如下图：