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

有何不可i2

有何不可i2

2016-02-16 08:58

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

先看看最终效果图

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

首先建立背景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

展开更多 50%)
分享

猜你喜欢

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

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

Photoshop制作质感文字效果

PS PS基础
Photoshop制作质感文字效果

s8lol主宰符文怎么配

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

Photoshop制作金属质感文字效果

PS PS基础
Photoshop制作金属质感文字效果

Photoshop制作质感金属文字效果

PS PS基础
Photoshop制作质感金属文字效果

lol偷钱流符文搭配推荐

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

Photoshop制作闪亮质感的文字效果

PS PS基础
Photoshop制作闪亮质感的文字效果

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

PS PS基础
Photoshop制作质感金属立体文字效果

lolAD刺客新符文搭配推荐

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

Photoshop处理儿童生活照的教程

Photoshop处理儿童生活照的教程

Photoshop制作镶边水晶花效果

Photoshop制作镶边水晶花效果
下拉加载更多内容 ↓