时间需要一分一秒的过,事情需要一点一滴的做!

渴望!勇气!自信!坚持!

博客园 首页 新随笔 联系 订阅 管理
几乎没有哪种按纽的受欢迎程度能与透明质感按纽相比。自这种风格的按纽一问世,立刻风靡全球,从庞大的商务网站到简单的个人小站,处处都能看到剔透的风采。这种漂亮按纽最大的作用就是修饰网页,仅仅使用几个这样的按纽,就会给你的网页像水晶糖果一样诱人。透明质感的按钮种类之多,制作方法之广,无法尽数。在这里,我总结了几种较为好看的却又比较简单的,供大家作为参考。

第一款:Aqua按纽

  这是最常见的一种透明按纽了,如果运用的好的话,效果是非常理想的。这种按纽的做法有很多种,有些真的是相当相当的麻烦。当然,效果也是相当相当的漂亮,漂亮到你会不舍得把它用于网页按钮。实际上,如果用那种耗费大量时间做成的按钮装饰网页的话,需要小心喧宾夺主:游客会不自觉的把注意力集中到漂亮夺目的按纽上,网页最重要的内容却会被忽略掉。说了这么多,好像偷懒是理所当然的了。那么这一次,我们应用图层样式来打造这个按钮,这样我们就可以一劳永逸,以后都可以坐享其成了。更重要的是,我们制作的是可以装饰你的网页的按纽,它仅仅起到了点缀的作用,就像是做菜时使用的鸡精,一点足以勾出鲜味,过多反而不好了。

  1. 新建文档,RGB模式,白色背景。建立图层1,设置前景色为RGB(51,143,206)。然后选择圆角矩形工具,在工具选项中,设置绘图方式为填充像素,将矩形的圆角半径设为50像素,选择消除锯齿。点击几何选项,将矩形的大小设为91×27像素,在画布正中点击一下,即会出现一个蓝色的圆角矩形。(图01)

图01


  2. 现在我们开始添加图层样式了。首先选择投影:将投影的不透明度降低为33%,取消全局光,角度为134度,距离和大小均为1像素,扩展为0,品质不变;

  然后是内阴影样式:将内阴影的颜色设为RGB(0,56,113),不透明度为100%,取消全局光,角度为90度,距离为6像素,阻塞为15%,大小为16像素,品质保持不变,这样,按纽就具有了立体感。(图02)

图02


  3. 接下来我们要制作光线从按纽中透出的感觉。选择内发光样式,将混合模式设为颜色减淡,不透明度为30%,颜色为白色,方法为较柔软,居中,阻塞为31%,大小为21像素,要特别注意等高线的形状,打开默认的等高线编辑器,将曲线设为图03的形状,选择消除锯齿,范围为31%;(图03,04)

  

图03        图04

 

[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]  ... 下一页  >> 

 

 
 4. 下面是最关键的一步——添加强烈的反光效果。选择斜面和浮雕样式,将样式设为内斜面,方法为平滑,深度为81%,方向为上,大小为9像素,软化为1像素,阴影的角度为90度,高度为73度,高光和暗调的不透明度均为100%,暗调的模式为正常,颜色为RGB(4,126,188),这样高光效果就出来了。

  但这样是不够的,我们希望高光效果更为贴切。选择等高线,注意是斜面等高线,而不是光泽等高线,将等高线类型选择为预设类型中的半圆,消除锯齿,范围为69%,这样就能得到逼真的反光效果。(图05)

图05

  5. 为了使按钮看起来更好,我们添加一些简单的阴影效果。但我们的样式中已经采用了投影样式,所以要另外想办法。按住Ctrl键,载入按纽的不透明度区域,从编辑菜单中选择合并拷贝命令,在图层1之下新建一层,按Ctrl+V,将图像粘贴到新层中,取消选择。

  合并拷贝命令可以复制选区内所有图层的图像,包括图层样式在内,这里,我们所用这个命令就是为了拼合图层样式的效果。此外,在粘贴前,如果没有取消选择,那么图像会粘贴入选区中,否则的话,图像会被自动粘贴到图层的正中。

  对图层2使用高斯模糊,半径大概为5.5像素左右。再用移动工具将图层移动到按纽的右下方,作为透明阴影。(图06)

