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

2016-03-19 02:06 28 1 收藏

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

【 tulaoshi.com - PS 】

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/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风格导航

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

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

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

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

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

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风格导航

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风格导航

来源:http://www.tulaoshi.com/n/20160319/1901117.html

延伸阅读
我经常被问及:一个具有很少甚至没有编程经验的人要如何开始游戏制作。直到目前为止,我总是尽我所能一个一个解答。然而,问题的数量已经增长到了一个难以处理的水平,于是,我便决定把所有的建议汇总在一篇文章里作为参考提供给人们。 !-- frame contents -- !-- /frame contents -- 这篇文章主要面向那些想开发自己的游戏,...
标签: Web开发
本贴主要是收集各种比较入门的代码 层的隐藏与显示   只要设置style的display属性即可   比如div style="display:none" id="MyDiv"隐藏的层/div   如果要显示它可以通过脚本来控制   window.document.getElementById("MyDiv").style.display = ""; 禁止右键   body oncontextmenu="r...
标签: 网络游戏
《功夫英雄》新手入门须知 界面简介 熟悉游戏界面能更好地进行游戏: -------------------------------------------------------------------------------- 快捷操作 常用快捷键列表: 快捷键 作用 A、S、D、F 移动 1、2、3…0 快捷键 空格(Space) 跳跃 ~ 拾取地面道具 F9 隐藏...
标签: PS PS基础
01:学好PS, 并非一朝一夕。兴趣---是迈向PS高手之路的一个好的开端:如果你本身对PS并不感兴趣,只是因为工作需要而刻意去学,那么你无论拜读哪位大师的教程,或是投奔哪位PS高手的门下,你也只能学会一点皮毛而已。 02:审美基础: 这个相当重要。 很多学生过来学习时,其中有些学生已经做PS很多年了,为什么一直就没有进步? 有的人就开...
下面的是学C++时要注重的。 1.把C++当成一门新的语言学习(和C没啥关系!真的。); 2.看《Thinking In C++》,不要看《C++变成死相》; 3.看《The C++ Programming Language》和《Inside The C++ Object Model》,不要因为他们很难而我们自己是初学者所以就不看;4.不要被VC、BCB、BC、MC、TC等词汇所...

经验教程

174

收藏

66
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部