Photoshop制作质感网页导航条文字效果

2016-02-16 08:58 15 1 收藏

下面，图老师小编带您去了解一下Photoshop制作质感网页导航条文字效果，生活就是不断的发现新事物，get新技能~

【 tulaoshi.com - PS 】

先看看最终效果图

Photoshop制作质感网页导航条文字效果,PS教程,图老师教程网

首先建立背景

Photoshop制作质感网页导航条文字效果,PS教程,图老师教程网

然后用圆角矩形圆角5px 尺寸和颜色图片有说明

Photoshop制作质感网页导航条文字效果,PS教程,图老师教程网

这里使用软画笔提亮背景，笔触300像素大小

Photoshop制作质感网页导航条文字效果,PS教程,图老师教程网

原教程中没有的步骤，为了让字体有一点突出感，我加了点投影，细微的变化

Photoshop制作质感网页导航条文字效果,PS教程,图老师教程网

拉渐变，可以直接用矩形选框，距离外框10px即可，然后渐变图层透明度为5%

Photoshop制作质感网页导航条文字效果,PS教程,图老师教程网

写上目录，选自己喜欢的颜色和字体

Photoshop制作质感网页导航条文字效果,PS教程,图老师教程网

然后是加分割线和调整点击时候的色彩

这是我的最终效果，字体有些模糊，但是我觉得跟整个质感匹配~

只不过放网页上的话，字有些不清晰

Photoshop制作质感网页导航条文字效果,PS教程,图老师教程网

这个是老外的最终效果，文字使用的是无样式

Photoshop制作质感网页导航条文字效果,PS教程,图老师教程网

挺简单的导航制作，半小时左右就可以完成，甚至更快，有兴趣可以试试哈

来源:https://www.tulaoshi.com/n/20160216/1570516.html

上一篇： Photoshop处理儿童生活照的教程
下一篇： Photoshop制作镶边水晶花效果

看过《Photoshop制作质感网页导航条文字效果》的人还看了以下文章更多>>

CSS网页制作教程:制作网页导航条

标签： Web开发

CSS标签重置对于XHTML+CSS布局起着一个重要的决定性作用，它是提高页面浏览器兼容性的第一步。那么什么是标签重置呢？顾名思义，就是对HTML中的所有标签属性重置，因为每个浏览器都有一个自己默认的CSS文件，对HTML中的所有的标签进行定义，以便没有定义CSS的页面能够正常显示在页面，页面在加载的时候如果没有找到自带的CSS文件，浏...

Photoshop制作立体黄金质感文字效果

标签： PS PS基础

先看下效果： 1.输入文字，并用填充金属色 2.应用图层样式的浮雕效果，具体调整如下： 3.应用图层样式的描边效果，填充类型采用金属色的渐变，如下： 4.其他文字或图形都采用以上方法，可以配上一些光点，显得更炫。纯属无聊发着玩，表述很口语化，见谅了，希望对各位有些帮助。附上源文件哈。

PS制作2016质感文字效果

标签： PhotoShop PS PS教程

PS制作2016质感文字效果。下面就让小编为大家介绍具体步骤; 效果图：

制作质感逼真水泥文字效果

标签： PS PS基础 ps平面设计教程 ps去水印教程

最终效果图 1、新建一个宽度为12厘米，高度为7厘米，分辨率为350像素的文件。 2、选择工具箱中的“文字工具”，在文字面板中设置文字颜色为50%的灰色，在文件中输入文字，效果如图01所示。图01在文件中输入文字 3、按Ctrl键单击文字图层，调出文字选区，切换到通道面板，单击面板底部的“将选区存储为通道”按钮，将选区...

Photoshop绘制木纹质感导航条