Adobe Digital Video Curriculum Guide

Adobe Digital Video

CURRICULUM GUIDE

Module 27 Using Adobe Photoshop to Edit Menus for Adobe Encore DVD

Adobe® Encore™ DVD works hand-in-hand with Adobe Photoshop®. Although Adobe Encore DVD ships with many menu and button templates, your students eventually will want to create custom menus. They can take two different approaches: edit existing Adobe Encore DVD menus in Photoshop or use Photoshop to build menus from scratch. At the end of this lesson, students will have learned about: •

Adobe Encore DVD and Photoshop CS Integration

•

Using Photoshop CS to edit Adobe Encore DVD menus

•

Creating menus from scratch in Photoshop CS

Adobe Encore DVD and Photoshop Integration Since I covered basic Photoshop editing in Module 23, “Photoshop in DV Projects: Still Images and Layers,” I won’t offer up those kinds of editing tips here. Rather, I simply will point out how Adobe has integrated Adobe Encore DVD and Photoshop CS. When editing menus in Adobe Encore DVD, you can do these things: •

Change or add text

•

Add graphic elements from the library

•

Alter the size of the video button frames

•

Copy and paste objects already in the menu

•

Change the location of any element

In Photoshop, you can do all of the above plus these tasks: •

Create new graphics

•

Change the appearance or styles of graphics

•

Add a new background

•

Use different colors for the graphics

The crux of that integration is that you can edit Adobe Encore DVD menus in Photoshop or build Adobe Encore DVD menus from scratch in Photoshop. All it takes is some attention to layer naming conventions.

Adobe Digital Video Curriculum Guide – Module 27

27-1

Adobe Digital Video

CURRICULUM GUIDE

Using Photoshop CS to Edit Adobe Encore DVD Menus Integration between Adobe Encore DVD and Photoshop is so tight, it’s almost like they are modules within the same larger program. To edit an Adobe Encore DVD menu in Photoshop CS, all you have to do is select “Edit in Photoshop.” Once you complete editing your menu, you simply save it in Photoshop CS and when you return to Adobe Encore DVD, whatever changes you made in Photoshop CS will be on display in Adobe Encore DVD. Follow these steps to see how this works: 1.

Select the Blue Grid Submenu by clicking its tab in the Menu window and then select Menu > Edit in Photoshop.

2.

That opens Photoshop with that menu front and center. Open the Layers palette by selecting Window > Layers.

3.

Twirl down the disclosure triangles next to Title and Scene 1, and make sure all eyeballs are on. Your layout should look like Figure 27.1.

You will note that the layer and layer elements have symbols or numbers in parentheses as prefixes. These are the naming conventions used in Adobe Encore DVD menus (I will explain this in more detail in the next section).

FIGURE 27.1: You can edit any Adobe Encore DVD menu in Photoshop.


27-2

Adobe Digital Video

CURRICULUM GUIDE

To see how any changes made to an Adobe Encore DVD menu in Photoshop work, select the Background layer (click on the word “Background” in the Layers palette), select Image > Adjustment > Hue/Sat and move Hue slider to the right to about +72 (purple). Click OK. Then select File > Save.

Tip: Original Menu Remains Unchanged These changes will not alter the original Adobe Encore DVD Library Blue Grid Submenu Photoshop file. Photoshop automatically creates a new file for this project. Close Photoshop, return to Adobe Encore DVD, and note that your menu has the new background color you gave it in Photoshop.

Creating Menus from Scratch in Photoshop CS Creating menus in Photoshop CS for use in Adobe Encore DVD takes only a little extra attention to a few details. There are three general issues to consider: project setup, graphic element to ensure clear display on TV sets, and layer purposes and naming conventions.

Task: Making Adobe Encore DVD Menus in Photoshop CS I’ll point out those details as you work through the following task. Here’s how you use Photoshop CS to build menus for Adobe Encore DVD: 1.

Open a new document in Photoshop CS by selecting File > New. Select a Preset that matches your video project: NTSC, PAL, or HDTV; DV or D1; standard or widescreen. Click OK.

2.

Create a background. In my case, shown in Figure 27.2, I copied and pasted an image (the cross hatch lines indicate the Action Safe and Title Safe zones). You can add any number of graphic elements, layer the background, or merge it into one layer, and add additional images. All elements that are not specifically identified as button sets (by using certain layer-naming prefixes) are considered by Adobe Encore DVD to be part of the background.


27-3

Adobe Digital Video

CURRICULUM GUIDE

