Encore does not require you to use predefined button templates. Instead, you can create your own buttons in the Menu Editor from graphics or text, complete with video thumbnails, text annotation, and highlights. And because Encore stores buttons as layered Photoshop files, you can edit and exchange them directly between Encore and Photoshop, no matter where they were first created or last edited.
The Encore Library palette contains a variety of predesigned button templates. A button can include a graphical shape, text, a video thumbnail area, and highlight graphics. You can add or replace a single menu button, or a group of buttons, from the Library, as shown in Figure 5-28. To display only the button designs in the Library palette, select the second toggle button in the middle of the palette. Then, do the following:
Figure 5-28. Add menu buttons from the Library palette, or by dragging a clip from the Project window.
To add a button to the menu from the Library palette, simply drag it to the Menu Editor window.
To add and align a group of the same buttons (i.e., for chapter links), click the Place button (single arrow) at the bottom center of the Library palette. Encore will lay out the buttons next to each other in the menu as possible, so you can move them as a group (or use Edit → Object → Align or Distribute).
To replace an existing button with another design from the library, click the Replace button (two circular arrows). Encore will replace the selected button (or buttons) on the menu with the selected button in the library and will scale the new button to fit the bounding box of the original button.
Note that at this point, buttons created from the Library palette are just the visual design of a button—they do not yet have any associated navigational links. You can add the links by drag-and-drop, or by using the Properties palette.
On the other hand, you can create fully linked buttons to video clips by dragging the clip (or associated timeline) from the Project window, as we did in Chapter 1. Encore creates a timeline for the clip, if needed, adds the button to the menu, inserts the video thumbnail from the linked clip, and adds navigational links from the button to the timeline and then back to the menu as the end action of the timeline.
Encore enables you to dig deeper to edit and customize your own designs, or create new designs in Photoshop. To do this, you need to use the Layer palette to view and understand the way Encore stores and manages menus and buttons.
Remember that an Encore menu is simply a Photoshop file with multiple layers. It includes the following:
A background element
Any text and graphics elements
One or more button elements
Each button then is also a layer set, a group of layers that define the elements of the button design. For a simple menu design, the Layers palette displays one layer for each text, graphic, or button element in the menu, as shown in Figure 5-29.
The Layers palette has the following visual components:
- Show/hide column
This column uses an eye icon to indicate whether the layer is visible.
- Lock/unlock column
The lock icon in this column indicates the layer is locked and cannot be selected or changed.
- Button/object column
This column displays a small “rounded rectangle” icon to indicate that the layer set is a button.
- Text layer
A text layer, marked with a “T”, indicates a layer that only consists of text.
- Graphics layer
A graphics layer, which is indicated by a paintbrush icon, indicates that the layer has graphical elements in it.
- Graphics layer set
A graphical layer set is a layer set that includes multiple graphics element, but is not interpreted to be a button by Encore. Each layer set has a disclosure triangle, which can be “flipped” open and closed to view the contents of the set in greater detail.
- Button layer sets
Button layer sets are special layer sets that conform to the button naming convention.
- Subpicture highlight layer
A subpicture highlight layer, which is represented by a colored rectangle, is a layer that maps to a specific subpicture highlight color.
- Video thumbnail layer
A video thumbnail layer is marked with an icon that looks like a small piece of film. Encore uses this layer to insert a thumbnail of the targeted video, using the specified poster frame.
As you’ve likely noticed, Encore uses a naming convention for the layers to identify special elements that it needs to process. The layer names will be generated automatically if you create buttons in Encore. However, if you create your own buttons from scratch in Photoshop, you need to manually enter these prefixes for your layer names.
The Encore layer names for buttons are prefixed with parentheses, as shown in Table 5-1.
Table 5-1. The Encore naming conventions for button layers
Remember that you must click the disclosure triangle in the Layers palette to view the elements in its layer set. For example, consider the buttons “blue square button” and “grey glass video button” shown in Figure 5-30.
Here is how to decipher the button names:
The name of the entire button set is prefixed with “(+)” so that Encore can identify the object as a button, and then extract its layers.
The visual appearance of the button is defined by the image and text layers, which do not need special identification because they are just composited into the menu. In this case, the text is contained in its own layer, called TEXT, and there are two graphical elements in the first button, “arrow” and “square.” The second button also contains two graphical elements, “arrow” and “button shape.”
Buttons can also contain a video thumbnail layer prefixed with (%) which Encore uses to generate and insert an image from the linked clip (at the poster frame). If the buttons are animated as a motion menu, Encore generates a video menu with a sequence from the linked clip. In the previous example, there is a thumbnail image layer for the “grey glass video button” called “video.” This video layer defines the position of the inserted video thumbnail (the rectangular bounding box of the layer contents), and the opacity of the layer defines the opacity of the inserted video frame. (Note that the actual contents of the layer are not displayed on the menu; only its size and opacity are used.)
Although the video thumbnail is rectangular, the button can have graphic elements layered on top of it, to make the video region look like a rounded rectangle or another arbitrary shape.
Finally, the button layer set also can contain subpicture image layers prefixed with “(=)” that are used to generate the subpicture overlays for highlighting the buttons. The actual colors used for the highlights are defined by the selected menu color sets, which are nearly identical to those we saw earlier for the timelines. We’ll talk about them shortly.
You can select an entire object or button set in the Menu Editor window using the Selection tool, or click with the Direct Select tool to select an individual layer within a layer set. Selecting an object in the Menu Editor window also selects and highlights the associated element in the Layers palette (or vice versa).
This brings us to another helpful point. Trying to select a specific element in an overlapped layer set can be difficult with the Direct Select cursor, so it is often easier to select it in the Layers palette, or to use the Layers palette to make specific elements more visible and accessible:
Click the eye icon in the left column to make that individual element (but not an entire button set) visible or invisible. You can use this to isolate only individual elements in a button. (You also can design elements in Photoshop with multiple design options, and then use the visibility to select how each instance of that element appears within Encore.)
Click the center column to lock that individual element or entire layer set to prevent accidental changes. A locked element (indicated by a lock icon) can no longer be selected or modified.
Just as with Photoshop, you also can reorder the layers in the Layers palette— for example, to place a graphic behind a button. Use Object → Arrange to move objects towards the front or back in the Menu Editor window (i.e., to the top or bottom of the Layers palette).
Although Photoshop is a more powerful tool for general image editing, Encore provides enough built-in capability for you to both directly edit existing buttons and layers and create new buttons, complete with multiple graphics and text element layers, and even subpicture highlights. Here are the steps required for creating a button with Encore from an existing graphics or text elements.
Select the object. Import the graphics image, or create a text block to be used as a button, and select it.
Convert it to a button. Choose Object → Convert to Button (or use the right-click context menu), or click the Object/Button column to the left of the name in the Layers palette.
View the results in the Layers and Properties palettes. The object is converted to a button layer set (if it isn’t one already), and the layer set name is prefixed by (+) in the Layers palette (shown with a button icon in the Object/Button column). The Properties palette also now displays the object as a button on the menu, as shown in Figure 5-31.
Because you can copy and paste layers, you can build up your button by adding additional elements to the button’s layer set. For example, you can select a graphic or text object on the menu (one that isn’t a button), copy it, select a layer within a button set on the Layers palette (not the entire button), and then paste. Encore adds the additional elements as new layers within the button layer set. In this way, you can add additional graphics or text annotations to your buttons.
Similarly, you can copy layer elements from existing buttons. For example, look at the layers of the library button Grey Glass Video Button.psd. In particular, we’re interested in the video layer (prefixed with (%)). Copy the video layer, select any layer in your new button, and paste. Encore adds the video layer to the button layer set, so your button now can have a video thumbnail. You then can position and resize the video thumbnail using the Direct Select tool, and rearrange the button layers using Object → Arrange to place the graphics or text on top of the video (see Figure 5-32).
In this way, you can create and customize your own buttons within Encore, based on a library of graphics objects and some template button layers. You then can save your designs in the Library palette to share with other projects.
When you convert an object into a button, it now has the ability to link into your DVD’s navigational structure. However, the object does not yet have any visible indication that it is a button. So, if you were to select it, its appearance will not change on the menu. This is because it does not contain any subpicture highlight layers.
As we mentioned earlier, the Menu Editor window provides the option to preview the subpicture overlays used as button highlights. To view the subpictures within the button sets on the menu, click through the three Show Subpicture Highlight buttons at the bottom of the window: Normal to display the button without highlights, Selected to display the highlighting for when the button is selected to be pressed, and Activated to display the highlighting after the button has been pressed.
To add a highlight to a button, select the button set and choose Object → Create Subpicture (or use the right-click context menu). Encore automatically creates a subpicture based on the shape of the button graphics (like a mask), as a new single-color image layer. You can specify that portions of the button graphics not be used for the generated subtitle by clicking the eye icon in the Layers palette so that the corresponding image or text layers are hidden. Click the Show Selected Subpicture Highlight button at the bottom of the Menu Editor window to display the new highlight layer, and use the Direct Select tool to reposition it relative to the button graphics. The new subpicture entry, prefixed with a (=1), is also listed in the Layers palette, as shown in Figure 5-33.
Note that Create Subpicture adds one subpicture color layer prefixed by (=1). To add three-color subpictures, you can design the button in Photoshop, or copy layers 2 and 3 from another button.
Buttons can contain multiple subpicture elements, each defined as separate layers. These layers will be composited into the final subpicture overlay plane stored on the DVD. To add multiple subpicture elements to a button, copy layers from other buttons, or use Object → Create Subpicture to create new subpicture layers based on the existing visible layers in the button.
You also can create subpicture layers based on other graphics and text elements. Simply select the objects on the menu (again, don’t choose buttons), copy, select the target button, and then choose Paste as Subpicture from the right-click context menu. The selected objects will be converted into new single-color layers in the button.
The button properties are relatively simple to understand. They are shown in Figure 5-34.
This is the button name, just as it is listed in the Menus tab. Note that you can change it in the Properties palette, and the change will propagate across any other Encore windows that reference it.
To help keep the buttons in logical order on the menu, you can also renumber the buttons. The current button number is displayed inside the Button Properties palette under the Number field, and in the button routing overlay icon. To renumber a button, choose a new number from the pop-up menu in the Properties palette. Encore will renumber the button and adjust the routing automatically as needed.
There’s an additional benefit to knowing the button numbers: the viewer can jump to a specific menu button by entering the button number on the DVD remote control. This is particularly useful when the buttons correspond to chapter or clip numbers, and the number is displayed with the button on the menu.
You can use this option to select the Highlight group (1 or 2) to be used for the button. Remember that all the buttons on the menu use the same colors for the Normal (deselected) state; the two Highlight Groups provide alternate colors for the Selected and Activated states. We’ll talk more about this shortly.
The link specifies the element that the DVD player will jump to when the button is selected. You can set it in much the same way as the End Action link in the Menu Properties palette.
The Override link operates the same here as it does with the Menu properties that we discussed in the previous chapter. When Encore jumps from this button to another element, the DVD player plays through that second element and then follows that element’s end action. However, if the Override option is set here, the end action of the element that the button jumps to will be ignored. Instead, the DVD player will use the link that you specify here.
If this box is checked, the button will automatically activate when it is selected and playback will continue at the specified link. The user does not need to press the Enter button on the DVD remote.
As an additional assist in creating menus, Encore can automatically create subpicture layers for text in buttons, and, even better, automatically update the subpictures after you edit the text. To enable this option for a button, select the button, and set the Create Text Subpicture option at the bottom of the Properties palette.
There are a few things you should be aware of here. First, Encore creates a new subpicture layer based on the text elements in the button. However, this disables and overrides any other (=1) subpictures already defined in the button. In addition, the button layers are not changed in the Layers palette, and any existing subpicture highlights are still displayed in the Menu Editor. The automatic text subpictures are displayed only when you Preview the menu (or build the disk) and the text characters in the button are overlaid with the text subpicture highlight.
Menu button highlights are created with the same subpicture overlay mechanism used for video timeline subtitles, which we discussed in the previous chapter. Recall that the DVD subpicture overlay plane is very limited, supporting only 2-bit, four-color images, although one color is reserved for opacity. The overlays are stored as full-screen color-mapped images, with the pixel values used as an index into a map of actual color values.
The colors used for menu button highlights are organized in Encore into named color sets. A project can have many such color sets defined, but each menu is assigned one such color set, and can use only the colors defined in that set. Use the Menu Properties palette to select the Color Set to be used for that menu (see Figure 5-35).
Resetting the entire color set has a neat side effect: it provides a convenient way to update the look of the menus throughout your project. You can edit a color set and instantly change how the buttons are highlighted on all the menus that use it, or you can select a group of menus (in the Project window) and assign the same color set to each of them.
Each color set has two highlight groups, so each button on the menu then can be assigned one of the two groups in the menu’s color set. This provides the ability to use different highlighting styles for different types of buttons. For example, you could use one color set for chapter index links (i.e., video thumbnails) and another for DVD navigation links (i.e., text for Home, Back, and Next).
You can use the Button Properties palette to select the highlight group (1 or 2) to be used for that button, as shown in Figure 5-36. Remember that all the buttons on the menu use the same colors for the Normal (deselected) state; the two highlight groups provide alternate colors for the Selected and Activated states.
Finally, use the Menu Color Set dialog to define the actual colors to be used for the button highlights (choose Edit → Menu Color Sets, as shown in Figure 5-37).
Figure 5-37. Define the two groups of available highlight colors for menu buttons in the Menu Color Set dialog.
The Menu Color Set dialog defines up to 15 different colors that can be used for the buttons on a menu, for three highlight states and three colors for each state:
The Normal Group defines the colors used for the normal (deselected) state; these are often left as fully transparent (0% opacity) with no additional highlighting beyond the button graphics.
The two highlight groups provide the option to select between two different highlight color schemes for the buttons on a single menu. You can select Group 1 or 2 using the Button Properties palette.
The Selected State colors are used to highlight a button when it is selected and ready to be pressed, whether by using the Up/Down/Left/Right menu navigation buttons on the DVD remote control, or when you hover the cursor over the button on a computer.
The Activated State colors are used to briefly highlight a button when it is activated or pressed, either by pressing Enter on the DVD remote control, or clicking with the cursor on a computer. The Activated highlight is often set to be the same as the Selected highlight on DVDs, because this additional feedback on a button press is not really required.
With this dialog, you can choose each of the three colors associated with the normal state of the button, as well as the selected and activated states of Highlight Group 1 and Highlight Group 2. You can edit the default color set, or click the New Color Set button to create a new color set to use with the menus. In addition, the two diskette icons near the top center will enable you to export or import a color set into a file (with a .cs extension), which you can then import into another Encore project. Also note the checkboxes that say Use Selected Colors for Activated Colors. These can be used to map the same colors from the selected state to the highlighted state for the chosen highlight group.
Enter new color values as desired for each highlight group, and use the Opacity drop-down menu to select an associated opacity value for blending with the menu background (0% is fully transparent). To set a color value, click the associated color swatch to display the Color Picker dialog. The three color values in the Menu Color Set dialog apply to any button layers that are marked as subtitles: (=1) for Color 1, (=2) for Color 2, and (=3) for Color 3.
If you want to preview the colors in the Menu editor, check the Preview box at the upper right. Once you do so, three buttons will activate below. These buttons mirror the Show Normal Subpicture Highlights, Show Selected Subpicture Highlights, and Show Activated Subpicture Highlights buttons in the Menu Editor, but only while this dialog is open.
Usually, as with subtitle text, the image layers that define subpicture highlights are used just as masks to define the shape of the highlight; the actual colors of the image are ignored, and the highlight color is assigned through the menu color set. However, Encore also provides the option of specifying an automatic color set, which can extract the colors used in a (carefully designed) menu and generate the appropriate color set to use those colors for the actual highlights. This is useful if you are designing the menu in Photoshop, and want to have full control over matching the highlight colors.
If you specify the color set as Automatic in the Menu Properties palette, Encore will analyze the menu and generate a color set for it, and then regenerate the color set if you re-edit the menu in Photoshop. The automatic color set sets the normal state to 0% opacity (no highlight), and uses the actual colors found in the menu buttons as the highlights for both the selected and activated states. As Encore analyzes the menu, it begins with the first button (the button closest to the background), extracts the colors and opacity levels from layers marked as subpicture highlights, and assigns them to Highlight Group 1. If it finds different colors in another button, it assigns them to Highlight Group 2. And if it finds buttons with additional colors that do not match the two highlight groups, it also assigns them to Highlight Group 1.
Each menu assigned to the automatic color set maintains its own color set, derived from the button colors in that menu. You cannot edit the color set directly, or apply it to other menus. If you want to define or share color sets, you can create a new color set.