Creating the graphics, menus and buttons that accompany most DVD-Video projects is usually very straightforward. But there are rules you must follow in order for the graphics documents to import correctly into the DVD-Studio Pro software and to have their layers interpreted properly. Also, failure to follow these rules can result in graphics, menus and subpicture button highlights that do not display properly.

The following set of instructions are based on readings and mostly on personal experiences for what does and does not work between Photoshop and DVD-Studio Pro.

1. Basic Photoshop graphic file settings.
2. Create a new graphic or menu.
3. Create common background or base graphic elements.
4. Create menus using the Subpicture Highlight feature built into the DVD-Video specification and DVD-Studio Pro (most common method)
5. Create menus using independent, Unique Button State graphics (prettier, but slower user experience)
6. Render-Down Graphic and Text Effects in their respective layers.
7. Resize the Rendered Down File for MPEG-2 Compliancy
8. Import Photoshop Files into DVD Studio Pro

1. BASIC PHOTOSHOP GRAPHIC FILE SETTINGS:

• 24 bit mode
• RGB or YUV color space, not CMYK
• Only use uncompressed graphic file source materials, e.g., not JPEGs
• Use NTSC or PAL safe colors (more limited than computers)
  • Keep saturation below 90%
  • Keep luminance below 80%
  • Keep RGB color values below 230
• Use 72 ppi. 96ppi or 300 ppi won't hurt, but is empty amplification for display purposes on computers and television.
• Account for the non-square pixels used in MPEG-2 when designing graphics on square pixel computer screens (see instructions below)
• Account for Television Safe Area, in which the outside 10 percent of your graphic file real estate will be overscanned and hidden beneath a consumer television set's housing. In other words, avoid placing critical buttons and words along the edges of your graphic file as seen on your computer screen (see instructions below)
• Account for the Interlaced Scanning found in NTSC and PAL television sets. To avoid flickering, make sure all fine lines are at least 2 pixels wide and that any width is defined in multiples of 2 pixels.
• Use larger than expected font sizes. 24 point fonts are best for television readability. A 14 point font, bold, is the absolute minimum and is likely to result in artifacting. Don't be lured into using small fonts because they look good on your computer monitor.
• Anti-alias all text to avoid sharp edges.
• A finished graphic file should have a slight "blur filter" added to it in order to soften any sharp edges and color transitions. A Photoshop Gaussian blur of 0.5 to 1 is a good choice. The finished image may have a slight softness to it, but it will reproduce well on television displays.

2. CREATE A NEW DOCUMENT IN PHOTOSHOP:

FOR 4:3 ASPECT RATIO PROJECTS:

• In Photoshop's New File Dialog Window, specify the following Image Size dimensions:

TV SYSTEM	NEW FILE WIDTH	NEW FILE HEIGHT
NTSC	720	540
PAL	768	576

These dimensions are used while creating menu elements on a computer's square-pixel display.

When the menu and its layers are finished, the file's Image Size is adjusted to 720x480 (NTSC) or 720x576 (PAL) for MPEG-2 compliancy.

For additional information on final resizing, refer to the section Resize the Rendered-Down File for MPEG Compliancy.

• 72 pixels/inch
• RGB Color Space
• White Background (to be retained throughout the process)

  NTSC NEW FILE DIMENSIONS
  

 

 

FOR 16:9 ASPECT RATIO PROJECTS:

• In Photoshop's New File Dialog Window, specify the following Image Size dimensions:

TV SYSTEM	NEW FILE WIDTH	NEW FILE HEIGHT
NTSC	854	480
PAL	1024	576

These dimensions are used while creating menu elements on a computer's square-pixel display.

When the menu and its layers are finished, the file's Image Size is adjusted to 720x480 (NTSC) or 720x576 (PAL) for MPEG-2 compliancy.

For additional information on final resizing, refer to the section Resize the Rendered-Down File for MPEG Compliancy.

• 72 pixels/inch
• RGB Color Space
• White Background (to be retained throughout the process)

 

3. CREATE COMMON BACKGROUND OR BASE GRAPHIC ELEMENTS:

