2.4 网页中按钮的特点
随着互联网的发展，网络速度也得到了飞速发展，在网站中越来越多地使用图像按钮、JavaScript交互按钮或Flash动态按钮的形式，以增加页面的动态和美观。
按钮主要具有两个作用：第一是提示性作用，通过提示性的文本或者图形告诉浏览者单击后会有什么结果；第二是动态响应作用，即当浏览者在进行不同的操作时，按钮能够呈现出不同的效果，响应不同的鼠标事件。这样的动态按钮一般有4个状态，即Up（释放）、Over（滑过）、Down（按下）和Over While Down（按下时滑过）。从功能的角度来看，按钮和文字链接的作用相同，都是引导人们去访问某些内容。
不论是静态图片按钮还是动态按钮，网站中的按钮都具有如下几个特点：
1. 易用性
在网页中使用图片按钮比使用特殊字体更容易被浏览者所识别。网页中的图片按钮可以充分发挥网页设计师的创意和想法，使图片按钮跃然于页面上，更方便浏览者的操作和使用，随着Flash动画在网页中越来越广泛地应用，在网站中也越来越多地可以看到Flash动画按钮，Flash动画按钮更能够吸引浏览者的注意，使网页更易于操作。所以现在的网页设计中越来越多地应用了设计精美的图片按钮和Flash动态按钮，如图2-126所示。
图2-126
2. 可操作性
在网页设计过程中，为了使网页中比较重要的功能或链接能够突出显示，通常会将该部分内容制作成按钮的形式，例如“登录”按钮、“搜索”按钮等，或是一些具有特别功能的链接按钮。这些按钮，不论是静态的还是动态的，在网页都需要实现某些功能或作用，而不是装饰，所以这就需要网页中的按钮都要有一定的可操作性，能够实现网页的某种功能，如图2-127所示。
图2-127
3. 动态效果
静态图片按钮的表现形式较为单一，不容易引起浏览者的兴趣和注意。而JavaScript交互按钮和Flash按钮具有动态效果，能够增强页面的动感，传达更丰富的信息，并且可以突出该按钮与页面中其他普通按钮的区别，突出显示该按钮及其内容，如图2-128所示。
图2-128
【自测4】设计质感游戏按钮
视频：光盘\视频\第1章\质感游戏按钮.swf 源文件：光盘\源文件\第1章\质感游戏按钮.psd
● 案例分析
案例特点：本案例设计一款质感游戏按钮，主要通过多种图层样式的结合使用，来体现出按钮图形的质感。
制作思路与要点：按钮的设计风格一定要和网页界面的整体风格相统一。制作本案例的质感游戏按钮，首先绘制圆角矩形，通过多种图层样式的添加表现出按钮的质感；接着为按钮添加纹理效果和高光效果；最后输入按钮上的文字并为文字添加相应的图层样式，整个按钮给人很强的质感和立体感。
● 色彩分析
本案例所设计的质感游戏按钮使用蓝色作为主色调，运用明度和纯度较高的蓝色渐变作为按钮的背景色，搭配深蓝色的按钮文字，使得按钮层次分明，视觉效果明亮，应用在深蓝色的网页界面，效果比较突出。
● 制作步骤
步骤01 打开素材图像“光盘\源文件\第2章\素材\501.jpg”，如图2-129所示。新建名称为“按钮”的图层组，使用“圆角矩形工具”，在选项栏上设置“半径”为20像素，在画布中绘制一个黑色的圆角矩形，如图2-130所示。
图2-129
图2-130
步骤02 为该图层添加“斜面和浮雕”图层样式，对相关选项进行设置，如图2-131所示。继续添加“描边”图层样式，对相关选项进行设置，如图2-132所示。
图2-131
图2-132
步骤03 继续添加“内阴影”图层样式，对相关选项进行设置，如图2-133所示。继续添加“光泽”图层样式，对相关选项进行设置，如图2-134所示。
图2-133
图2-134
步骤04 继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-135所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-136所示。
图2-135
图2-136
提示
为图层添加图层样式的方法有3种。第1种，选择需要添加图层样式的图层，执行“图层>图层样式”命令，通过“图层样式”子菜单中相应的命令可以为图层添加相应的图层样式。第2种，单击“图层”面板上的“添加图层样式”按钮
，在弹出菜单中选择需要对添加的图层样式。第3种，在需要添加图层样式的图层名称外侧区域双击，也可以弹出“图层样式”对话框。
步骤05 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-137所示。新建图层，使用“画笔工具”，设置“前景色”为RGB（208，209，210），选择合适的笔触，在画布中合适的位置进行涂抹，效果如图2-138所示。
图2-137
图2-138
步骤06 设置该图层的“混合模式”为“叠加”，效果如图2-139所示。使用“圆角矩形工具”，设置“半径”为20像素，在画布中绘制白色的圆角矩形，如图2-140所示。
图2-139
图2-140
提示
设置图层的“混合模式”为“叠加”，可以改变图像的色调，但图像的高光和暗调将被保留。
步骤07 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-141所示。使用“矩形选框工具”，在画布中绘制选区，并分别填充颜色，效果如图2-142所示。
图2-141
图2-142
步骤08 执行“编辑>定义图案”命令，弹出“图案名称”对话框，如图2-143所示。单击“确定”按钮，将其定义为图案。返回设计文档中，为“圆角矩形2”图层添加“图案叠加”图层样式，对相关选项进行设置，如图2-144所示。
步骤09 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-145所示。设置该图层的“混合模式”为“柔光”、“不透明度”为3%、“填充”为6%，效果如图2-146所示。
图2-143
图2-144
图2-145
图2-146
步骤10 使用“钢笔工具”在画布中绘制白色的形状图形，并设置该图层的“不透明度”为70%，效果如图2-147所示。使用相同的制作方法，可以完成相似图形效果的绘制，如图2-148所示。
图2-147
图2-148
步骤11 选择“横排文字工具”，在“字符”面板中设置相关选项，在画布中输入文字，如图2-149所示。为该图层添加“描边”图层样式，对相关选项进行设置，如图2-150所示。
图2-149
图2-150
RGB（150，216，243）
步骤12 继续添加“内阴影”图层样式，对相关选项进行设置，如图2-151所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-152所示。
图2-151
图2-152
步骤13 完成该质感游戏按钮的设计制作，最终效果如图2-153所示。
图2-153
【自测5】设计网站个性按钮
视频：光盘\视频\第2章\网站个性按钮.swf 源文件：光盘\源文件\第2章\网站个性按钮.psd
● 案例分析
案例特点：本案例设计一款网站个性按钮，主要通过综合运用图层样式表现出按钮的质感，并通过水滴等图形的绘制，使按钮的表现效果更加突出。
制作思路与要点：本案例所设计的网站个性按钮并不是特别复杂，绘制出简单的按钮图形，为图形添加各种图层样式，即可表现出强烈的立体感和质感，结合“不透明度”和“填充”选项的设置，可以使按钮图形产生凹凸质感，更加具有视觉层次感。
● 色彩分析
本案例所设计的网站个性按钮使用黄色作为按钮的主体色调，搭配白色的高光和橙色的阴影，体现出按钮的立体感和质感，按钮的配色与网页界面的整体色调统一，使按钮在网页界面中的表现效果和谐、舒适。
● 制作步骤
步骤01 打开素材图像“光盘\源文件\第2章\素材\601.jpg”，效果如图2-154所示。新建名称为“进入按钮”的图层组，选择“圆角矩形工具”，在选项栏上设置“半径”为20像素，在画布中绘制一个黑色的圆角矩形，效果如图2-155所示。
图2-154
图2-155
步骤02 为该图层添加“斜面和浮雕”图层样式，对相关选项进行设置，如图2-156所示。继续添加“内阴影”图层样式，对相关选项设置，如图2-157所示。
图2-156
图2-157
步骤03 继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-158所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-159所示。
步骤04 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-160所示。复制“圆角矩形1”图层，得到“圆角矩形1拷贝”图层，清除“圆角矩形1拷贝”图层的图层样式，添加“投影”图层样式，对相关选项进行设置，如图2-161所示。
图2-158
图2-159
图2-160
图2-161
提示
如果需要删除图层所添加的某一种图层样式，可以拖动该图层样式名称至“图层”面板下方的“删除”按钮
上。如果需要删除图层所添加的多个图层样式，可以在该图层上单击鼠标右键，在弹出的菜单中选择“清除图层样式”命令，即可一次性删除该图层的多个图层样式。
步骤05 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，设置该图层的“填充”为0%，效果如图2-162所示。复制“圆角矩形1拷贝”图层，得到“圆角矩形1拷贝2”图层，清除该图层的图层样式，添加“渐变叠加”图层样式，对相关选项进行设置，如图2-163所示。
图2-162
图2-163
步骤06 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-164所示。选择“钢笔工具”，在选项栏上设置“工具模式”为“形状”，在画布中绘制白色的形状图形，如图2-165所示。
图2-164
图2-165
步骤07 为该图层添加“斜面和浮雕”图层样式，对相关选项进行设置，如图2-166所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-167所示。
图2-166
图2-167
步骤08 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，设置该图层的“填充”为10%，效果如图2-168所示。使用相同的制作方法，可以完成相似图形效果的绘制，如图2-169所示。
图2-168
图2-169
步骤09 新建“图层1”，使用“画笔工具”，设置“前景色”为白色，选择合适的笔触并设置笔触的不透明度，在画布中合适的位置涂抹，设置该图层的“混合模式”为“柔光”，效果如图2-170所示。复制“图层1”图层，得到“图层1拷贝”图层，将复制得到的图形垂直翻转并向上移至合适的位置，效果如图2-171所示。
图2-170
图2-171
提示
使用“画笔工具”可以绘制出比较柔和的前景色线条，类似于使用真实画笔绘制的线条，通过在选项栏中对相关选项进行设置，绘制出的图形可以和真实画笔绘制的图画效果相媲美。
步骤10 选择“横排文字工具”，在“字符”面板中设置相关选项，在画布中输入文字，如图2-172所示。为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-173所示。
图2-172
图2-173
步骤11 继续添加“外发光”图层样式，对相关选项进行设置，如图2-174所示。继续添加“投影”图层样式，对相关选项进行设置，如图2-175所示。
图2-174
图2-175
步骤12 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，设置该图层的“填充”为0%，效果如图2-176所示。在“进入按钮”图层组上方添加“色相/饱和度”调整图层，在“属性”面板中对相关选项进行设置，如图2-177所示。
图2-176
图2-177
提示
“色相/饱和度”可以调整图像中特定颜色范围的色相、饱和度和亮度，或者同时调整图像中的所有颜色。
步骤13 选择“色相/饱和度”调整图层，执行“图层>创建剪贴蒙版”命令，为该图层创建剪贴蒙版，效果如图2-178所示。使用相同的制作方法，完成相似图形效果的绘制，并调整图层的叠放顺序，效果如图2-179所示。
图2-178
图2-179
步骤14 完成该个性网站按钮的设计制作，最终效果如图2-180所示。
图2-180