网页常用小按钮一

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

  第一款:像素按钮

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

  新建一个ps文档,RGB模式,白色背景。

  新建一层,复位色板,将前景色设为一种浅灰色,如例子中的RGB(239,239,239),用矩形选框工具选择一个小矩形,填充前景色后取消选择。

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

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

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

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

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

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

ps7.0中文版教程-网页常用小按钮一

图1

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

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

  第二款:渐变按钮

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

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

  这次我们新建一层,用矩形选框工具选择一个小矩形,然后点击“选择->修改->平滑”,设为5像素。选择渐变工具的由黑到白渐变,在选框内由下往上拉。效果如图2。

ps7.0中文版教程-网页常用小按钮一
图2

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

ps7.0中文版教程-网页常用小按钮一
图3

  最后,我们再用描边的方式修饰按纽,设置描边大小为1像素,位置在外部,混合模式为正常,不透明度为100%,填充类型为颜色,将颜色设为灰色。

ps7.0中文版教程-网页常用小按钮一
图4

由Ci222编写,转裁请保留作者