网页常用小巧按钮--像素按纽-站长中国-中国站长门户从这里开始全面了解中国站长

网页常用小巧按钮--像素按纽

　 2007年09月16日10:57:33　评论(0条) 字体:[大中小]
相关热点：

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

　　第一款：像素按纽

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

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

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

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

　　首先选择斜面和浮雕样式，设置结构为内斜面，方法为平滑，深度为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）