Making a DVD Video Portfolio: Onscreen Menus

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.