《68动态按钮---网页制作（二）》.pdfVIP

68 动态按钮━━网页制作（二） 目的：制作如图68.1 所示关于电影的网页。 要点：主要是利用ImageReady 7.0 制作动态 按钮和动画。本例主要利用 Slice 工 具，Gradient Tool 以及各种图层样式 来制作完成。 图68.1 网页效果图 操作步骤 1．新建一个640×480 像素的图像。设 置背景色为白色。 2 ．选择File | Open 命令，打开一副图 象。按住Ctrl+A 键全选图像。然后选择Edit | Copy 命令，将图像拷贝至剪贴板中。 图68.2 新建图像 3 ．回到刚刚新建的图像。选择Edit | Paste 命令，将剪贴板中的图像粘贴过来， 如图68.2 所示。 4 ．在工具箱中单击Jump to ImageReady 图标打开ImageReady 7.0 ，开始 在ImageReady 7.0 下编辑图像。 5. 在工具箱中选择Rounded Rectangle 图68.3 画圆角矩形 Tool ，在图像左侧画出一个圆角矩形，如图 68.3 所示。 6 ．打开Styles 面板，用鼠标双击 Button-Purple 样式，即可把按钮填充为如图 68.4 所示的样式。 7 ．用鼠标点击Layer 2 图层右侧的三 角形图标，打开下拉菜单，从中选择Color Overlay 选项，这时会出现Color Overlay 面 图68.4 选择按钮样式 第十六篇 网页制作 新概念百例 121 板。在面板中设置颜色为蓝色。 8 ．再选择Gradient Overlay ，在对话框 中调整渐变颜色，使按钮色彩如图68.5 。 9 ．在工具箱中选择Horizontal Type Tool ，字体设为STXinWei，大小为22px ， 颜色为黄色，输入文字。调整文字位置和大 小后放在按钮的上面，然后将文字图层和按 钮所在图层设为链接图层，如图68.6 所示。 图68.5 更改图层样式 10．在工具箱中选择Slice Tool 工具， 在按钮四周画出一个和按钮差不多的矩形。 说明：画出的矩形切片的大小不一定要 和按钮大小完全一样。这个按钮的作用在网 页浏览器中会看得更加清楚，当鼠标放在不 同位置时按钮会有不同的表现。 图68.6 添加文字 11．在Rollovers 面板中单击Create rollover state 图标，新建一个和按钮一样的 图像。 12．选择按钮所在图层为当前工作图 层，单击图层面板中Drop Shadow 的眼睛图 标，去掉投影效果，如图68.7 所示。 13．在Slice 面板中的URL 文本框内 输入该按钮所链接的网页或网站。 14．按照同样方法制作另外几个按钮。 图68.7 动态按钮 15．在工具箱单击Jump to Photoshop ， 切换回Photoshop 。然后在工具箱中选择 Horizontal Type Tool ，在上方控制栏中设置 字体大小为110px ，其它同上，添加文字。 16．在上方控制栏中打开Create warped text 图标，打开Warp Text 对话框。 在对话框中设置Bend 为100%，效果如图 68.8 所示。 图68.8 添加文字 17．按住Ctrl 键单击文字图层，出现 选区。使背景画所在图层为当前工作图层， 选择Edit | Copy 命令，将选区内图像拷贝至 122 新概