Before digging further into editing menus in Photoshop, let’s start with editing individual buttons. You then can save your button designs as PSD files and import them into Encore via the Library palette. To start with an existing button design, you can extract a button from a menu, or just grab a button from the Encore Library palette (stored under the Encore application directory—i.e., C:Program FilesAdobeEncore DVD1.5Library).
Copy one of the button files (e.g., Grey Glass Video Button.psd in the Government subfolder) into your working folder, and then open it in Photoshop Figure 6-6. To see larger and more detailed thumbnails in the Layers palette, click the wing menu in the upper right-corner (with the small right arrow), and then choose Palette Options. You can also right-click in a blank area of the Layers palette and choose a larger thumbnail size from the pop-up context menu.
This button is designed to look like a video screen. To isolate just the basic shape graphics, click the button shape layer to highlight it, and click the Layer Visibility eye icons to hide all the other layers. Then click the Layer Effects disclosure triangle to the right of the name to display the list of effects applied to the layer (indicated by the “f” icon). Then deselect the Layer Visibility eye icons for the effects layers. As shown in Figure 6-7, you can now see the base graphics shape for this layer, with no effects applied.
The shape of the button is defined by a vector mask, or the line drawing of the shape (indicated by the right thumbnail in the Layers palette). The shape is linked (indicated by the chain icon) to the layer thumbnail, which applies a dark blue color to the graphics shape (the left thumbnail). Also, two effects are applied to this shape. Bevel and Emboss adds a 3-D edge around the graphic, and Gradient Overlay applies a gray vertical gradient that actually covers the original color. You can click the eye icons to show these effects layers. Then, double-click the Effects layer to display the Layer Style dialog, where you can adjust their options, as shown in Figure 6-8.
Next, hide all but the video layer, and then click to select it. In Photoshop, this is just a plain gray rectangle, but Encore treats it differently because it is identified as a video thumbnail layer by the layer naming convention (with (%) prefixed to the name). When this button design is used on a menu and then linked to a clip, Encore uses this layer to control the insertion of a video thumbnail extracted from the linked clip. (More accurately, Encore extracts the first frame of the clip, or the poster frame, if specified. If Animate Buttons is enabled for the menu, Encore creates a motion menu with a short clip from the linked clip.)
In the Encore menu, then, the inserted video clip replaces the content of the video layer. In fact, Encore uses the shape of the layer graphics only to define the rectangular region into which to insert the clip. (If you want the clip to appear nonrectangular, simply place the video layer under a transparent graphic with the desired shape, as done in this button.)
The only other attribute Encore uses from the video thumbnail layer is the transparency, to determine how the inserted video should be displayed against the menu background. To adjust the transparency, select the video layer and use the pop-up slider to change the Opacity setting at the top of the Layers palette (or in the Layer Style dialog; see Figure 6-9).
This button design also contains two subpicture highlight layers, conveniently named highlight (with (=1) prefixed to the names). One is a rectangle around the video window, and the other overlays the arrow in the bottom right of the button graphic. Both are plain single-color graphics because they will be mapped to a single color in the Encore menu color set (see Figure 6-10).
Figure 6-10. The button contains two layers defining subpicture overlays for highlighting the button.
The color used in the Photoshop graphics can be reused as the highlight color in Encore if you import the menu with the Automatic color set (see the Menu Properties palette in Encore), or the color can be replaced by user-specified values defined in the menu’s color set.
A button can have multiple highlight graphics layers, as was shown in Figure 6-10. Each button also can assign the highlight layers to up to three colors, indicated by using the (=1), (=2), and (=3) prefixes for the layer names. When you define the color set for the menu, you specify the color values (and transparency) to use for these three different highlight layer colors, and possibly different sets of color values for the three different button states: normal, selected, and activated.
For simple highlighting, you can just define one highlight layer that will use one color (for example, a rectangular outline around the button), set the normal color value to full transparent (0% opacity), and then have both the selected and activated set use a bright color for the highlight. For a better-looking highlight, you can use multiple colors (e.g., for a shadow effect or for a shape against a background). Or you can use different layers for different states so that the button shape seems to change when it is activated.
However, with only three colors available for the subpicture overlay plane, there is not much opportunity for more subtle effects, such as gradients or anti-aliasing. Your best bet is to take advantage of the transparency setting to blend the highlight with the underlying button or menu background.