《Photoshop7.0》基础实例50 翻转效果动态按钮

基础实例50翻转效果动态按钮 目的:制作如图50.1所示的动态按钮效果。 要点: ImageReady的强大网页制作功能不 按钮 仅体现在动画之多上,更体现在动态 按钮的制作上,它自身可以方便的对 按钮 按钮各种翻转效果进行编辑,还自带 了多种样式供设计者直接使用。本例 主要应用 Ellipse Tool、 Button-Purple- 按钮 样式、 Create rollover state操作、Slice Tool等工具完成。 图50.1动态按钮效果 操作步骤 1.打开Image Ready软件,选择File New命令,打开New对话框,在其中设置 Width为340 0 pixels, Height为240 0 pixels, Contents of First Layer选择为 White,点击 O按钮确认建立一幅动画图像文件。 2.在工具箱中选择 Ellipse Tool,在图 像中间拖移出一个椭圆形图像,如图50.2 所示。 图50.2添加椭圆形形状 注意: Ellipse Tool(椭圆形工具)属于 形状工具,使用之后在 Layers面板会自动 生成新的 Shape图层。 3.下面为新形状图层添加样式,选择 Styles面板,在其中选择 Button-Purple-按钮, 如图50.3所示,将该样式添加到椭圆形图 像中,得到按钮雏形。 图50.3选择应用样式 4.接下来就开始为按钮添加翻转效果。 选择 Rollovers面板,在其中点击下方的 Create rollover state按钮,在面板中添加一

50 翻转效果──动态按钮 目的：制作如图 50.1 所示的动态按钮效果。 要点：ImageReady 的强大网页制作功能不 仅体现在动画之多上，更体现在动态 按钮的制作上，它自身可以方便的对 按钮各种翻转效果进行编辑，还自带 了多种样式供设计者直接使用。本例 主要应用 Ellipse Tool、Button-Purple 样式、Create rollover state 操作、Slice Tool 等工具完成。 图 50.1 动态按钮效果 操作步骤 1．打开 ImageReady 软件，选择 File | New 命令，打开 New 对话框，在其中设置 Width 为 340 pixels，Height 为 240 pixels， Contents of First Layer 选择为 White，点击 OK 按钮确认建立一幅动画图像文件。 2．在工具箱中选择 Ellipse Tool，在图 像中间拖移出一个椭圆形图像，如图 50.2 所示。 注意：Ellipse Tool（椭圆形工具）属于 形状工具，使用之后在 Layers 面板会自动 生成新的 Shape 图层。 3．下面为新形状图层添加样式，选择 Styles 面板，在其中选择 Button-Purple 按钮， 如图 50.3 所示，将该样式添加到椭圆形图 像中，得到按钮雏形。 4．接下来就开始为按钮添加翻转效果。 选择 Rollovers 面板，在其中点击下方的 Create rollover state 按钮，在面板中添加一 图 50.2 添加椭圆形形状 图 50.3 选择应用样式

第十一篇制作网页素材 新概念百例(13 个翻转状态,如图504所示,生成乐Over Rubswwrs r Tove Cin o State翻转状态 说明:翻转状态是指按钮响应不同鼠标 Uatitled-1 01 事件时的状态效果,包括 Normal(平常 Over state Over(覆盖)、Down(按下)、Clck(点 击)、Up(抬起)Out(移出)等等。本例 中将使用最常用的Over和Down状态进行 图504添加翻转状态 编辑,其余读者可以自行尝试 5.对 Over State进行编辑,首先要回 到 Layers面板,点击形状图层右侧的小 角图标,会在下方弹出所有的图层样式选 项,在其中双击 Color Overlay(颜色覆盖) 选项,然后在 Layer Option面板中将 Color 设为黄色,得到如图50.5所示的效果。 6.下面再到 Rollovers面板,同样点击 在其中点击下方的 Create rollover state按 图50.5编辑Over状态 钮,在面板中添加下一个翻转状态,系统会 自动生成 Down State翻转状态 7.回到 Layers面板中,在形状图层的 众多图层样式选项中双击 Bevel and emboss (斜面与浮雕),然后在 Layer Option面板 中修改图层样式选项的属性参数,在其中选 择 Pillow emboss,并将Size设为20,不改 变其他参数,按 Enter键确认,得到如图506 图50.6编辑Down状态 所示的效果。 8.为了更好的实现按钮的效果,需要 为它确定合适的热区,选择工具箱上的 Slice Tool(切片工具),在图中建立如图50.7所 示的切片,其中切片3包含所有的按钮图 像,系统会自动将其作为按钮的热区 说明:热区就是能够感应鼠标事件的区 域,如不做切片编辑,则整幅图像都被认为 是一个切片,即全部为热区 图507建立切片 9.选择 normal翻转状态,然后选择

个翻转状态，如图 50.4 所示，生成乐 Over State 翻转状态。 说明：翻转状态是指按钮响应不同鼠标 事件时的状态效果，包括 Normal（平常）、 Over（覆盖）、Down（按下）、Click（点 击）、Up（抬起）Out（移出）等等。本例 中将使用最常用的 Over 和 Down 状态进行 编辑，其余读者可以自行尝试。 5．对 Over State 进行编辑，首先要回 到 Layers 面板，点击形状图层右侧的小三 角图标，会在下方弹出所有的图层样式选 项，在其中双击 Color Overlay（颜色覆盖） 选项，然后在 Layer Option 面板中将 Color 设为黄色，得到如图 50.5 所示的效果。 6．下面再到 Rollovers 面板，同样点击 在其中点击下方的 Create rollover state 按 钮，在面板中添加下一个翻转状态，系统会 自动生成 Down State 翻转状态。 7．回到 Layers 面板中，在形状图层的 众多图层样式选项中双击 Bevel and Emboss （斜面与浮雕），然后在 Layer Option 面板 中修改图层样式选项的属性参数，在其中选 择 Pillow Emboss，并将 Size 设为 20，不改 变其他参数，按 Enter 键确认，得到如图 50.6 所示的效果。 8．为了更好的实现按钮的效果，需要 为它确定合适的热区，选择工具箱上的 Slice Tool（切片工具），在图中建立如图 50.7 所 示的切片，其中切片 3 包含所有的按钮图 像，系统会自动将其作为按钮的热区。 说明：热区就是能够感应鼠标事件的区 域，如不做切片编辑，则整幅图像都被认为 是一个切片，即全部为热区。 9．选择 Normal 翻转状态，然后选择 图 50.4 添加翻转状态 图 50.5 编辑 Over 状态 图 50.6 编辑 Down 状态 图 50.7 建立切片 第十一篇 制作网页素材 新概念百例 153

新概念百例 入门·创作·提高— Photoshop70 工具箱上的 Tpye Tool,选择合适属性在图 像中添加“按钮”两个字,如图50.8所示。 10.点击工具箱上的按钮,即可以预览 制作出的动态按钮效果了,使用 Optimized 按钮 标签可以预览优化后的效果,再选择 Fl| Save Optimized As命令就可以将文件 存储为html格式的网页按钮了 图50.8添加文字

154 新概念百例 入门·创作·提高━━Photoshop7.0 工具箱上的 Tpye Tool，选择合适属性在图 像中添加“按钮”两个字，如图 50.8 所示。 10．点击工具箱上的 按钮，即可以预览 制作出的动态按钮效果了，使用 Optimized 标签可以 预览优化 后的效果 ，再选择 File|Save Optimized As 命令就可以将文件 存储为 html 格式的网页按钮了。 图 50.8 添加文字