2.5 网页中按钮的表现形式

从功能上划分，目前在网页中普遍出现的按钮可以分为两种，一种是真正意义上的按钮，可以实现提交功能；另一种称为“伪按钮”，仅仅是超链接图片。

2.5.1 实现提交功能的按钮

实现提交功能的按钮，是指当用户输入关键字后，单击“搜索”按钮，网页中将会出现搜索的结果；当用户输入用户名和密码后，单击“登录”按钮，网页中将显示用户的相关信息。在按钮上的文字说明了整个表单区域的内容，例如，有“搜索”按钮的区域，表明这一区域内的文本框和按钮都是为搜索功能服务的，不需要再另外添加说明了，这也是网页设计师为提高网页可用性而普遍采用的一种方式。

实现提交功能的按钮，在按钮的表现形式上可以分为两种。

1. 系统标准按钮

系统标准按钮是网页中默认的实现提交功能的按钮，与各种各样的图片按钮相比，在网页中使用系统标准按钮更容易被用户识别，但是样式过于单一呆板，在很多情况下与网页的整体风格不相符，如图2-181所示。

2. 使用图片制作的按钮

由于系统标准按钮很难与网页的整体风格相符，所以在很多情况下，网页设计师会设计与网页整体风格相符的图片按钮来代替系统标准按钮，但它同样可以实现提交的功能。使用图片制作的按钮美观大方、形式多变，但是用户很难将它与网页中其他一些普通的超链接图片按钮相区别，如图2-182所示。

2.5.2 实现链接的图片按钮

在网页上除了包含实现提交功能的按钮之外，还包含许多的“伪按钮”，这些按钮从外观上看是一个按钮，实际上只是提供了一个超链接。设计师为了突出某超链接的重要性，与普通文字超链接区别开，将其设计为按钮的样式，使得这些链接更为突出，引导用户单击。

网页上“伪按钮”的表现形式可以包含前面讲解的3种形式：静态图片按钮、JavaScript翻转图片按钮和Flash动画按钮。不管是什么形式的按钮，重要的是设计者一定要能够把握好按钮的风格与整个页面风格的一致性，并且能够给浏览者留下深刻的印象，如图2-183所示。网页中按钮的表现形式及风格的把握，需要读者多看成功的作品，多从设计者的角度思考问题，才能够快速地提高设计水平。

【自测6】设计网页中的下载按钮

视频：光盘\视频\第2章\网页中的下载按钮.swf 源文件：光盘\源文件\第2章\网页中的下载按钮.psd

● 案例分析

案例特点：本案例设计一款网页中的下载按钮，将下载按钮图形与下载进度图形相结合，使得该按钮的视觉表现效果更加丰富。

制作思路与要点：下载按钮在网页界面中的应用比较常见，本案例设计的下载按钮为一个正圆角矩形，通过两个圆角矩形的相互叠加和图层样式的应用，表现出按钮的层次感，并且在按钮背景上应用了斜线纹理效果，进一步增强了按钮的质感。在按钮背景上设计下载箭头图形与下载进度的圆环图形，通过图形的方式来表现按钮的功能，非常直观，具有很好的视觉效果。

● 色彩分析

本案例所设计的下载按钮使用绿色作为主体颜色，搭配使用明度和纯度相近的绿色，给人视觉上的统一感，但又含有纯度的变化，让人感觉舒适；搭配使用对比色黄色，在按钮上的效果非常清晰，与按钮形成鲜明对比，整体给人直观、舒适、富有层次的视觉印象。

● 制作步骤

步骤01 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-184所示。使用“渐变工具”，打开“渐变编辑器”对话框，设置渐变颜色，如图2-185所示。

步骤02 单击“确定”按钮，完成渐变颜色的设置，在画布中填充径向渐变，效果如图2-186所示。执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-187所示。

步骤03 使用“矩形选框工具”，在画布中绘制选区，并分别为选区填充相应的颜色，效果如图2-188所示。执行“编辑>定义图案”命令，弹出“图案名称”对话框，如图2-189所示。单击“确定”按钮，将所绘制的图形定义为图案。