FIGURE 27.2: Selecting a video-oriented preset opens an image window with safe zone grid lines on it.

Note: Graphic Creating Issues •

To make sure buttons are visible on TV screens, they should be at least 70x60 pixels.

•

Feel free to make graphic (like logos) and button elements a bit larger than need be. You can shrink them down a bit in Adobe Encore DVD if need be, and they will retain clarity. If you make them too small, then expanding them in Adobe Encore DVD will reduce their sharpness.

•

Horizontal lines need to be at least 3 pixels wide. Thinner lines will flicker on TV screens.

•

Use RGB color images. Convert any non-RGB images (CMYK, for example) to RGB before adding them to Adobe Encore DVD menus.

•

Use NTSC safe colors to avoid a glowing, halo effect on TV screens. Use the Photoshop NTSC filter to take care of that: Select Filter > Video > NTSC Colors.

•

Font sizes should be at least 20 points; otherwise, viewers might not be able to read your text.


27-4

Adobe Digital Video 3.

CURRICULUM GUIDE

You build each button within its own Layer Set. Create a Layer Set by clicking the Create a new set button highlighted in Figure 27.3.

FIGURE 27.3: Create a layer set for each button by clicking the Create a new set button. Use the (+) prefix when naming button layers. 4.

You need to name the layer set using an Adobe Encore DVD layer prefix. To do that, Right/Option-click on the Layer Set name, select Layer Set Properties, and type in a name. Start it with (+) to indicate this is a button set (there is no space between the (+) prefix and the layer name). I’ve listed all the Adobe Encore DVD menu-naming naming conventions in the following note.

Note: Adobe Encore DVD Layer Naming Prefixes

5.

•

(+) on a Layer indicates this layer is a button. You’ll note the first layer—Title with the text “Scene Selection”—does not have a (+). That means that text string cannot be a button. NOTE: do not use a prefix for the button text or image layers.

•

(=1) or (=2) or (=3) selects the Highlight Menu Color Set Group (the so-called Subpicture layers I discussed in the previous module). It’s best to use the same number (1, 2, or 3) for items you want to have highlighted using the same color set. That ensures a consistent look to the menu in that all highlight colors will be the same throughout the project.

•

(%) denotes that this graphic is a placeholder for a video thumbnail image or animation. Create the button in one of several ways: by using the shape building tools, by importing a button (be it an image or graphic), or by simply adding some text. Buttons don’t have to look like buttons. You simply define their layer set as a button and Adobe Encore DVD will treat whatever you put there as a button.

Note: Take Care to Not Overlap Button Hot Zones The button elements you create define a “hot zone.” Adobe Encore DVD sets each button’s boundaries at the smallest rectangle that encompasses all elements of a button set. If anyone will play your DVD on a PC (just about a certainty), take care not to have any overlapping hot zones. There is no setting to display hot zones in Photoshop CS, so you simply have to take care as you build your menus. If you do have overlapping hot zones, they’ll show up as you work on the menus in Adobe Encore DVD. You can fix most overlapping problems by dragging button elements farther apart.


27-5

Adobe Digital Video

CURRICULUM GUIDE

6.

You can create buttons that will display video thumbnail images or animation. To do that, create a new layer set using the standard (+) naming convention. Add a layer to it, and name it using the (%) prefix.

7.

It’s best to make video thumbnail buttons that match the aspect ratio of the original video. The easiest way to do that is to make your button the same size as your project window and then scale it proportionately. To scale it, select your button and then select Edit > Transform Path > Scale. As shown in Figure 27.4, that adds the transform parameters to the menu bar. Make sure the Maintain Aspect Ratio chain link icon is unbroken, and drag a button corner to set the new, properly proportioned size.

FIGURE 27.4: Use Transform and its highlighted Maintain Aspect Ratio feature to reduce a full-screen-size button to the size that fits your project (my button size is way too big for most purposes it’s for demonstration only). 8.

You need to add highlight layers to your buttons (Read the following note for an explanation about highlight layers). You can apply them to your existing button layer or start a new one. Make sure you use the (+) button layer set naming convention.


27-6

Adobe Digital Video

CURRICULUM GUIDE

Note: Note: Whys and Wherefores for Button Highlights You know that when you click the arrow keys on your DVD remote, the buttons highlight in some fashion to indicate that if you press the remote’s Enter button, that menu button’s action will take place. That highlight can be any graphic or text and doesn’t have to match the shape, size ,or location of the original button (there are hot spot overlap issues that do play a part in locating highlights, however). You can have up to three highlight layers for each of the subpicture highlight “states”: normal, selected, and activated. Normal is how a button looks when your remote is not on it. For the most part, you don’t need a “normal” highlight layer. “Selected” is when you’ve moved the remote to that button. “Activated” is what happens when you click enter on a button. The activated highlight lasts for only a second or so. 9.

