以用户为中心的设计BLOG

User-Centered Design

« Don’t Make Me Think中的十条金科玉律苹果IPhone UI教程 »

光感纤维导航按钮 ps教程 [PSD下载]

"

光感纤维导航按钮 ps教程
我个人非常喜欢这种风格,在此和大家分享这篇教程!

ucd素材网提供

下面是制作一张粗略的背景,为了体现质感,如果你不喜欢可以跳过,或者随你喜欢更换一个!
 

UCD素材网提供
 

打开photoshop,新建一个400X400的文件,或者大一点也ok!找到下图两个颜色作为梯度背景色!

ucd素材网提供

如下添加杂色数值不用很高0.5就好!

 


 

 添加一些纹理,或者用笔刷,图层20%的透明就好!

ucd素材网提供
然后如下图用纹理笔刷(复古笔刷,随机网状笔刷)添加一些效果!
 

 


 

然后如下找一张图片叠加上去
 

ucd素材网提供

OK!这一步完成了!

下面开始按钮制作!
用圆角路径工具勾出下面的形状!
 

ucd素材网提供

复制几个

 

Ctrl+图层渐入选取,选择>修改>收缩2个像素

 

ucd素材网提供

双击图层>渐变添加>添加如下颜色的渐变

用路径工具勾出下面的形状

 

删除选取能容

 



 

 对图层添加蒙版用黑到白的渐变拉出下面的效果

ucd素材网提供

反向建出图层样式

一样拉出形状

ucd素材网提供

删除能容,然后加蒙版拉渐变

ucd素材网提供

 最后添加 文字 是不是很简单!

 

ucd素材网提供
 

最后添加一层上面加一点光影渐变,减低透明度!

 

ucd素材网提供

[完成]

是不是很简单!
最后给出PSD源文件:
 

 

"

  • 相关文章:
  • quote 1.Forrest
  • 非常喜欢你提供的教程和资源!
    可是本篇文章中的图片和PSD文件下载链接都看不到了,可以修复或是发一份到我的邮箱吗?谢谢。
    tiantong 于 2009/8/1 17:27:47 回复
    你好!谢谢 你的回复!文章图片以及恢复!但下载文件丢失!不好意思!还请多关注本站www.ucdcom.com
  • 2009-7-31 17:23:45 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Arwen Build 90619 Code detection by Codefense

Copyright 2008-2010 www.ucdcom.com