《Web美工基础教程》第4章导航栏设计与制作.pptx

Web美工基础教程
第4章 网页导航栏的设计与制作
目录
1
横向导航栏的设计与制作
2
纵向导航栏的设计与制作
3
水晶导航栏的设计与制作
4
导航栏图片在网站中的应用
第4章
导航栏是网站的重要组成部分，直接影响网站的可用性和用户体验。一个好的导航栏不仅让网站看起来生动有趣，而且可以帮助用户访问网站当中的资源。
各种导航类应该怎么制作呢？
实例1：横向导航栏设计与制作
导航在网站设计中占有举足轻重的地位，导航是整个站点中（特别是门户站）视觉的焦点和中心，其影响力仅次于Banner。导航的成败直接影响了整个站点的表现，不管是企业站点，还是Flash站点，都应该重视导航的设计与制作，本小节将以一个横向的企业导航案例为主讲解利用Photoshop CS6工具制作横向导航栏的过程。最终效果如图所示。
横向导航栏
实例1：横向导航栏设计与制作
1、制作底板
【Step1】新建一个宽度为780象素，高度为100像素的文件。
新建文件
实例1：横向导航栏设计与制作
【Step2】在工具箱中设置前景色为（R：54，G：62，B：89）,按快捷键Alt+Delete，将前景色填充到背景中。
设置前景色RGB
填充背景
实例1：横向导航栏设计与制作
【Step3】新建一个图层，双击图层名字重新命名为“导航底图”。选择“渐变工具”，在工具选项栏上单击“渐变色条”，打开渐变编辑器对话框。选中左侧的色标，设置颜色为（R：114，G：128，B：164），选中右侧的色标，设置颜色为（R：72，G：85，B：117），单击【确定】按钮，完成设置。
设置右色标颜色
渐变编辑器
设置左色标颜色
实例1：横向导航栏设计与制作
【Step4】用鼠标从图像的上端拖动到下端，对图层进行渐变填充。
渐变填充
【Step5】选择“多边形套索工具”，在图像上单击鼠标，创建出一个如图所示的选区。按【Delete】键，删除选取中的图形，显示出背景色，按Ctrl+D，取消选区。
创建选区
删除选区内容
实例1：横向导航栏设计与制作
【Step6】双击“导航底图”图层，打开图层样式对话框，选择“斜面和浮雕”样式，在“高光模式”中设置颜色为（R：255，G：253，B：221），如图所示，设置其他参数如图所示。
高光颜色
斜面和浮雕”参数设置
实例1：横向导航栏设计与制作
【Step7】选择“投影”样式，设置不透明度为39%，其他参数设置如图所示，单击【确定】按钮，完成图层样式的添加。效果如图所示。
“投影”参数设置
样式效果