图06

  6. 最后,在按纽上写上文字即可。如果你更喜欢淡灰色的透明按钮,这里有个简单的法子:打开通道面板,点击蓝色通道,仅显示这一个通道的图像,由于我们的按纽是蓝色调的,所以这个通道内的图像最能体现按纽的情况。如果你的按纽是红色调或是绿色调的,那么同样,分别选择红色通道和绿色通道,就能得到灰色的透明按钮了。(图07)

图07

 

上一页  [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]  ... 下一页  >> 

 

第二款:LCD风格的按纽    一般来说,液晶显示屏风格很适合各种面板的制作,也可以作为各种按钮的载体,大多数类型的按纽与之配合都会很好看。但这一次,我们要来制作一个液晶显示屏风格的按纽。

  1. 打开Photoshop,新建RGB模式的白色背景文档。新建图层1,这一层我们作为按纽的基础轮廓。用椭圆选框工具,按住Shift+Alt键,从中心向旁边拖出一个圆形的选区。将前景色设为RGB(176,192,224),用前景色填充选区,不要取消选择。(图08)

图08

  2. 新建图层2,在这一层中制作按纽的内阴影。复位色板,选择描边命令,将描边宽度设为4像素,位置居中。取消选择,用高斯模糊处理图层,半径为4像素。载入图层1的选区,反选,在图层2中删除,取消选择。将图层的不透明度降低到28%。(图09)

图09

  3. 新建图层3,我们要在这一层中做描边处理。再次载入图层1的选区,打开描边命令对话框,将描边宽度设为1像素,位置居中,取消选区。将图层的不透明度降低到32%,有必要的话,可以用半径为0.2的高斯模糊消除边缘细微的锯齿。(图10)

图10

  4. 下面我们来制作按纽内部透出的光线效果。新建图层4,选择画笔工具中的喷枪选项,将画笔大小设为200像素的柔化笔刷,将图层的混合模式设为颜色减淡,填充不透明度为21%(不是图层的总体不透明度),再次载入图层1的选区,反转色板,用白色画笔在选区的下方点击一下,画笔范围可达到选区的中上部;再将画笔大小设为100像素,再点击一下,加强效果。由于颜色减淡模式的作用,图像会出现透光的效果。(图11)

图11

 

上一页  [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]  ... 下一页  >> 

 

 
 5. 接下来,我们来进行最关键的一步——给按纽增加高光效果。首先,我们来选取高光的区域。选择钢笔工具,勾出一条封闭路径,要包括按纽的上半部分,如图12所示。(图12)

图12

  按Ctrl+Enter,将路径转换为选区,再选取和图层1相交的选区,方法是按住Shift+Ctrl+Alt键,点击图层1,载入图层1和现有选区相交的选区,如图13。选择渐变工具,复位并反转色板,选择线性渐变工具,将渐变设为从前景色到透明,从选区的顶端到底部做出渐变,然后取消选择。选择高斯模糊滤镜,将半径设为2.0像素,模糊渐变图层,用选择工具将图层向下移动几个像素,这样会使效果更逼真。(图14)

   

图13       图14

  6. 这时,按纽基本上就已经完成了。不过我们可以为它增加一些装饰,使它看起来更漂亮。在图层1上新建一层,为图层6,这一层里,我们为它增加一些扫描线效果。基本上来说,1×2像素大小、上黑下透明的图案应该是你的Photoshop里差不多都会有的一种基本图案。如果没有,那么花半分钟时间做上一个也来得及。载入图层1的选区,打开填充对话框,在填充类型中选择图案,找到扫描线图案,用它来填充选区。取消选择,将图层的不透明度降低到8%,用模糊滤镜稍加模糊(图15)。

图15

  如果你的图案是上黑下白的,那么在填充以后,需要将图层混合模式设为正片叠底,效果是一样的。

  7. 下面我们来添加文字部分。我们采用的像素字体为04b_03,大小为8点,如果不希望字体太过纤细,就将消除文字锯齿的方式设为明晰。添加了字体之后,来看看效果,似乎不如想象中的好(图16)。我们可以再来装饰一下文字部分。在最顶层的文字层之下新建图层7,将前景色设为白色,用矩形工具在按纽的上中部选择一细长矩形。将文字层和这一层链接起来,居中对齐。载入图层1的选区,反选,删除图层7的多余部分,取消选择。将填充不透明度降低为10%,图层混合模式为颜色减淡。(图17)

   