步骤04 返回设计文档中，复制“背景”图层，得到“背景 拷贝”图层，为该图层添加“图案叠加”图层样式，对相关选项进行设置，如图2-190所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-191所示。

步骤05 选择“圆角矩形工具”，在选项栏上设置“填充”为RGB（55，132，4）、“半径”为20像素，在画布中绘制圆角矩形，如图2-192所示。为该图层添加“投影”图层样式，对相关选项进行设置，如图2-193所示。

步骤06 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-194所示。复制“圆角矩形1”图层，清除复制得到的图层的图层样式并重命名，将复制得到的图形的填充颜色修改为RGB（120，197，73），并向上移动一些，效果如图2-195所示。

提示

如果需要修改形状图形的填充颜色，可以双击该形状图形所在的形状图层缩览图，弹出“拾色器”对话框，即可修改该形状图形的填充颜色。

步骤07 为该图层添加“斜面和浮雕”图层样式，对相关选项进行设置，如图2-196所示。继续添加“内阴影”图层样式，对相关选项进行设置，如图2-197所示。

步骤08 继续添加“内发光”图层样式，对相关选项进行设置，如图2-198所示。继续添加“图案叠加”图层样式，对相关选项进行设置，如图2-199所示。

步骤09 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-200所示。使用“椭圆工具”，在画布中绘制一个黑色的正圆形，如图2-201所示。

步骤10 使用“椭圆工具”，设置“路径操作”为“减去顶层形状”，在刚绘制的正圆形上减去一个正圆形，得到需要的圆环图形，效果如图2-202所示。设置该图层的“混合模式”为“线性加深”、“填充”为10%，效果如图2-203所示。

提示

使用“路径选择工具”选中多条需要进行对齐操作的路径，单击选项栏上的“路径对齐方式”按钮，可以在弹出的菜单中选择需要对所选中的多条路径进行对齐的方式。

步骤11 新建名称为“进度条”的图层组，选择“椭圆工具”，设置“填充”为RGB（255，210，0），在画布中绘制正圆形，如图2-204所示。分别选择“椭圆工具”和“矩形工具”，设置“路径操作”为“减去顶层形状”，在刚绘制的正圆形上减去相应的形状，得到需要的图形，效果如图2-205所示。

步骤12 使用“椭圆工具”在画布中合适的位置绘制两个椭圆形，如图2-206所示。为“进度条”图层组添加“内发光”图层样式，对相关选项进行设置，如图2-207所示。

步骤13 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-208所示。使用“自定形状工具”，在“形状”下拉面板中选择相应的形状，在画布中绘制形状图形，效果如图2-209所示。

步骤14 为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-210所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-211所示。

步骤15 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，设置该图层的“填充”为10%，效果如图2-212所示。完成该下载按钮的设计制作，最终效果如图2-213所示。

【自测7】设计质感播放按钮

视频：光盘\视频\第2章\质感播放按钮.swf 源文件：光盘\源文件\第2章\质感播放按钮.psd

● 案例分析

案例特点：本案例设计一款质感播放按钮，通过多个正圆形相互叠加，并为每个正圆形添加不同的图层样式，使得按钮具有很强的层次感和质感。

制作思路与要点：网页界面中按钮的质感表现非常重要，特别是网页界面中一些功能突出的按钮。本案例设计一款质感播放按钮，通过绘制正圆形，并为正圆形添加相应的图层样式，来体现出正圆形的质感；运用大小不一的正圆形相互叠加，表现出按钮的层次感。在本案例的制作过程中，重点在于对图层样式的设置，以使按钮的层次感和质感更加突出。

● 色彩分析

本案例所设计的质感播放按钮主要以灰色到黑色的渐变颜色作为主色调，使该按钮体现出高端大气的感觉，在按钮中心搭配绿色的功能图形，使得按钮更加亮眼，添加白色半透明图形实现按钮的高光效果，使按钮的质感表现更加真实。

