第五章按钮与导航条的设计制作.docVIP

第5章 按钮与导航条的设计制作 按钮和导航是网站设计不可缺少的基础元素之一，导航不仅仅是信息结构的基础分类也是浏览网站的路标。导航是引人注目的，浏览者进入网站，首先会寻找导航条。根据导航菜单，直观地了解网站储备了哪些分类信息以及分类的方式，以便判断是否需要进入网站内部，查找需要的资料。 而按钮作为页面的重要视觉元素，放置在明显、易找、易读的区域是必要的，让浏览者进入网站第一时间就可以看到它们。 5.1按钮的设计原则 设计时尽量避免设计禁忌，应该能使上一个层次。同一页面包含重复功能的按钮 将复选框用作单选按钮 单选按钮之间间隔太大 取消按钮无法真正取消操作 返回按钮不能达到预期的目的 图片按钮对鼠标按下操作没有视觉变化 5.2常见按钮样式的制作 在个性张显的今天，互联网也注重个性的发展，不同的网站采用不同的按钮样式，按钮设计的好坏直接影响了整个站点的风格。下面我们介绍几款常用按钮的制作过程。 5.2.1 简洁按钮 面对色彩丰富繁杂的网络世界，简洁的按钮凭其大方经典的样式得以永存。 图5-2- 1 简洁按钮效果图 1. 打开Photoshop，按Ctrl+N】，新建一个宽，高的文件，将命名为按钮 图5-2- 2 画出按钮背景 3. 新建【图层2】，交换前景色和背景色，再用【椭圆选框工具】，画出一个“170px×170px”的正圆，用【渐变工具】进行填充。 4. 回到【图层1】，单击【图层2】之前的方框，出现链条图案链接两个图层，如图5-2-3所示。 图5-2- 3 链接图层 5. 选择【移动工具】，单击上方工具栏选项中的【垂直中齐】和【水平中齐】按钮，以【图层1】为准，对齐【图层2】，效果如图5-2-4所示。 图5-2- 4 6. 现在按钮已经基本上成形了，下面的操作会使它变得更精致。给【图层2】加上一些图层样式，【斜面和浮雕】参数设置如图5-2-5所示，【描边】参数设置如图5-2-6所示，得到如图5-2-7所示的最终效果。 图5-2- 5 【斜面和浮雕】参数设置 图5-2- 6 【描边】参数设置 图5-2- 7 最终完成效果图 至此，这款紫色的简洁按钮就做好啦，大家可以尝试一下做成其他形状的。 5.2.2 迷你按钮 信息在网络上有着重要的地位，很多人不想放过可以放一点信息的空间，于是采用迷你按钮，可爱又不失得体，很受年轻人士的喜爱。 图5-2- 8 1. 打开Photoshop，按Ctrl+N】，新建一个宽，高的文件，将命名为按钮 图5-2- 9 填充出按钮边框 3. 双击【图层1】调出【图层样式】对话框，设置如图5-2-10所示的【斜面和浮雕】参数，效果得到如图5-2-11所示。 图5-2- 10 【斜面和浮雕】参数设置 图5-2- 11 执行【斜面和浮雕】后效果 4. 新建【图层2】，用【椭圆选框工具】画一个“36px×36px”的正圆，设置前景色为白色，背景色为25%的灰色（R207，G207，B207），按住【Shift】键的同时用【渐变工具】从左上角往右下角拉出渐变，再用上一例中的方法使其与边框对齐，如图5-2-12所示。 图5-2- 12 画出按钮主体 5. 给【图层2】添加图层样式，【斜面和浮雕】的参数设置如图5-2-13所示，得到如图5-2-14所示的效果。 图5-2- 13 【斜面和浮雕】参数设置 图5-2- 14 添加【斜面和浮雕】后效果 6. 因为迷你按钮的空间有限，不适合文字，所以一般用图形表示按钮的作用，所以选择【自定形状工具】，在上方出现的工具栏选项中选择自己喜欢的形状，也可以直接用【钢笔工具】绘制形状，在这里选择了“”形状，如果找不到这个形状，可以按形状选择菜单右上角的，然后单击【全部】调出全部形状，如图5-2-15 所示。 图5-2- 15 选择形状 7. 新建【路径1】，绘制大小合适的形状，再右击【路径1】选择【建立选区】，新建【图层3】，在选区内填充上和按钮边框一样的橙色，重复对齐操作，效果如图5-2-16所示。 图5-2- 16 填充上人形 8. 双击【图层3】，在弹出的对话框中选上【内阴影】复选框，参数设置如图5-2-17所示，得到效果如图5-2-18所示的最终效果。 图5-2- 17 【内阴影】参数设置 图5-2- 18 最终完成的效果图 迷你按钮有着其它按钮所不具备的优势，那就是小巧，但这也成为它的缺点，如果按钮上的图形不合适，起不到引导浏览者的作用，那就失去了它的效用，所以在设计图形时一定要谨慎，比如上一例可以用做安全出口的按钮，而链接到主页的迷你按钮一般采用小房子的造型。 5.2.3 水晶按钮 可能是受Apple的影响，水晶按钮可以说是最受欢迎的按钮样式之一，大家争相模仿，下面就教大家制作一款橘红色的水晶按钮。 图5-2