[转载]经典导航设计（图解)

zmuduo · 发表于 2010-12-26 18:09

本帖最后由 zmuduo 于 2010-12-27 19:40 编辑

经典导航设计（图解)

本文由布噜盒子原创，如需商业用途或转载请与布噜盒子联系，谢谢配合！

首先声明下，这个图是我学习临摹来的

在制作过程中存了几个步骤希望与大家分享

首先建立背景

登录/注册后可看大图

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

登录/注册后可看大图

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

登录/注册后可看大图

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

登录/注册后可看大图

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

登录/注册后可看大图

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

登录/注册后可看大图

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

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

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

登录/注册后可看大图

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

登录/注册后可看大图

分享完毕~

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

本文由布噜盒子原创，转载请保留此信息，多谢合作。

amwdnuff · 发表于 2010-12-26 22:24

不错的,学习了

dkzxsdh · 发表于 2011-2-19 20:18

学习一下，谢谢分享

yhx2660 · 发表于 2011-2-23 14:43

回复 zmuduo 的帖子

学习一下，谢谢分享