Bad news first: That ain’t how DVD menus work.

Good news: You can fake it.

What many people don’t realize about DVD menus is that they are very, very simplistic. A DVD menu has an image or video as a background and a single layer of three colors. In most menus, the layer of colors is used to highlight the currently selected or active item. The highlight can’t be more complex than that, and images on the screen can’t be controlled individually by the viewer. So, how does one achieve this often sought style of menu where a full color image is used to indicate the selected item?

Figure 1: Default Theme

By using what I have begun calling the “inverse selection” method. To follow along with this tutorial, you’ll need the Wedding 3 theme that comes with DVD Architect Pro 4.0 and above (it may be included with DVD Architect Studio as well) and this image of a bell. Feel free to use a different theme / background and images, but keep one thing in mind: The “icon” must be over a solid color for this method. You’ll see why later. To get started, create a new DVD Architect project, add your media buttons as normal, and edit the button text and menu title as needed.

Figure 2: The Icons

If you’re following along exactly, now apply the Wedding 3 theme. This background image is white and has a flower arrangement on the right side. Buttons are laid out on the left side, and text is a light blue using the font Arial. Like most DVD Architect themes, the button for each item consists of a thumbnail from its linked video and a frame around that thumbnail. Let’s get rid of those. Choose the Selection Tool from the set of icons to the left of the menu workspace and select all of the menu buttons. This will switch the Menu Page Properties window to the Button Properties window where you can now edit the settings for all selected buttons. Select the Media tab of that window and cancel out all the settings we don’t need. You can do this by highlighting a setting, clicking the down arrow to its right, and choosing Remove. Do this for Mask (beneath Thumbnail Properties), Frame Media, and Mask (these last two under Frame Properties). Then click the down arrow to the right of Thumbnail Media and choose Replace. DVD Architect will present you with the Open Media dialog where you can browse for the image you want to use as an “icon.” In my case, I’m going to locate this picture of a bell and click Open.

So, now your menu items all have the same image next to them acting as a button. The menu also has the default behavior of highlighting the selected item with a semitransparent color. What we really want to do, though, is to hide all the other items on the menu while letting the selected item show through. This is where the “inverse selection” comes in. First, with all of the buttons still selected, go to the Highlight tab of the Button Properties window. For the Style setting, choose Image Rectangle. Then click an empty area of the menu so that no buttons are selected. This switches the Button Properties window back to the Menu Page Properties window. On the General tab, we’ll need to change the color sets that are applied to the menu’s buttons. Adjust the settings as follows:

Selected Button Colors: None (all transparent)
Active Button Colors: None (all transparent)
Inactive Button Colors: Color Set 1

(Really, you can use whichever color set you want for Inactive Button Colors — just make sure you edit that color set in the next step.)

Figure 3: Color sets

To hide the inactive buttons (the ones that the viewer does not currently have selected), we “highlight” them with a solid color that will blend into the background image. In this example, the background immediately behind the “icons” is white. So, we’ll go to the Color Sets tab of the Menu Page Properties window and change the Fill color for Color Set 1 to white. Expand Color Set 1 if it’s not already, select the Fill Color setting, and click the down arrow to its right. This gives us tools for adjusting this color — including a color picker. To get this color just right, let’s click the eye dropper icon and then select a color on our menu that is in close proximity to the “icon” we’re trying to hide. This will give us a highlight that is that same color, but it will probably also be semi transparent — which means the “icon” will still be partially visible To remedy that, let’s raise the Alpha Channel setting all the way up to 255, thereby making the color opaque. We can do this by typing 255 into the “A” textbox or by dragging the Alpha channel slider all the way up.

Figure 4: Previewing the Results

Preview your menu by hitting F9 on the keyboard or clicking the Preview button above the menu workspace. You should see the image next to one of your menu items, and nothing but empty space next to the others. As you use the navigation buttons on the remote, you should see the image “move” from one item to the next.

Addendum: There is one hazard in using this method. Most DVD players stop displaying all of a menu’s highlights as they switch to another menu or piece media. This isn’t much of an issue when you’re simply using a single highlight to indicate the chosen menu item — it just returns to its usual deselected state. But when you’re using those highlights to hide one or more items that you don’t want the viewer to see, suddenly they see them all! It’s only for a moment (depending on how long the player takes to change media), but it can interrupt the illusion. I don’t know of a way to prevent this from happening, but this brief peek behind the curtain looks more intentional, I think, if each of the “icons” is different.