图16       图17

 

上一页  [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]  ... 下一页  >> 

 

 
  8. 我们来看看这个按纽的应用。我选择把它放置在一个金属面板上。首先,新建一个图层组,将按纽相关图层都放到图层组中。在序列1下面新建图层8,用椭圆选框工具选择一个圆形,填充黑色后取消选择。将图层8和序列1链接,选择序列1,使用对齐选项,将按纽和黑色圆形居中对齐,取消链接。

  现在,我们关闭序列1的显示,按ShiftCtrl+Delete,用白色填充图层8的不透明区域。打开图层样式,依次添加下列样式:

  渐变叠加:混合模式为正常,不透明性为82%,渐变为从灰色RGB(174,174,174)到白色,线性,与图层对齐,角度为-48度,缩放为70%;

  内发光:混合模式为正常,不透明度为23%,颜色为黑色,发光源在边缘,方法为较柔软,大小为10像素,范围为55%;

  斜面和浮雕:内斜面、平滑,深度为51%,大小为8像素,阴影角度为130度,取消全局光,高度为15度,暗调的不透明度为0%,将等高线类型设为预设的半圆,范围为53%,消除锯齿;
  外发光:混合模式为正常,不透明度为15%,大小为5像素,范围为33%;

  描边:大小为1像素,描边位置在外部,混合模式为正常,不透明度为31%,描边颜色为黑色;

  内阴影:混合模式为正常,颜色为RGB(115,115,115),不透明度为8%,角度为135度,取消全局光,距离为4像素,大小为2像素,等高线类型为预设的锥形;

  最后是投影:不透明度为11%,角度为135度,距离为4像素,大小为1像素(图18)。

图18

  显示序列1,这时,我们的图像应该像图19一样了。

图19

  9. 我们希望做出按纽内陷的效果。在图层8上新建图层9,选择一个比按纽稍大的圆形选区,填充白色,同样使圆形和按纽居中对齐。对它添加图层样式:先是渐变叠加,混合模式为正常,不透明度为55%,反向默认渐变,角度为90度,缩放为90%;其次是描边,大小为1像素,位置在外部,不透明度为40%,描边颜色为RGB(210,210,210)。这样,这个按纽就被很合适的镶嵌在面板上了。(图20)

图20

 

上一页  [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]  ... 下一页  >> 

 

 
第三款:渐变透明按钮

  我知道,这个题目实在有些不合格。哪种透明效果中没有用到渐变呢?渐变几乎已经成为制作透明按纽的必备过程,拿它做标题实在有些应付差事的感觉。但是,我实在懒得再费心思在我们的按纽起一个响亮又贴切的名字了。(这些天来一直和按纽打交道,请大家原谅我的倦怠心理吧!)不过,这个按纽倒真的漂亮的没话说,就拿它来作为小小的补偿吧!这次的这个按纽,完全是由图层样式来决定的。完成之后,大家的样式面板中又可以多一种漂亮的风格了。

  1. 这一次,我们来新建一个透明背景的文档,大小根据按纽的大小来定。新建图层2,用椭圆工具选择一个正圆形,复位色板,用背景色填充选区。不要取消选择,按Ctrl+X将选区图像复制到剪贴板上,删除图层2。

  在图层1中,用Ctrl+V将白色圆形粘贴到图层1中。这样,白色圆形就会处于画布的正中。(图21)

图21

  2. 下面,我们就开始为按纽添加了图层样式了。

  首先,我们为按纽添加基础的颜色。选择渐变叠加样式,将混合模式设为正常,不透明性为100%,点击编辑渐变色,将渐变的左端设为RGB(166,202,240),右端设为RGB(24,48,153),渐变样式为线性,角度为123度,缩放为100%;(图22)

图22

  其次,我们用斜面和浮雕样式为按纽添加光泽:样式为内斜面,方法为平滑,深度100%,方向为上,大小为18像素,软化为3像素,阴影的角度为120度,取消全局光,高度为73,暗调模式为颜色减淡,高光和暗调的其他各项设定保持不变;(图23)



还有内容请参考以下链接:

http://www.woyaobangzhu.com/Article/tuxingtuxiang/photoshop/200702/22048.html

posted on 2007-03-15 18:42  冢边木  阅读(2067)  评论(0编辑  收藏  举报