Until very recently, DVDs have had a certain aura of mystery about them – they were created for the big movie studios by high-end post-production facilities, professionally mastered and mass-duplicated. That's still true for the DVDs you're renting at Blockbuster, but DVD technology has trickled down to the desktop and the secret's out: It's not that hard to make a DVD yourself. Graphics professionals will be especially pleased to learn that much of the work involves an old friend, Adobe Photoshop.

In the first installment of a three-part series, we covered the basics of the DVD format. In part two, we'll get you started on the right foot using Photoshop to create a graphical interface of simple menus and buttons. Since DVDs are potentially displayed on both computer monitors and TV monitors, you need to create a design that works for both. Of the two, TV monitors are not as forgiving as computer monitors, so throughout this article, we'll give you technical tips to help you create a design that takes the limitations of TV into account as you prepare your still graphics for inclusion on a DVD.

Structurally Sound
At this point, you should know which samples of your work you plan to include on your DVD demo reel or in your portfolio. By dividing these samples into sub-categories, it's easy to come up with a simple structure. For example, I work as a video and film editor, so I have sample clips from films, T.V. shows, and music videos. In addition, I want to include some contact information, specifically my phone number. So my main menu will have four buttons: Films, T.V., Music Videos, and Contact.

Each of these buttons will lead the viewer to a sub-menu that will have buttons for each sample clip in that sub-category. If it helps, draw a diagram or flow-chart of your menus and sub-menus (see figure 1). You may decide that you don't need sub-menus and that you can fit all your sample clips on the main menu itself.

Figure 1: Making a diagram like this one can help you determine exactly how many menus and buttons you need for your DVD.

One of your goals at this point should be to determine how many menus and buttons you need before you start to create the artwork. In addition to the buttons for each sub-menu and for each sample clip, you should also add navigation buttons to each sub-menu, so that the viewer can go back to the main menu or forward to the next sub-menu.

Pixel Follies
Computer images and video images both consist of pixels but they aren't quite the same. Computer pixels are square whereas video pixels are rectangular. A standard frame of video, in North America, consists of 720 x 480 rectangular pixels, but because the pixels in a Photoshop document are square, if you created artwork at 720 x 480 pixels, it won't look the same when it plays on a video monitor – it'll look slightly squashed.

To get around this problem, work with Photoshop documents that are 720 x 540 pixels with a resolution of 72 dpi. (All video graphics are 72 dpi.) This will give you a work-in-progress document that looks the same way it'll look on a video monitor (see figure 2). When you're done using Photoshop and ready to move your still graphics into a DVD authoring application, you can resize the artwork to 720 x 480. Some software like Sonic Solutions' MyDVD requires final graphics to be 640 x 480. If so, create a work-in-progress document that's 640 x 540. For widescreen graphics, use a work-in-progress document that's 854 x 540, then later resize it to 720 x 480.

Create a document that's 720 x 540 with a 72 dpi resolution. Save it as Menu.psd.

Figure 2: Use these settings to create a working Photoshop file that looks the same as it will on a TV monitor.

Safety First!
TV monitors hide the edges of the video image, a process called overscan. That may sound strange but there's a good reason for this – sometimes video footage has junk around the edges, like the black areas in the video frame (see figure 3). Unfortunately, the amount of overscanning varies from on TV set to another. As a result, people who work with video that's destined for a TV monitor use a set of TV-safe guidelines when shooting and also when creating titles. As you can see in the figure below, the smaller, inner rectangle delineates the area that is safe for titles. All on-screen text should stay within this rectangle. The larger rectangle shows the area that is considered safe for action - there's no guarantee that anything outside this line will be visible on a TV monitor.

Figure 3: When designing text that will play on a TV monitor, be sure to keep it within the Title-safe area shown above.

• Windows users can download a Photoshop file containing the guidelines in the above image by right-clicking the above image and choosing "Save Target As...".
• Mac users can right-click/control+click the above image and select "Download Link to Disk...".

  Once you get the save dialog, name the file with a ".psd" extension before opening it in Photoshop. Open the downloaded file (TVsafe.psd) and paste the guides layer into a new layer in your Menu.psd document. Name this layer TV safe guides. Make sure the TV safe guides layer is the top layer in your document and keep it visible as you work.

The Layered Look
Now it's time to design your DVD interface using Photoshop layers. Create a new Layer and call it Main menu. This layer will contain the background image for the main menu on your DVD.

