Using Photoshop to create menus



About creating menus in Photoshop

Encore is designed to work directly with Adobe Photoshop to build and edit menus and buttons. You can create entire menus or elements for menus (such as buttons and backgrounds) in Photoshop and import them directly into Encore. You can also edit Encore menus at any time in Photoshop, and have the changes updated immediately.

Menus, including the menus created in Encore, use the Photoshop PSD file format. All layers and layer sets you create in Photoshop remain intact when you import them into a project. If you follow the layer-naming convention, Encore automatically recognizes button sets, button subpictures, replacement layers, and video thumbnails. After importing, you can edit or modify the menu, or return to Photoshop to fine-tune it using the extensive design tools in Photoshop.
Visit Resource Center on the Adobe website to view a tutorial about editing menus in Photoshop.

When creating menus in Photoshop, consider the following:

Menu size
Set the size and pixel aspect ratio of your background images and menus to match the frame dimensions and pixel aspect ratio of your TV standard. Photoshop includes preset image sizes for digital video projects.

Format

Frame dimensions (in pixels)

Pixel aspect ratio

Equivalent frame dimensions in square pixels

NTSC fullscreen (standard definition)

720 x 480

0.9

720 x 534

NTSC widescreen (standard definition)

720 x 480

1.2

854 x 480

PAL fullscreen (standard definition)

720 x 576

1.07

768 x 576

PAL widescreen (standard definition)

720 x 576

1.42

1024 x 576

High-definition formats

1280 x 720

1.0

1280 x 720

 

1440 x 1080

1.33

1920 x 1080

 

1920 x 1080

1.0

1920 x 1080

Button size
Create buttons at least 70 x 60 pixels in size to guarantee their visibility on a television.

Number of buttons
Include no more than 36 buttons for a fullscreen (4:3 aspect ratio) menu or 18 buttons for a widescreen (16:9) aspect ratio.

Graphic elements
Use vector shapes and masks, rather than bitmaps, where possible, because scaling these elements does not affect their quality. If creating pixelated content, such as buttons and logos, make sure that you create them at the largest size needed for the disc. If you want to resize some elements, it is better to scale a pixelated object down, rather than up. (Scaling images up can cause quality loss; scaling images down does not.)

RGB color
Create your images using RGB color. Convert any CMYK images to RGB before importing them into Encore.

NTSC colors
Use only NTSC-safe colors if you want to play your project on an NTSC television display. You can create colors in your graphics application that are beyond the color range that NTSC televisions can display. These colors can cause an unwanted halo effect. Use RGB values from 0 through 255.

Horizontal lines
Set lines at three pixels or greater. Horizontal lines thinner than three pixels flicker when displayed on a television screen.

Font size
Use a font size of 20 points or greater to ensure that the viewer can comfortably read titles and button text.

For a video tutorial on creating menus in Photoshop, see www.adobe.com/go/vid0241.

Layer name prefixes for menus

For Encore to recognize the components of a menu from Photoshop, add predefined prefixes to the layer names. The prefixes identify the layers as button sets, video thumbnails, replacement layers, and button subpictures. This lets you import a finished menu that is ready to use in the project. You can also manipulate and change elements from within Encore.

Instead of creating menus from scratch in Photoshop and adding all the prefixes manually, you may want to open a menu template that’s similar to the one you want to create, save it as a Photoshop file, and then edit the exported file in Photoshop.
View full size graphic
Layers panel in Photoshop (left) compared to the same layers in Layers panel in Encore (right)

The following layer-name prefixes identify the components of your menu.

Menu item

Photoshop component

Layer-name prefix

Example

Button Name

Layer set that contains button components

(+)

(+)Daisy button 1

Chapter Button

Layer set that links to the chapter in a timeline or slide show when chapter indexes are created

See About chapter indexes

(+#)

(+#)Chapter 1

Next Button

Layer set that links to the next submenu when chapter indexes are created

(+>)

(+>)Next

Previous Button

Layer set that links to the previous submenu when chapter indexes are created

(+<)

(+<)Previous

Main Button

Layer set that links to the main menu when chapter indexes are created

(+^)

(+^)Main Menu

Button Text

Text layers within the button layer set

 

Daisy button

Button Image

Image layers within the button layer set

 

Daisy image

Button Subpictures (optional)

Single-color image layers. Each layer represents one color of the three-color button subpictures

See Create subpictures in Photoshop

(=1)

(=2)

(=3)

(=1)Text highlight

(=2)Daisy outline

(=3)Check mark

Video Thumbnail (optional)

Image layer within the layer set that serves as a placeholder for video

See Create video thumbnail buttons

(%)

(%)Daisy thumbnail

Replacement Layer

Layer that acts as a drop zone for images

See About replacement layers

(!)

(!)Daisy image

Other design elements or text (such as logo or menu title)

Individual layer

None required

Summer Flowers

Edit a menu in Photoshop

As your project evolves, you may want to change elements in a menu. Encore is designed to work directly with Photoshop. Without closing the project, you can jump to Photoshop to refine any menu, even menus created in Encore. Once you save the changes in Photoshop, the changes automatically appear in Encore.

  1. Select the menu that you want to edit in either the Project or Menus panel.

  2. Choose Edit > Edit Menu In Photoshop, or click the Edit Menu In Photoshop button  in the Tools panel.

    Photoshop starts, displaying the selected menu.

  3. Make changes as necessary.

  4. In Photoshop, choose File > Save, and then File > Close.

Photoshop saves the file to the project folder. It does not overwrite the original file that you imported into your project.

Note: When you import a menu into Encore, it creates a copy of the menu. The Edit Menu In Photoshop command opens this copy, not the original file. Photoshop saves any changes to the copy. If you want to update the original as well, be sure to first save the copy so that your project contains the revised menu. Once the copy is saved, you can also save changes to the original file by choosing File > Save As In Photoshop or Menu > Save Menu As File In Encore.