您的位置：首页 >> 原创经验分享 >> 平面设计 >> 图像处理
经典导航设计（图解）（原创教程）
1年前上传 / 您是第 12276 位浏览者 / 目前有 73 条评论
使用 Photoshop 完成
 布噜盒子  上海市 / 设计爱好者 积分 19 |
|
首先声明下，这个图是我学习临摹来的
在制作过程中存了几个步骤希望与大家分享
首先建立背景
然后用圆角矩形 圆角5px 尺寸和颜色图片有说明
这里使用软画笔提亮背景，笔触300像素大小
原教程中没有的步骤，为了让字体有一点突出感，我加了点投影，细微的变化
拉渐变，可以直接用矩形选框，距离外框10px即可，然后渐变图层透明度为5%
写上目录，选自己喜欢的颜色和字体
然后是加分割线和调整点击时候的色彩
这是我的最终效果，字体有些模糊，但是我觉得跟整个质感匹配~
只不过放网页上的话，字有些不清晰
这个是老外的最终效果，文字使用的是无样式
挺简单的导航制作，半小时左右就可以完成，甚至更快……有兴趣可以试试哈
本文由 站酷网 - 布噜盒子 原创，转载请保留此信息，多谢合作。
 {var%20f='http://v.t.sina.com.cn/share/share.php?appkey=163310332',u=z||d.location,p=['&url=',e(u),'& title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'& content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a() {if(!window.open([f,p].join(''),'mb', ['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width- 440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');}; if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();}) (screen,document,encodeURIComponent,'','','http://image.zcool.com.cn/cover/41/49/m_1268645899055.jpg','【分享】经验分享：经典导航设计（图解）（作者：@站酷网 - 布噜盒子）','','utf-8'));)
新浪微博
作者的其他经验分享
