当前位置 >> photoshop>>网页制作教程-photoshop中创建一个时尚的按扭

上一篇:« flash教程-圣诞节到了,下雪了(圣诞节贺卡的制作) 下一篇:[分享]人一生要看的60部电影 pdf下载 »

网页制作教程-photoshop中创建一个时尚的按扭

发布时间:2009年12月24日 次浏览:

这几天流感太重了,唉...,最终的结果是木木我也中奖了--感冒.所以大家天冷的时候要多穿衣服,白天开窗户,通通风.

像以前一样,我们先来看效果图.漂亮不,心动不,那就就跟夕木木一起来学习创建这个时尚的按扭.
网页美工教程,网页制作教程,导航菜单教程

 

PSD下载:


1.打开photoshop,然后新建一个文档250*150,并填充背影:#252a38.
网页美工教程,网页制作教程,导航菜单教程


2.在工具箱上选择椭圆图标并设置如图:
网页美工教程,网页制作教程,导航菜单教程


新建一个图层,然后填充一个颜色.
网页美工教程,网页制作教程,导航菜单教程


3.在调色板上设置如下:
网页美工教程,网页制作教程,导航菜单教程


使用渐变,渐变如下
网页美工教程,网页制作教程,导航菜单教程


4.双击图层,打开图层样式,给图层添加阴影.
网页美工教程,网页制作教程,导航菜单教程


再添加一个描边,但是这样描边和平常不太一样,是用渐变抽边,设置如图所示.
网页美工教程,网页制作教程,导航菜单教程

 

网页美工教程,网页制作教程,导航菜单教程


5.在工具箱上选择加深和减淡工具,设置如图:
网页美工教程,网页制作教程,导航菜单教程


然后在图所标识的地方,涂沫如下.
网页美工教程,网页制作教程,导航菜单教程


效果如下:
网页美工教程,网页制作教程,导航菜单教程


6.选择椭圆选区,作出效果如下.
网页美工教程,网页制作教程,导航菜单教程


7.添加渐变,设置如图:
网页美工教程,网页制作教程,导航菜单教程


从上而下线性渐变
网页美工教程,网页制作教程,导航菜单教程


按ctrl+D取消选区,并更改图层的不透明度:40%,混合模式为:opacity.
网页美工教程,网页制作教程,导航菜单教程


8.现在使用文字工具,添加文字并设置图层样式.
网页美工教程,网页制作教程,导航菜单教程

 

网页美工教程,网页制作教程,导航菜单教程


效果如下:
网页美工教程,网页制作教程,导航菜单教程


9.添加下面的文字,效果如下:
网页美工教程,网页制作教程,导航菜单教程


10.在这个网站下载图标(icon).然后导入photoshop,按ctrl+U,设置如下,最后更改混合模式:overlay.
网页美工教程,网页制作教程,导航菜单教程

 

 

你也可以做一个导航菜单:

 ps网页教程-一个非常棒的网店购物主页

导航设计-一个漂亮而实用的导航

Photoshop制作苹果导航栏效果教程

------------------------------------------------------

欢迎转载,请注明以下链接.

www.ximumu.cn--专注国外网页教程,photoshop教程,CSS教程

英原文:http://coregfx.org/

分享家:Addthis中国

