虽然越来越多的人开始使用宽带，速度已经不象早些年那样限制着网络，但近年来的网页却没有越来越繁杂，正相反，以简约为风尚的网页设计正悄悄流行在网络世界中。这种风格不但节约了带宽，更重要的是，大多数人更喜欢在清新的环境中寻找他们所需的信息，简单精巧的设计，使获取信息变得更加方便快捷。今天，我们就来设计几款最常用的网页小巧按钮。
第一款：像素按纽
这是目前最为流行的一种按纽，在每个以像素为主题的网站上几乎都能看到它的身影。想要最大程度的减小网页大小，这种按纽可是不二法门。这种按纽简单大方，除了个性化的网站之外，用于公司网页也非常合适。
新建一个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）
图10
2.载入通道选区，回到RGB通道，新建图层1，复位色板，将前景色设为RGB（209，209，209），选择线性渐变工具，用从前景色到背景色的渐变填充选区。打开描边对话框，将宽度设为1像素，颜色为默认的前景色，位置居外，完成之后不要取消选择。（图11）
图11 3.下面我们来制作按纽的高光部分。新建图层2，选择选框工具，按住Shift键，同时按向上的方向键3次，将选区向上移动30像素（图12a）。在选区内填充白色，载入通道1的选区，反选，删除多余的白色图像，取消选择。用半径为0.3像素的高斯模糊滤镜轻微的模糊白色高光，将图层2的不透明度减低到75％。（图12b）
图12a
图12b
4.将图层1和图层2合并，为图层添加内阴影样式：阴影的混合模式和颜色不变，不透明度降低到53％，角度为-45度，使用全局光，距离为2像素，阻塞为1％，大小为3像素，品质不变。（图13）
图13
5.现在你可以为按纽添加文字部分了，添加一些投影效果可能会更理想（图14）。如果想要改变按纽的颜色，可以使用色相／饱和度工具，选择着色模式，按需要调整颜色。用这个方法你还可以做出透明效果的导航栏。（图15）
图14
图15第四款：塑料按纽（一）
这个按纽一点也不输于刚才我们所介绍的Mac按纽，尽管方法有些相似，但质感更强。如果你不满足于一种制作透明按纽的方法，那么这个一定不会让你失望。
1.不用说，第一步仍是新建RGB模式的白色背景文档。复位并翻转色板，以白色为前景色，新建一层，选择圆角矩形工具，点击工具栏上的下拉三角，打开几何选项，在圆角矩形选项中设置矩形为固定大小，98×28像素，然后将圆角半径设为3像素，选择消除锯齿。设置好之后，用鼠标在背景上点击，圆角矩形会以线框的形式显示，在松开鼠标之前拖动，定位矩形的位置，如图16所示。这时虽然看不到图像的变化，但在图层面板上我们已经注意到图层1的改变。
图16
2.双击图层，进入图层样式，为了使我们的按纽清晰的显示出来，我们先来选择描边样式，设置描边大小为1像素，位置在内部，混合模式为正常，不透明度为62％，描边颜色为RGB（58，58，58）；
我们用渐变叠加样式为按纽添加基本的渐变：混合模式为正常，不透明度设为15％，渐变为默认的黑色到白色，不过要选择反向，将黑色色标的位置从0％移动到40％处，样式为线性，选择与图层对齐，角度为90度，缩放为60％，如图17所示。
图17
3.下面，我们为按纽添加立体感，选择斜面和浮雕，样式选择内斜面，方法为平滑，深度为1000％，方向为上，大小为2像素，软化为3像素，阴影角度为-84度，取消全局光，高度为34度，保持高光和暗调的数值不变，仅将暗调的不透明度降低为16％。（图18）
图18
4.接下来的这一步是至关重要的，我们要在这一步中为按纽添加光泽效果。这次我们用一个比较特别的方法——内阴影样式。在样式列表中选择内阴影，将混合模式设为正常，颜色为白色，不透明度为65％，取消全局光后将角度设为-90度，距离为13像素，阻塞和大小均为0，然后，修改等高线，点击默认的等高线，拖动映射曲线两端的端点，将它们自上而下改变位置，如图19a，这样，我们的视觉就会将白色的内阴影作为反光。（图19b）
图19a5.最后，我们为按纽添加一点阴影效果：选择投影，将投影的不透明度设为14％，取消全局光，将角度设为-134度，距离和大小为1像素，扩展为0％，品质保持默认状态不变。（图20）
图20
6.剩下的工作，就是写上文字了。这里，我依然对文字层用了一点投影效果来修饰它。（图21）
图21
第五款：塑料按纽（二）
这是另外一种形式的塑料按纽，相对于前面我们所介绍的几种类型来说，下面我们将要介绍的这种按钮显得更活泼，更适合用于轻松的网站。这种方法适合制作各种不规则的按纽。
1.前几步的过程和上几个圆角按纽的制作过程相似，新建文档，新建图层1，用矩形选框工具选择一个矩形形状，新建通道1，填充白色，取消选择。
高斯模糊通道，调节色阶，使矩形圆角化（具体数值可参考上面几个例子），载入选区，回到RGB通道，选择作为按纽颜色的前景色，在图层1内填充选区，取消选择，然后用变形工具将圆角矩形变形。（图22）
图22
2.下面我们来制作按纽的高光部分。不同于前面的几个例子，这次我们来手工制作按纽的高光。选择自由钢笔工具，在按纽的上部勾勒一条路径，然后转化为选区，新建一层，用白色填充选区，取消选择。（图23）
图23
3.当然，这不会是我们的高光，这个白色区域，只是作为高光部分的选区基础。现在载入图层1的不透明区域通道，从选择菜单的修改命令组中选择收缩命令，将选区收缩1像素，反选，确定在图层2中，删除选区图像。载入图层2的不透明区域，现在这个选区才是我们真正所需要的高光选区。（图24）
图24 4.接下来，我们要清除选区内的白色，连续按4次Delete键，这样，选区中的像素就被清除的差不多了。将前景色设为白色，选择线性渐变工具，将渐变设为从前景色到透明，从选区的顶部到底部做出渐变，取消选择。你可能需要多试几次，才能将渐变做的理想。（图25）
图25
5.高光完成之后，我们来进行暗调。和刚才一样，首先用自由钢笔工具选择暗调的区域，转化为选区之后，新建图层3，将前景色设为黑色，用黑色填充选区。
载入图层1的不透明区域，将选区收缩1像素，反选，删除多余的黑色。载入图层3的不透明通道，连续做几次删除，直到基本清除了选区内的黑色像素。（图26）
图26
6.用黑色到透明的渐变填充图层3的选区后，取消选择。高斯模糊，半径为3像素，然后将图层的不透明度减低到46％。载入图层1的选区，反选，删除图层3内的多余柔化像素，取消选择。
现在，我们来为图层1添加一点投影效果。前面的几个例子中我们都大量运用了图层样式，而这个按纽效果大部分都是靠手工完成，只有这一点要增加一点修饰效果。打开投影样式，将不透明度减低为50％，角度为90度，距离和大小均为2像素，扩展为0％。（图27）
图27
7.最后，我们为按纽添加文字。用黑色添加文字图层之后，将它移动到图层1之上，这样高光就可以对它有影响。复制文字层，将底部的文字层填充为和按纽相同的颜色，图层混合模式为颜色减淡，用半径为1.0像素的高斯滤镜稍加模糊，再将图层的不透明度减低为60％。（图28）
图28
用这种方法，按纽的形状不再局限于圆形或方形，你可以创造各种形状的按纽了。
第六款：内嵌按纽
很多时候，按纽会搭配具有个性化的面板。这种组合会使你的网页看起来更精致。下面我们就来介绍一种小巧的内嵌式按纽，这种按钮不但可以用于网页，对于别的图像，如手机上的按键，播放器上的按纽，也是非常合适的。这个按纽也是通过图层样式构造的，分为两个部分。下面我们来具体的看看制作过程。
1.首先，打开一个需要添加按纽的面板图像，如图29所示。设置前景色为RGB（193，194，196），选择椭圆矢量工具，在工具选项中设置绘图方式为创建形状图层，按住Shift键，在图中绘制一个小小的圆形。（图30）
图30
这里，我们之所以采用形状图层，是因为它在放大和缩小时都不会影响图像的品质。你可以按自己的需要所示调整按钮的大小。
2.下面我们开始为按纽添加图层样式。
首先是内阴影：将阴影的混合模式设为正常，颜色为白色，不透明度为29％，取消全局光，角度为-81度，距离为2像素，阻塞和大小均为0，品质不变；
其次是内发光：混合模式为正常，不透明度为22％，颜色为黑色，发光方法为较柔软，自边缘发光，阻塞为0，大小为4像素，品质不变；
然后是渐变叠加：将渐变的混合模式设为屏幕，不透明度为81％，保持渐变色默认状态，将缩放设为49％；
最后一种样式是描边：描边大小为1像素，位置在外部，混合模式为正常，不透明度为34％，填充颜色为黑色。（图31）
图31
3.现在，我们的按纽已经具有立体感了，但是看起来按纽像是粘在面板上的一样，没有和面板融为一体。这就是为什么我们要制作出内嵌的效果的原因了。下面我们就来把按纽嵌入面板中。
点击按纽层的矢量蒙版缩览图，显示蒙版路径，在路径面板中，你会看到名为形状1矢量蒙版的路径，复制这条路径，名为路径1，选择直接选择工具，在画面的任何地方点击右键，从弹出菜单中选择自由变换路径，按住Alt和Shift键，拖动定型框的边角，从中心等比例放大路径，使路径1的大小比按纽路径稍大一些，如图32所示，确定变形。
图324.在按纽层下新建图层1，确定当前工具仍为直接选择工具，点击右键，从菜单中选择创建矢量蒙版命令，路径1的区域将作为蒙版添加到图层1中。
复位色板，用背景色填充图层1，看看白色区域和按纽的比例是否合适。如果不满意，可以通道修改矢量蒙版来改变大小。（图33）
图33
5.取消对蒙版路径的选择状态，双击图层1，进入样式面板，选择渐变叠加，将混合模式设为正片叠底，不透明度为100％，选择反向，使渐变从白色到黑色，样式为线性，与图层对齐，角度为90度，缩放为75％。有必要的话，还可以改变渐变颜色中点的位置（图34）。你可以按自己的需要将按纽组合起来，也可以改变按纽的形状、大小和纹理，创建多样化的按纽。在改变按纽形状时，要注意图层样式和按纽形状的配合。这里例子中，我添加了色相／饱和度调整图层，用以为按纽上色。（图35）
图34
图35
水木清华平面稿设计欣赏