Made for TV
[an error occurred while processing this directive]
Excerpted from “Adobe Encore DVD In the Studio” by Douglas Dixon.
The fundamental graphical design issue for DVD menus is that most DVDs are intended for viewing on television displays. This immediately imposes several significant design constraints that you need to be aware of because the resulting problems are not obvious when viewing your project on a computer display.
Adobe® Encore™ DVD helps you preview your menus on a TV display without needing to burn a disc. Choose Edit > Preferences > Video Out, and select Show Menu Editor on DV Hardware to feed the menu image over the FireWire connector to a DV camcorder, and from there to an external television display.
In this tutorial we’ll outline what you need to know to create TV-friendly DVD menus. Let’s get started...
Safe area
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 1. Adobe® Photoshop® also provides safe area guides when you create a new image with the built-in video presets.
Figure 1: Use the first two buttons under the Encore Menu Editor to help in designing menus for television display: Use Aspect Ratio Correction to view true squares and circles, and Safe Area guides to avoid the edges of the screen.
Aspect ratio
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.
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.
Interlacing
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 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 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.
Sizes
Similarly, television displays tend to be viewed across a room, instead of sitting at a desk 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.
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.
Colors
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.
