实例8 制作按钮素材

实例说明

在本实例中，将制作网页中使用的按钮，按钮通常有三种状态，包括原始状态、鼠标经过状态和按下状态，然后使用其他软件编辑按钮，使按钮能够形成互动形式，通过本实例，可以使读者了解按钮素材的制作方法，并了解怎样使二维图像呈现三维质感。

技术要点

在制作按钮时，首先制作按钮底部金属质感部分，金属质感部分使用渐变色填充圆形完成，制作完成金属部分后，仍旧通过渐变色填充圆形的方法设置玻璃部分，然后设置高光部分，最后添加符号完成原始状态按钮的制作，由于三个按钮较为相似，所以只需要复制第一个按钮后，对其进行简单的编辑，就可以完成其他两个按钮的制作。

按钮是一种网页中常用的组件形式，为了使按钮具有更好的视觉效果，通常会使按钮根据鼠标的状态产生不同反应，所以在设置按钮素材时，需要准备几组图像。在本实例中，将为读者讲解按钮素材的制作方法，图8-1中，左图为按钮原始状态，中图为按钮鼠标经过状态，右图为按钮按下状态。

1 运行Photoshop CS3，执行菜单栏中的“文件”/“新建”命令，打开“新建”对话框。在“名称”文本框中键入“按钮素材”。在“宽度”参数栏内键入1200，在“高度”参数栏内键入400，单位设置为“像素”，在“分辨率”参数栏内键入72，在“颜色模式”下拉式选项栏中选择“RGB颜色”选项，在“背景内容”下拉式选项栏中选择“白色”选项，单击“确定”按钮，创建一个新文件。

2 在“图层”面板底部单击“创建新图层”按钮，创建一个新的图层“图层1”。

3 将前景色设置为白色，将背景色设置为R、G、B值均为155的浅灰色，在工具箱中单击“椭圆形选框工具”按钮，按住Shift键在如图8-2所示的位置创建一个正圆形选区。

提示

按住Shift键后，设置的圆形选区为正圆。

4 在工具箱中单击“渐变工具”按钮，将所设置的圆形选区填充为如图8-3所示的渐变色。

5 在“图层”面板中双击“图层1”图层缩览图，打开“图层样式”对话框。选择“样式”选项组中的“投影”复选框，进入投影编辑窗口。在“不透明度”参数栏内键入50，在“角度”参数栏内键入120，在“距离”、“扩展”和“大小”参数栏均键入5，如图8-4所示。

6 选择“样式”选项组中的“描边”复选框，进入描边编辑窗口，将“设置描边颜色”显示窗内的颜色设置为R、G、B值均为145的灰色，在“大小”参数栏内键入2，在“位置”下拉式选项栏中选择“外部”选项，如图8-5所示，单击“确定”按钮，退出“图层样式”对话框。

7 在“图层”面板的底部单击“创建新图层”按钮，创建一个新的图层——“图层2”。

8 在工具箱中单击“椭圆形选框工具”按钮，按住Shift键在步骤3所示的圆形中心位置再创建一个正圆形选区。

9 在工具箱中单击“渐变工具”按钮，将所设置的圆形选区沿与“图层1”相反的方向填充“图层2”，如图8-6所示。

10 将前景色设置为R、G、B值分别为195、230、250的浅蓝色，背景色设置为R、G、B值分别为55、95、235的蓝色。

11 在“图层”面板底部单击“创建新图层”按钮，创建一个新的图层——“图层3”，选择“图层3”层，然后按住Ctrl键单击“图层2”图层缩览图，加载选区，然后在菜单栏中执行“选择”/“修改”/“收缩”命令，打开“收缩选区”对话框，在“收缩量”参数栏内键入4，然后单击“确定”按钮，退出该对话框。

12 在工具箱中单击“渐变工具”按钮，在属性栏内单击“径向渐变”按钮，将选区填充为如图8-7所示的渐变色。

13 在“图层”面板底部单击“创建新图层”按钮，创建一个新的图层——“图层4”，在工具箱中单击“椭圆形选框工具”按钮，在如图8-8所示的位置绘制一个椭圆选区，并将其填充为白色。

14 按D键，设置前景色为黑色，背景色为白色，在工具箱内单击“以快速蒙版模式编辑”按钮，进入快速蒙版编辑模式，在工具箱内单击“渐变工具”按钮，在属性栏内单击“线性渐变”按钮，设置如图8-9所示的渐变填充。

15 在工具箱激活“以标准模式编辑”按钮，进入标准编辑模式，视图中出现如图8-10所示的选区。

16 按Delete键，删除选区内的图像，然后将“图层4”的图像旋转并移动至图8-11所示的位置。

17 在“图层”面板底部单击“创建新图层”按钮，创建一个新的图层——“图层5”。

18 在工具箱中单击“自定形状工具”按钮，在属性栏内单击“点按可打开‘自定形状工具’拾色器”按钮，选择“标记3”选项，如图8-12所示。

19 在如图8-13所示的位置绘制一个图形。

20 在菜单栏内执行“编辑”/“变换”/“旋转90度（逆时针）”命令，将其旋转，然后将其移动至图8-14所示。

21 在“图层”面板选择除了“背景”层之外的所有图层，按住鼠标左键将所选图层拖动至“创建新图层”按钮处，将所选图层复制，复制图层名称为“图层1副本”、“图层2副本”、“图层3副本”、“图层4副本”、“图层5副本”，将复制的图层移动至图8-15所示的位置。

22 在“图层”面板中选择“图层3副本”层，在菜单栏执行“图像”/“调整”/“色相/饱和度”命令，打开“色相/饱和度”对话框，在该对话框内的“色相”参数栏内键入10，在“饱和度”参数栏内键入95，在“明度”参数栏内键入5，如图8-16所示，单击“确定”按钮，退出该对话框。

23 退出“色相/饱和度”对话框后，可以看到复制按钮的效果如图8-17所示。

24 在“图层”面板选择“图层1副本”、“图层2副本”、“图层3副本”、“图层4副本”、“图层5副本”这5个图层，按住鼠标左键将所选图层拖动至“创建新图层”按钮处，将所选图层复制，复制图层名称为“图层1副本2”、“图层2副本2”、“图层3副本2”、“图层4副本2”、“图层5副本2”，将复制的图层移动至图8-18所示的位置。

25 选择“图层3副本2”、“图层4副本2”、“图层5副本2”三个图层，将其缩放并移动至如图8-19所示的位置。

26 在“图层”面板中双击“图层3副本2”图层缩览图，打开“图层样式”对话框。选择“样式”选项组中的“内投影”复选框，进入内投影编辑窗口，在“距离”参数栏内键入10，在“阻塞”参数栏内键入5，在“大小”参数栏键入40，如图8-20所示，单击“确定”按钮，退出该对话框。

27 退出“图层样式”对话框后可以看到，按钮内投影效果如图8-21所示。

28 现在按钮素材的制作就全部完成了，完成后的效果如图8-22所示，如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘“使用Photoshop CS3编辑网页素材/实例8：制作按钮素材/按钮素材.psd”文件，该文件为本实例完成后的效果。