Designing Custom DVD Menus: Part I

The following article talks about designing DVD menus for Standard Definition DVDs not Blu-ray.

DVD authoring software makes it easy to create and design template-based DVD menus. But many of those templates have limitations and drawbacks that may produce a less-than-acceptable DVD menu. At some point you may need to abandon templates and create your own custom designed menu. This may seem intimidating at first, but if you have the design talent, it’s really not difficult at all.

With the advent of desktop video editing, it’s quite common that a DVD producer does not come from a video or film production background. In order to create professional and easy-to-read custom DVD menu design, it’s essential that you understand the basic principles of designing graphics for TV.

Square Pixel vs. Non-Square Pixel
The first concept you must understand is the difference between the way a TV screen displays an image and the way a computer displays an image. TV uses a non-square pixel (1.0 high x 0.9 wide) while a computer uses a square pixel (1.0 x 1.0). If you were to create a DVD menu on a computer and import it into your DVD authoring software, the menu would be squeezed horizontally and appear elongated vertically.

(Left) Square pixel image displayed on a computer. (Right) Square pixel image displayed on a TV.
(Left) Square pixel image displayed on a computer. (Right) Square pixel image displayed on a TV.

Your graphics must be designed with the non-square pixel environment in mind. This is not difficult to accomplish, especially if you have Photoshop™ CS or higher. These versions of Photoshop come with a series of templates that allow you to design a non-square pixel menu on the computer.

There are many different formats associated with film and video, and each has it’s own template. To keep things simple, we will design in the NTSC DV format. (NTSC stands for National Television Systems Committee.)

[Ed. note: There are many formats and screen sizes associated with DVDs, including widescreen and PAL – go to our website to learn about TV Standards and screen formats.]

In Photoshop, go to the File menu and choose “New.” In the “Preset Size” drop down box, select “NTSC DV 720 x 480 (with guides).” This template ensures you’re working in a non-square pixel format and your graphics will display correctly on a TV. In the “Color Mode” drop down, choose 16bit. (If possible, modify your document to 24 bit color by selecting “Mode” in the “Image” menu.) Finally, in the “Advanced” drop down menu, select “NTSC (1953)” in the “Color Profile” pull down menu. Click OK.

s704-fig3After clicking OK, a warning dialog box appears. This is nothing to worry about. Click OK. The pixel aspect ratio correction shows you the menu as it will appear on a TV. Remember, you are designing with square pixels. Photoshop is compensating for this and has automatically adjusted your design. If you turn the preview function off, the image will appear stretched horizontally. Leave this pixel aspect ratio on. You’ll want to see your menu as it will appear on a TV.

If you are working in an older version of Photoshop or using software that doesn’t support the non-square pixel format, you can still make adjustments that will ensure your menu displays correctly.

s704-fig4To do this, open your graphics program and create a document 720 wide x 534 pixels high, 24bit, 72 DPI, and RGB or YUV color space (not CMYK). It is possible to set the DPI higher than 72, but NTSC televisions display at 72 DPI, so anything higher will not improve the resolution of your graphics. When finished designing, resize the image to 720 x 480. Your image will appear elongated vertically, but when imported into a DVD authoring application, the image will be resized and will appear normal on a TV.

Action Safe – Title Safe
When you selected a preset in Photoshop, you chose NTSC DV 720 x 480 (with guides). The guides are there for a reason. TVs with a picture tube have what’s known as an overscan area. Overscan is the area beyond the bezel or frame of the TV screen that is not visible.

The overscan area was devised because not all TVs (especially older models) display the image in exactly the same way. Some TVs show more picture, some show less, and others may shift the image to the left or right. If you place important information outside the Action Safe area, you run the risk of it not being seen by the viewer. The Action Safe area was created to ensure all important information is visible on all TVs. These are the way the guides look in Photoshop.

s704-fig5As you can see from the example above, there are two boundaries created by the guides. The outermost guides are Action Safe, as explained above. The innermost guides are called Title Safe. The Title Safe guides compensate for the bend in picture tubes, especially on older TVs. Text outside this area may distort and be difficult to read. It’s important to keep title information and especially navigation information within these boundaries. If text or navigation buttons are placed outside this area your viewer may not be able see it. Keep in mind, function of the menu comes first, then design.

[Ed. note: If using an earlier version of Photoshop or design software that doesn’t support designing for TV, you can create your own Title Safe area by placing guides at Left 72pix, Right 648 pix, Top 54 pix, and Bottom 480 pix.]

