Automating Buttons by Naming Photoshop Layers

PhotoWebber makes creating JavaScript buttons with rollovers,click states and popups a snap.

  • Rollover - A rollover graphic replaces the button graphic when the user moves their mouse over the button in their browser. A button can have only one rollover.
  • Click State - A click state graphic replaces the button graphic when the user clicks on the button. A button can have only one click state.
  • Popup - A popup graphic appears in addition to the button graphic when the user moves their mouse over the button in their browser. A button can have any number of popups.

If you name your Photoshop layers appropriately and check Auto Button Creation when you import your file into PhotoWebber, you are done before you even start working.

In this tutorial we will create a button using named Photoshop layers and the preview the resulting button in PhotoWebber and in a browser.

1. Create a Photoshop with button, rollover, click, and pop-up layers.

Note: You can use TutorialButton.PSD if you do not want to make your own Photoshop file.

 

Make sure three layers overlap and have the following names:

  • button
  • button_r
  • button_c

The popup layer can be anywhere on the page and should be named:

  • button_p

Layers with simple names. The simplest way to name layers for automated buttons is to name your layers in Photoshop. Add _r or _p to the end of the layer name that matches the button layer name to designate rollover and popup states. For example:

  • Main Button Graphic layer name: AnyName
  • Rollover layer name: AnyName_r
  • Click-state layer name: AnyName_c
  • Popup layer name: AnyName_p

Note: Other, more complex naming conventions are also supported. See Graphics in the PhotoWebber User Guide.

2. Create a new PhotoWebber document and import your Photoshop file.

For this tutorial, do not check Auto Button Creation.

3. Automate the Buttons.

From the Layers menu, select Automate Buttons.

Note that any visible rollover and popup graphics disappear from the Document window and all are changed into sub-layers of the main button graphic.

Note: If you select a popup layer in the Layers window, a ghosted image of the layer appears in the Document window.

A popup layer can also have a rollover and click state, and multiple popup layers can be made into a menu. See Creating Menus for more information.

4. Preview the button behaviors.

Select the Interactivity Tool in the Document Window.

Point to the button and click it to see how it will behave when you build the page.

 

To verify how rollovers and popups will behave on the web, build the page and point to each button with your mouse in the browser.

 

Copyright © 2000 - 2001 Media Lab, Inc. All rights reserved.
PhotoWebber is a trademark of Media Lab. Photoshop is a registered trademark and GoLive is a trademark of Adobe Systems Incorporated.
All other trade names are trademarks of their respective owners.