Historically, television displays overscan the image so that it extends beyond the edges of the viewable screen (and under the bevel surrounding the screen). This means that material positioned near the edges of a menu will be cut off and not visible on some televisions.

Use the Show Safe Area button at the bottom left of the Encore Menu Editor window to display a safe area overlay as a guide for positioning elements on your menus, as shown in Figure 9-1. Photoshop also provides safe area guides when you create a new image with the built-in video presets.

Figure 9-1. Use the first two buttons under the Encore Menu Editor to help in designing menus for television displays: Use Aspect Ratio Correction to view true squares and circles, and Safe Area guides to avoid the edges of the screen.

Television displays have a rectangular pixel structure and a width-to-height aspect ratio that is different from the square pixel aspect ratio of computer displays. As a result, a 720 x 480 image from a video frame will look stretched wider when viewed on a computer. In the early days of DVD editing, compensating for this difference while designing menus required working at odd resolutions and resizing images.

As discussed in Chapter 5, Encore and Photoshop CS provide built-in support for keeping track of the aspect ratio of images, and automatically displaying them as they would appear on television (by resizing the images horizontally). However, you may want to disable aspect ratio correction when precisely editing individual pixels. To enable or disable this compensation when editing menus and images, use the Correct Menu Pixels for TV Display button at the bottom left of the Encore Menu Editor window. In Photoshop, choose View → Pixel Aspect Ratio Correction.

When using images in menus (and especially for menu backgrounds), take care that the proper aspect ratio is preserved when you import and composite images. When importing assets into Encore, choose File → Interpret Footage if you need to change the aspect ratio that Encore assumes for individual assets. In Photoshop, use Image → Pixel Aspect Ratio to specify the aspect ratio saved with the image, or use a video Preset when creating a new image.

As discussed in Chapter 8, the interlaced format of analog televisions actually displays each video frame as a pair of fields, first one set of every other line, and then the other set. This means that thin horizontal lines will flicker even when you are displaying a still image because each line is displayed only half of each frame time. Similar visual artifacts also can occur when there are abrupt transitions in color or intensity along horizontal elements.

To avoid these kinds of problems, make horizontal elements thick enough to cross multiple fields (i.e., at least three pixels high). Also avoid sharp horizontal edges by using anti-aliasing and blending when compositing graphical elements, and use techniques such as drop shadows and translucency for overlays to blend the edges against the background (choose Menu → Drop Shadow in the Menu Editor).

The other problem with interlacing occurs when you try to use a video frame as a still image (i.e., for a menu background). Because it is extracted from an interfaced video sequence, the single video frame actually contains two fields captured at slightly different points in time, and spread alternatively across every other line in the frame. As a result, the still image of a frame can look horrible, with torn lines everywhere there was motion in the scene, as shown in Figure 9-2.

Whenever possible, of course, grab a relatively still frame from the video, with minimal motion in the scene and when the camera was not moving. Otherwise, apply deinterlacing to the frame to smooth the interlaced effect (for small motion), or to just use the data from a single field (for fast motion). In Adobe Premiere Pro, use File → Export → Frame to save the current frame as an image file, and then select the Deinterlace Video Footage option under Keyframes and Rendering. In Photoshop CS, choose Filter → Video → De-Interlace to remove jaggedness and interlacing artifacts from a still image.

Figure 9-2. A single interlaced television frame actually contains two interlaced fields, so motion in the scene causes visible tearing when you view the individual frames.

Similarly, television displays tend to be viewed across a room, instead of sitting at a disk as with a computer. As a result, you need to enlarge text and graphics so that they can be viewed from a distance, and avoid the temptation to cram too much material onto a single screen (see the examples from the Planet Earth DVD in Chapter 2).

Typically, create buttons that are at least as large as 70 x 60 pixels, and use a font size of at least 20 points for button text, and larger for titles and other explanatory text. For a quick test, display your menu full-screen on the computer monitor and then try to read it from across the room at a typical television viewing distance.

