PS网页设计:新手入门制作流行漂亮导航

天淡淡蓝的

天淡淡蓝的

2016-03-19 02:06

下面是个PS网页设计:新手入门制作流行漂亮导航教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

PS网页设计:新手入门制作流行漂亮导航,本教程很简单,适合练习用. 有问题联系图老师

最终效果如下

Photoshop制作时尚web2.0风格导航

制作过程:

1、新建文件,选择径向渐变,设置前景颜色为#b3a773Tulaoshi.com,背景颜色为#877948。效果如图:

Photoshop制作时尚web2.0风格导航

2、创建圆角矩形(半径为10px)大小为220x50px,颜色#212121,如图:

Photoshop制作时尚web2.0风格导航

3、选择图层样式渐变描边,效果如图。

Photoshop制作时尚web2.0风格导航

Photoshop制作时尚web2.0风格导航

Photoshop制作时尚web2.0风格导航

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)

Photoshop制作时尚web2.0风格导航

Photoshop制作时尚web2.0风格导航

4、新建层,选择选区工具(快捷键M)大小为15x100px,填充白色,效果如图:

Photoshop制作时尚web2.0风格导航

5、复制白色线条层2次(快捷键ctrl+J),移动20px,合并3个白线层,效果如图:

Photoshop制作时尚web2.0风格导航

6、选择变换(快捷键ctrl+T)。

Photoshop制作时尚web2.0风格导航

7、载入圆角矩形选区(按ctrl+鼠标点击圆角矩形层),选择白线层,反选(快捷键shift+ctrl+i),删除多余白线。

Photoshop制作时尚web2.0风格导航

8、设置还层不透明为5%。

Photoshop制作时尚web2.0风格导航

9、添加自喜欢的文字和图标:

Photoshop制作时尚web2.0风格导航

10、选择圆角矩形,半径为10 px,颜色为#2f2f2f,如图:

Photoshop制作时尚web2.0风格导航

11、调整图层的顺序。

Photoshop制作时尚web2.0风格导航

12、选择图层样式外发光(柔光)内发光描边,设置如下图:

Photoshop制作时尚web2.0风格导航

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/ps/)

Photoshop制作时尚web2.0风格导航

Photoshop制作时尚web2.0风格导航

Photoshop制作时尚web2.0风格导航

13、选择文本工具(快捷键T)输入文字,如图:

Photoshop制作时尚web2.0风格导航
图20

14、新建层,选择画笔(快捷键B)创建200x1px细线,颜色为#292929,如图:

Photoshop制作时尚web2.0风格导航
图21

15、新建层,选择选区工具(快捷键M),大小为8x3px,填充白色,效果如图:

Photoshop制作时尚web2.0风格导航

16、选择图层样式外发光,设置如下图:

Photoshop制作时尚web2.0风格导航

17、复制图层(快捷键ctrl+J),效果如图:

Photoshop制作时尚web2.0风格导航

完成!

Photoshop制作时尚web2.0风格导航

完成

Photoshop制作时尚web2.0风格导航

展开更多 50%)
分享

猜你喜欢

PS网页设计:新手入门制作流行漂亮导航

PS PS基础 ps平面设计教程 ps去水印教程
PS网页设计:新手入门制作流行漂亮导航

PS清爽网页设计 新手入门参考网站

PS PS基础 ps平面设计教程 ps去水印教程
PS清爽网页设计 新手入门参考网站

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

PS企业网站模版设计系列二:新手入门

PS PS基础 ps平面设计教程 ps去水印教程
PS企业网站模版设计系列二:新手入门

Android 新手入门体验

编程语言 网络编程
Android 新手入门体验

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

PS企业网站模版设计系列三:新手入门

PS PS基础 ps平面设计教程 ps去水印教程
PS企业网站模版设计系列三:新手入门

皇室战争新手入门攻略

皇室战争
皇室战争新手入门攻略

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

PS设计商城:大气灰色风格

PS设计商城:大气灰色风格

PS新手设计网页:简单大方易上手

PS新手设计网页:简单大方易上手
下拉加载更多内容 ↓