As you can see in the “No Retreat From Destiny” menu above, important information is within the Title Safe area. The soldier on the left and part of the flag on the right fall outside this area and that’s perfectly fine. In fact, placing elements outside the title and action safe guides is good design. Remember, all TVs display differently, so what one person doesn’t see, another does. It’s important to design to the edge. Just keep the important information inside the guides.

Broadcast Safe Colors
Televisions have a limited range of colors that can correctly be displayed on a picture tube. This color range is referred to as Broadcast Safe Colors. Since NTSC is the standard for North American television, we will only discuss NTSC Broadcast Safe Colors in this article. If you are designing a DVD that will be sent to a non-NTSC country, click here for more information.

When setting up your DVD menu, choose at least 24bit (if possible) and limit your RGB colors to 233 or below. Also limit your saturation to below 90% and keep luminance values below 80%. It’s much easier to limit your colors now, rather than to try to correct them later (especially after your client has approved the menu).

Why limit colors? Colors outside of the broadcast safe range are considered “illegal” and can tend to bleed, buzz, flicker, or crawl. Visually, this translates to images that seem to move or shake. Not only is this unpleasant to look at, but it can make text illegible.

By limiting colors, you help ensure the viewer will be able to read your menu without straining their eyes. Bear in mind that just because you have created Broadcast Safe Colors doesn’t mean your menu will look good on a TV. In fact, there are many factors that can affect how your menu will appear on a TV. We’ll cover those in the next issue (Part II of this article).

Safe Levels for Black and White
In addition to Broadcast Safe Colors, there are limitations on white and black levels (called luminance). White levels that are too high (referred to as “hot”) can cause buzzing, bleeding, crawling, and flickering, just like “illegal” colors. Be sure to set your white RGB levels no higher than 233 (luminance values below 80%) and black no lower than 16. White set to 233 may look gray on your computer monitor, but rest assured it will look white on a TV.

Button States, Normal – Selected – Activated
For a DVD menu to be truly interactive, there needs to be a way to indicate button states. Often these states are referred to as rollovers, but this term as applied to DVDs is incorrect. Rollover applies to button states or link states for web and computer applications. With DVD menus, we refer to the button states as Normal, Selected, and Activated. On most DVD menus the normal state is not visible or is considered off. However there will always be one button in the selected state by default.

Selected State (Play Movie).
Selected State (Play Movie).

The selected state indicates which button has been navigated to. The activated state refers to a button that has been triggered by pressing the enter button on the remote and causes something to happen (most often to play a part of the DVD). Depending on your DVD player, this state can last from up to a few seconds to not visible at all.

There are two methods used to create button states: 1) subpicture overlay and 2) the use of Photoshop layers.

Subpicture overlay uses a black image on a white background imported the same way as other menu assets. The black areas are assigned a color in the authoring software to indicate the state and the white area is transparent (Alpha channel).

Subpicture Overlay (caption can center under both)
Subpicture Overlay (caption can center under both)

There are some drawbacks when using this method. Only solid colors can be used to indicate a button state. Also subpictures cannot be antialiased and can result in overlays with jagged edges. Because this may appear unprofessional, most DVD designers do not use elements such as text or complex shapes as a state indicator, and opt to use simple geometric shapes instead.

On professional DVDs, designers often use something as simple as a small square to indicate button states. A square does not have any diagonal lines so the edges won’t appear jagged or rough. As you become more familiar with DVD menu design and understand ways to work around these limitations, you may find you can start to use more intricate shapes. (We will discuss this in Part II of this article.)

Because of limitations with subpicture overlays, designers may opt for another option. This second method, supported by Apple’s DVD Studio Pro™ and Adobe’s Encore™, allows you to import Photoshop layers. The designer can utilize layer effects such as glows, drop shadows, and other antialiased effects producing a more dynamic overlay.

The drawback of this method is layers are larger than subpictures and can cause a decrease in performance on a DVD player. It takes longer for the DVD player to swap out layers than it does to swap a subpicture overlay. Using layers may result in a one to three-second delay between button states or navigation. This may not seem like a considerable amount of time, but if you are trying to scroll through 10 scene selections, it can quickly become annoying.

Follow these simple steps and you can start to design your own custom DVD menus. In the next issue of The Indie Filmmakers Edge we’ll offer more DVD menu design tips, including adding motion and sound.

Inquiries: Authoring@discmakers.com

More References:

How To Produce A Flawless DVD And Stay On Budget (2012)

Getting To Know Blu-ray (2012)

DVD Authoring Services from The Authoring House

Leave a Reply

Your email address will not be published. Required fields are marked *