Creating MenusImage Backgrounds and Buttons

Creating Menus Image Backgrounds and Buttons

Your first choice is whether to start your DVD with a video clip or a menu. This is called your "first play." For this example you'll start with a menu. We'll deal with how you include video clips in your project in the next hour .

Task: Create a Menu

The opening menu is the foundation of your DVD project and sets its tone. To create that first impression , follow these steps:

Open DVDit! The Theme window opens by default to the Backgrounds palette. Select a background and drag it to the First Play placeholder screen. I've highlighted it in Figure 21.12. This does three things:

It places the chosen background into both the First Play and Menu 1 placeholder screens.
It displays the background in the main screen.
It adds a new Menu 2 placeholder screen next to the main screen.

Figure 21.12. Dragging a background to First Play placeholder adds it to the Menu 1 placeholder and the main screen as well.

It's best to give your menu a descriptive name. To do that, simply click "Menu 1" in the small screen to the right of the main screen. This will highlight the Menu 1 name . Type in something descriptive and press Enter.

You may notice an icon in the lower-right corner of your selected background. The bad news? You're stuck with this bit of advertising. Yes, Sonic Solutions was kind enough to provide several dozen graphics, but not without a plug for the company that distributes them.

The good news? The logo falls outside the Safe Area. People watching DVDs created with these backgrounds won't see the logos.

You are not stuck to using only the backgrounds that ship with DVDit! LE. You may use your own graphics. DVDit! supports the following graphic file types: BMP, RLE, JPG, PIC, PCT, PSD, PNG, TIF, TGA, VDA, ICB, and VST.

To import your background graphics to DVDit!, open the Background palette and select Theme, Add Files to Theme. Navigate to your graphics file(s), select one or more, and click Open.

A caveat: For best results your image should have a 4:3 aspect ratio such as 640x480. If it's a smaller resolution than 640x480, DVDit! will expand it and some sharpness will be lost.

I present more information about creating and importing graphics in the next hour.

If you want to change the background for the First Play screen, simply drag a new background to that window.

DVDit! LE has a little idiosyncrasy. If you change the name of Menu 1, that also changes "First Play" to the name you give Menu 1. If later you drag a different menu to the First Play window, it does not display the name of this new menu; instead, it retains whatever you typed in originally for Menu 1.

This can become confusing. Just keep in mind that whatever menu is in the top "First Play" screen (no matter what name this screen has on it) is the menu that plays right after the DVD is inserted into the drive.

To create an additional menu that you may link to the First Play menu or to other menus, simply drag a background to the newly created Menu 2 placeholder screen. That automatically creates a new Menu 3 placeholder for your next menu, if you choose to add more.
Open the Buttons palette. Select the top button, Glass Green, and drag and drop it on the main screen. As shown in Figure 21.13, the proportions of the button on the main screen don't match the icon in the palette.

Figure 21.13. The button proportions don't necessarily match the respective icon.

Highlight the button to put a frame with red handles around it. Now you can resize and change its proportions by dragging the corners or edges. Holding down Shift while resizing maintains the current aspect ratio.

In a slightly different twist to graphic resizing, Sonic Solutions added a center handle. Click and drag it around to see how this changes the shape of the button while holding its position over the menu using that center point.

Delete this button and then drag three Glass Green buttons to the main screen.
To change the shape of all three buttons uniformly, select all of them by Ctrl-clicking one at a time. While holding down the Ctrl key, drag the edge or center handle of one, and all three act in unison , as illustrated in Figure 21.14.

Figure 21.14. Uniformly change the shape of selected buttons by Ctrl-clicking them one at a time and then dragging an edge or handle of one button.

As with most graphics programs, you can copy and paste these buttons. Here's how:

Create one button to your satisfaction and select it by clicking it.
Select Edit, Copy from the main menu.
Select Edit, Paste. That places a duplicate button on top of the original. Drag this duplicate to a new location.

Although you can uniformly resize several buttons at once, there are no tools such as a grid to help you line them up perfectly .

Here's a workaround: Create a "dummy" button first. Place it on the screen and expand its size to fit where you want to line up your buttons. Then add your buttons on top of the dummy button using it to line up their edges. Once this is completed, select the dummy button and delete it.

One other point: Dragging your buttons with the mouse does not lead to pixel-specific placement. However, you can nudge them to get them reasonably well lined up by using the keyboard arrow keys.

Task: Creating Buttons from Other Sources

You have other means to add buttons to a menu. Follow these steps:

To create text buttons, click the Text icon in the Theme window, select a font, and drag the button to the main screen.

Click "Text" to display its red-handled frame. Click again to highlight the word "Text." Now type in something else. You'll note that the box won't change size. Instead, the text scrolls . I've displayed all three types of text displays in Figure 21.15.

Figure 21.15. The three types of text displays, depending on the number of times you click the text in the menu.

The order in which you add buttons to a menu is the order in which they will play if your DVD viewers press Next or Previous on their remotes. In general this order may be a nonissue, but you may have a sequence in mind, so create your buttons accordingly . If you want to keep the buttons but change the sequence, you can drag and drop the buttons on the interface to change the appearance of the sequence or change whatever movie, still image, or menu you link to particular buttons. I'll cover how you link buttons to media and menus in the next hour.

When you're done typing, click outside the text area to accept what you've typed.

By default, your text has a drop shadow. I'll show you how to adjust this in the next hour.
Click your text to bring up the red-handled frame again. You now can drag the frame to reposition the text or change its shape.
To edit your text, click inside to highlight the text, click again to place the cursor within the text, and then type your new text.

You may apply this text over a button, use it to identify a button, or use it as a button. I'll explain how you "link" media and menus to buttons in the next hour.
To create a button from a frame in a video clip, open the Media palette by clicking the filmstrip icon at the bottom of the Theme window.
Select a still image or a video and drag it to the menu in the main screen. In Figure 21.16 I dragged three still images to the menu. DVDit! automatically gives them beveled edges and a drop shadow. You can't change the beveling, but can adjust the shadow. I'll cover that in the next hour.

Figure 21.16. Creating nice beveled-edge buttons from media files is a simple drag-and-drop process

There is one other way to drag and drop a movie button onto the main screen. To use that method, you first must add videos to the project. I'll explain both processes in the next hour.
As with text and graphic buttons, you can select these "media" buttons and change their shape and size.
To create a button to link from one menu to a second, open the menu you are going from in the main screen.
Click and drag the second menu from the menu screens onto the first menu on the main screen. As shown in Figure 21.17, a small version of the second menu appears as a button, which you can resize and move to any location in the main

Figure 21.17. Dragging one menu onto another creates a button with a link between menus.

When creating a link from one menu to another, it's a good idea to make a link going back from the second menu back to the first.

When you drag a menu to another menu to create a linked button, the button looks like a mini version of the menu it came from. If you update that second menu in any way, the button will not change to reflect that update. By the time you finish laying out your project, menu buttons may bear little resemblance to their original menus.

You can fix that by selecting and deleting the nonupdated button and replacing it by selecting and dragging the updated menu from the menu's placeholder screen to the deleted button's position.