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

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