Beth Cataldo, February 6, 2007

Editing 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. The most recent version of Photoshop does allow you to create a new file with the non-square pixel at the correct aspect ratio.

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. In Photoshop CS2, you can now use the setup that compensates for the video aspect ratio and pixel size. Just choose New>NTSC DV 720X480 and you have the correct pixel and aspect ratio.

2. This will also bring up the title and active safe guides so that you can design within the appropriate guidelines for Broadcast.

3. If you are working with an older version of Photoshop. To get the correct aspect ratio to work with the TV pixel size, set up your PhotoShop menu to 720X534.

 

4. Once you are done designing, you have to resize your workspace to 720X480 by choosing IMAGE>IMAGE SIZE. You will need to deselect the CONSTRAIN PROPORTIONS check box and change it from 534 to 480.

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

5. NOTE: DVDSP 4.0 will actually resize your still image documents, too. However, Photoshop is better at interpolating the images so you may find the the DVDSP resized image has artifacting. Best bet is to do that work in Photoshop.

For Older Versions of Photoshop non-Photoshop applications:
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.

More good news: If you use the New>NTSC DV 720X480 to set up your file, you will see the active and title safe areas that Photoshop has automatically set up for you.


Design your Menu
button states1. Bring your graphics into PhotoShop. Eventually, 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 them 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.

3. 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.

 

 


Design Tips:

  • Don't forget to design in the Title 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. If you are designing for view only on a computer, you don't need to worry about these safe zones because computer monitors display at full dimensions.
  • Make horizontal lines at least 3 pixels wide so that they won’t flicker on the TV screen. To further avoid flicker, you can use the Gaussian blur filter to soften the edges of any horizontal or vertical lines. Use a small radius on this blur. This will give the lines a softer look on a TV screen and help keep the flicker out of the eye's view.
  • Use sans-serif fonts over serif fonts to avoid flicker. Also, use a type size larger than 16 point. Usually 24 point looks good for buttons. Titles would be even larger.
  • Apply a drop shadow, inner- or outer-glow or stroke will also help soften the edge of the type and lesson the flicker.
  • You can have up to 36 buttons on a screen.
  • As in any good design, keep variation of fonts to a minimum.
  • 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.

< previous | home>