Layered Menu's In DVD Studio Pro

By: Steve LaClair

As I'm sitting here doing the final touches on our video I recalled our ever so large failure for internet marketing to really hype this thing up. At the same time I'm bumming on that I realize I could probably write up a tutorial on how I handled the menu's since we never really touch on DVD SP. By now I've gave up my quest for internet hype, I mean using this site to push my video would just be sheer sleez... or is it too late?

Before I get started I'll state I'm no master of DVD Studio Pro or Photoshop, however a working knowledge of both should already be established before reading this.

What I wanted to do was mock a similiar website technique where you'll roll over a link and it not only changes the image you rolled your mouse over but however modified another image remotely in the same workspace. I lack real creativity artistically and technically, however I thought it would be cool.

Part 1: Photoshop

In a DVD menu you have 3 states that your buttons can be Normal, Selected, Activated. Normal is just that, the dvd menu cursor isn't currrently over it, you can kind of look at it as dead. Selected is when you select that button with your remote and a possible graphical change has happened (i.e. underlined). Actived is just selected however it's whatever graphical change is made after the enter button is selected.

In my case I decided against having separate images for the Activated mode. My plan of approach was having a list of all the chapters then with a generic window frame that had a unique picture corresponding to that chapter of the video. Very simple concept, and easy to execute however you must start the groundwork in Adobe Photoshop.

You're going to create one large .psd, with separate layers for everything (background, additional graphics, menu items, menu items in their separate modes). In DVD sp you will be able to have full control on which layers are displayed and when, however this is a pretty basic way to show it. If you look you see a blank image with a sloppily drawn frame border that I'm going to have images apear in depending on which button is selected.

If you look at my layers window you'll see layer names for all the different chapters when they are selected. For example I'm going to turn the eyeball on Jed_Selected to show what the dvd menu will do when rolled over Jed Shooter's future button on the dvd menu. You'll notice a red brush stroke and image appear, the layer Jed_Select was essentially a transparent frame with a red brush stroke and image that super impose themselves over the existing background elements.

You're going to want to create layers as you see fit for every state of every button that you anticipate having in your final production.

Part 2: DVD Studio Pro

Now open up DVD Studio Pro and import your recently created .psd as an asset. Now from above click "Add Layered Menu". This new menu will now show up in your Outline tab and a blank menu will show up in the viewer. Proceed to click your Assets tab and drag over your .psd into the menu window and don't unclick the mouse until a menu comes up. Select "Set Background No Layers Visible". This essentially turns all layers off until you tell them to come on.

By default you're going to want a few layers on by default (i.e. background, unselected text, etc) . As you can see I turned on the default writing for all the names, the remote image rollover frame and the background.

Now you have to create your buttons, I'm not going to get into depth with buttons but essentially just click your menu window hold your click and make it draw a square around your button. For instance I'm going to make the button for Jed's part. You'll have to do this for all items that you'd like to be a selection in your dvd, however I'm only going to show one, no need for reduncancy.

Now the last step is making your button do it's animation when it's selected. View your layered button menu to the right and click the Layers tab. You'll now see all your .psd layers displayed. At this step you'll select which layers you want displayed at each point of activation. The first column is normal, second selected & third is activated. You'll see I turned on the "Jed_Select" layer for it's selected and activated states, but that is only because I never created a layer for when it's activated.

Now look for the 3 buttons in your menu window that will toggle a preview of your button in each selected state.

Simple stuff duder. Buy our video!