When you're done designing the menus, you may have 20 or more layers, so it's important to name them appropriately, like in the figure 4. DVD authoring applications like Apple DVD Studio Pro and Sonic Solutions' DVDit! import Photoshop files with layers directly, conveniently saving each layer as a separate element.

Figure 4: With 20 or more layers in a menus document, it's important to label them clearly.

Next, add text that will always be visible in your main menu. As you create text and other graphic elements, be sure to avoid lines that are smaller than two pixels in width and small, delicate typefaces – fine horizontal lines tend to flicker on video monitors. For my reel, I decided to keep things simple the only text is my name and my title as shown below (see figure 5), along with four text-based buttons.

Figure 5: This simple layout is TV-safe and has four text-based buttons.

Color Guard
You also need to make sure the colors in your artwork are acceptable on all the different monitors that may display your DVD: a Macintosh computer, an IBM-compatible computer, or a TV monitor. Of the three, TV monitors have the most limited palette of acceptable colors, known as NTSC-legal colors (see figure 6). NTSC is the type of video that's broadcast in North America and Japan, as opposed to PAL, which is broadcast in most of the rest of the world, and HDTV, the digital broadcast standard that will become the norm in 2006.

Figure 6: In the Apple Color Picker, the colors that fall in the regions under the striped overlay usually aren't NTSC safe.

NTSC video is notorious for its poor ability to handle bright, saturated colors. The rich reds and magentas that look great on a computer screen will bleed, flicker, and generally look awful on a TV monitor. With Photoshop 6.0, you can choose from different proof setups in the View menu to see how your artwork looks on different types of monitors, but nothing can take the place of looking at the image on real monitors.

White Out
Yep, you guessed it. Video white isn't the same as computer white – in other words, it's not 100 percent white. In video gamma, 100 percent white is considered the ultimate maximum that the video signal can handle in terms of brightness. This is overkill for most monitors, so standard video white is usually 75-80% white.

In Photoshop you can use the NTSC colors filter to make sure your artwork meets the limitations of NTSC video. The NTSC colors filter will reduce the brightness and saturation of any color that isn't NTSC legal. Usually, the changes are not noticeable unless you have an image that has lots of oversaturated color, like the background artwork on the right below (see figure 7). Unfortunately, using the NTSC colors filter on this image resulted in some strange posterizing, as you can see in the image in the middle below. I was able to create a better-looking NTSC-legal image by slightly desaturating the image first, and then applying the NTSC colors filter just to be safe, as seen in the image on the left.

Figure 7: With an oversaturated image (right) applying the NTSC filter alone isn't enough. Desturating the image first (left) gave better results.

Before you move on, make sure your background artwork and text are NTSC legal – you might want to duplicate the original layers as backups before you apply the NTSC colors filter or make any brightness and saturation adjustments.

Button It Up
The next step to completing your menu in Photoshop is to create layers containing the button graphics. For my main menu, I decided to use four simple text-based buttons: Films, T.V., Music Videos and Contact. Your buttons can be text-based like mine, graphics-based, or even video-based, which is a little more complicated. (We'll talk about video-based buttons and other video elements in part three of this series).

On a DVD, each button has three states: normal; selected, for when the user chooses it; and activated, for when the viewer clicks Enter or OK (see figure 8). In Photoshop create a separate layer for each state of each button and name it appropriately: Films button normal, Films button selected, etc. You can turn layers on and off in Photoshop to get an idea of how your final DVD interface will look.

Figure 8: The Films button in three different states: normal (top), selected (center), and activated (bottom).

Once you're done with the main menu and all the buttons, save the Photoshop document. You'll need to create a new Photoshop document and repeat the process for each sub-menu. Don't forget to add a button that lets the user return to the main menu in the sub-menus.

Final Prep
The final step is to get your Photoshop documents ready to import into a DVD authoring application. Save a copy called Main menu clean.psd and get rid of unnecessary layers, such as the TV safe guides layer and other work-in-progress layers. All effects layers need to be flattened but be sure not to flatten the whole file. Rasterizing any text layers onto a transparent background is also a good idea.

Finally, resize the document to 720 x 480 pixels. Be sure to deselect Constrain Proportions in the dialogue box (see figure 9). If your DVD authoring software doesn't support Photoshop layers, you'll have to save each layer as a separate document before importing.

Figure 9: Be sure to uncheck Constrain Proportions when resizing the document.

Up Next
In the next article in this series, you'll learn how to prepare digital artwork, video and audio media, build an interactive DVD project, create a slide show and put the final polishes on your DVD.

Read more by Sonja Schenk.