网页常用小按纽一 PhotoShop 7.0中文版实例教程学习 - 时尚酷族

时尚酷族

标题:

作者:

时间:

标题:

网页常用小按钮一

　　虽然越来越多的人开始使用宽带，速度已经不象早些年那样限制着网络，但近年来的网页却没有越来越繁杂，正相反，以简约为风尚的网页设计正悄悄流行在网络世界中。这种风格不但节约了带宽，更重要的是，大多数人更喜欢在清新的环境中寻找他们所需的信息，简单精巧的设计，使获取信息变得更加方便快捷。今天，我们就来设计几款最常用的网页小巧按钮。
　　第一款：像素按钮
　　这是目前最为流行的一种按钮，在每个以像素为主题的网站上几乎都能看到它的身影。想要最大程度的减小网页大小，这种按钮可是不二法门。这种按钮简单大方，除了个性化的网站之外，用于公司网页也非常合适。
　　新建一个Photoshop文档，RGB模式，白色背景。
　　新建一层，复位色板，将前景色设为一种浅灰色，如例子中的RGB（239，239，239），用矩形选框工具选择一个小矩形，填充前景色后取消选择。
　　下面我们来制作按钮的立体效果。这里，我们完全用添加图层样式的方法，双击图层，打开图层样式对话框，我们来依次添加：
　　首先选择斜面和浮雕样式，设置结构为内斜面，方法为平滑，深度为1％，方向在上，大小和软化均为2像素，阴影角度为146度，使用全局光，高度为30度，光泽保持默认，高光和暗调的混合模式与颜色都不变，不过不透明度分别设为100％和43％；
　　其次是内阴影模式，模式为正常，颜色为白色，不透明度为100％，角度为146度，使用全局光，距离为1像素，阻塞为100％，大小为0，品质不变；
　　接下来是描边，将描边大小设为1像素，位置在外部，混合模式为正常，不透明度为100％，填充类型为颜色，描边颜色设为黑色；
　　最后是投影样式，将阴影颜色设为黑色，不透明度为22％，角度为120度，取消全局光，距离为3像素，扩展为0，大小为0，品质保持默认不变。
　　好了，现在你可以选择细一些的字体，最好是专门的像素字体，在按钮上写上文字。在设置文字选项的时候，有一项需要特别注意，那就是要将文字消除锯齿的方式设为无，否则字体会出现模糊。整个制作过程如图1所示。

1.jpg (1.85 KB, 下载次数: 32)

下载附件保存到相册

2011-2-28 05:55 上传

图1

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

　　在新建图层、设置选区后，设置你的前景色，如这里我们将前景色设为RGB（106，175，5），填充选区后取消选择。然后开始设定图层样式。在斜面和浮雕样式中，将深度设为100％，大小和软化为1像素，注意要将阴影的高光模式设为颜色减淡，不透明度为65％，暗调的不透明度也要减低一些；和刚才不同，我们取消了内阴影样式，在描边样式中，将描边颜色设为一种较深的灰色，如RGB（132，132，132），当然，你也可以用黑色描边；对于投影样式，由于按钮本身的颜色较深，相对的，我们可以将阴影的不透明度设的稍微高一些，40％即可。最后，写上文字。
　　第二款：渐变按钮
　　相对于第一款按钮来说，接下来我们要介绍的这种类型的按钮实用性更强，而且颜色也更丰富。你在许多网站上都会看到它。
　　首先，仍是新建RGB模式的Photoshop文档，白色背景。
　　这次我们新建一层，用矩形选框工具选择一个小矩形，然后点击“选择->修改->平滑”，设为5像素。选择渐变工具的由黑到白渐变，在选框内由下往上拉。效果如图2。