Television displays, particularly for NTSC, also have a smaller color gamut than is available on computer displays, which can result in problems such as blown-out areas of oversaturated color and false color in zebra-stripe shirts. As a result, avoid sharp edges with dramatic changes in intensity or color, and garish colors that may tend to bloom or cause bleeding along edges.

Again, use blending and translucency to smooth edges and provide clean transitions between foreground and background elements.

In Photoshop, use the NTSC Colors filter (Filter → Video → NTSC Colors) to adjust an image so that the colors are within the NTSC gamut for television display.

The easiest way to create menus in Encore is to use prebuilt elements from the Encore Library palette or imported from Photoshop. The library provided with Encore provides several different sets (styles) of template elements, with categories for entire menu designs, plus individual buttons, images, menu backgrounds, layer sets with multiple elements, text, and vector graphic shapes. See Figure 9-4.

Figure 9-4. Use the Library palette to save and share design elements across your Encore projects.

From the library, you can create a new menu directly from an entire predesigned menu, or build a menu up from a background image by adding other objects from the library. And you can add predesigned buttons, including multilayer designs that include graphics, image thumbnail overlays, and text.

You can use styles to colorize and enhance objects and text, or to remove any such effects. You can modify images used as menu backgrounds—for example, fading and decolorizing them—without needing to edit and save multiple copies of the images. In addition, you can use blending effects to make elements in your menus translucent.

Figure 9-5. You have complete freedom to create and edit Encore library elements and styles because they are stored as Photoshop files.

Menu editing within Encore is not limited to just working with predefined components. You can drill down within objects to extract and edit individual elements (i.e., access individual layers within layer sets), and create new button elements directly within the Menu Editor. In this way you can reuse and customize existing design elements, and maintain a common look while creating derivative designs.

To customize the design of buttons (and other layer set objects), use the Direct Select tool (the second, outlined arrow) to select and manipulate subelements within objects. For example, you can reposition the text label element within a button, or resize the thumbnail image layer relative to the graphic for the button frame.

To help in selecting elements, you also can select individual layers in the Layers palette; Encore will automatically highlight the associated element in the Menu Editor, and also select the Direct Select tool so that you can manipulate it, as shown in Figure 9-6. (Just remember to click the Selection tool when you are done so that you can adjust the entire object again as one combined unit. Also use the Show Subpicture Highlight button under the Menu Editor, if needed, to display the button highlight layers.)

Figure 9-6. Use the Direct Select tool and Layers palette to access and edit both objects (layer sets) and individual subelements (layers) in the Menu Editor.

Once you have selected a layer, you can copy and paste it to another object (just select a layer within the object before you paste, and not the layer set name). In this way, you can build and edit your own objects and buttons from existing elements such as graphics frames, video thumbnails, text, and even highlight overlays. Basically, you can cut and paste between Photoshop layer sets in Encore.

In addition, you can create your own buttons from scratch within Encore. Use Object → Convert to Button to convert a graphic or text into a button (i.e., layer set tagged as a button), with a default highlight overlay. Or use Object → Convert to Object to convert back.

Obviously you want to design your menus so that it is clear at a glance to the viewer which elements are selectable buttons. Some menu designs can get very busy, so the buttons are not easily distinguishable, or the button elements can be so subtle that they do not stand out from the background. Ideally, both the graphic design of the button elements and their arrangement on the menu combine to identify them. But sometimes it’s not clear that, for example, the word “Back” standing alone at the bottom corner of the menu is a button, and the title text positioned along the side is not.

Beyond the graphic design, the other mechanism for distinguishing DVD menu buttons is the highlight subpicture overlays, which are used to indicate which button is currently selected, and when a button is activated. Users then have been trained to search for the available buttons by pressing the Down button on the remote control to cycle through the highlighted elements (or, on a computer, moving the cursor over the menu to see where the icon changes). Even so, highlights can sometimes be difficult to distinguish, such as when they are displayed as only a simple underline in a subtle translucent color.

