用Photoshop制作页面常用小巧按钮(上)

虽然越来越多的人开始使用宽带，速度已经不象早些年那样限制着网络，但近年来的网页却没有越来越繁杂，正相反，以简约为风尚的网页设计正悄悄流行在网络世界中。这种风格不但节约了带宽，更重要的是，大多数人更喜欢在清新的环境中寻找他们所需的信息，简单精巧的设计，使获取信息变得更加方便快捷。今天，我们就来设计几款最常用的网页小巧按钮。

    第一款：像素按纽

    这是目前最为流行的一种按纽，在每个以像素为主题的网站上几乎都能看到它的身影。想要最大程度的减小网页大小，这种按纽可是不二法门。这种按纽简单大方，除了个性化的网站之外，用于公司网页也非常合适。

    新建一个Photoshop文档，RGB模式，白色背景。

    新建一层，复位色板，将前景色设为一种浅灰色，如例子中的RGB（239，239，239），用矩形选框工具选择一个小矩形，大概为40×11像素大小（可以参考信息面板，或者直接在矩形选框的工具选项中设定好矩形的固定大小，然后在画布上点击即可），填充前景色后取消选择。

    下面我们来制作按纽的立体效果。这里，我们完全用添加图层样式的方法，双击图层，打开图层样式对话框，我们来依次添加：

    首先选择斜面和浮雕样式，设置结构为内斜面，方法为平滑，深度为1％，方向在上，大小和软化均为2像素，阴影角度为146度，使用全局光，高度为30度，光泽保持默认，高光和暗调的混合模式与颜色都不变，不过不透明度分别设为100％和43％；

    其次是内阴影模式，模式为正常，颜色为白色，不透明度为100％，角度为146度，使用全局光，距离为1像素，阻塞为100％，大小为0，品质不变；

    接下来是描边，将描边大小设为1像素，位置在外部，混合模式为正常，不透明度为100％，填充类型为颜色，描边颜色设为黑色；

    最后是投影样式，将阴影颜色设为黑色，不透明度为22％，角度为120度，取消全局光，距离为3像素，扩展为0，大小为0，品质保持默认不变。

    好了，现在你可以选择细一些的字体，最好是专门的像素字体，在按纽上写上文字。在设置文字选项的时候，有一项需要特别注意，那就是要将文字消除锯齿的方式设为无，否则字体会出现模糊。整个制作过程如图01所示。



图01

    如果觉得灰色太单调，你也可以为按纽添加各种颜色，过程和前面的大致相同，但有些地方有些细微差别。

    在新建图层、设置选区后，设置你的前景色，如这里我们将前景色设为RGB（106，175，5），填充选区后取消选择。然后开始设定图层样式。在斜面和浮雕样式中，将深度设为100％，大小和软化为1像素，注意要将阴影的高光模式设为颜色减淡，不透明度为65％，暗调的不透明度也要减低一些；和刚才不同，我们取消了内阴影样式，在描边样式中，将描边颜色设为一种较深的灰色，如RGB（132，132，132），当然，你也可以用黑色描边；对于投影样式，由于按纽本身的颜色较深，相对的，我们可以将阴影的不透明度设的稍微高一些，40％即可。最后，写上文字。（图02）



图02

    你还可以将这两种按纽结合起来，作为鼠标翻转动画来装饰你的网页。

    第二款：渐变按纽

    相对于第一款按纽来说，接下来我们要介绍的这种类型的按纽实用性更强，而且颜色也更丰富。你在许多网站上都会看到它。

    首先，仍是新建RGB模式的Photoshop文档，白色背景。

    这次我们用矢量工具来处理选区。选择圆角矩形工具，绘图方式为填充像素，将工具选项中的圆角半径设为3像素，复位色板，用黑色在画布上绘制一个圆角矩形。（图03）