Graphic elements which do not change in a menu, such as background colors or logos, can be created as layers in Photoshop. These common elements must be "Merged Down" or flattened and fixed into a single layer to make the DVD authoring process somewhat less confusing later on.

Often, the "Normal" state of a button (not selected, not activated) can be included in the common or base graphics layer.

• Be sure all graphic objects and text are within the TV Safety Area (10% indented from each side of the frame). DVDs are most often played on regular TV sets, and thus require consideration of Safety Area.
• To create a TV Safety Area Window within the image, use the Photoshop menu option View > Show Rulers and drag Blue Lines from the Rulers into the image for all four sides to circumscribe the TV Safety Area
• For an NTSC image file, the Blue Lines should appear approximately as follows:
  • Left margin at 50
  • Right margin at 670
  • Top margin at 40
  • Bottom margin at 500

NTSC SAFETY AREA

 

Once you have created your base graphic layers, it is time to begin creating buttons or button states. There are two methods: Subpicture Highlights or Unique Button Graphics.

4. CREATE MENUS USING SUBPICTURE HIGHLIGHTS:

The most often employed method for showing the NORMAL, SELECTED, and ACTIVATED states of a button is to use the Subpicture Highlights functionality of DVD-Studio Pro.

In general, using simple Highights to display button states rather than different graphics layers with Unique Button States is a faster navigation experience when playing back a DVD. You will need to evaluate the trade-offs.

• You can use your original Photoshop file to create the masks used to generate Subpicture Highlights in DVD-Studio Pro. Use these properties:
  1. Create a layer with a White Background.
  2. Align and create Subpicture Highlight areas using the color Black.
  3. These Subpicture Highlight layers are used as a “mask” directly from within DVD Studio Pro. The White color is dropped out. The Black areas can be colorized by DVD Studio Pro to represent the different button states of NORMAL, SELECTED and ACTIVATED.
     

 

SUBPICTURE HIGHLIGHTS THAT SURROUND ROUND BUTTONS


 

SUBPICTURE HIGHLIGHTS THAT COLORIZE MENU TEXT









• The Subpicture Highlights file must have a Photoshop background layer that is white, with no other picture elements.
• In generating the black outlines, you can use your original Photoshop graphic effects file to make sure placement and sizing of the black outlines is accurate.
• You may save the Button Highlights layer(s) as its own Photoshop file or simply specifiy those layers in DVD-Studio Pro.
• All Subpicture Highlights files must also be resized.

5. CREATE MENUS USING UNIQUE BUTTON STATE GRAPHICS:

Buttons in a DVD Menu have three possible graphical states:

NORMAL: the base state of a button. For example…





SELECTED: a different look if the cursor is over a button. For example…





ACTIVATED: a third look to show that the button has been engaged in order to branch to another part of the DVD. For example…

Using the full power of Photoshop, you can create these three button states however you wish

1. Create each button state in its own layer, using graphic layer effects as needed.
2. Group the button states together, i.e., all NORMALS together, all SELECTED together, and all ACTIVATED states together(see figure below).
3. Create a “separation layer” between the grouped states (see figure below)
4. Name each “separation layer” with a single hyphen “ - “. In DVD Studio pro, these separation layers will make multiple layer groups easier to find and see.
5. Within a group, organize the buttons in the same order they will appear on the DVD Menu, meaning Left-to-Right, Top-to-Bottom.
   
   

6. RENDER-DOWN GRAPHIC AND TEXT EFFECTS IN THEIR RESPECTIVE LAYERS:

You may have spent lots of time making pretty drop shadows on text elements and beveled edges on buttons in the base graphic layers. However, unless these effects are rendered-down (flattened and fixed) within their respective layers, the effects WILL NOT carry forward into DVD-Studio Pro.

This render-down of the base graphic and text elements or unique button states must take place before importing the Photoshop file into DVD-Studio Pro. For flexibility in your design and creation process, the flattening and fixing of individual layers should wait until all image elements are to your liking. Once a layer has been flattened and fixed, the effects layers are no longer accessible for editing.

There is a Photoshop menu function called LAYER > RASTERIZE > LAYER. Sorry, it doesn't do what we want it to do.