To add highlight subpicture overlays to your menu buttons, you can copy highlight layers from other buttons, or create new highlight elements in Photoshop, or you can use Encore’s built-in tools to create new highlights. To reuse an existing highlight element, use Edit → Paste As Subpicture to copy a layer as a highlight. Or create a highlight overlay based on a button object’s shape by using Object → Create Subpicture. Use the Show Subpicture Highlight buttons under the Menu Editor window to preview the highlights.

The button and highlight tools also apply to text objects, so you can turn any text into a button link with Object → Convert To Button. Even better, enable Create Text Subpicture in the Properties palette for text buttons to have Encore automatically regenerate the highlight when you edit text.

Although you cannot create or edit the special button layer name prefixes directly within Encore—for example, to create a new numbered subpicture layer—you still can use these tools to manipulate them without needing to go to Photoshop: you can convert graphics and text to buttons, add subpicture elements, copy and paste from existing elements, and apply styles to change their look. In addition, although Encore can import nested layer sets from Photoshop CS, it cannot create them directly.

Once you have finished creating and designing new menu elements, you can reuse them within your project via copy and paste, and by using Edit → Duplicate to make copies. Or drag them to the Library palette to save them for reuse in other menus and across your other projects.

As you design your menus, also take advantage of the tools in Encore to provide a clean design and a professional look. Design your text to take advantage of the Photoshop-like controls in the Character palette, and lay out text with associated images and bitmap and shape graphical elements.

Instead of trying to position multiple lines of text or graphics items by hand, have Encore automatically align them, relative to each other, or relative to the menu window.

Add text to your menus to use as titles, to annotate button graphics, or for explanatory material such as copyright notices or credits. Use the Text tools to enter and edit text, laid out horizontally or vertically, and the Selection tool to move and resize blocks of text by dragging the bounding rectangle. Use the Character palette for detailed control over text design and layout. Also use Object → Drop Shadow to add a drop shadow effect, with options for color, position, and blending opacity.

When laying out objects on the menu, use the cursor arrow keys to precisely position them by nudging them one pixel at a time, or Shift plus the arrow keys to nudge 10 pixels at a time. When compositing objects, use Object → Flip to change orientation, and Object → Arrange to layer multiple objects (including within layer sets). Although you should not overlap separate buttons, you can layer decorative text and graphics elements within a button, and also adjust the order of the layers within a button layer set—for example, to ensure that a graphic frame is on top of the video thumbnail.

Figure 9-7. Use the Guides feature in the Menu Editor to help align elements in a consistent design.

For buttons and other repeated elements, use Object → Align and Object → Distribute to position them neatly relative to each other, or to the safe area of the menu.

Another important aspect of consistent menu design is the colors used for button highlights across the various menus within a DVD. Because highlights are actually implemented using the DVD subpicture overlay plane (also used for subtitles in timelines), the number of available colors is severely limited.

To make life simple when working with small projects, Encore by default will generate an automatic color set for an imported menu, based on the actual colors used in the menu’s Photoshop file. But for larger projects, Encore provides a convenient mechanism to package and assign button highlight colors through the use of menu color sets (and a similar mechanism for subtitle colors).

Because different menus can share the same color set, you can ensure that they all have consistent highlight colors. You also can use alternate designs in different areas of your project. For example, you could use one look for the main menus of your production, and a different look for a set of auxiliary material continued under an Additional Features submenu. This approach also allows you to change the look for an entire group of menus by simply editing the associated color set.

See the following sections for more ideas for using color sets within your menu designs.

In fact, menus can be quite active: even still menus can play for a specified duration, loop some number of times, and then take an end action. (You can see this in the Encore Project Preview window as the timecode advances through each loop iteration.)

Beyond timed still menus, motion menus contain an audio track and/or at least one video element (set in the Menu Properties palette):

