“操作方法”图标 创建翻转按钮


    “操作方法提示”图标操作方法提示:

    使用 ImageReady 的“图层”调板和“Web 内容”调板创建翻转按钮。

    许多 Web 站点都包含翻转按钮,当您将鼠标指针停留在这些按钮上或选中它们时,它们将发生变化。按钮的不同显示模式称为翻转状态。您可以使用 Photoshop 中的图层来设计按钮及其翻转状态。您可以将生成每种变化的元素放置在各自的图层上,然后使用 Photoshop 的“图层”调板进行预览。设计出满意的效果后,为按钮创建一个切片。此切片将用来标记由鼠标触发以显示不同状态的区域。接下来,在 ImageReady® 中编辑按钮以定义翻转状态的内容。通过结合使用“Web 内容”调板和“图层”调板,创建一种状态,然后通过打开或关闭图层来设置其外观。

  1. 在 Photoshop 中,创建按钮的每个翻转状态的按钮图像、文本和内容。将任何不同于正常状态的翻转状态的内容放置在单独的图层上。翻转状态图层既可以基于按钮的正常状态增添新的内容,也可以代替正常状态图层使用。例如,如果希望在用户将鼠标指针置于某个按钮上时此按钮旁边添加一个圆圈,则可在一个单独的图层上创建该圆圈。不需要复制按钮本身。
  2. 在“图层”调板中选择表示按钮正常状态的图层。然后,选取“图层”>“新建基于图层的切片”,Photoshop 将在该图层上创建一个描绘按钮轮廓的切片。此切片确定了由鼠标触发激活翻转状态的区域。
  3. 存储文件,然后选取“文件”>“在 ImageReady 中编辑”。ImageReady 应用程序将打开并显示该图像。
  4. 点按“图层”选项卡和“Web 内容”选项卡,使相应的调板显示在前面。如果这两个调板未打开,请选取“窗口”>“图层”,然后选取“窗口”>“Web 内容”。
  5. 在“Web 内容”调板中选择“Normal”状态。在“图层”调板中确认:对于这种状态,哪些图层应是可见的,哪些图层应是隐藏的。点按眼睛图标 “眼睛”图标 可以隐藏某个图层,或者点按空眼睛列以显示某个图层。
  6. 在“Web 内容”调板中,选择为按钮创建的切片。然后,点按调板底部的“创建翻转状态”按钮 “新建”按钮。Photoshop 将“Over”状态插入到切片的下面。当用户将鼠标放置在按钮上时,就会出现“Over”状态。
  7. 在“Web 内容”调板中选中“Over”状态的情况下,在“图层”调板中点按图层旁边的眼睛图标 “眼睛”图标 或空眼睛列,以在这种状态下隐藏或显示相应的图层。
  8. 重要:在对按钮的图层进行任何更改之前,应始终确保在“Web 内容”调板中选中了正确的翻转状态。

  9. 如果要为按钮添加其他状态,例如“Down”状态(当用户按鼠标键时的状态)或“Selected”状态,请重复步骤 6 和 7。
  10. 注释:如果要将 Photoshop 创建的状态更改为另一状态(例如,将“Down”状态更改为“Selected”状态),请选择该状态,然后从“Web 内容”调板菜单中选取“翻转状态选项”,选择需要的状态,再点按“好”。

  11. 要预览翻转状态,请选择工具箱中的“预览文档”按钮 “预览文档”按钮,并将鼠标移动到按钮上。如果创建了其他状态,也可尝试激活这些状态(例如,按鼠标按键或点按)。再次选择“预览文档”可关闭预览模式。
  12. 设计出满意的按钮后,存储文件。请先用 Photoshop 格式存储文件,这一点很重要。Photoshop 格式会保留按钮的所有组件,并允许您以后根据需要进行更改。在存储为 PSD 文件后,您就可以在其他 Photoshop 文件中使用该按钮,或者对该按钮进行优化以用于 Web 页上。

Photoshop 帮助中的相关主题:

    创建和编辑翻转

    关于优化

    存储优化图像