photoshop教程之web按纽.docx

photoshop教程之web按纽.docx

《photoshop教程之web按纽.docx》由会员分享，可在线阅读，更多相关《photoshop教程之web按纽.docx（11页珍藏版）》请在冰豆网上搜索。

photoshop教程之web按纽

　第一款：

像素按纽

　　这是目前最为流行的一种按纽，在每个以像素为主题的网站上几乎都能看到它的身影。

想要最大程度的减小网页大小，这种按纽可是不二法门。

这种按纽简单大方，除了个性化的网站之外，用于公司网页也非常合适。

　　新建一个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会自动新建文字层。

将前景色设为白色，写上按纽文字。

这里，我选择的字体是VerdanaBold。

写好之后，选择按纽层，将文字层与之链接，居中对齐文字层。

最好在给文字添加一些图层效果，使它更为醒目：

双击文字层，打开图层样式，先选择外发光，将发光的混合模式设为正常，不透明度为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）

图19a

5.最后，我们为按纽添加一点阴影效果：

选择投影，将投影的不透明度设为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所示，确定变形。

图32

4.在按纽层下新建图层1，确定当前工具仍为直接选择工具，点击右键，从菜单中选择创建矢量蒙版命令，路径1的区域将作为蒙版添加到图层1中。

　　复位色板，用背景色填充图层1，看看白色区域和按纽的比例是否合适。

如果不满意，可以通道修改矢量蒙版来改变大小。

（图33）

图33

　　5.取消对蒙版路径的选择状态，双击图层1，进入样式面板，选择渐变叠加，将混合模式设为正片叠底，不透明度为100％，选择反向，使渐变从白色到黑色，样式为线性，与图层对齐，角度为90度，缩放为75％。

有必要的话，还可以改变渐变颜色中点的位置（图34）。

你可以按自己的需要将按纽组合起来，也可以改变按纽的形状、大小和纹理，创建多样化的按纽。

在改变按纽形状时，要注意图层样式和按纽形状的配合。

这里例子中，我添加了色相／饱和度调整图层，用以为按纽上色。

（图35）

图34

图35