Creating Overlays

As viewers use the arrow buttons on the DVD player’s remote control to cycle through the buttons on a menu, they need some sort of indication as to which button is currently selected. If they activate the button, they need an indication of that, too. An overlay’s primary function is to show the viewer which button is currently selected or activated.

Note: If you intend to use shapes for your menu buttons, you do not need to create overlays.

Overlays are still images that contain the graphics used to show each button’s three states (normal, selected, and activated). One overlay file contains all of the buttons. Part of the menu creation process in DVD Studio Pro is to identify each button and set its function.

The overlay is almost always used in conjunction with the background image. For example, the normal button art may be in the background, while the overlay supplies only the selected and activated highlights, such as a halo or checkmark.

About Simple and Advanced Overlays

DVD Studio Pro allows you to choose whether to work with simple overlays that use a single overlay color, or advanced overlays that use up to four colors. Simple overlays are easier to create and configure but are not as flexible when creating complex menus. Advanced overlays give you the ability to use multiple colors for a button’s selected and activated states.

About the Overlay Colors

Overlays can contain up to four colors. A peculiar feature of overlays is that the colors used to create them are not the colors that are displayed when viewers see the menu. The overlay only identifies the areas on the screen where highlights are to be applied—not the color or transparency of the highlights. You define the actual colors viewers see when you create the menu.

When you use the simple overlay method, everything in the overlay graphic must be one of two colors: the white background that is set to be transparent and the black highlight graphic to which you assign a color and transparency. If you add an element to the overlay that has a soft glow around it or has been anti-aliased, the areas of the element that are not white or black will appear with additional highlight colors (controlled by the advanced overlay color mapping settings). In this case, you should either correct the graphic or use the advanced overlay method which allows you to control all of the highlight colors.

The elements in an advanced overlay use up to four different colors. This gives you the ability to use multiple highlight colors for a button or create pseudo-soft edges and to take advantage of anti-aliased edges. See Creating Advanced Overlays for more information.

About Overlay Files

Whether you create simple or advanced overlays, the overlay must be a single flattened layer, either as part of a Photoshop (PSD) format file or as a separate file.

It is common to have a single PSD file supply both the menu’s background and overlay. The DVD Studio Pro Menu Editor allows you to select as many layers as you want to use as the background, but you can only select a single layer as the overlay.

Note: Don’t confuse a PSD file with layers (used to supply the background and overlay) with the type of PSD file used when creating layered menus. Standard menus contain all buttons’ selected and activated states within a single layer of the file; layered menus contain a separate layer in the PSD file for each button’s state (normal, selected, and activated). These layers are not overlays that you assign colors to—they are full-color images of the button in one of the three states. See Creating a Layered Menu for more information.

Creating Simple Overlays

With simple overlays, you must use only white and black to create the graphics.

To create a simple overlay
  1. Create a full-screen white background.

    See Square Pixels in Graphics for information on the frame size to use.

  2. Choose black and add the highlight elements to the background.

    Be sure to disable anti-aliasing and avoid using soft edges. Depending on your graphics application, choose to use a 1-bit or bitmap mode.

  3. Depending on the graphics application you use, you may need to flatten the overlay elements into a single layer.

Creating Advanced Overlays

To create advanced overlays, you first need to understand how they are used and the difference between the chroma and grayscale methods.

The Four Colors in an Advanced Overlay

When creating an advanced overlay, you create your highlights by using up to four specific colors. You can use a chroma method (using red, blue, black, and white as the four overlay colors) or a grayscale method (using black, dark gray, light gray, and white as the four overlay colors). You don’t have to use all four colors when creating an overlay, but you will most likely use at least two.

Is White 0% or 100%?

Depending on your graphics background, you may assume white to be either 0% or 100%, with black being the opposite (100% or 0%, respectively). Previous versions of DVD Studio Pro considered white to be 0%, while most video people would consider white to be 100%. For the purposes of creating the light gray and dark gray colors used by the grayscale method, you need to use the following values:

  • If you consider white to be 0%: Use 33% for light gray and 66% for dark gray.
  • If you consider white to be 100%: Use 66% for light gray and 33% for dark gray.

White is commonly used as the overlay’s background color. When creating the menu, white’s transparency is usually set to 0. Any of the other three overlay colors can be used for any aspect of the overlay.

For example, if you had a menu background with a group of buttons that were actually just text, such as “Play Movie” and “Select Chapter,” initially your overlay would start as all white. If you wanted the button text to change to green when each button was selected, you’d need to add the text to the overlay and make it an overlay color such as light gray (or dark gray or black—remember that you will set the green color as the “selected” highlight color when you create the menu in DVD Studio Pro). If you wanted the text to change to orange when each button was activated, you wouldn’t have to do anything more to the overlay—you would just set the “activated” highlight color to orange when you created the menu.

If you also wanted a checkmark to appear next to each text button as it was selected, but you wanted the checkmarks to be yellow when they were selected, you’d need to add the checkmarks to the overlay graphic and set them to be a different overlay color than the text (in this case, dark gray) so that you could apply a different highlight color (in this case, yellow).

In the same way, you could add the word “OK!” after each text button and show it only when the button was activated. Simply add the text to the overlay and set it to be black; in DVD Studio Pro, you can set black to be transparent for the normal and selected states but visible with a green color in the activated state.

Figure. Overlay example showing a white background with light gray, dark gray, and black items.
To create an advanced overlay
  1. Create a full-screen white background. See Square Pixels in Graphics for information on the frame size to use.

    Note: You don’t have to use white as the background color, as you do with simple overlays, but it is a good idea to use white, because the default color mapping settings assume it is the background.

  2. Depending on whether you intend to use the chroma or grayscale method, add elements using the three leftover overlay colors (white having been used for the background).

  3. Depending on the graphics application you use, you may need to flatten the overlay elements into a single layer.

If you use colors other than the four that are specified by the method you chose (chroma or grayscale), they are mapped to their closest equivalent when you use the overlay. In many cases, this produces surprising (but not useful) results.

Note: Following is the mapping used for each overlay color with the grayscale method: 100% to 80% is white, 79% to 58% is light gray, 57% to 32% is dark gray, and 31% to 0% is black.

Pseudo-Soft Overlay Edges

Instead of using the advanced overlay’s four colors to create multiple color highlights, you can use them to create pseudo-soft edges and take advantage of anti-aliased graphics. This requires you to use the grayscale method, using either white elements on a black background or black elements on a white background. The soft or anti-aliased edges are mapped to the dark and light gray overlay colors. By mapping the same color to each overlay color, but at reduced opacities on the dark and light gray overlay colors that occur at the edges, you can effectively simulate soft or anti-aliased edges.

Keeping Each Button’s Elements Together

When creating your menu in DVD Studio Pro, you draw a single box around all of the elements for each button. The box identifies that button’s highlight area. In the above example, you would draw a box around each button that includes its checkmark, the main text, and the word “OK!” When you draw this box, no parts of any of the other buttons should be included, or they will also appear with this button.

For example, instead of having an “OK!” after each line, you might want a single large “OK!” on the right side. There’s no way to draw a box that would include both the button name (“Play Movie,” for example) and the large “OK!” without including some of the other button text, making this arrangement unusable.

Note: The Menu Editor has three color mapping sets that, in some cases, you can use to work around this problem. See Understanding Color Mapping for more information.

You also need to make sure none of the boxes overlap, because this can cause navigation problems, especially when using a pointer to select the buttons while playing the disc on a computer.

Figure. Active area overlap of three buttons.