资源描述：
《第5章按钮与导航条的设计制作.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、个人收集整理勿做商业用途第5章按钮与导航条的设计制作按钮和导航是网站设计不可缺少的基础元素之一，导航不仅仅是信息结构的基础分类也是浏览网站的路标。导航是引人注目的，浏览者进入网站，首先会寻找导航条。根据导航菜单,直观地了解网站储备了哪些分类信息以及分类的方式，以便判断是否需要进入网站内部，查找需要的资料。而按钮作为页面的重要视觉元素,放置在明显、易找、易读的区域是必要的，让浏览者进入网站第一时间就可以看到它们。5.1按钮的设计原则设计按钮时尽量避免以下设计禁忌，应该能使你的网页设计上一个层次。l同一页面包含重复功能的按钮;l将复选框用作
2、单选按钮；l单选按钮之间间隔太大；l取消按钮无法真正取消操作;l返回按钮不能达到预期的目的；l图片按钮对鼠标按下操作没有视觉变化。5。2常见按钮样式的制作在个性张显的今天，互联网也注重个性的发展，不同的网站采用不同的按钮样式,按钮设计的好坏直接影响了整个站点的风格。下面我们介绍几款常用按钮的制作过程.5.2。1简洁按钮面对色彩丰富繁杂的网络世界,简洁的按钮凭其大方经典的样式得以永存。个人收集整理勿做商业用途图5—2—Error!Bookmarknotdefined.简洁按钮效果图1.打开Photoshop，按【Ctrl+N】，新建一个宽
3、“250px”，高“250px"的文件，将它命名为“简洁按钮"。2。新建【图层1】,选择【椭圆选框工具】，按住【Shift】键的同时在图像窗口画出一个“200px×200px"的正圆，设置前景色为“R102，G102，B155"，背景色为“R230，G230,B255”，用【渐变工具】画出如图5-2—2所示的效果。图5-2-Error!Bookmarknotdefined.画出按钮背景3.新建【图层2】，交换前景色和背景色，再用【椭圆选框工具】，画出一个“170px×170px”的正圆，用【渐变工具】进行填充。4.回到【图层1】，单击【
4、图层2】之前的方框，出现链条图案链接两个图层，如图5-2—3所示。个人收集整理勿做商业用途图5—2-1链接图层5.选择【移动工具】，单击上方工具栏选项中的【垂直中齐】和【水平中齐】按钮,以【图层1】为准，对齐【图层2】,效果如图5-2-4所示。图5—2—Error!Bookmarknotdefined.6.现在按钮已经基本上成形了，下面的操作会使它变得更精致.给【图层2】加上一些图层样式，【斜面和浮雕】参数设置如图5—2-5所示，【描边】参数设置如图5—2—6所示，得到如图5-2-7所示的最终效果。个人收集整理勿做商业用途图5—2-1【
5、斜面和浮雕】参数设置图5-2—Error!Bookmarknotdefined.【描边】参数设置个人收集整理勿做商业用途图5-2-1最终完成效果图至此,这款紫色的简洁按钮就做好啦,大家可以尝试一下做成其他形状的。5。2.2迷你按钮信息在网络上有着重要的地位，很多人不想放过可以放一点信息的空间，于是采用迷你按钮，可爱又不失得体，很受年轻人士的喜爱。图5-2—Error!Bookmarknotdefined.1。打开Photoshop，按【Ctrl+N】,新建一个宽“60px”,高“60px”的文件，将它命名为“迷你按钮"。2.新建【图层1
6、】，用【椭圆选框工具】在图像窗口画一个“50px×50px”的正圆，填充橙色“R255,G153，B0"，执行【选择】｜【修改】
7、【收缩】,设置【收缩量】为“7"像素，按【Delete】键删除，【图层1】为如图5-2-9所示的圆环。图5-2—Error!Bookmarknotdefined.填充出按钮边框3。双击【图层1】调出【图层样式】对话框，设置如图5—2-10所示的【斜面和浮雕】参数，效果得到如图5—2-11所示.个人收集整理勿做商业用途图5-2—Error!Bookmarknotdefined.【斜面和浮雕】参数设置图5-2—1
8、执行【斜面和浮雕】后效果4。新建【图层2】，用【椭圆选框工具】画一个“36px×36px"的正圆，设置前景色为白色，背景色为25％的灰色（R207,G207，B207），按住【Shift】键的同时用【渐变工具】从左上角往右下角拉出渐变，再用上一例中的方法使其与边框对齐,如图5—2-12所示。图5—2-2画出按钮主体5。给【图层2】添加图层样式，【斜面和浮雕】的参数设置如图5-2-13所示,得到如图5-2-14所示的效果。个人收集整理勿做商业用途图5—2—2【斜面和浮雕】参数设置图5-2—3添加【斜面和浮雕】后效果6。因为迷你按钮的空间有
9、限,不适合文字，所以一般用图形表示按钮的作用,所以选择【自定形状工具】，在上方出现的工具栏选项中选择自己喜欢的形状，也可以直接用【钢笔工具】绘制形状，在这里选择了“”形状，如果找不到这个形状，可以按形状选择