● 制作步骤

步骤01 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-214所示。设置“前景色”为RGB（17，17，17），为画布填充前景色，效果如图2-215所示。

步骤02 新建名称为“背景”的图层组，使用“椭圆工具”在画布中绘制一个黑色的正圆形，如图2-216所示。为该图层添加“斜面和浮雕”图层样式，对相关选项进行设置，如图2-217所示。

提示

在“斜面和浮雕”图层样式设置界面中，“样式”选项用于选择斜面和浮雕的样式，包括“外斜面”、“内斜面”、“浮雕效果”、“枕状浮雕”和“描边浮雕”5种；“方法”选项中提供了创建浮雕的方法，包括“平滑”、“雕刻清晰”和“雕刻柔和”3种；“深度”选项用于设置样式的阴影强度，深度值的大小控制着浮雕效果立体感的强弱，该值的取值范围是1～1000的整数。“方向”选项用于控制斜面方向是向上方凸出还是向下方凹陷。

步骤03 继续添加“描边”图层样式，对相关选项进行设置，如图2-218所示。继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-219所示。

步骤04 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-220所示。使用相同的制作方法，在画布中绘制一个黑色的正圆形，如图2-221所示。

提示

注意此处所绘制的正圆形为同心圆，在实际绘制的过程中可以通过铺助线定位正圆形的中心点，或者复制前一个正圆形，将复制得到的正圆形等比例缩小，再进行相应的设置。也可以在完成两个正圆形的绘制后，同时选中两个正圆形，通过对齐操作将两个正圆形的圆心对齐。

步骤05 为该图层添加“描边”图层样式，对相关选项进行设置，如图2-222所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，设置该图层的“填充”为0%，效果如图2-223所示。

步骤06 使用相同的制作方法，可以绘制出其他相似的正圆形效果，如图2-224所示。新建“图层1”，使用“画笔工具”，设置“前景色”为白色，选择合适的笔触，在画布中相应的位置绘制，如图2-225所示。

步骤07 设置该图层的“混合模式”为“颜色减淡”、“填充”为30%，效果如图2-226所示。新建名称为“按钮”的图层组，选择“椭圆工具”，设置“填充”为RGB（63，105，30），在画布中绘制一个正圆形，如图2-227所示。

提示

设置图层的“混合模式”为“颜色减淡”，则可以通过减小对比度来加亮底层的图像，并使颜色变得更加饱和。

步骤08 为该图层添加“内发光”图层样式，对相关选项进行设置，如图2-228所示。继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-229所示。

步骤09 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-230所示。复制该图层，清除复制得到的图层的图层样式，为该图层添加“渐变叠加”图层样式，对相关选项进行设置，如图2-231所示。

步骤10 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-232所示。使用“自定形状工具”，在“形状”下拉面板中选择相应的形状，在画布绘制形状图形，效果如图2-233所示。

提示

除了可以使用系统提供的形状外，在Photoshop中还可以将绘制的形状图形创建为自定义形状。只需要将绘制的形状图形选中，执行“编辑>定义自定形状”命令，即可将其保存为自定形状。

步骤11 为该图层添加“描边”图层样式，对相关选项进行设置，如图2-234所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-235所示。

步骤 12单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-236所示。复制该图层，将复制得到的图形等比例放大，并清除该图层的图层样式，添加“投影”图层样式，对相关选项进行设置，如图2-237所示。

步骤13 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，设置该图层的“填充”为0%，效果如图2-238所示。使用“椭圆工具”在画布中绘制一个白色正圆形，如图2-239所示。

步骤14 选择“钢笔工具”，设置“路径操作”为“减去顶层形状”，在刚绘制的正圆形上减去相应的形状，得到需要的图形，效果如图2-240所示。设置该图层的“混合模式”为“叠加”、“填充”为20%，效果如图2-241所示。

步骤15 完成该质感播放按钮的设计制作，最终效果如图2-242所示。