We have to conduct a more manual method of flattening and fixing each graphic or text layer. It may be that your base graphic was created with a dozen layers, but these layers need to rendered-down individually, or perhaps merged-down into a single layer and then rendered-down.

Here are the step-by-step instructions for the method that has worked consistently for me in order to make sure my drop shadows and beveled edges show up in the final DVD-Studio Pro project.

1. Create a temporary, dummy layer beneath the desired graphic layer.
   • To begin, select the layer just below the desired graphic layer so it is highlighted.
   • From the Layers Window pull down menu, select NEW LAYER.

     

   • Now there will be a dummy layer underneath the graphics layer you want to render-down.

   
   
   
   
   

2. Scan through all of the layers and make sure only the desired graphics layer plus its dummy layer are VISIBLE. Deselect the “eyeball” from ALL other layers. Engage the eyeball for our two layers.
3. Select/highlight the graphics layer, not the dummy layer. This will make sure the merged layers retain the original name of the graphics layer, not the dummy layer, once they are rendered-down. I've tried using the MERGE DOWN menu item in the Layers options, but it never retained the original name of the desired graphics layer. Experiment on your own.
   
   
   
   
4. From the Layers Menu, select the option MERGE VISIBLE
   
   
   
   
   
5. The two layers are merged and the graphics effects are rendered down. You can no longer see the "Effects" layer and the new merged layer has retained the name of your original, desired graphics layer.
   
   
   
   
6. Conduct the same merge and render-visible behavior for each graphic layer. Be careful to have only the desired layers visible before using the command MERGE VISIBLE.
7. The final look of the layers has all the graphics rendered down and the file's background layer is a basic white with no other image content. This is exactly how DVD Studio Pro is able use the layers and retain the effects you create in Photoshop.

BEFORE & AFTER: THE BASE GRAPHIC LAYER

 

BEFORE & AFTER: UNIQUE BUTTON STATES

After all graphics layers are rendered-down as needed, do a SAVE AS with the file in order to save this rendered down version of the layers, but retain the original Photoshop file with all its graphics effects layers in case you need to correct the image in some way.

 

7. RESIZE THE RENDERED DOWN FILE FOR MPEG-2 COMPLIANCY:

Before the Photoshop file can be used in DVD-Studio Pro, the Image Dimensions must be corrected to accommodate the non-square pixel specification of MPEG-2.

Even though round objects will look squished after this resizing, the image will appear normal once previewed in DVD-Studio Pro or displayed from a DVD-Video disc.

• With the Rendered Down file that was just saved, use the Photoshop menu option IMAGE > IMAGE SIZE to change the pixel height of the file from 540 to 480 (NTSC) or the pixel width to 720x576 (PAL).

TV SYSTEM		ORIGINAL FILE WIDTH	ORIGINAL FILE HEIGHT		RESIZED FILE WIDTH	RESIZED FILE HEIGHT
NTSC		720	540		720	480
PAL		768	576		720	576

RESIZING FOR NTSC

• Be sure to DESELECT the CONSTRAIN PROPORTIONS check box. Otherwise, during resizing, the width and height of the image will retain its original proportions...which defeats the whole purpose of accommodating square vs non-square pixels.
  
  
  
  
• The Photoshop file will look squished. This is OK. You have converted the file from the Square pixels of a computer screen to the Non-Square or Rectangular pixels of MPEG-2 or a TV screen.
• Do a SAVE AS on this squished document and perhaps change its name to include its new screen dimensions, e.g., MainMenu_720x480.psd.
• This new file will be used directly, all layers included, in the DVD Studio Pro authoring software. That software allows you to select what layers are used for what operation, menu or button.

8. IMPORT PHOTOSHOP FILES INTO DVD-STUDIO PRO:

With all graphics layers flattened and fixed, the resized Photoshop file is imported by the DVD-Studio Pro software into a DVD project. Once imported, the file can be accessed to create menus and graphics anywhere in the project. DVD-Studio Pro allows you to select which layers in the Photoshop file are to be used to display a menu or graphic. Layers designed as Subpicture Highlights or Unique Button States can also be selected in the appropriate area of the various Property Inspectors found in DVD-Studio Pro.