Creating Menus by Naming Photoshop Layers

PhotoWebber makes creating JavaScript menus with multiple buttons a snap.

• Menu - A menu is a collection of buttons that pop up in another location of the screen when the user points to a main button. A pull-down list is a specific type of menu and can easily be created with PhotoWebber. However, menus can be any shape and can be located anywhere on the screen. Buttons that are parts of a menu do not need to be touching the main button or the other menu buttons.

If you name your Photoshop layers appropriately and check Auto Button Creation when you import your file into PhotoWebber, your menus will automatically be programmed with no additional work.

In this tutorial we will create a menu using named Photoshop layers and preview the resulting buttons created by PhotoWebber.

1. Create a Photoshop file with four buttons with rollovers. (See Automating Buttons for more information.) Note: You can use TutorialMenu.PSD if you do not want to make your own Photoshop file.
2. Turn the three buttons on the right into a menu. Add a menu layer named button_m. The menu layer must be below the buttons that will comprise the menu and must overlap each of the menu buttons. The menu layer should not overlap the main button layer. Tip: If you do not want a visible menu boundary in your web page, set the _m layer Opacity to 0.
3. Create a new PhotoWebber document and import your Photoshop file. For this tutorial, check Auto Button Creation.
4. Preview the button behaviors. Use the Interactivity Tool to preview the menu in PhotoWebber.

To see how each of the menu items 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.