用Photoshop制作网页常用小巧按钮(上)

2009-09-21来源:本站整理


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

    第一款:像素按纽

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

    新建一个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)


0
图10

    2.载入通道选区,回到RGB通道,新建图层1,复位色板,将前景色设为RGB(209,209,209),选择线性渐变工具,用从前景色到背景色的渐变填充选区。打开描边对话框,将宽度设为1像素,颜色为默认的前景色,位置居外,完成之后不要取消选择。(图11)


1
图11

    3.下面我们来制作按纽的高光部分。新建图层2,选择选框工具,按住Shift键,同时按向上的方向键3次,将选区向上移动30像素(图12a)。在选区内填充白色,载入通道1的选区,反选,删除多余的白色图像,取消选择。用半径为0.3像素的高斯模糊滤镜轻微的模糊白色高光,将图层2的不透明度减低到75%。(图12b)


2
图12a


3
图12b

    4.将图层1和图层2合并,为图层添加内阴影样式:阴影的混合模式和颜色不变,不透明度降低到53%,角度为-45度,使用全局光,距离为2像素,阻塞为1%,大小为3像素,品质不变。(图13)


4
图13

    5.现在你可以为按纽添加文字部分了,添加一些投影效果可能会更理想(图14)。如果想要改变按纽的颜色,可以使用色相/饱和度工具,选择着色模式,按需要调整颜色。用这个方法你还可以做出透明效果的导航栏。(图15)


5
图14


6
图15(出处:PConline)

看过本文的还看过

热门手游

更多>>

热门应用

更多>>

用户评论

还没有评论,快来抢沙发吧!