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

网页制作教程-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中国

相关信息

© CopyRight 2002-2008, ximumu.info All Rights Reserved. 程序基于Z-Blog Theme By ximumu 广告QQ:542738262