In the old days of DVD design, before applications such as Encore that let you create menus by compositing all these different elements, DVD authors had to create motion menus by hand by composing them in a separate tool such as Adobe Premiere Pro or After Effects.

This required first designing the graphical elements such as buttons and text in a tool such as Photoshop, and then preparing all the video still frames and thumbnail video clips, and finally bringing them all together to composite into a final video sequence, which then could be imported into the DVD authoring tool. The final sequence then needed to be flattened, with all the elements—text, button graphics, images, and even video thumbnail clips—burned into the exported clip.

Although you no longer need to go through this laborious process with Encore, you still can use this kind of approach to create interesting motion video backgrounds for your menus. For example, you can use a couple of representative clips as part of the full-screen motion menu background, or add fades or dissolves between multiple clips. Or combine several representative clips with overlays to give a suggestion of the contents of your disc. This is particularly useful on menus where you are not already using video clips as a chapter index.

Just remember that the result is intended to be the background for your menus, so it cannot be too strong or garish, or else it will overwhelm the menu text and buttons and make it difficult for the viewer to see the button highlighting. For example, choose clips with a relatively consistent scene and calm motion (i.e., ocean waves, fields or trees blowing in the wind, mountains with clouds passing in the sky). Similarly, you may want to mute the colors or shift the look to more of a sepia tone.

Motion menus really wake up a DVD with moving video and audio. But although they may be great on first viewing, they also can end up irritating the viewer after they loop for the 100th time. Similarly, cool transitions into and out of menus are fun the first time, but thereafter can cause more irritation by slowing down navigation.

Use the Encore Menu Properties palette to set the motion properties for a menu, as shown in Figure 9-8:

Figure 9-8. Set the motion looping properties for menus in the Properties palette.

You then can use different strategies for looping the menu. Use Loop # to have the menu play once and then go quiet, or loop forever (continuously), or loop some number of times (2 to 1204) and then stop. Having the menu stop playing looped audio after a reasonable period of time can be especially considerate if the DVD menu is left playing while the viewers have moved to another activity or room.

However, the timing for menu looping can get a little tricky if the Animate palette. Buttons option is set to also have buttons with image thumbnails play as video from the linked clips. Preview the motion menus to ensure the button clips loop at reasonable points, especially if you have used a Loop Point offset. You may want to set a poster frame for the associated chapter point in the timeline to adjust the starting point for the sequence used for the menu button.

Finally, be aware that you cannot rely on all DVD players to seamlessly loop menu video and audio. No matter how carefully you match the final frames and audio at the end of the clip back to the beginning of the clip, it still may glitch on some players. As a result, it’s best to match the two ends of the loop by fading to black (and silence), or slowing down the motion to a still image.

One common effect used on movie DVDs is to provide video transitions into and out of menus. To enter the menu, the DVD first plays an introductory video sequence, which ends by transitioning to the menu, typically so that the last frames played from the video sequence match the menu as it is then displayed. For example, the introductory video might be a sequence showing the menu being constructed as elements fly into place.

Similarly, when you make a selection on the menu, the menu exits by first playing a video sequence that continues the introductory theme and then transitions to the selected clip. This might fade from the menu to black as the DVD then jumps to the new location to start playback of the selected clip.

You can create these kinds of effects in Encore by creating these transition clips, and then simply changing your links to and from menus to link via these transition clips instead. This is particularly easy with Encore’s ability to update the properties of multiple elements at the same time.

For example, to add a new transition video into the main menu, first import the transition clip and set its end action to link to the main menu. Then you need to find and change all the links into the main menu:

Figure 9-9. Change the First Play and other links to the main menu to link first to a transition clip.

Adding transitions out from any other menu is done similarly. Simply change the link for each button to play the transition clip, and set the button override to link to the original destination. However, if the menu button already used both a link and an override, you will need to change the properties for the transition clip itself, and set both its end action and override appropriately (which means you may not be able to reuse the transition clip if it is used in another way elsewhere in the project). And don’t forget about also using a video transition for menus that can timeout and execute their own default end action.

