丁丁注:本教程共讲述了6种常见导航按钮的制作,精彩简单,值得一看。" name="keywords" /> 丁丁注:本教程共讲述了6种常见导航按钮的制作,精彩简单,值得一看。" name="description" />
您现在的位置: 丁丁家园 >> 网上学院 >> 平面设计 >> PhotoShop >> 文章正文
CN域名1元/年 | 高清晰图库
    

[组图]网页常用小巧导航按钮-内嵌按钮

        ★★★
【字体:
·好听的歌 ·火影忍者 ·繁体字转换 ·在线听歌 ·火影忍者漫画 ·最新歌曲 ·psp游戏下载 ·photoshop ·火星文
网页常用小巧导航按钮-内嵌按钮
作者:丁丁    文章来源:丁丁家园    点击数:    更新时间:2005-7-3

第六款:内嵌按钮

  很多时候,按纽会搭配具有个性化的面板。这种组合会使你的网页看起来更精致。下面我们就来介绍一种小巧的内嵌式按纽,这种按钮不但可以用于网页,对于别的图像,如手机上的按键,播放器上的按纽,也是非常合适的。这个按纽也是通过图层样式构造的,分为两个部分。下面我们来具体的看看制作过程。

  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
【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口推荐赚点

网友评论

【发表评论】
(评论内容只代表网友观点,与本站立场无关!)

本频道栏目分类导航