Transcript
TOAST® MENU STYLES DESIGNER’S GUIDE
AUTHOR: Andy Fuchs Ninth Draft
S o n ic S o lution s (c) 2 0 0 5
L a st U pd a ted – 2 0 0 5 - 0 9 - 1 6
CONTENTS Introduction
1
Requirements
1
Examples
1
What Are Toast Menu Styles?
1
Overview
2
Definitions
4
Layouts
4
Layers
4
Buttons
4
Dynamic Text layers
5
Text effects
5
Color mode
6
Reference
7
Search Paths
7
Layer Sets
7
Top-level structure
7
MAIN MENU
8
PLAYLIST MENU (layer set)
9
AUDIO TITLE (layer set)
9
SLIDESHOW MENU (layer set)
9
DEFAULT (layer set)
9
INCLUDE (layer set)
10
Preview (layer)
10
The Layout Layer Set(s)
10
The inside Layer structure
10
Main Menu
11
Playlist menu
11
Shuffle Button
11
SLIDESHOW menu
12
S o n ic S o lution s
To a st Menu Sty les – Des igne r’ s Guide 1
Shuffle Button
12
Buttons
12
Standard Navigation Buttons Button Layer Sets
12 12
PREVIEW
13
Preview Layer
13
HOW TO
15
… create a default layer set
15
Main menu
16
Buttons
17
Music DVD buttons
17
Audio Title
17
File Info
18
S o n ic S o lution s
To a st Menu Sty les – Des igne r’ s Guide 2
Introduction A new feature of Toast 7 is the support of customizable DVD, SVCD and VCD menu styles. These styles support unique backgrounds at menu and sub-menu level, custom button sizes, shapes, numbers, and placement, and custom font types, sizes and placement. Each menu style is based on a multi-layer Photoshop file. To design a new menu style, simply edit the layers in the PSD file. The Toast compositing engine automatically generates the menus using the PSD file template and inserts the appropriate user entered text and button graphics at burn time.
Requirements To design a Toast menu style (i.e. pictures, masks, thumbnail placement, fonts, text positions, etc.) you will need Adobe Photoshop 8.x or newer. You should be familiar with Photoshop terminology and layers. You will also need Toast version 7.x or newer to render the Photoshop files to disc.
Examples Included with this document is sample menu style (called Default.psd), showing the required format, structure and naming conventions necessary to create Toast menu styles. You should use the example file as a template for your own styles and make a backup copy before your first attempts. Please see chapter “HOW TO” for further instructions.
What Are Toast Menu Styles? Each menu style is a multi-layer Photoshop file (.psd) and follows a fixed design-structure (see below). In order to edit these custom menu layers, Adobe Photoshop CS (8.x) is required (because this is the first version of Photoshop which allows for nested layers). The number of layers is limited to 1024. Toast Menu Style Examples:
VIDEO menu with custom shapes
AUDIO menu
PICTURE menu
S o n ic S o lution s
To a st Menu Sty les – Des igne r’ s Guide 1
OVERVIEW A DVD menu provides a way for viewers to select the material they want to see. Most DVDs have at least one menu. It contains buttons that links to a certain chapter or track. If there is more than one menu on the DVD, each menu also has button links to the other menus. Starting with Toast 7, these elements are customizable and their appearance is defined by the layer structure of the Photoshop file. To allow maximum flexibility and ease of use, the menu structure of the Photoshop file follows a naming convention which allows Toast to create dynamic menus ‘on the fly’. The structure itself is made up of a combination of different layer sets and included layers. The top-level layer set contains the 4 main DVD menus:
NAME MAIN MENU
SLIDESHOW MENU
PLAYLIST MENU
AUDIO TITLE
PURPOSE This layer set contains the graphical elements for the top-level DVD’s video menu (and provides button links to all the other menus and photo, video and audio on the disc). This layer set contains the graphical elements for the DVD’s slideshow menu (typically an index of the photos in a slideshow or a list of the scenes in a video). This layer set contains the graphical elements for the DVD’s audio menu (typically a list of audio tracks). This layer set contains the graphical elements for the DVD page which is shown, while an audio track is played back.
The ‘MAIN MENU’ layer set includes all items to be drawn as the standard DVD menu. The ‘SLIDESHOW MENU’ is the starting point of slideshows and a scene index for videos. The ‘PLAYLIST MENU’ lists available audio tracks on a Music DVD. The ‘AUDIO TITLE’ is the menu shown while an audio track is played back. Each of these menus contain one or more layouts (which are also layer sets) and define the actual placements of titles, buttons and other elements. A typical DVD Video will always have a MAIN MENU and optionally will have a SLIDESHOW MENU. A typical Music DVD will always have a MAIN MENU, PLAYLIST MENU and AUDIO TITLE. In addition to these required layer sets, there are three special layer sets which simplify the design process: • default (required) • include • ignore The ‘default’ layer set contains items which the designer wants to be drawn on every menu, such as default background, forward/backward button, etc.. The ‘default’ layer set is also used as ‘fallback’ for the case where a required layer is not found inside one of the menu layer sets. Items inside the ‘default’ layer set can be overridden, by a layer inside of a menu’s layer set. (I.e. if a designer wants to have a different background on the audio menu, they include a layer ‘background’ in the audio layer set.) The ‘include’ layer set contains additional items, the designer wants to be drawn on top of every menu. This could be overlays or copyright info, etc. S o n ic S o lution s
To a st Menu Sty les – Des igne r’ s Guide 2
The ‘ignore’ layer is not parsed by the Toast parser and is a workspace where the designer can keep additional elements or layers. This is a good place to keep information about the style and/or documentation about the used fonts, techniques, etc. and may also be a place to maintain an overlay of the TV-safe dimensions while designing. The visible property of a layer inside one of these layer sets is ignored, as the parser strictly follows the naming convention.
S o n ic S o lution s
To a st Menu Sty les – Des igne r’ s Guide 3
Definitions
LAYOUTS Layouts are included in the four top-level menus (MAIN, SLIDESHOW, PLAYLIST, AUDIO TITLE) and define the actual layout of buttons, titles, backgrounds which make up a menu. A top-level menu can contain as many different layouts as desired, to allow the user to change the appearance of a DVD menu. A number appended to the layout’s name shows Toast the number of buttons (or audio titles) included in the menu. ‘LAYOUT 3’ stands for a Layout containing 3 buttons, ‘LAYOUT 7’ for 7 buttons, etc.. Each layout can have different title, background and navigation element placements, as well as differently sized and shaped buttons.
The Toast parsing engine will automatically select the best LAYOUT depending on the number of videos, slideshows and audio playlists the user has added to their disc project.
LAYERS Every button/background/text consists of one or more layers. If you don’t want anything to be drawn in a certain layer, just leave it empty. IMPORTANT: Do not delete the layer - since Toast expects the layers to be there, even if they are empty. PLEASE NOTE: The visibility property of a layer is ignored. If you don’t want a layer to be drawn, the layer must remain empty. Here's a short list of Photoshop layer properties Toast understands: • Only ART layers are supported. • All layer blend modes of Photoshop 8 are supported. • Layer transparency is respected. • Only text layer effects are supported, other layer effects are ignored (see below ‘Text effects’).
BUTTONS A button is a visual link from the DVD menu to the DVD’s elements (movies, audio tracks, slide show, or playlist). Buttons are made of layer sets containing the button’s graphical elements. Buttons are defined in sequential order. Button 1 is the button that links to the first movie, button 2 links to the second movie, etc.
S o n ic S o lution s
To a st Menu Sty les – Des igne r’ s Guide 4
DYNAMIC TEXT LAYERS A dynamic text layer is a Photoshop text layer that automatically gets replaced by Toast when the DVD menu is created. To ensure that the text doesn’t draw outside the button’s margins, the designer enters some text (any text, such as the XXXX in the Default.psd) which is the maximum length allowed in this field. Toast measures this text and truncates the dynamically inserted text accordingly (as needed).
Maximum width of a button’s text is defined in the layout
In previous versions of Toast, the text was drawn on top of an underlying black text. The offset and color of the underlying text was fixed. With the new version, there are adjustable parameters to allow a nicer arrangement of the text.
TEXT EFFECTS Text font, size and color of the text are defined by the layer’s text-settings. If a specified font is not found on the user’s system, the font is drawn in the default system font (which is ‘Lucida Grande’), using the specified size and color. The underlying text’s settings are defined in the Layer Style dialog window:
If a text-layer has a ‘drop shadow’ effect attached, the Toast parser will extract some information from the layer to draw the text. • The foreground text is drawn with the layer’s font settings and color. • The underlying text is drawn using the parameters from the layer-effect (shadow color, distance and angle). S o n ic S o lution s
To a st Menu Sty les – Des igne r’ s Guide 5
• The size of the underlying text is always the same as the size of the foreground text. (This mimics a Photoshop drop shadow size of 0 (zero). • The underlying text’s color is defined by the shadow color in the Layer Style dialog window. • The underlying text’s offset is defined by the shadow’s distance (offset of the shadow effect). • The direction of the offset is defined by the shadow’s angle.
COLOR MODE Since all color processing in Toast is done using RGB, please set your freshly created Photoshop document’s ‘Proof Setup’ to one of the RGB options.
S o n ic S o lution s
To a st Menu Sty les – Des igne r’ s Guide 6
Reference
SEARCH PATHS In order to enable Toast to find the supplied styles, they need to be stored in certain locations on the user’s computer: Styles accessible to all users: •
Volumes/Library/Application Support/Roxio/TOAST DVD Menu Styles/
•
/TOAST DVD Menu Styles/
Styles accessible to only one user: •
~USERNAME/Library/Application Support/Roxio/TOAST DVD Menu Styles/
LAYER SETS To allow for highest flexibility, a defined layer structure is used, which allows the creation of the various DVD menus in one Photoshop file. The layer structure is a set of nested (hierarchical) layers and contains mandatory and optional layers. Layer sets make it easy to copy parts of a menu style to another style, thus allowing for fast creation of Toast menu styles. When Toast launches, it performs a simple consistency check of the available menus. If the check succeeds, the menu style is added to the pop-up list of available styles in Toast. If your menu style is missing, there is something wrong with the PSD file. A required layer could be missing, or layer name contain a typo. In this case please compare your Photoshop file to the included default style. PLEASE NOTE: Nested layer structures are a feature introduced in Photoshop 8.
TOP-LEVEL STRUCTURE The top-level structure is mandatory and contains folders (layer sets) for each of the (possible) DVD menus alongside with the ‘include’, ‘default’ and ‘ignore’ folders. The ‘—‘ layer sets below are just used as separators. Toast ignores layer names it doesn’t know about.
S o n ic S o lution s
To a st Menu Sty les – Des igne r’ s Guide 7
IMPORTANT: While the ordering of the layer sets is free to the designer, the names are not. Do not rename or delete any of the layers. You should use the sample PSD file included (Default.psd) and make a backup copy before you start editing. The Default.psd contains all required layer sets and layers to successfully create a working DVD menu. Toast performs a validity-check while it starts up and if a required layer is not found, the complete file is rejected. Mandatory layer set names are: MAIN MENU, AUDIO MENU, AUDIO TITLE, SLIDESHOW MENU, DEFAULT Optional layer set names are: INCLUDE, IGNORE Their respective meaning is as follows:
MAIN MENU The MAIN MENU layer set contains the graphical elements for the DVD’s main menu. It contains layouts which carry backgrounds, pictures and buttons. The layout’s name ends with a number (i.e. ‘LAYOUT 3’), which tells Toast how many items to be shown on this menu. The MAIN MENU links to videos, photos and music on the disc, and also to the PLAYLIST sub-menu and the SLIDESHOW sub-menu. This allows you to include a layout containing 3 buttons and an alternative layout containing 5 buttons in the same file. If the user creates a DVD which contains 3 videos, Toast will automatically select the appropriate layout – LAYOUT 3. If the DVD contains 5 videos, Toast will select ‘LAYOUT 5’ (see below ‘The Layout Layer Set(s)’). If the DVD contains more items than the highest Layout, or the number of items do not match a layout’s number of buttons, Toast will take the Layout with the closest number of buttons.
S o n ic , Inc .
To a st Menu Sty les – Des igne r’ s Guide 8
PLAYLIST MENU (LAYER SET) The PLAYLIST MENU layer set contains the graphical elements for the DVD’s audio menu (e.g. a list of musical tracks). The PLAYLIST MENU links to the AUDIO TITLE. This menu contains an additional ‘Shuffle’ button, which plays the current playlist in random order.
AUDIO TITLE (LAYER SET) The AUDIO TITLE layer set contains the graphical elements for the DVD page which is shown while an audio track is played back (e.g. artist, album, track title, album artwork).
SLIDESHOW MENU (LAYER SET) The SLIDESHOW MENU layer set contains the graphical elements for the DVD’s slideshow menu (e.g., a list of thumbnail images which represent a slideshow title on the disc). The SLIDESHOW MENU links to individual images in a slideshow. This menu contains an additional ‘Shuffle’ button, which which plays the current slideshow in random order. Additionally the SLIDESHOW MENU serves as scene index menu (chapter menu), if the ‘Create Chapter Menus’ userinterface option is selected in Toast. In this case, thumbnails of the video will be created and positioned according to this layout. These thumbnails link to chapter markers in the video on the disc.
DEFAULT (LAYER SET) The DEFAULT layer set contains the default graphical elements which are required by all menus. It serves as a ‘fallback’ in case a required layer is not found in one of the layers above. This layer set typically contains the background image for all DVD menus, as well as the navigation buttons: • background • forward • forward selected • backward • backward selected • upward • upward selected
S o n ic S o lution s
To a st Menu Sty les – Des igne r’ s Guide 9
NOTE: ‘selected’ refers to the default 2-bit highlighting of a button (when in normal quality mode).
INCLUDE (LAYER SET) The INCLUDE layer set contains graphical elements which are drawn on top of every DVD menu, such as a logo or copyright notice. This is a convenient way for the style designer to add his own copyright information in a single place.
PREVIEW (LAYER) Additionally there is a PREVIEW layer at the top level of the Photoshop file. This layer is used in Toast's Format Options popup menu (or dialog window), when a user selects the style. The recommended size of the preview layer is: 256x192 pixels (Toast will scale the layer if it has a different size).
THE LAYOUT LAYER SET(S) The four main Top-level Layer sets contain the actual LAYOUT Layer Sets. These LAYOUT layer sets are used to determine which arrangement of elements is used. For example, LAYOUT 3 defines a layout containing three buttons. Any number of layouts can be included. Every layout should have its own TITLE and a variable number of BUTTONS. (Tip: If you don’t want to have a title in the menu, simply put no ‘X’ into the text field). It can also have its own BACKGROUND and navigation buttons (forward, backward, etc.) which - if included in a layout layer set - will be drawn instead of the background (or navigation buttons) located in DEFAULT.
THE INSIDE LAYER STRUCTURE The inside layer structure contains all elements needed by Toast to create the DVD menu. (No additional files are required) The main elements are: • BUTTON 1... x
-
(mandatory layer set) As many items as needed to make up the menu.
S o n ic , Inc .
To a st Menu Sty les – Des igne r’ s Guide 10
• TITLE
-
• BACKGROUND -
(optional) The menu’s title (typically a graphic layer, but can also be a text layer.) (optional) The DVD’s default background.
MAIN MENU The MAIN MENU layer set contains the graphical elements for the DVD’s video menu. The MAIN MENU requires buttons (layer sets), to allow creating a Music DVD. These buttons contain a slightly reduced set of layers compared to the other buttons in the main menu. Typically they would contain a button background, a text (which gets localized to 'Artists', 'Albums', 'Songs' in the user’s default system language.), a frame (currently mostly unused, but there for future enhancement and backward compatibility reasons), and a highlight (frame selected).
• ARTISTS
-
Shows the artists (of the contained music tracks) in the audio playlist menu.
• ALBUMS
-
Shows the albums in the audio playlist menu.
• SONGS
-
Shows the songs in the audio playlist menu (default.)
PLAYLIST MENU The PLAYLIST MENU layer set contains the graphical elements for the DVD’s audio menu. SHUFFLE BUTTON
In the PLAYLIST MENU there is an additional SHUFFLE button (layer set), to allow the user to playback the current playlist in shuffle mode.
S o n ic S o lution s
To a st Menu Sty les – Des igne r’ s Guide 11
SLIDESHOW MENU The SLIDESHOW MENU layer set contains the graphical elements for the DVD’s slideshow menu. SHUFFLE BUTTON
In the SLIDESHOW MENU there’s an additional SHUFFLE button (layer set), to allow the user to playback the pictures of the current album in shuffle mode.
BUTTONS There are two different types of buttons: STANDARD NAVIGATION BUTTONS
The standard navigation buttons (forward, backward, upward) are located in the DEFAULT layer set in the top-level of the Photoshop file. They draw onto every menu and are needed to enable basic navigation throughout the disc. They act like their equivalent on a DVD player’s remote control. BUTTON LAYER SETS
Buttons are layer sets containing graphical elements from which the button can be recreated by Toast. A button is the DVD navigation element used to select a certain video, image or audio track, as well as advancing to the next menu or track. These elements typically are:
S o n ic , Inc .
To a st Menu Sty les – Des igne r’ s Guide 12
Button name
Purpose
background
Draws additional graphics (i.e. a shadow)
text 1.... x
Dynamic text
image
Gets replaced by the movie's thumbnail
frame
Overlay (i.e. to add reflection effects to a thumbnail)
frame selected
VCD Number
2-bit highlight when a button is pressed (This gives the 'shape' of the selection, which then gets drawn by the DVD player.) If the user creates a Video CD this dynamic text is filled in with the track number of the current video (only MAIN menu)
The submenu buttons for Music DVD submenus 'Artist', 'Albums' and 'Songs', don't contain the 'image' and 'VCD Number' layers, because the submenus neither have an image or thumbnail, nor do they render on a VCD, so these layers are unneeded. A button itself can have any shape you like. To create sophisticated buttons, there are several layers available, which you can use to draw graphics behind and/or in front of the thumbnail. These graphics may contain transparency or masks, in order to create a translucent effect. Within the same menu style, you can have layouts for various button configurations. For example, you can have a 1 button layout, a 2 button layout and 6 button layout. Depending on the number of videos or slideshows the user adds to the Toast window, the appropriate layout will be selected by Toast at burn time.
PREVIEW Toast users select which style to use either in the Formats drawer or the More Options sheet. Toast will show a preview of the currently selected style as a visual feedback to the user. These previews are important elements, because without them the user can’t get an idea of how the DVD will look. Toast uses the preview layer to create the thumbnail preview: PREVIEW LAYER
The top-level of the Photoshop file contains a PREVIEW Layer, which is a single art-layer containing the preview artwork. This is just a single art-layer. No text, blend modes or effects are supported here, so make sure it only contains the graphics. We recommend using a size of 256x192 pixels (4:3), but you can use any other size. S o n ic S o lution s
To a st Menu Sty les – Des igne r’ s Guide 13
For your convenience, a ‘preview area’ layer in this size can be found in the ‘IGNORE’ layer set. If there is nothing in the preview layer, Toast will try to find a Photoshop preview or composite the MAIN MENU and create a preview by itself. Obviously this is the slowest way to create a preview and will lead to a significant delay when first selecting the Video options – especially, if a couple of styles are found in Toast’s search paths.
S o n ic , Inc .
To a st Menu Sty les – Des igne r’ s Guide 14
HOW TO You should use the included Photoshop 8.x file (Default.psd) as a starting point to create your own menu style. Although Photoshop 7 can open Photoshop 8 files, please make sure you opened the file with Photoshop 8.x or newer, since otherwise the nested layer structure in the Photoshop document is lost and TOAST will be unable to process the file. PLEASE NOTE: Toast will verify all included menu styles when launching. If a menu style doesn’t conform to the specifications, it will not be accepted and will not show up in the menu styles menu. If you have duplicate names, please verify if there are duplicate files in the different search locations (see above 'Search Paths')
Here are the steps required in order to create a functional menu style for Toast.
… CREATE A DEFAULT LAYER SET
1. Open the included Photoshop document and locate the layer set ‘DEFAULT’ at the bottom of the layers window. (please ensure that the layer set’s visibility property is set to ON.) 2. You will find the most basic menu items in the layer set: • background S o n ic S o lution s
To a st Menu Sty les – Des igne r’ s Guide 15
• forward (navigation button) • backward (navigation button) • upward (navigation button) • forward selected (2-bit highlight for the forward button) • backward selected (2-bit highlight for the backward button) • upward selected (2-bit highlight for the upward button) Copy your own graphics into the layers and close the folder/layer set.
PLEASE NOTE: You should keep a distance of at least 8 pixels between the highlight frame and the next button. Otherwise the highlight might overlap the next button, which results in a wrong highlighting area.
MAIN MENU Now, open the MAIN MENU layer set, where you'll find all elements required to create the various layouts. (Layout 3 means: A layout with 3 buttons). Please modify the layers to your own needs. (Not all layers are required - please see the discussion above to find out which layers need modification). You will find a LAYOUT layer set (Layout 3 with 3 buttons plus 3 additional buttons for the creation of Music DVD, inside.) Inside this layer set the layout TITLE is located as the uppermost layer. Note: Please keep in mind, that Toast always draws text last. That means, the sequence of Photoshop’s art layers is respected, while text is drawn at the very last. You can not overlay text with a graphic (i.e. thumbnail.)
S o n ic , Inc .
To a st Menu Sty les – Des igne r’ s Guide 16
BUTTONS The BUTTON layer set contains all of the button elements: The IMAGE layer will get replaced with the later thumbnail. Just place any (black) rectangle into this layer. The size of the rectangle defines the size of the thumbnail. You can also apply a layer mask. Imagine you want to have a ‘see through’ effect in the thumbnail. Just create a layer mask for the IMAGE layer and create the desired effect on your black rectangle. The same effect will later be applied to the thumbnail. Don’t get confused with the BACKGROUND layer here. This one draws the background behind the thumbnail. That way you can create underlying graphics (i.e. shadow effects) for each thumbnail separately
Using the FRAME layer you can draw graphics on TOP of the thumbnail (i.e. you might want to create a layout which looks as if the thumbnail is located inside a car and you watch it from the parking lot.) Repeat the steps above for all of the other layer sets. (except Audio Title - see below)
MUSIC DVD BUTTONS If you wish to create a Music DVD, please also modify the ARTISTS, ALBUMS and SONGS buttons in the main-menu. They allow navigation to their respective sub-menus on a Music DVD.
They contain a somewhat reduced set of layers, as playlists do not include thumbnails.
AUDIO TITLE The only exception to this approach is the Audio Title. Since there is only one audio title playing at once, the menu behaves a little different. The buttons inside the Audio Title’s LAYOUT layer alternate. That means, the first track is after ‘LAYOUT 1’, the second track after ‘LAYOUT 2’, the third track ‘LAYOUT 1’ etc.
elg ato s y s tems menus
customiz a b le DVD
17
PLEASE NOTE: Since all color processing in Toast is done using RGB, please ensure that your Photoshop document’s ‘Proof Setup’ is set to one of the RGB options.
FILE INFO After you’re done, go to the ‘File Info’ menu and enter a descriptive title into the ‘Document Title’ field of the dialog window that appears. This is the title that appears in the Toast user-interface menu style option.
AUTO-UPDATE
If you want to take advantage of TOAST's internal update mechanism, you could add two more tokens to the file-info dialog: •
identifier: Allows to add an unique identifier to the style. This identifier can be anything (unique), which can be used to identify your style (instead of using the document title).
•
version:
The version is a standard version number, where the numbering scheme is 1.0, 1.1, 1.2 etc… by default (but you could also use integer values instead, i.e. 1000, 1001, 1002).
You can quickly verify, if you entered valid values, if you go to the 'Advanced' – setting in the File-Info dialog and open 'Dublin Core Properties…' and there 'subject (bag container)'. Here should the entered tokens show up (see image below).
TOAST will then use this information when updating the Styles folder(s) and will make sure that only the latest file of a certain id-group will show up (wether they have the same filename or not ). S o n ic , Inc .
To a st Menu Sty les – Des igne r’ s Guide 18
