4 Building and Editing Menus Topics covered in this lesson: • Exploring the Encore DVD 2.0 Library. • Checking out the Menu Viewer. • Changing buttons and text. • Applying styles. • Building menus using Library assets.
Getting started Encore DVD 2.0 has a vast collection of menu building assets and tools. In this lesson you will sample some of what the Encore DVD Library has to offer. You’ll start with pre-designed templates. They are the all-in-one solution. They come complete with menu backgrounds, graphics, text, and buttons. Then you’ll build a menu from scratch by choosing those elements from the Encore DVD Library on a part-by-part basis. Whether you use templates or menu-building graphics from the Library, Encore DVD makes it easy for you to give your DVDs a custom look. You can swap out template backgrounds with your own images or graphics, change the text font, and use different colors. Encore DVD offers a collection of Photoshop CS styles that you can apply to graphics, text, or buttons. Those visual effects include embossing, bevels, and gradients, as well as glass, metallic, and neon. You can give menus animated backgrounds and video buttons and you can create menus from scratch using Photoshop CS. Those advanced menu editing techniques, as well as several other menu editing features, are covered in Lesson 5.
88 LESSON 4
Building and Editing Menus
Exploring the Encore DVD 2.0 Library The Encore DVD Library has hundreds of menu elements—nearly 4 gigabytes of material. Items in the Library are organized into thematic sets and divided further into subcategories of DVD elements including menu templates, buttons, backgrounds, and shapes.
Checking out the Library panel The Library panel has numerous options and deep functionality. Here’s a brief overview. 1 View the Lesson 4 Intro Video in the ENC_CIB\Lesson 4 folder. 2 Start Encore DVD, choose New Project, and name it My Lesson 4. Note: There is no project for you to preview in this lesson. Taking a look at a menu template in the Menu Viewer, something you will do more than once in this lesson, will serve that purpose. 3 Click on the Library tab to select that panel. 4 Choose the General thematic set in the Set drop-down menu. 5 Scroll through that list and note that it contains more than 200 DVD menu-building elements.
The Library panel subcategory buttons: A. Menus B. Buttons C. Images D. Backgrounds E. Layer sets F. Text items G. Shapes H. Replacement layers
6 Click the buttons across the top of the listing (they’re at the bottom of the previous figure), one at a time. That narrows down the selected thematic set list to single subcategories of elements. Here’s a brief rundown of those DVD element subcategories (refer to the previous figure): • Menus—Complete, pre-designed templates.
ADOBE ENCORE DVD 2.0 89 Classroom in a Book
• Buttons—Text, graphics, and video thumbnails used to link to assets and other menus. • Images—Primarily a repository for your own images. It can include a wide variety of file types. The General thematic set has numerous images but most of the other thematic sets have no files in this category. • Backgrounds—Photoshop CS files with a single, background layer. • Layer sets—Photoshop CS files intended for use only as graphic elements in a menu, not for buttons or backgrounds. However, once you add a layer set to a project, you can choose to convert it to a button. • Text items—Photoshop CS files with single text layers (with no background), with effects applied to them. • Shapes—Photoshop CS files with single-layer vector graphics (with no background) that you can use as highlights for buttons or as graphic elements. You can resize vector graphics and they’ll retain their sharpness. • Replacement layers—Photoshop CS files with single layers or layer sets with a single layer that use a special layer-naming convention. Use these as placeholders in templates into which you can insert images for a specific project. Note: You can add your own files to these thematic sets and you can place the same file in several set subcategories such as Buttons, Images, and Backgrounds. The file characteristics (Photoshop CS layer naming conventions and the number and types of layers) and how you import the files, will determine in which sub-category they will reside. This is a great benefit if you have a video production business and rely on templates that feature a customized look. Importing Library assets is covered in Lesson 5. 7 Alt-click on any Library subcategory button. That displays every subcategory in the currently selected General thematic set (if all the subcategories already were selected, Alt-click would have no effect). 8 Shift-click on any button to turn off, or switch on, the display of that particular subcategory. 9 Click on the Menu button so only the menus are displayed. 10 Click on Radiant Menu.psd and note that it has a small, yellow star attached to its regular menu icon. That means it’s the General thematic set’s default menu for the entire project (you can designate a default menu for each thematic set).
90 LESSON 4
Building and Editing Menus
Note: To have a different menu be the default menu from the selected thematic set, rightclick on a menu and choose Set as Default Menu.
11 Choose Menu > New Menu and note that Encore DVD opens the Radiant Menu in the Menu Viewer and adds a menu named NTSC_Radiant Menu to the Menus and Project asset panels. 12 In the Library panel, double-click on Radiant Submenu.psd. That displays it in the Menu Viewer and adds it to the Project and Menus asset panels. Note three things: • The Radiant Submenu and all other submenus have thumbnail placeholders in their buttons. You can place images or play video clips in them. Most frequently, you use submenus as scene selection menus, placing brief video clips or still images in the buttons to help viewers make their selections. • All menu templates have similar submenus with thumbnail buttons. You don’t have to use menus with thumbnails. You can use a regular menu template as a submenu and have text-style buttons. • There are a few menus that say WIDE in their names. These are templates for 16:9 aspect ratio—widescreen format projects. Widescreen topics are covered later in the book.
ADOBE ENCORE DVD 2.0 91 Classroom in a Book
Thumbnail buttons for videos or images
13 Take a look at the bottom of the Library panel. Here’s a rundown on those buttons (refer to the next figure): • Place—Adds a selected Library element on the menu that’s open in the Menu Viewer. • Replace—Swaps the selected Library item with whatever is selected in the Menu Viewer. The items don’t have to be the same type of menu element. For example, you can replace a text or graphic element in a menu with a button from the Library. • Set Background—Swaps the background in the Menu Viewer with the selected background in the Library. This works just like the Replace button, but is needed because you can’t select the background in the Menu Viewer. • New Menu—Displays the selected menu in the Menu Viewer and adds that menu to both the Project and Menus asset panels. • New Item—Opens an Import window so you can add an item to the Library. How you distinguish the types of menu elements to get them in the proper subcategory is covered in Lesson 5. • Delete Item—You can delete only items you add to the Library.
The Library panel function buttons: A. Place B. Replace C. Set Background D. New Menu E. New Item F. Delete Item
92 LESSON 4
Building and Editing Menus
Checking out the Menu Viewer You build and edit menus in the Menu Viewer. It serves as the focal point of your DVD authoring efforts. In this lesson, the Library panel will serve as your menu building resource. You’ll start by working with full-featured menu templates. You can add text, graphics, and buttons to them. You then can move, resize, flip, rotate, delete, or otherwise edit those elements. Finally you can drag pre-built visual effects from the Styles panel to the Menu Viewer to enhance the look of some menu elements. Once you’ve completed your menu building you’ll drag videos, audio clips, and images onto menus or buttons. Those tasks are covered later in the book. 1 Open the NTSC_Radiant Menu in the Menu Viewer by selecting it from the dropdown menu in the Menu Viewer tab. 2 Take a look at the menu function buttons along the bottom of the viewer. Click on them one at a time (refer to the next figure): • Zoom Level—The relative size of the menu from 25% to 1600%. Choosing Fit fills the Menu Viewer with the menu. With Fit selected, the menu will adjust its size as you resize the Menu Viewer. • Correct Menu Pixels For TV Display—Toggles between displaying the menu as it will appear on a television set (default setting) and displaying the menu’s true dimensions and uncorrected pixel aspect ratio (if different from the project frame size). This compensates for graphics created using square pixels (standard for graphics created on PCs) versus the rectangular pixel display used in NTSC and PAL TV Sets. • Show Safe Area—Clicking this displays the guides that mark the action safe and title safe margins. As mentioned earlier, NTSC TV sets in particular cut off the edges of the viewing area (the actual amount varies from TV to TV). Keep text and buttons in the inner margin and all other important elements within the outer margin. • Show Button Routing—Displays what button will highlight depending on what arrow key is pressed on a remote control. This feature is covered later in the book when you start linking assets to buttons. • Show Guides—Displays a default set of guides (plus any you’ve added to the menu) for aligning buttons and objects. • New Guide—Displays the New Guide dialog box, where you can specify the type of guide (horizontal or vertical) you want to add and its position in pixel coordinates
ADOBE ENCORE DVD 2.0 93 Classroom in a Book
within the menu. You can drag any guide to a new position in the menu. Guides are saved with the menu and can be viewed in Photoshop CS. • Show Normal/Selected/Activated Subpicture Highlight—Displays the normal/ selected/activated highlights of all buttons. Only one of the three highlight states can be displayed at a time.
A. Zoom Level B. Correct Menu Pixels for TV Display C. Show Safe Area D. Show Button Routing E. Show Guides F. New Guide G, H, I. Show Subpicture Highlight: G. Normal H. Selected I. Activated
Changing buttons and text You’ve already added pre-designed, complete menu templates to your project. In this exercise you’ll edit some of the elements in those templates. 1 Continue where you left off with the NTSC_Radiant Menu in the Menu Viewer. 2 For now, turn off the guides by clicking the Show Guides button. 3 Delete three buttons (Chapters 4-6) by using the Selection tool, Ctrl-clicking on the buttons one at a time to select all three, and then pressing delete (you could also rightclick and choose Clear to delete them). 4 As shown in the next figure, drag the remaining three buttons, one at a time, to create a new arrangement, then drag-select all three of them.
94 LESSON 4
Building and Editing Menus
5 Choose Object from the menu bar and note the options (if you had not selected an object in the Menu Viewer, none of the Object options would have been active).
6 Click on Flip Horizontal, Flip Vertical and Rotate > 180 degrees to take the buttons through their paces and bring them back to their starting point. 7 Click Drop Shadow and in the Drop Shadow dialog window change the parameters to move the shadows farther from the buttons, enlarge them, and increase their spread. Make note of four things: • By selecting all the buttons, you can apply Drop Shadow to all of the buttons at once to ensure a consistent look. • As you increase the Drop Shadow Distance, Size, or Spread you’ll see the bounding boxes around the text buttons increase in size. Those boxes define the button hot zones. For your DVD to work properly, those hot zones cannot overlap. For now, that’s not an issue, but it will be something you’ll need to be aware of later when you add links and test your project. • The Drop Shadow angle might not make the shadow fall in the direction you’d expect. For consistency’s sake, the Encore DVD Drop Shadow effect uses the same parameters as the Photoshop CS Drop Shadow, which has some counter-intuitive behaviors. For example, as the shadow angle numeric value increases, the shadow moves counter-clockwise. In Premiere Pro, on the other hand, the shadow moves clockwise. • If you select an object that has a transparent area (Target.psd from the Shapes subcategory of the General Thematic Set for example), Drop Shadow will behave realistically and not give transparent regions shadows.
ADOBE ENCORE DVD 2.0 95 Classroom in a Book
8 Click the Direct Select tool switch on its bounding box.
and click on the text string at the top of the menu to
Note: The Selection tool works only with entire button sets so you can manipulate them as units. Use the Direct Select tool to select a single layer object or a single layer within a button layer set. 9 Move the cursor so itâ€™s slightly outside the text bounding box and notice how it turns into a Rotation cursor . Note: Another way to switch on the Rotation feature is to click on the Rotation tool
10 Drag the text bounding box to rotate it to something other than the 90 or 180 degrees available using Object > Rotate.
Using Guides Guides help you line up menu elements, particularly buttons. 1 Click the Show Guides button to display the eight intersecting blue lines. 2 Hover your cursor over any guide until it turns into a drag cursor next figure, to move it to another location on the screen.
, shown in the
96 LESSON 4
Building and Editing Menus
3 Click the New Guide button, accept the default values of Horizontal and 0 pixels, and click OK. That adds a guide at the top of the Menu Viewer. Note: Horizontal values run from 0 at the top of the screen to 480 at the bottom. Vertical values go from 0 on the left of the screen to 720 on the right side. You can input negative numbers or numbers larger than 480 and 720. In those cases the guides will fall outside the edges of the visible screen. You can see those guides if you choose a Zoom Value thatâ€™s less than 100%. 4 Drag that guide down to about the center of the Menu Viewer. 5 Use the Selection tool (keyboard shortcut V) to drag a button to the intersection of that guide and a vertical guide. Button graphic snaps to guides
Note how the edges of the button snap to the guides and hold there for a moment as you drag the button around. Depending on the guide orientation (vertical or horizontal) both button graphics and bounding boxes can snap to the guides. This is an effective way to line up menu buttons. Another method to do that is explained later in this lesson.
Viewing text characteristics If youâ€™ve worked with text in any Adobe graphic or digital video product or just about any graphic creation product, you know how to work with text in Encore DVD. 1 Use the Direct Select tool to drag a corner of the text bounding box at the top of the menu to expand it. That increases the size of the text accordingly.
2 Click the Text tool
, double-click on standard and drag to also highlight alliance.
ADOBE ENCORE DVD 2.0 97 Classroom in a Book
3 Click the Character tab to open that panel and note the font, size, color, and other characteristics. You can change the characteristics of any selected (highlighted) text here. Change a few parameters to see how that works.
Adding text As mentioned earlier in the book, it’s a simple matter to add text to a menu. Select either text tool, then do one of two things: • Click anywhere in the menu where there isn’t already text and start typing. • Drag to form a bounding box to limit the width of the text string. If you run past the bottom of the box, you can drag a corner to reveal the hidden text.
Looking at buttons and layers Encore DVD buttons are Photoshop CS layer sets. That is, they are layered objects. You use the Selection tool to move an entire button. You use the Direct Select tool, sometimes together with the Layers panel, to manipulate individual layers. 1 Open the NTSC_Radiant Submenu by selecting it from the Menu Viewer tab dropdown menu. 2 Use the Selection tool (V) and drag a button up the screen so it slides under the menu title text. This shows that the order in which items are added to a menu determines their position either above or behind other items.
98 LESSON 4
Building and Editing Menus
3 Bring the button to the front (on top of the text) by choosing Object > Arrange > Bring to Front. That does two things: the button now covers the menu title text and the button layer set moves to the top of the Layers panel (to see that, open the Layer panel).
4 Select the Direct Select tool (A) and click on the Scene 6 button. The bounding box appears only around the button thumbnail, not the larger hot zone (the green rectangle) that appeared when you selected the button with the Selection tool. The Direct Select tool selects only one layer at a time. This button is a four-layer set. You can probably only select two of its layers with the Direct Select tool because one layer is covered by the thumbnail frame and the other is not visible (unless you have the Selected or Activated Subpicture Highlight button turned on). 5 Check out all four layers by clicking the Layers tab to open that panel, then twirling down the Scene 6 disclosure triangle.
6 In the Layers panel, click on appears around the button text.
Scene 6 (its text layer) and note that a bounding box
7 Click on the frame layer and then attempt to use the Direct Select tool to move the frame. Since the frame layer contains transparent pixels, the Direct Select tool grabs the nontransparent layer below the frame layer, the (%) video layer. To move a transparent layer you must select it in the Layers panel, then use the Move tool to change its position.
ADOBE ENCORE DVD 2.0 99 Classroom in a Book
Note: Some layer names have numbers and symbols in parentheses. Those are Photoshop CS layer naming conventions used in Encore DVD menus. For example, a video button layer set name starts with (+#), the button layer for the video thumbnail starts with (%) and the button subpicture highlight starts with (=1), (=2), or (=3). These layer naming conventions are covered later in the book. 8 Click on frame in the Layers panel again, select the Move tool button and drag the frame off to one side.
, click on the
This time you will be able to move the frame since the Move tool does not select a layer. It merely moves whatever layer is selected. Sometimes, selecting and moving or resizing a layer can take a couple more steps than you might expect. But there always is a way to do it. 9 In the Layers panel, click on (=1) highlight and a very small bounding box will appear next to the button in the Menu Viewer. This is the left-facing arrow subpicture highlight that appears when a viewer moves the remote to, or clicks on, that button. Itâ€™s too small to move, even with the Move tool. You first need to expand it a bit before you can move it.
Applying Styles The Encore DVD Library has dozens of Styles. Styles are pre-designed Photoshop CS layer effects, such as shadows, glows, bevels, overlays, and strokes. They let you quickly change the appearance of text, a layer, or an object in a menu. Once applied, the effects are linked to the object. When you move or edit the object, the effects change with the object. Image Text Shape
100 LESSON 4
Building and Editing Menus
Styles are divided into seven thematic groups and three subcategories within those groups. Those subcategories describe their behavior (refer to the previous figure) and are intended to make applying these styles go smoothly. But you can also choose to circumvent those behaviors to suit your menu-building approach: • Image—Applies the style to all layers in a layer set. • Text—Applies the style to the top text layer in a layer set. • Shape—Applies the style to the first shape layer in a layer set. Note: Encore DVD will not apply a style to a subpicture highlight layer. For those layers to work in a DVD project, they need to be a single color with no effects applied to them. In this exercise you’ll open a blank menu, add some menu elements, and apply a few styles to see how Styles work and get a feel for their many possibilities. 1 In the Library, General Set, Menu subcategory, double-click on Blank Menu. That opens a menu with a black background in the Menu Viewer. 2 Click the Buttons subcategory and double-click on Blue Square Button. 3 In the Images subcategory, double-click on Airplane. 4 In the Text subcategory, double-click on the any of the 36 pt text samples. 5 In the Menu Viewer, use the Selection tool on the button and drag a corner to expand it. 6 Use the Direct Select tool to expand and arrange the other two objects. Your Menu Viewer display should look something like the next figure.
7 Click the Styles tab to open that panel.
ADOBE ENCORE DVD 2.0 101 Classroom in a Book
The Styles panel works the same way as the Library panel. 8 Select the Novelty thematic set and click on the Image Styles button to display only those effects (there are eight, along with an option to clear all effects). 9 Use the Selection tool to select the Blue Square Button layer set in the Menu Viewer. 10 Double-click on any number of styles one at a time and note the immediate changes to the entire layer set: the button, the arrow and the text. That demonstrates that Styles applied from the Images subcategory affect all layers of a layer set.
11 Double-click (Clear All Styles). Your button will return to its original blue and red colors but will lose the 3-D look it had to begin with, since that too was a style. 12 Open the Text Styles subcategory and double-click on any style. That will apply the style only to the text portion of the button layer set.
13 Switch to the Shape Styles subcategory and double-click on any style. That will apply the style only to the arrow in the button set since itâ€™s the top layer in that set (for the following figure, the Text style was undone before the Shape style was applied to it).
14 Finally, drag any style from any subcategory to any object or layer on the screen and apply that style directly to that object or layer.
102 LESSON 4
Building and Editing Menus
In this way, for example, you can drag a Text style to a non-text layer in a button, thereby circumventing the limitation of the style subcategory behaviors. Or you can apply a Shapes style to some other graphic besides the top layer.
Building menus using Library assets Templates are a great starting point. But eventually you will want to build a menu with a more customized look. Hundreds of menu elements in the Encore DVD Library give you uncountable possibilities. The purpose here is not necessarily to build a menu for a final project, but rather to give you a feel for all the possibilities. However, if you like what you end up creating, save the project. In Lesson 5 youâ€™ll learn how to export your menu as a template to use again and again. 1 Return to the Library panel, General thematic set, Menu subcategory, and doubleclick on Blank Menu. 2 In the Library panel, click the Backgrounds subcategory button and double click on a background of your choice (except for the one WIDE background). That replaces the current menu background (a solid black fill) with the new background. You can use this method to replace any background of any menu at any time without affecting other elements like text, buttons, or graphics. 3 Click the Buttons subcategory button, select a non-video button that you think matches the look of your background (you can choose a button from any thematic set), and drag that button to the Menu Viewer.
ADOBE ENCORE DVD 2.0 103 Classroom in a Book
Note: Most buttons have both a text-only and a video thumbnail version. You’ll have the option to create a submenu with video buttons later in this exercise. 4 Right-click on the newly added button and choose Duplicate (keyboard shortcut: Ctrl+D). Do that two more times so you have four instances of the same button on screen. Note: You could also click the Library panel Place button four times. In that case, Encore DVD would evenly space the buttons along the left side of the Safe Title Margin, starting at the top of the margin (whether or not the Show Safe Area feature is displayed).
Object distribution Encore DVD has several tools to help you evenly distribute and align menu elements. Here’s an example. 1 Use the Selection tool to drag select all four buttons (or Ctrl+click on each one individually to select all four). 2 Choose Object > Align, make sure that Relative to Safe Areas is deselected, and choose Left. That will line up the left side of the button frames with the left edge of the left-most button. 3 Click Show Guides. 4 Drag the group of buttons to the left until they snap to the guide on the left side then drag them down until the bottom of the fourth button snaps to the horizontal guide (refer to the next figure). 5 Click in the menu (outside the button bounding boxes to deselect them), select the top button, and drag it down to a point so there is enough room above it to add a menu title. 6 Drag select the four buttons again and choose Object > Distribute > Vertically.
104 LESSON 4
Building and Editing Menus
That will position them evenly, using the top and bottom buttons as the limits to the distribution.
Another distribution method Another way to distribute buttons is to use multiple guides. For example, you could add several horizontal guides at regular intervals like 75, 175, 275 and 375, and then line up the buttons with the help of the Snap feature.
Adding text and graphics 1 Click the Text tool, click at an appropriate spot near the top of the menu, type Main Menu, then drag the bounding box corner to enlarge the text. 2 Click the Direct Select tool and Ctrl+click on each text item in the menu (Main Menu and the four button text layers) to select them. 3 Give your text a consistent look in one of three ways: • Select a font and color from the Character panel. • Double-click an effect from any Styles thematic set, Text subcategory. • Select an element from any Library thematic set, Text subcategory, then click the Replace button. That will also replace the existing text with the letters ABC. 4 Select a graphic element from the Library General Set, Shapes subcategory, and click Place. Banner 1 is used in the example in the following figure.
5 Apply an effect to that graphic to give it some depth or texture.
ADOBE ENCORE DVD 2.0 105 Classroom in a Book
Pillow Emboss Up (from the Styles Basic thematic set Images subcategory) was used in the example shown in the previous figure. Flat, blue shapes All Shapes in the Library are purposely blue and flat so you can use them as subpicture highlights. You can also use them for other purposes and in those cases youâ€™ll probably want to apply a style or color to them. If you want to change the color, add one to a menu, select it, open the Layers panel, and double-click on its color swatch to open the Color Picker. 6 If you want to, you can create a submenu using basically the same techniques. This time add video thumbnail buttons instead of the text buttons and title this menu Scene Selection. 7 In your newly-created submenu (or in your main menu) use the Text tool to add Main Menu in the lower right corner. This is merely a text string at the moment, but you will convert it to a button that you can use to link to anything. If you are working in a submenu, you can later link the button to your projectâ€™s main menu.
8 Use the Direct Select tool to select the Main Menu text, right-click, and choose Convert to Button.
106 LESSON 4
Building and Editing Menus
9 Take a look at the Layers panel and note that the Main Menu layer (it’ll be at the top since it’s the one you just added) now has a (+) in front of the layer name, signifying it’s a button layer set.
Review Review questions 1 What’s the difference between a Shape and a Button? 2 How do you replace a menu background with another background selected from the Library Backgrounds subcategory? 3 How do you display all the subcategories in a Library set? 4 Explain the difference between the Selection tool and the Direct Select tool. 5 How do you apply a Style to only the text layer of a button? 6 Explain the snap function and how it applies to menu guides. 7 How do you convert text to a button?
Review answers 1 A Shape is a single-layer, Photoshop CS file graphic. Since shapes are vector graphics, you can resize them and they’ll retain their crisp edges, and since they’re a solid color with no effects applied, you can use them as subpicture highlights. Buttons are Photoshop CS layer sets that can include button, text, and subpicture highlight layers. 2 With the menu open in the Menu Viewer, select a new background and click the Set Background button at the bottom of the Library panel. 3 Alt-click on any subcategory button in that Library set. 4 Use the Selection tool to select an entire button layer set so you can work with it as a unit (move it, change its size, or select it to apply a style to it). The Selection tool cannot select a non-button item. Use the Direct Select tool to select any non-button object (text or graphic) or a single layer in a button. 5 Select the button using the Selection or Direct Select tool, then double-click on a Text style or select a Text Style, and click the Apply Style button. You can also use the Direct Select tool to select the text layer and drag any style to the text. 6 The snap function is on all the time in Encore DVD. You’ve seen it at work in the Timeline Viewer and now in the Menu Viewer. With guides displayed, as you drag a
menu elementâ€”text, button, graphicâ€”near a guide line, that object will snap to the guide, allowing you to place the object with precision. 7 Using the Direct Select tool, right-click on the text and select Convert to Button.