web2.0风格导航条制作

敢言go

敢言go

2016-02-19 19:48

下面图老师小编跟大家分享web2.0风格导航条制作,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

本教程来源于pscloud作者未知 (原创翻译转载请注明出处表明链接谢谢)

利用web2.0风格创建一个令人惊奇的网站导航条。

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

web20

1. 创建一个新文件600 * 140px。现在选择圆角矩形工具制作一个圆角矩形如下图。
bg
2. 应用层样式:内发光 混合模式:滤色 方法:柔和
24
3. 渐变叠加:颜色设置为 #5e80a3 ,#839db8 and #b8c7d6
33
4.描边: #5e80a3
43
5. 这就是它应该呈现的样子。
53
6. 现在书写链接使用 Segoe 14 pt #ffffff
63
7. 给字体链接应用层效果:描边 #53769a
73
8.创建一个新层。选择矩形选框工具,绘制1px宽度的线条并使用# ffffffs填充
83
9.复制这个层接着在每个链接之间添加每个线条。现在选择矩形选框工具选取线条底部的区域覆盖到所有的线条,然后使用选择- 修改- 羽化和应用5px半径。按下Del然后采取相同的方法处理上方的线条。
93
10. 将线条图层的混合模式改为柔光
102

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

11. 使用矩形选框工具选取你链接的内部区域 (在两个线条之间)然后填充任何你想要的颜色。
113
12.现在给这个层应用混合模式渐变叠加使用颜色: #567595, #728fae #b3c3d3
122
13.这就是它应该呈现的样子。
132
14. 现在使用矩形选框工具2px的半径绘制一个小矩形使用#ffffff填充。
141
15. 应用如下的层效果到形状图层: 内发光(混合模式:叠加)
151
16. 渐变叠加: #e6e6e6 和 #ffffff
161
17. 描边: #5e80a3
172
18.这就是它应该呈现的样子。
181
19. 在形状内输入search使用Segoe字体 大小为 12pt 颜色#7b7b7b
191
20. 从f3 Silk Icons(Silk Icons是一组免费的图标译者注)中添加一个放大镜这样你的导航条就完成了。这就是最后呈现的效果正常状态下和鼠标滑过时。

web20

展开更多 50%)
分享

猜你喜欢

web2.0风格导航条制作

设计创意
web2.0风格导航条制作

《Web2.0风格标志设计欣赏》

平面设计 标志设计 UI设计 VI设计
《Web2.0风格标志设计欣赏》

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

Photoshop制作透明风格的网页导航条

PS PS基础
Photoshop制作透明风格的网页导航条

Photoshop制作水晶风格网站导航条

PS PS基础 PS效果
Photoshop制作水晶风格网站导航条

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

Photoshop绘制灰色风格的网页导航条

PS PS基础
Photoshop绘制灰色风格的网页导航条

Photoshop网页设计教程:制作简洁风格黑色导航条按钮

PS PS教程
Photoshop网页设计教程:制作简洁风格黑色导航条按钮

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

利用photoshop创建一个3D绚丽的文本效果

利用photoshop创建一个3D绚丽的文本效果

Julien Colombier插画艺术作品

Julien Colombier插画艺术作品
下拉加载更多内容 ↓