Take a look at Figure 27.5 to see how that works. This is a standard button with a graphic and text. Note that I put a box around its two, subpicture highlight layers (I have turned off their display for the moment). Note that they have a (=#) prefix. That number can be 1, 2, or 3.

FIGURE 27.5: A button with two highlight layers ( I’ve switched off their display). Note the (=1) and (=2) layers naming convention. 10. Take a look at Figure 27.6. In this case, I have turned off the button and its text and displayed only the two highlights. Within Adobe Encore DVD, you can define which is the Selected highlight and which is Activated. In this case, you want the yellow box to be Selected (it will appear when the viewer moves the remote to it) and the blue arrow to be Activated (it will display for a moment after the viewer presses the Enter button).

FIGURE 27.6: The same button with only the highlight layers visible.


27-7

Adobe Digital Video

CURRICULUM GUIDE

11. Finish your menu by creating more buttons or copying the existing ones and putting them in new layers. You also can tap Adobe Encore DVD’s library of buttons, make changes to them and add them to your menu. 12. After saving your menu, you can open Adobe Encore DVD, start a new project or open an existing one, and import your customized menu by selecting File > Import as Menu. If you want to do additional work on your menus, simply select a menu and select Menu > Edit in Photoshop.

Adobe Encore DVD’s tight integration with Photoshop CS is a major selling point for Adobe Encore DVD. It greatly streamlines the menu creation process and ensures your menus will work as expected. It lets you easily customize menus to suit the styles of the videos you use on your DVDs. It’s a simple matter to open an existing Adobe Encore DVD menu in Photoshop, edit it, save it, and then return to Adobe Encore DVD where those changes will be on display. Additionally, by using only a few naming conventions, you can create menus in Photoshop that will perform certain DVD-related tasks (Video buttons and Selected and Activated “states”) with no need for additional input from you.

Q. Why bother adding highlight subpictures to a button? A. If you don’t have at least one subpicture, your viewers will have no way of knowing which button they’ve navigated to as they press the arrow keys on their remote. You need to at least have a Selected highlight to enable normal navigation. Of course, if you want to add “Easter Eggs” to your project, you can create hidden buttons. One way is with a transparent graphic to define the hot spot and no highlights. Q. I named a layer using the (+) convention, but Adobe Encore DVD does not display it as a button. Why? A. You need to name the Layer Set using the (+) prefix, not the layer itself. Then, whatever graphics and text you create in that layer set define the hot spot for that button.

Quiz 1.

What happens if you don’t use the (+) for a button layer set name?

2.

While working in Adobe Encore DVD, you want to fix a menu you created in Photoshop CS. How do you do that?

3.

Why do you need to create lines that are at least 3 pixels in size?


27-8

Adobe Digital Video

CURRICULUM GUIDE

Quiz Answers 1.

Adobe Encore DVD will consider that layer set to be part of the menu’s background, even if its layers have (%) or (=#) prefixes.

2.

Select the menu and select Menu > Edit in Photoshop. Do your editing in Photoshop, save the menu, and return to Adobe Encore DVD. The changes you made will have been applied to the open menu.

3.

Anything less than 3 pixels will appear shaky on many TV screens. This rule-of-thumb also applies to adding strokes to text.

Exercises 1.

The easiest way to see Adobe Encore DVD and Photoshop CS integration is to edit some Adobe Encore DVD menus in Photoshop CS. Select menus with video thumbnail buttons to see how they work.

2.

Import buttons into Photoshop from the Adobe Encore DVD library to see how subpicture overlays are handled. Add a second or third subpicture overlay to a button, then import it into Adobe Encore DVD, drag it onto a menu background, and click the “Show Selected Subpicture Highlights” button at the bottom of the Menu Editor window.

3.

Take graphic elements from a video project and create menus with them. In this way, you preserve the “look” of a project, giving your DVD an even more customized feel.

For complete information about Adobe digital video tools, please visit the Adobe Education Web site: www.adobe.com/education Adobe, the Adobe logo, Adobe Premiere, Adobe Audition, Adobe Encore, Acrobat, After Effects, GoLive, Illustrator, InDesign, Photoshop, and Tools for the New Work are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners. © 2004 Adobe Systems Incorporated. All rights reserved.


27-9