Thank you, Paul L, for pointing out this issue in the comments.

A menu designed in this way only needs two files: a background video or image, which contains everything your menu will show, and a mask indicating all highlights. This tutorial will walk you through creating these files in a graphics application and using them in Sony DVD Architect.

Ready? Then let’s get started!

Creating the Images

The background can be either a video or a static image. For this tutorial, I will be creating an image using Adobe Photoshop. You can use any graphics application you like, but it would help if it were one that supports multiple layers such as Photoshop, Paint Shop Pro, or The Gimp. I’ll trust that you know your way around the graphics application you’re using. But if you’d rather skip this part of the tutorial, you can download the background image and highlight mask image that I’m creating.

Find a picture you’d like to use and open it in your graphics application. Usually, I’d begin with a still from the movie I’m putting on DVD, but here I’ll just be using a picture I found at Stock.XCHNG. Feel free to use the same image. The image is no longer available from Stock.XCHNG. Until I can find another copy to post, download the background image linked to above or use one of your choice.

The first thing to do with your image is resize it so that it is the appropriate dimensions for your DVD menu. Keep in mind that your still image will have square pixels, whereas your DVD (incuding the menu) will have non-square pixels. For example, the dimensions of a standard NTSC DVD (standard meaning not widescreen, and NTSC being the format used in North America) are 720×480, but a still image for this kind of menu should be 655×480. DVD Architect will appropriately “reshape” the image as needed.

If your graphics application has the option to add guidelines, do yourself a favor and add some now to indicate the title safe area — this is the suggested region of the menu where your titles and buttons should be placed so that they are not cut off by the viewer’s television. (For more information, run “safe area overscan” in your favorite search engine.) You should allow for a “border” of around 10% for titles and buttons. For a standard NTSC project, this will be about 65 pixels from the left and right, and about 50 pixels from the top and bottom.

Figure 1: Background image

Now that you’ve got your background image opened and guidelines set up, it’s time to start turning it into a DVD menu. Using your application’s tools, create the “buttons” you want for your menu.

(I put “buttons” in quotation marks because, in truth, the background of a DVD menu is one complete video or image with hotspots (the highlights) over it. The “buttons” you see aren’t really buttons at all — they don’t do anything.)

For this tutorial, I used Photoshop’s text tool to add a Play, Scenes, and Setup “buttons” to the background as well as a title for the menu. You can use text or add images, whatever you’d like to represent the “buttons” is fine — so long as it’s clear to the viewer, of course, what will happen when they select the menu items. I like to keep each item on its own layer, but you can use as few or as many layers as you like. If you’re like me, save all of this to a multi-layered file such as PSD. Then save a copy as a single layered image that you will use as your menu background. Most any image format is fine — I like to use PNG.

Figure 2: With "buttons" and title

When your “buttons” have the look and position you want, add a new layer above all the others. This layer will contain your highlight mask. A highlight mask tells DVD Architect what the actual buttons will look like. On a DVD, the actual buttons are usually fairly simple graphics like a box, a circle, or an underline that “highlights” part of your menu background. They’re usually a single color or variations of a single color. On this highlight mask layer, you’re going to create the shapes you want to have highlight your menu background and indicate the item(s) being selected from the menu.

There are two main rules to remember about highlight masks. The first is that the mask should use only black and shades of gray. Don’t worry, these aren’t the only colors your highlight can contain, but the actual highlight color will be set in DVD Architect. This mask is simply for deciding the shape and position. The second rule is that while the highlights can be any shape, the actual hotspot will be rectanglular, and those hotspots should not overlap. So as you’re drawing your highlight mask, imagine that each shape has an invisible rectangle around it, and make sure there is space between each one.

With those rules in mind, draw the shapes for your highlights, using the “buttons” on the background image as a guide. I drew outlines around my menu items using the background as a guide, but you can do pretty much anything you want — underlines, circles, arrows, wavy lines, be creative and have fun.

Figure 3: With highlights

Now you’re ready to save your highlight mask to its own file. Hide all other layers so that only your highlights remain. The background of this image will need to be transparent, so here you must save to a format that supports alpha channels. PSD and PNG are popular such formats, with PNG resulting in a smaller file size.

Figure 4: Highlights only

That’s all we need is those two images — now let’s head over to DVD Architect and put them to use.