全部评论(11条)

  • 11楼发表于：2010-1-11 14:10:28

    这个不错 那个源文件 收了 嘿嘿` 谢谢啦~

  • 回复
  • 10楼发表于：2009-12-31 21:14:57

    先祝新年快乐哟！
    第5步骤怎么做出来有点立体和透明的感觉？

  • 回复
  • 9楼发表于：2009-12-25 15:16:14

    这种素材我都是网上下的 呵呵

  • 回复
  • 8楼发表于：2009-12-25 3:19:03

    Merry Christmas ~　O(∩_∩)O ~
    星网送给你最美好的祝福 ~
    　　　　　 *　　　　　　 ,
    　　　　　　　　　　　 _/^\_
    　　　　　　　　　　　
    　　 *　　　　　　　　 /.-.\　　　　 *
    　　　　　　　*　　　　`/&\`　　　　　　　　　 *
    　　　　　　　　　　　,@.*;@,
    　　　　　　　　　　 /_o.I %_\　　*
    　　　　*　　　　　 (`’–:o(_@;
    　　　　　　　　　 /`;–.,__ `’)　　　　　　 *
    　　　　　　　　　;@`o % O,*`’`&\
    　　　　　　*　　(`’–)_@ ;o %’()\　　　*
    　　　　　　　　 /`;–._`”–._O’@;
    　　　　　　　　/&*,()~o`;-.,_ `””`)
    　　 *　　　　　/`,@ ;+& () o*`;-’;\
    　　　　　　　 (`””–.,_0o*`;-’ &()\
    　　　　　　　 /-.,_　　“”–….-’`)　*
    　　　　　*　　/@%;o`:;’–,.__　 __.’\
    　　　　　　　;*,&(); @ % &^;~`”`o;@();　　　　 *
    　　　　　　　/()Evlos & ().oFriendsO\
    　　　　　　　`”=”==””==,,,.,=”==”===”`
    　　　　　 __.—-.(\-”#####—…___…—–._
    　　　　 ‘`　　　　 \)_`”””””`
    　　　　　　　　　　　 .–’ ‘)
    　　　　　　　　　　 o(　)_-\
    　　　　　　　　　　　 `”””` `

  • 回复
  • 7楼发表于：2009-12-25 2:43:02

    圣诞快乐~！元旦快乐！

  • 回复
  • 6楼发表于：2009-12-25 0:42:52

    圣诞节到了，是在等圣诞老人的神秘礼物？还是等待享受节日狂欢的那种祥和氛围呢？如这样，还不如来点实际的，接受我的评论祝福：圣诞快乐，幸福安康！

  • 回复
  • 5楼发表于：2009-12-24 23:48:10

    圣诞快乐~~

  • 回复
  • 4楼发表于：2009-12-24 22:08:20

    Merry Christmas ~　O(∩_∩)O ~
    张三送给你最美好的祝福 ~

    　　　　　 *　　　　　　 ,
    　　　　　　　　　　　 _/^\_
    　　　　　　　　　　　
    　　 *　　　　　　　　 /.-.\　　　　 *
    　　　　　　　*　　　　`/&\`　　　　　　　　　 *
    　　　　　　　　　　　,@.*;@,
    　　　　　　　　　　 /_o.I %_\　　*
    　　　　*　　　　　 (`’–:o(_@;
    　　　　　　　　　 /`;–.,__ `’)　　　　　　 *
    　　　　　　　　　;@`o % O,*`’`&\
    　　　　　　*　　(`’–)_@ ;o %’()\　　　*
    　　　　　　　　 /`;–._`”–._O’@;
    　　　　　　　　/&*,()~o`;-.,_ `”"`)
    　　 *　　　　　/`,@ ;+& () o*`;-’;\
    　　　　　　　 (`”"–.,_0o*`;-’ &()\
    　　　　　　　 /-.,_　　“”–….-’`)　*
    　　　　　*　　/@%;o`:;’–,.__　 __.’\
    　　　　　　　;*,&(); @ % &^;~`”`o;@();　　　　 *
    　　　　　　　/()张三 & ().oFriendsO\
    　　　　　　　`”=”==”"==,,,.,=”==”===”`
    　　　　　 __.—-.(\-”#####—…___…—–._
    　　　　 ‘`　　　　 \)_`”"”"”`
    　　　　　　　　　　　 .–’ ‘)
    　　　　　　　　　　 o(　)_-\
    　　　　　　　　　　　 `”"”` `

  • 回复
  • 3楼发表于：2009-12-24 20:55:21

    相当精致。学习了。
    Merry Christmas & Happy New Year！

  • 回复
  • 2楼发表于：2009-12-24 20:37:45

    Merry Christmas ~　O(∩_∩)O ~
    小邪送给你最美好的祝福 ~
    　　　　　 *　　　　　　 ,
    　　　　　　　　　　　 _/^\_
    　　　　　　　　　　　
    　　 *　　　　　　　　 /.-.\　　　　 *
    　　　　　　　*　　　　`/&\`　　　　　　　　　 *
    　　　　　　　　　　　,@.*;@,
    　　　　　　　　　　 /_o.I %_\　　*
    　　　　*　　　　　 (`’–:o(_@;
    　　　　　　　　　 /`;–.,__ `’)　　　　　　 *
    　　　　　　　　　;@`o % O,*`’`&\
    　　　　　　*　　(`’–)_@ ;o %’()\　　　*
    　　　　　　　　 /`;–._`”–._O’@;
    　　　　　　　　/&*,()~o`;-.,_ `”"`)
    　　 *　　　　　/`,@ ;+& () o*`;-’;\
    　　　　　　　 (`”"–.,_0o*`;-’ &()\
    　　　　　　　 /-.,_　　“”–….-’`)　*
    　　　　　*　　/@%;o`:;’–,.__　 __.’\
    　　　　　　　;*,&(); @ % &^;~`”`o;@();　　　　 *
    　　　　　　　/()Evlos & ().oFriendsO\
    　　　　　　　`”=”==”"==,,,.,=”==”===”`
    　　　　　 __.—-.(\-”#####—…___…—–._
    　　　　 ‘`　　　　 \)_`”"”"”`
    　　　　　　　　　　　 .–’ ‘)
    　　　　　　　　　　 o(　)_-\
    　　　　　　　　　　　 `”"”` `

  • 回复
  • 1楼发表于：2009-12-24 19:40:39

    平安夜快乐啊~~~ps很强啊

  • 回复

发表评论

(必填)

(必填)