Beth Cataldo, February 21, 2004

 

Creating Menus with Photoshop


DVD Studio Pro uses two types of menus: PhotoShop layered menus and Highlight Menus. You can design the buttons in Photoshop menus in a more graphically engaging manner. Highlight menus allow you to do motion menus and add audio to your menu.

Although DVDSP imports PhotoShop menus, they will be turned into MPEG-2 stills when the project is output. For that reason, you need to stick to the regular NTSC color saturation and title-safe area when you're design in PhotoShop.

Another detail you have to keep in mind is that PhotoShop uses square pixels (with an aspect ratio of 1:1) and televisions use non-square pixels (with an aspect ratio of 0.9:1). When you’re designing menus for the TV, you need to design PhotoShop graphics at a larger resolution and then resize them for the dimensions of the video standard. I explain below how to do that.

MENU BASICS

When you’re designing menus for DVDSP, you need to consider three button states: normal, selected and activated state. These are similar to rollovers on the web (over and selected states).

Layers are used to specify images for the background and the selected and activated states. I would recommend using a separate PSD for each menu, though you could put all your menus in one PhotoShop document.

Photoshop effect layers do not work with DVD Studio Pro. Be sure to flatten any effects layer before using them in DVDSP.

Creating Menus

photoshop setup1. To get the correct aspect ratio to work with the TV pixel size, set up your PhotoShop menu to 720X534.

2. Photoshop 7.0 has an automatic setup in the New document dialogue box for easy recall.

3. You want to resize your workspace to 720X480 by choosing IMAGE>IMAGE SIZE. You will need to deselect the CONSTRAIN PROPORTIONS check box.

You document will look squished, but when you import it into DVDSP, it will be corrected.








Create the title safe area
1. To prevent your video or graphics from being cropped when played on a TV, you need to set up a title safe area. This area is set by a rectangle about 10 percent from each edge. In PhotoShop terms, that’s 72 pixels from the left and right edges and 48 pixels from the top and bottom.
title safe image
2. If you’re designing menus at 720X534, the title safe area is 54 pixels in from the top and bottom edges of the document. Once you’ve resized the document, the title safe area is reduced to the original dimensions described above. Use guides in PhotoShop to mark these boundaries.

 




Design your Menu
button states1. Bring your graphics into PhotoShop. Eventurally, you'll want to put all your design elements on the background layer. You will then put the images for the button states on separate layers so you can choose then once you get into DVDSP.

2 . Name your layers according to their function. The three button states you need to use are Normal, Active and Select state. If your normal state button is always visible, you can merge it with your background to save on layers.

7. Create a layer with a double hyphen – to separate the layers from one another. This will help you navigate through your different selections once it’s in DVDSP.

Working with Layer Styles
If you’re going to use Photoshop Layer styles (drop shadows, embossing and glows), you need to flatten them before they are brought into DVDSP. You are going to flatten the layer style onto the layer it’s applied to. Do not flatten the Photoshop document.

To do this
1 . Create a New Layer and drag it underneath the layer containing the layer style.
2 . Select the layer with the layer style.
3 . From the layers palette, choose Merge Down.
4 . The layer style is flattened into the new layer below. The effects will show up now when you import the file in DVDSP.

Apply the PhotoShop NTSC Colors Filter
NTSC filterTelevisions produce millions of fewer colors than Photoshop can produce. Saturated colors such as red, fluorescent colors and pure white and black cause colors to bleed into each other.

But there’s a Photoshop filter that adjusts colors to fit within the range that can be safely displayed on TVs. This is called the NTSC Colors Filter. After you finish designing your menu graphics, apply the NTSC Colors filter to each layer in your Photoshop document.

1. Choose your layer. Choose Select>All (command + A).
2 . Choose Filter>Video>NTSC colors.
3 . You need to select and apply the filter to each layer.


Design Tips:

  • Don't forget to design in the NTSC Safe area. Otherwise, your image will be cut off on the TV screen. You should set up your guides to mark off this area in your document.
  • Make horizontal lines taller than 1 pixel so that they won’t flicker on the TV screen
  • Consider any kind of shape for your buttons.
  • If you link a Photoshop file to a DVDSP project and then later reorder or add layers to the file, DVDSP can relink layers to their assigned buttons or menu as long as the layer names are the same.
  • You can design with any resolution in Photoshop. Ultimately, these files will be saved at 72dpi. If you use PICT files, though, you must use 72dpi.
  • Do not use parenthesis in your Photoshop layer or DVDSP won’t be able to read it.
  • DVDSP accepts all sorts of file formats, including PSD, PICT, BMP, JPEG, GIF, PNG, QuickTime image files, TGAS and TIFF files.

< home | next>