Photoshop教程:设计质感时尚网页导航按扭

作者:夕木木 出处:ximumu 本教程主要用Photoshop制作一个立体质感的时尚按钮,银灰色的质感表现的非常完美,下面一起来为自己的网页设计一个漂亮的按钮吧. 像以前一样,我们先来看效果图.漂亮不,心动不,那就就跟夕木木一起来学习创建这个 时尚的按扭 . 1.打开photoshop,然后新

photoshop做media质感水晶透明播放器

微软的MEDIAPLAYER 11的主题外观推出已经有好段时间了。它的诱人的色彩,友好的界面无不让人看到为之赞美。今天我就教大家用PS制作mediaplayer 11主题外观界面…… 先看一下效果: 效果图 首先在PS中建立一个1024*768,分辨率72像素的文档,背景色用黑色,如下所示: 背景色

作者:夕木木   出处:ximumu

本教程主要用Photoshop制作一个立体质感的时尚按钮,银灰色的质感表现的非常完美,下面一起来为自己的网页设计一个漂亮的按钮吧.

像以前一样,我们先来看效果图.漂亮不,心动不,那就就跟夕木木一起来学习创建这个

时尚的按扭

.


Photoshop教程:设计质感时尚网页导航按扭插图

 


1.打开photoshop,然后新建一个文档250*150,并填充背影:#252a38.
Photoshop教程:设计质感时尚网页导航按扭插图(1)

2.在工具箱上选择椭圆图标并设置如图:
Photoshop教程:设计质感时尚网页导航按扭插图(2)

新建一个图层,然后填充一个颜色.
Photoshop教程:设计质感时尚网页导航按扭插图(3)


3.在调色板上设置如下:
Photoshop教程:设计质感时尚网页导航按扭插图(4)

使用渐变,渐变如下
Photoshop教程:设计质感时尚网页导航按扭插图(5)

4.双击图层,打开图层样式,给图层添加阴影.
Photoshop教程:设计质感时尚网页导航按扭插图(6)

再添加一个描边,但是这样描边和平常不太一样,是用渐变抽边,设置如图所示.
Photoshop教程:设计质感时尚网页导航按扭插图(7)

Photoshop教程:设计质感时尚网页导航按扭插图(8)


5.在工具箱上选择加深和减淡工具,设置如图:
Photoshop教程:设计质感时尚网页导航按扭插图(9)

然后在图所标识的地方,涂沫如下.
Photoshop教程:设计质感时尚网页导航按扭插图(10)

效果如下:
Photoshop教程:设计质感时尚网页导航按扭插图(11)


6.选择椭圆选区,作出效果如下.
Photoshop教程:设计质感时尚网页导航按扭插图(12)

7.添加渐变,设置如图:
Photoshop教程:设计质感时尚网页导航按扭插图(13)


从上而下线性渐变
Photoshop教程:设计质感时尚网页导航按扭插图(14)

按ctrl+D取消选区,并更改图层的不透明度:40%,混合模式为:opacity.
Photoshop教程:设计质感时尚网页导航按扭插图(15)

8.现在使用文字工具,添加文字并设置图层样式.
Photoshop教程:设计质感时尚网页导航按扭插图(16)

Photoshop教程:设计质感时尚网页导航按扭插图(17)

效果如下:
Photoshop教程:设计质感时尚网页导航按扭插图(18)

9.添加下面的文字,效果如下:
Photoshop教程:设计质感时尚网页导航按扭插图(19)

10.在这个网站下载图标(icon).然后导入photoshop,按ctrl+U,设置如下,最后更改混合模式:overlay.
Photoshop教程:设计质感时尚网页导航按扭插图(20)

Photoshop教程:设计质感时尚网页导航按扭插图(21)

你也可以做一个导航菜单

Photoshop教程:设计质感时尚网页导航按扭插图(22)

Photoshop教程:设计质感时尚网页导航按扭插图(23)
Photoshop教程:设计质感时尚网页导航按扭插图(24)
Photoshop教程:设计质感时尚网页导航按扭插图(25)作者:夕木木   出处:ximumu

本教程主要用Photoshop制作一个立体质感的时尚按钮,银灰色的质感表现的非常完美,下面一起来为自己的网页设计一个漂亮的按钮吧.

像以前一样,我们先来看效果图.漂亮不,心动不,那就就跟夕木木一起来学习创建这个

时尚的按扭

.


Photoshop教程:设计质感时尚网页导航按扭插图

 


1.打开photoshop,然后新建一个文档250*150,并填充背影:#252a38.
Photoshop教程:设计质感时尚网页导航按扭插图(1)

2.在工具箱上选择椭圆图标并设置如图:
Photoshop教程:设计质感时尚网页导航按扭插图(2)

新建一个图层,然后填充一个颜色.
Photoshop教程:设计质感时尚网页导航按扭插图(3)


3.在调色板上设置如下:
Photoshop教程:设计质感时尚网页导航按扭插图(4)

使用渐变,渐变如下
Photoshop教程:设计质感时尚网页导航按扭插图(5)

4.双击图层,打开图层样式,给图层添加阴影.
Photoshop教程:设计质感时尚网页导航按扭插图(6)

再添加一个描边,但是这样描边和平常不太一样,是用渐变抽边,设置如图所示.
Photoshop教程:设计质感时尚网页导航按扭插图(7)

Photoshop教程:设计质感时尚网页导航按扭插图(8)


5.在工具箱上选择加深和减淡工具,设置如图:
Photoshop教程:设计质感时尚网页导航按扭插图(9)

然后在图所标识的地方,涂沫如下.
Photoshop教程:设计质感时尚网页导航按扭插图(10)

效果如下:
Photoshop教程:设计质感时尚网页导航按扭插图(11)


6.选择椭圆选区,作出效果如下.
Photoshop教程:设计质感时尚网页导航按扭插图(12)

7.添加渐变,设置如图:
Photoshop教程:设计质感时尚网页导航按扭插图(13)


从上而下线性渐变
Photoshop教程:设计质感时尚网页导航按扭插图(14)

按ctrl+D取消选区,并更改图层的不透明度:40%,混合模式为:opacity.
Photoshop教程:设计质感时尚网页导航按扭插图(15)

8.现在使用文字工具,添加文字并设置图层样式.
Photoshop教程:设计质感时尚网页导航按扭插图(16)

Photoshop教程:设计质感时尚网页导航按扭插图(17)

效果如下:
Photoshop教程:设计质感时尚网页导航按扭插图(18)

9.添加下面的文字,效果如下:
Photoshop教程:设计质感时尚网页导航按扭插图(19)

10.在这个网站下载图标(icon).然后导入photoshop,按ctrl+U,设置如下,最后更改混合模式:overlay.
Photoshop教程:设计质感时尚网页导航按扭插图(20)

Photoshop教程:设计质感时尚网页导航按扭插图(21)

你也可以做一个导航菜单

Photoshop教程:设计质感时尚网页导航按扭插图(22)

Photoshop教程:设计质感时尚网页导航按扭插图(23)
Photoshop教程:设计质感时尚网页导航按扭插图(24)
Photoshop教程:设计质感时尚网页导航按扭插图(25)

作者: 791650988

为您推荐

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部