In each of these cases, you may want to use a generic clip that transitions between the menu and a fade (or vice versa), or design individual clips for each specific link that transitions between the menu selection and a specific clip. Similarly, you can introduce these kinds of transitions for links between menus as well.

You can have a wonderful time creating these kinds of transition videos into and out of menus. The interesting challenge is to make the transition between the menu and the clip as seamless as possible. Just do not expect perfection: some DVD players still may have a visible delay when jumping between displaying the menu and timeline. In addition, if you are jumping out of a motion menu, the video and audio will cut off at whatever point the viewer presses the button anyway.

You can make simple transitions by just using fades to avoid trying to present a perfect seamless match, or by presenting more of a jump-cut experience by cutting to an animation that is matched thematically to the menu without trying to match it exactly.

For transitioning into a menu (or out from a still menu), you can use a still image of the menu as the matching end frame of the clip. You then can play with creating animations into (or out of) the menu image:

Plus, of course, take care with the audio so that it also makes a smooth transition, even from motion menus, and does not suddenly start blaring when the user presses a button.

However, the DVD subpicture overlay used for highlighting is very limited, with only four colors, so there is a huge visual discrepancy between the full-color button designs burned into the menu and the coarse highlighting. As a result, you cannot create nice dynamic effects such as a button appearing to press in when you click it.

Nonetheless, button highlighting also does not have to be limited to the common designs such as a simple outline around a button, or an underline under text, or an arrow pointed to the next link on a list. Also, highlights can be translucent, to appear as a glow or blend with the background. Here are some button highlighting tips:

Figure 9-10 shows some different methods for highlighting buttons.

Figure 9-10. Examples of button highlight designs (in red): circle of dots, translucent overlay, overlay on text, and check marks.

In this way, you can take advantage of the higher-quality menu graphics for the highlighting, and cover it until the button is selected. For example, you can design the original button graphics with a fancy highlighting surround or a full-color pointer element, use the normal highlight to hide these with a plain opaque overlay (as a plain border element or to match the menu background), and then reveal the highlighting graphics by having no overlay for the selected state.

Many DVDs use a simple button highlight with a single color, often to outline or underline menu selections. But highlights can contain up to three colors, each with transparency.

In Encore, you define highlight colors in the Menu Color Set, with three colors for the Normal state, and up to two sets of highlight colors for the Selected and Activated states, as shown in Figure 9-11.

Figure 9-11. Use the Menu Color Set to assign up to three colors for menu button highlight effects.

You can use the three available highlight colors for very different kinds of highlight effects:

In Encore, all the buttons on an individual menu share the same color set, but can select one of two available highlight groups. When you create a button, you can assign layers to be used for overlays (graphics or text), and assign them to one of three overlay colors, with the layer name prefixed as (=1), (=2) or (=3). And each Highlight Group can assign colors to be used when the button is selected (i.e., ready to press) and activated (i.e., just pressed).

Use Menu → Edit Menu Color Set to display the Menu Color Set dialog to create and edit color sets, and then use the Properties palette for a menu to assign it a color set. By default, Encore creates an automatic color set for imported menus based on the actual colors used for button highlight graphics in the Photoshop file for the menu.

The result of all this is that you can have up to two different groups of buttons on a menu that are highlighted differently, and the actual highlight graphics (or text) can use up to three different colors.

Encore shows each button’s rectangular extent when you select it in the Menu Editor. If the button includes multiple elements such as graphics and text, you can move them apart with the Direct Select tool and end up with a very large extent. For example, in a vertical menu list you can achieve some interesting effects by spreading the button area horizontally by including both the main button graphic and an outlying additional highlight shape such as an arrow. Just be careful to keep your menu buttons from overlapping.