图03

    这里，我们用黑色绘制圆角矩形，是为了能看清按纽形状，但这个按纽本身是需要用白色填充的，所以，一旦你对圆角矩形的形状满意之后，按Ctrl+Shift+Delete，用白色填充图层中的不透明区域。

    双击图层，进入图层样式，先选择渐变叠加样式，混合模式为正常，不透明度为56％，渐变样式为线性，渐变从黑色到白色，选择与图层对齐，角度为90度，缩放为150％，如图04所示；



图04

    接下来，我们为按纽添加立体感，选择斜面和浮雕样式，在样式中选择内斜面，方法为平滑，深度为1％，方向为上，大小为1像素，软化为0像素，阴影的角度为120度，使用全局光，高度为30度，保持高光和暗调的默认混合模式及颜色不变，高光的不透明度为75％，暗调为36％；（图05）



图05

    现在，我们来为按纽添加颜色，选择颜色叠加样式，将混合模式设为颜色，设置叠加颜色为RGB（91，145，191），不透明度为100％，如图06所示；



图06

    最后，我们再用描边的方式修饰按纽，设置描边大小为1像素，位置在外部，混合模式为正常，不透明度为100％，填充类型为颜色，将颜色设为RGB（129，129，129）这种灰色。（图07）



图07

    你可以将这种样式保存下来，这样，在制作同类型的按钮时就很方便了，如果想要改变按纽的颜色，只需进入渐变叠加样式，修改渐变色即可。

    下面，我们要在按纽上写上文字。选择文本工具，在按纽上点击，Photoshop会自动新建文字层。将前景色设为白色，写上按纽文字。这里，我选择的字体是Verdana Bold。写好之后，选择按纽层，将文字层与之链接，居中对齐文字层。最好在给文字添加一些图层效果，使它更为醒目：双击文字层，打开图层样式，先选择外发光，将发光的混合模式设为正常，不透明度为60％，发光颜色为RGB（76，144，148）（这个颜色是和按纽颜色相对应的），方法为较柔软，扩展为100％，大小为1像素，品质保持不变；然后选择投影样式，混合模式为正片叠底，颜色为刚才我们选择的外发光的颜色，不透明度为75％，角度为120度，使用全局光，距离为1像素，扩展为0％，大小为2像素，品质保持默认状态。这样，这个渐变按纽就完成了。（图08）



图08

    第三款：简单的Mac按纽

    这款按纽的知名度很高，制作方法也有很多种，这里，我们用了一种较为简单的，但效果同样好。

    1.新建RGB文档，白色背景。用矩形选框工具选择一个矩形，作为按纽的基础。新建一个通道，复位通道色板，在选区内填充白色后取消选择。（图09）



图09

    先将通道做高斯模糊处理，半径为3.5像素，随即用色阶工具调整，将输入色阶分别设为117，1.00，141，使通道中的白色矩形成圆角化。（图10）


0
图10

    2.载入通道选区，回到RGB通道，新建图层1，复位色板，将前景色设为RGB（209，209，209），选择线性渐变工具，用从前景色到背景色的渐变填充选区。打开描边对话框，将宽度设为1像素，颜色为默认的前景色，位置居外，完成之后不要取消选择。（图11）


1
图11

    3.下面我们来制作按纽的高光部分。新建图层2，选择选框工具，按住Shift键，同时按向上的方向键3次，将选区向上移动30像素（图12a）。在选区内填充白色，载入通道1的选区，反选，删除多余的白色图像，取消选择。用半径为0.3像素的高斯模糊滤镜轻微的模糊白色高光，将图层2的不透明度减低到75％。（图12b）


2
图12a


3
图12b

    4.将图层1和图层2合并，为图层添加内阴影样式：阴影的混合模式和颜色不变，不透明度降低到53％，角度为-45度，使用全局光，距离为2像素，阻塞为1％，大小为3像素，品质不变。（图13）


4
图13

    5.现在你可以为按纽添加文字部分了，添加一些投影效果可能会更理想（图14）。如果想要改变按纽的颜色，可以使用色相／饱和度工具，选择着色模式，按需要调整颜色。用这个方法你还可以做出透明效果的导航栏。（图15）


5
图14


6
图15（出处：PConline）

……