应用买例68动态按钮网页制作(二) 目的:制作如图68.1所示关于电影的网页。 要点:主要是利用 ImageReady70制作动态 按钮和动画。本例主要利用 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图标打开 ImageReady7.0,开始 在 ImageReady7.0下编辑图像。 5.在工具箱中选择 Rounded Rectangle 图68.3画圆角矩形 tool,在图像左侧画出一个圆角矩形,如图 68.3所示。 Untitied-1 50*(Original) 2Up 4Up 6.打开 Styles面板,用鼠标双击 Button-Purple-样式,即可把按钮填充为如图 68.4所示的样式。 7.用鼠标点击 Layer2图层右侧的三 角形图标,打开下拉菜单,从中选择 Color Overlay选项,这时会出现 Color Overlay面 图68.4选择按钮样式
68 动态按钮━━网页制作（二） 目的：制作如图 68.1 所示关于电影的网页。 要点：主要是利用 ImageReady 7.0 制作动态 按钮和动画。本例主要利用 Slice 工 具，Gradient Tool 以及各种图层样式 来制作完成。 图 68.1 网页效果图 操作步骤 1．新建一个 640×480 像素的图像。设 置背景色为白色。 2．选择 File | Open 命令，打开一副图 象。按住 Ctrl+A 键全选图像。然后选择 Edit | Copy 命令，将图像拷贝至剪贴板中。 3．回到刚刚新建的图像。选择 Edit | Paste 命令，将剪贴板中的图像粘贴过来， 如图 68.2 所示。 4．在工具箱中单击 Jump to ImageReady 图标打开 ImageReady 7.0，开始 在 ImageReady 7.0 下编辑图像。 5. 在工具箱中选择 Rounded Rectangle Tool，在图像左侧画出一个圆角矩形，如图 68.3 所示。 6．打开 Styles 面板，用鼠标双击 Button-Purple 样式，即可把按钮填充为如图 68.4 所示的样式。 7．用鼠标点击 Layer 2 图层右侧的三 角形图标，打开下拉菜单，从中选择 Color Overlay 选项，这时会出现 Color Overlay 面 图 68.2 新建图像 图 68.3 画圆角矩形 图 68.4 选择按钮样式
第十六篇网页制作 新概念百例 板。在面板中设置颜色为蓝色 8.再选择 Gradient Overlay,在对话框 中调整渐变颜色,使按钮色彩如图68.5。 9.在工具箱中选择 Horizontal Type Iool,字体设为 STXin Wei,大小为22x, 颜色为黄色,输入文字。调整文字位置和大 小后放在按钮的上面,然后将文字图层和按 钮所在图层设为链接图层,如图686所示 图685更改图层样式 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%,效果如图 688所示。 17.按住Ctrl键单击文字图层,出现 选区。使背景画所在图层为当前工作图层 选择Edit|copy命令,将选区内图像拷贝至
板。在面板中设置颜色为蓝色。 8．再选择 Gradient Overlay，在对话框 中调整渐变颜色，使按钮色彩如图 68.5。 9．在工具箱中选择 Horizontal Type Tool，字体设为 STXinWei，大小为 22px， 颜色为黄色，输入文字。调整文字位置和大 小后放在按钮的上面，然后将文字图层和按 钮所在图层设为链接图层，如图 68.6 所示。 10．在工具箱中选择 Slice Tool 工具， 在按钮四周画出一个和按钮差不多的矩形。 说明：画出的矩形切片的大小不一定要 和按钮大小完全一样。这个按钮的作用在网 页浏览器中会看得更加清楚，当鼠标放在不 同位置时按钮会有不同的表现。 11．在 Rollovers 面板中单击 Create rollover state 图标，新建一个和按钮一样的 图像。 12．选择按钮所在图层为当前工作图 层，单击图层面板中 Drop Shadow 的眼睛图 标，去掉投影效果，如图 68.7 所示。 13．在 Slice 面板中的 URL 文本框内 输入该按钮所链接的网页或网站。 14．按照同样方法制作另外几个按钮。 15．在工具箱单击 Jump to Photoshop， 切换回 Photoshop。然后在工具箱中选择 Horizontal Type Tool，在上方控制栏中设置 字体大小为 110px，其它同上，添加文字。 16．在上方控制栏中打开 Create warped text 图标，打开 Warp Text 对话框。 在对话框中设置 Bend 为 100%，效果如图 68.8 所示。 17．按住 Ctrl 键单击文字图层，出现 选区。使背景画所在图层为当前工作图层， 选择 Edit | Copy 命令，将选区内图像拷贝至 图 68.5 更改图层样式 图 68.6 添加文字 图 68.7 动态按钮 图 68.8 添加文字 第十六篇 网页制作 新概念百例 121
新概念百例 入门·创作·提高— Photoshop70 剪贴板中。然后选择Edⅱt| Paste命令,将图 象粘贴过来,此时产生一个新图层 Layer3 18.将 Layer3移动到最上层。单击 Add a layer style,选择 Bevel and Emboss 在对话框中设置 Style为 Emboss然后单击 打开 Drop shadow对话框,参数为默认值 再选中 Outer glow,打开 Outer glow对话 图689图层样式 框。在对话框中设置 Spread为15,Size为 15,效果如图689所示。 19在 Layers面板中单击 Create a ne ayer图标,新建一个图层 Layer4 20.在工具箱中选择 Elliptical Marquee Tool,在上方控制栏中选择 Radial gradient 按住 Shift键画出圆形选区。然后在工具箱 中选择 Gradient Tool,渐变填充选区,如图 图68.10渐变填充 6810所示。 21.调整 Layer4的不透明度为30% 在 Layers面板中单击 Add a layer style图标 选择 Outer Glow,在对话框中设置 Spread 为15,Size为15,效果如图68.11所示。 22.在工具箱中单击Jump makeReady图标,切换到 ImageReady状态。 在 Actions面板中选择Spin,单击Play图标 图68.11图层样式 则 Image Ready会自动生成一系列图像。在 Animation面板中单击Play按钮,可以看到 自动旋转的小球的效果 23.在工具箱中选择 Slice工具,在小 球四周画出切片,在 Optimize面板中将格 式改为Gif,因为只有Gif格式能播放动画, 如图68.2所示。至此,该网页制作完毕。 图68.12旋转的小球
122 新概念百例 入门·创作·提高━━Photoshop7.0 剪贴板中。然后选择 Edit | Paste 命令，将图 象粘贴过来，此时产生一个新图层 Layer 3。 18．将 Layer 3 移动到最上层。单击 Add a layer style，选择 Bevel and Emboss， 在对话框中设置 Style 为 Emboss。然后单击 打开 Drop Shadow 对话框，参数为默认值。 再选中 Outer Glow，打开 Outer Glow 对话 框。在对话框中设置 Spread 为 15，Size 为 15，效果如图 68.9 所示。 19．在 Layers 面板中单击 Create a new layer 图标，新建一个图层 Layer 4。 20．在工具箱中选择 Elliptical Marquee Tool，在上方控制栏中选择 Radial Gradient， 按住 Shift 键画出圆形选区。然后在工具箱 中选择 Gradient Tool，渐变填充选区，如图 68.10 所示。 21．调整 Layer 4 的不透明度为 30%。 在Layers面板中单击Add a layer style图标， 选择 Outer Glow，在对话框中设置 Spread 为 15，Size 为 15，效果如图 68.11 所示。 22．在工具箱中单击 Jump to ImageReady 图标，切换到 ImageReady 状态。 在 Actions 面板中选择 Spin，单击 Play 图标， 则 ImageReady 会自动生成一系列图像。在 Animation 面板中单击 Play 按钮，可以看到 自动旋转的小球的效果。 23．在工具箱中选择 Slice 工具，在小 球四周画出切片，在 Optimize 面板中将格 式改为 Gif，因为只有 Gif 格式能播放动画， 如图 68.12 所示。至此，该网页制作完毕。 图 68.9 图层样式 图 68.10 渐变填充 图 68.11 图层样式 图 68.12 旋转的小球