dan
14th February 2003, 01:33
Making Widescreen Menus for Scenarist (NTSC only)
you need:
Adobe Photoshop (any version) for still menus
Video Editing/Compositing Software that offers control for pixel aspect ratios (i.e. Adobe Premiere or Adobe After Effects among others) for motion menus (optional)
Sonic Scenarist v.2+
some experience using both Scenarist and Photoshop
to read this http://www.doom9.org/mpg/photoshop.htm to get a basic understanding of this all
Step 0: The basics of DVD display
First, it's important to understand that the ultimate display device for your menus will probably be a television, so pixel aspect ratio comes into play. This will affect the resolution at which you author the menus. This is why you'll see resolutions such as 720 x 540 for some steps even though 720 x 480 is considered "DVD resolution". There are easier ways than specifying pixel aspect ratios in Premiere, but this way is the "Max Power" way.
Second, remember that no matter how "wide" a video source may be, it’s final form is no more than 720 x 480 pixels. The 16:9 flag adds no pixel information, but just tells the player to horizontally stretch the video.
Third, understand how Pan and Scan works for a DVD (or, more acccurately, an m2v stream). Given a range of pixels from the middle of a video source, the DVD player resizes that range to fill the entire horizontal resolution (720 pixels), cropping the excess pixels to the left and right of that range. This range is almost always 540, but is not set in stone.
Concepts two and three are combined to pull-off the trick where widescreen menus appear "wide" on computer screens yet fill a TV screen without letterboxing.
Step 1: Make a blank image or set-up a video project
Blank Image:
854 wide, 540 tall
Video Project:
854 wide, 540 tall (square pixels, as in 1.0)
Step 2: Have a party with title-safe/action-safe zones
Briefly, title-safe and action-safe boundaries take overscan by TVs into account, and visually tell the user where his or work won't be seen on TVs.
Action-safe is at 5% width and height at each corner and title-safe is at 10% of each corner. Basically, keep the text and buttons within the title-safe area.
Before you hop in and find where 10% of 854 leaves you, remember that for this to look correct on a 4:3 TV, it goes through the pan and scan process.
Remember, pan and scan takes the middle 540 pixels of the final video stream and stretches it to fit the whole width (720--because the menu effectively becomes non-anamorphically compressed 4:3 after the pixels are stretched....the 4:3 TV is effectively 720 pixels wide).
For Stills: In Photoshop, place guides at 172 and 685 vertical and 56 and 489 horizontal. Check to make sure it went ok by making sure the rectangle in the center that the guidelines made is wider than it is tall. Keep buttons and anything that is critical (including text) within this rectangle. Be sure that "Lock Boundaries" is NOT selected. Getting these boundaries was a rather complicated process that involved math, resizing in Photoshop, and some adjustment by eye (yep, scientific and not scientific-- all at the same time). The exact method isn't posted here, and it's not that it's a secret or anything like that, just that it'd take a while to type it out. If you want to know how I went about it, message me in the forums.
For motion menus: Make a matte in Photoshop that is 854 x 540 with the guides described as above. Make a black rectangle (fill tool) that is the same dimensions of the middle rectangle made by the guides. Fill the rest of the image with white. That's your matte for Premiere. For help on using mattes, look in Premiere's documentation or even on the internet. Be sure that the matte is set to use a square pixel aspect ratio in Premiere (or whichever video editing program you're using. Use this matte as a basis to know where the boundaries are. I'd recommend putting it on a transparency track, setting the opacity low enough that other video can easily be seen through it while still being visible enough to be useful.
Alternate Method: Export one frame and compare it to the boundaries in Photoshop. Adjust accordingly.
Step 3: Get Creative
Make your menus...
Step 4: It's Subpicture Season!
Make the subpictures on a new layer or a copy of the image [remember, white background...no more than 4 total colors throughout] following these instructions for an anti-aliasing effect if you so desire [remember, don't anti-alias the subpicture text with Photoshop's built-in anti-aliasing]. Make the subpictures while the images are still 854 x 540; For Video menus, the easiest route is to export one frame that represents a particular section of the menu navigation [a VOBid, in other words], then make the subpicture correspond with that frame. Depending on the depth of the menu navigation, the number of subpicture files could be quite high..
Step 5: Export Final Menus
Stills: For the menus (not the subpictures) resize the final version to 720 x 480. Yeah, it'll look all sorts of squished, but that's a good thing. Unless you're using floppy discs as your data transport, there's no reason to not use a lossless image scheme. TIFF or bitmap it up.
Videos: Set-up your video-editing program to export the movie at 720 x 480 with square pixels in MPEG2 [either by frameserving or a plug-in, if it's not natively supported] format (this should be an m2v file). VERY IMPORTANT: Select the option that turns on the Pan and Scan flag [as well as the usual ones that allow for maximum DVD compatibility] but NOT the 16:9 flag. The aspect ratio of the video [different from the pixel aspect ratio] should be 4:3 DAR. Use VBR with a relatively high max and average bitrates [8000kbit/s-ish max isn't too much for a detailed scene, such as a menu].
Step 6: Export Subpictures
A note on subpictures: Subpictures are not resized by the DVD player along with their respective videos. With subpictures, well, what you see is what you get. For more information on this, look through Doom9's forums. Because of this, two subpicture streams will need to be created: one for the Pan and Scan display mode [as seen on traditional TVs] and one for computer playback and widescreen TVs.
Stills: While the image is 854 x 540, and the subpicture is visible [as in it's layer in Photoshop is at 100% opacity], resize the image to 720 x 480, then save the file(s) as bitmaps. These will correspond to the "Wide" setting in Scenarist.
For the Pan and Scan subpictures, it's a bit more work. First, resize the 854 x 540 image to 720 x 480 then select the entire vertical range that holds the middle 540 pixels. [It may be easiest to use guides at 90 and 630 pixels horizontal to get it exactly]. Copy this area into a new image [the new image should be 540 x 480]. Finally, resize this new image to 720 x 480. Save each subpicture as a bitmap at this resolution. These will correspond with the "Pan-scan" setting in Scenarist. It sounds stupid and obvious, but it'll be helpful to put something about pan and scan in the filename when it comes to trying to keep track of which subpicture corresponds with which display mode.
Videos: Use the same method as in step 4, utilizing frame exports as reference. Beyond that, the method is the same for still menus.
Step 7: Import into Scenarist
Stills: Drag the image into Scenarist as a "Still Menu". IMPORANT: as soon as it's imported, set its aspect ratio to "4:3 (Pan-scan)" in the lower-middle window of Scenarist. Import all the subpictures as "Subpicture with Forced Start". Make a track out of the still menus [the image files you imported...but not the subpictures] you now imported [drag and drop], then drag the two subpicture tracks into that new track you just created. For the "Wide" track, depress the "W" button under its name. For the Pan and Scan track, depress the "P" button under its name. The "L" button should be grayed out.
Videos: Drag your .m2v files into Scenarist. Be sure that it's displayed as "4:3 (Pan-scan)." If it doesn't say 4:3 Pan-scan, check that you remembered to make sure that 16:9 was NOT checked when you compressed it. If you accidentally checked that flag, ReStream can change the header of that m2v file so you don't need to re-encode. In ReStream, remember to use a Pan and Scan range of 540 pixels. Once the movie's attributes are correctly displayed in Scenarist, import the subpicture streams as in the Stills section of this step.
Make buttons as per the other Scenarist guides...
**NOTE** The highlight layer must be defined for each display mode. If it's not, Scenarist will use the first one you defined; for example, it will use the data from the "Wide" setting and the buttons won't match up with the subpictures when in Pan-scan mode. To define both, first enter the Simulation/Design Window with the subpicture stream that corresponds with one particular display mode, set the buttons, exit that window, then select the next subpicture stream and corresponding display mode and reset the buttons for that new mode. Yeah, it looks like there's only one highlight layer to me too, but that's how it goes...
FAQ
Why 854 wide?
480 x (16/9) = 853.333 Some image formats don't like odd frame sizes. This one pixel [actually 2/3 of a pixel] difference is negligible considering the final size of the images.
Why 720 x 540? I thought DVD videos were 720 x 480.
They are [among others]. But a TV's aspect ratio is 1.33:1 . 720/480 is 1.5:1. A DVD looks fine on a TV because the pixels aren't square like on a computer monitor. 720/540 is 1.33:1. Creating the menus at this resolution takes this into account, as they'll look a bit skewed on a computer monitor but just fine on a TV screen. Yeah, it's a pretty minor change, but worth keeping in mind. Here's a bunch more about these matters: http://www.uwasa.fi/~f76998/video/conversion/
[I]That page doesn't really say what you're saying.
Hey. That's not a question. I'll be honest; this pixel aspect ratio stuff hurts my head too. This is how I think it's to be interpreted. If it's not, I'm sure someone will step in and point out what's wrong. [Note to that person: please do] These settings have resulted in success for me. Sure, sometimes success is subjective, so if this isn’t the "right" way to do it, I'm willing to learn that "right" way. It's just that, as of now, this method works fine.
The menus I saved in Photoshop look all sorts of squished/ my video files look squished, why?
This is because they are both resized from their "true" resolutions to 720 x 480. Don't worry, the DVD player and Scenarist will "fix" it.
[I]Do the menus have to be 854 pixels wide? I want them to be wider.
Any wider than 854, you'll need to add black bars to the video stream. Sure, you could make them that way, but that's a bit excessive. Consumer TVs aren't any wider than 854ish.
Why should I waste time making the Pan and Scan track?
Many people (myself included) have TVs that are quite small. If the player letterboxed the menus as opposed to Pan and Scanning them, the text would be quite small and hard to read. Sure, it's a personal decision, as if you want letterboxed menus [meaning the player adds the black bars, not that the video stream has the black bars in it...as in previous question], there's no rule against it. And, you'd have to make a subpicture track for the letterbox mode. No, I don't know how to adjust a subpicture so that it fits on the letterbox display mode...but, I'm sure people in the forums could be of some help.
What are the settings for PAL?
I don't know, sorry. It's not that I'm close-minded, it's that, living in the U.S., I've never worked with PAL. Hmm, PAL is 720 x 576, so the width should be 1024 [576 x (16/9)]. Off the top of my head, I think PAL's pixel aspect ratio is greater than 1 [as opposed to NTSC's 72/79 ~.9]. Beyond that, I'm not the person to ask.
What about Maestro?
I've never tried that particular software. I think that this method takes care of some of the steps that Maestro does "behind the scenes". The method of making the menus in Photoshop should still have some application to Maestro though.
Dan
[Thanks to all the members of the forums, as not all of this knowledge can be credited to me...]
2/13/03
you need:
Adobe Photoshop (any version) for still menus
Video Editing/Compositing Software that offers control for pixel aspect ratios (i.e. Adobe Premiere or Adobe After Effects among others) for motion menus (optional)
Sonic Scenarist v.2+
some experience using both Scenarist and Photoshop
to read this http://www.doom9.org/mpg/photoshop.htm to get a basic understanding of this all
Step 0: The basics of DVD display
First, it's important to understand that the ultimate display device for your menus will probably be a television, so pixel aspect ratio comes into play. This will affect the resolution at which you author the menus. This is why you'll see resolutions such as 720 x 540 for some steps even though 720 x 480 is considered "DVD resolution". There are easier ways than specifying pixel aspect ratios in Premiere, but this way is the "Max Power" way.
Second, remember that no matter how "wide" a video source may be, it’s final form is no more than 720 x 480 pixels. The 16:9 flag adds no pixel information, but just tells the player to horizontally stretch the video.
Third, understand how Pan and Scan works for a DVD (or, more acccurately, an m2v stream). Given a range of pixels from the middle of a video source, the DVD player resizes that range to fill the entire horizontal resolution (720 pixels), cropping the excess pixels to the left and right of that range. This range is almost always 540, but is not set in stone.
Concepts two and three are combined to pull-off the trick where widescreen menus appear "wide" on computer screens yet fill a TV screen without letterboxing.
Step 1: Make a blank image or set-up a video project
Blank Image:
854 wide, 540 tall
Video Project:
854 wide, 540 tall (square pixels, as in 1.0)
Step 2: Have a party with title-safe/action-safe zones
Briefly, title-safe and action-safe boundaries take overscan by TVs into account, and visually tell the user where his or work won't be seen on TVs.
Action-safe is at 5% width and height at each corner and title-safe is at 10% of each corner. Basically, keep the text and buttons within the title-safe area.
Before you hop in and find where 10% of 854 leaves you, remember that for this to look correct on a 4:3 TV, it goes through the pan and scan process.
Remember, pan and scan takes the middle 540 pixels of the final video stream and stretches it to fit the whole width (720--because the menu effectively becomes non-anamorphically compressed 4:3 after the pixels are stretched....the 4:3 TV is effectively 720 pixels wide).
For Stills: In Photoshop, place guides at 172 and 685 vertical and 56 and 489 horizontal. Check to make sure it went ok by making sure the rectangle in the center that the guidelines made is wider than it is tall. Keep buttons and anything that is critical (including text) within this rectangle. Be sure that "Lock Boundaries" is NOT selected. Getting these boundaries was a rather complicated process that involved math, resizing in Photoshop, and some adjustment by eye (yep, scientific and not scientific-- all at the same time). The exact method isn't posted here, and it's not that it's a secret or anything like that, just that it'd take a while to type it out. If you want to know how I went about it, message me in the forums.
For motion menus: Make a matte in Photoshop that is 854 x 540 with the guides described as above. Make a black rectangle (fill tool) that is the same dimensions of the middle rectangle made by the guides. Fill the rest of the image with white. That's your matte for Premiere. For help on using mattes, look in Premiere's documentation or even on the internet. Be sure that the matte is set to use a square pixel aspect ratio in Premiere (or whichever video editing program you're using. Use this matte as a basis to know where the boundaries are. I'd recommend putting it on a transparency track, setting the opacity low enough that other video can easily be seen through it while still being visible enough to be useful.
Alternate Method: Export one frame and compare it to the boundaries in Photoshop. Adjust accordingly.
Step 3: Get Creative
Make your menus...
Step 4: It's Subpicture Season!
Make the subpictures on a new layer or a copy of the image [remember, white background...no more than 4 total colors throughout] following these instructions for an anti-aliasing effect if you so desire [remember, don't anti-alias the subpicture text with Photoshop's built-in anti-aliasing]. Make the subpictures while the images are still 854 x 540; For Video menus, the easiest route is to export one frame that represents a particular section of the menu navigation [a VOBid, in other words], then make the subpicture correspond with that frame. Depending on the depth of the menu navigation, the number of subpicture files could be quite high..
Step 5: Export Final Menus
Stills: For the menus (not the subpictures) resize the final version to 720 x 480. Yeah, it'll look all sorts of squished, but that's a good thing. Unless you're using floppy discs as your data transport, there's no reason to not use a lossless image scheme. TIFF or bitmap it up.
Videos: Set-up your video-editing program to export the movie at 720 x 480 with square pixels in MPEG2 [either by frameserving or a plug-in, if it's not natively supported] format (this should be an m2v file). VERY IMPORTANT: Select the option that turns on the Pan and Scan flag [as well as the usual ones that allow for maximum DVD compatibility] but NOT the 16:9 flag. The aspect ratio of the video [different from the pixel aspect ratio] should be 4:3 DAR. Use VBR with a relatively high max and average bitrates [8000kbit/s-ish max isn't too much for a detailed scene, such as a menu].
Step 6: Export Subpictures
A note on subpictures: Subpictures are not resized by the DVD player along with their respective videos. With subpictures, well, what you see is what you get. For more information on this, look through Doom9's forums. Because of this, two subpicture streams will need to be created: one for the Pan and Scan display mode [as seen on traditional TVs] and one for computer playback and widescreen TVs.
Stills: While the image is 854 x 540, and the subpicture is visible [as in it's layer in Photoshop is at 100% opacity], resize the image to 720 x 480, then save the file(s) as bitmaps. These will correspond to the "Wide" setting in Scenarist.
For the Pan and Scan subpictures, it's a bit more work. First, resize the 854 x 540 image to 720 x 480 then select the entire vertical range that holds the middle 540 pixels. [It may be easiest to use guides at 90 and 630 pixels horizontal to get it exactly]. Copy this area into a new image [the new image should be 540 x 480]. Finally, resize this new image to 720 x 480. Save each subpicture as a bitmap at this resolution. These will correspond with the "Pan-scan" setting in Scenarist. It sounds stupid and obvious, but it'll be helpful to put something about pan and scan in the filename when it comes to trying to keep track of which subpicture corresponds with which display mode.
Videos: Use the same method as in step 4, utilizing frame exports as reference. Beyond that, the method is the same for still menus.
Step 7: Import into Scenarist
Stills: Drag the image into Scenarist as a "Still Menu". IMPORANT: as soon as it's imported, set its aspect ratio to "4:3 (Pan-scan)" in the lower-middle window of Scenarist. Import all the subpictures as "Subpicture with Forced Start". Make a track out of the still menus [the image files you imported...but not the subpictures] you now imported [drag and drop], then drag the two subpicture tracks into that new track you just created. For the "Wide" track, depress the "W" button under its name. For the Pan and Scan track, depress the "P" button under its name. The "L" button should be grayed out.
Videos: Drag your .m2v files into Scenarist. Be sure that it's displayed as "4:3 (Pan-scan)." If it doesn't say 4:3 Pan-scan, check that you remembered to make sure that 16:9 was NOT checked when you compressed it. If you accidentally checked that flag, ReStream can change the header of that m2v file so you don't need to re-encode. In ReStream, remember to use a Pan and Scan range of 540 pixels. Once the movie's attributes are correctly displayed in Scenarist, import the subpicture streams as in the Stills section of this step.
Make buttons as per the other Scenarist guides...
**NOTE** The highlight layer must be defined for each display mode. If it's not, Scenarist will use the first one you defined; for example, it will use the data from the "Wide" setting and the buttons won't match up with the subpictures when in Pan-scan mode. To define both, first enter the Simulation/Design Window with the subpicture stream that corresponds with one particular display mode, set the buttons, exit that window, then select the next subpicture stream and corresponding display mode and reset the buttons for that new mode. Yeah, it looks like there's only one highlight layer to me too, but that's how it goes...
FAQ
Why 854 wide?
480 x (16/9) = 853.333 Some image formats don't like odd frame sizes. This one pixel [actually 2/3 of a pixel] difference is negligible considering the final size of the images.
Why 720 x 540? I thought DVD videos were 720 x 480.
They are [among others]. But a TV's aspect ratio is 1.33:1 . 720/480 is 1.5:1. A DVD looks fine on a TV because the pixels aren't square like on a computer monitor. 720/540 is 1.33:1. Creating the menus at this resolution takes this into account, as they'll look a bit skewed on a computer monitor but just fine on a TV screen. Yeah, it's a pretty minor change, but worth keeping in mind. Here's a bunch more about these matters: http://www.uwasa.fi/~f76998/video/conversion/
[I]That page doesn't really say what you're saying.
Hey. That's not a question. I'll be honest; this pixel aspect ratio stuff hurts my head too. This is how I think it's to be interpreted. If it's not, I'm sure someone will step in and point out what's wrong. [Note to that person: please do] These settings have resulted in success for me. Sure, sometimes success is subjective, so if this isn’t the "right" way to do it, I'm willing to learn that "right" way. It's just that, as of now, this method works fine.
The menus I saved in Photoshop look all sorts of squished/ my video files look squished, why?
This is because they are both resized from their "true" resolutions to 720 x 480. Don't worry, the DVD player and Scenarist will "fix" it.
[I]Do the menus have to be 854 pixels wide? I want them to be wider.
Any wider than 854, you'll need to add black bars to the video stream. Sure, you could make them that way, but that's a bit excessive. Consumer TVs aren't any wider than 854ish.
Why should I waste time making the Pan and Scan track?
Many people (myself included) have TVs that are quite small. If the player letterboxed the menus as opposed to Pan and Scanning them, the text would be quite small and hard to read. Sure, it's a personal decision, as if you want letterboxed menus [meaning the player adds the black bars, not that the video stream has the black bars in it...as in previous question], there's no rule against it. And, you'd have to make a subpicture track for the letterbox mode. No, I don't know how to adjust a subpicture so that it fits on the letterbox display mode...but, I'm sure people in the forums could be of some help.
What are the settings for PAL?
I don't know, sorry. It's not that I'm close-minded, it's that, living in the U.S., I've never worked with PAL. Hmm, PAL is 720 x 576, so the width should be 1024 [576 x (16/9)]. Off the top of my head, I think PAL's pixel aspect ratio is greater than 1 [as opposed to NTSC's 72/79 ~.9]. Beyond that, I'm not the person to ask.
What about Maestro?
I've never tried that particular software. I think that this method takes care of some of the steps that Maestro does "behind the scenes". The method of making the menus in Photoshop should still have some application to Maestro though.
Dan
[Thanks to all the members of the forums, as not all of this knowledge can be credited to me...]
2/13/03