Designing Custom DVD Menus
Contents
1. Learning Happens 30 Video Vignettes of Babies ond Toddler Leaning School Readiness Sidis Through Everyday interactions j 1 J j rk PW VIO ES E 0 12 Months 12 24 Months 24 36 Months pnguood Jarke NA C HE First IOO YEARS Longwood Gardens The First 100 Years 2005 d Bonus Features yy F i THEIRS TEE WORLD OF BARREL RALIN FF Bot DARREL RACING Act 2 THE HORSE Act 3 THE RIER Act 4 PLAYING THE GAME Tanus Footage MENG TOD Gur FOOTAGE With AUDIO COMMESTAET Yr CRUST amp Ley CRUMB gt DIS MAKERS PRESENTS DESIGNING DVD MENUS TIPS AND TECHNIQUES TO DO IT RIGHT THE FIRST TIME BY CRAIG ELLIOTT HANNA DVD authoring software makes it easy to create and design template based DVD menus But many of those templates have limitations and drawbacks that may produce a less than acceptable DVD menu At some point you may need to abandon templates and create your own custom designed menu This may seem intimidating at first but if you have the design talent and the right guidelines it s really not difficult at all With the advent of desktop video editing it s quite common that a DVD producer does not come from a video or film production background The first step in creating a professional and easy to read DVD menu is understanding the basic principles of designing graphics for TV Square P2. Safe guides compensate for the bend in picture tubes especially on older TVs Text outside this area may distort and be difficult to read It s important to keep title information and especially navigation information within these boundaries If text or navigation buttons are placed outside this area your viewer may not be able see it Keep in mind function of the menu comes first then design If using an earlier version of Photoshop or design soft ware that doesn t support designing for TV you can create your own Title Safe area by placing guides at Left 72 pix Right 648 pix Top 54 pix and Bottom 480 pix As you can see in the Crust amp Crumb menu important information is within the Title Safe area The bread on the left falls outside this area and that s perfectly fine In fact placing elements outside the title and action safe guides is good design Remember all TVs display differently so what one person doesn t see another does It s important to design to the edge Just keep the important information inside the guides Broadcast Safe Colors Televisions have a limited range of colors that will display correctly on a picture tube This color range is referred to as Broadcast Safe Colors Since NTSC is the standard for North American television we will focus on these for this guide When setting up your DVD menu choose at least 24 bit if possible and limit your RGB colors to 233 or below A
3. a darker blue background This makes it easier for the cathode ray to adjust between the two areas of the image Luminance brightness As with color white levels that are too bright can cause issues Again adjusting to NTSC safe levels is a good start but you may need to do more White on TV is actually gray If your white levels in your fonts or images don t look adequate drop the brightness down until it s slightly gray When you view this on a TV it will look white Sharp Edges As with horizontal lines sharp edges either in a font or in the design can twitter or buzz This can happen for two reasons the edge can fall within just one field of video or there can be too great a contrast between the edge and the color next to it When the contrast is too great the cathode ray can t change luminance and chrominance val ues quickly enough to compensate for the difference For this reason we get artifacting You can handle this one of two ways First though not recommend for fonts you can blur the edge so it cre ates a slight gradient between the two values This gives the ray a series of steps to change values The same can be accomplished using a semi transparent drop shadow or glow Blurring the image will also work on areas of your menu that may have a busy pattern like cross hatching or a herringbone Second you can adjust the colors so the contrast isn t as great If you have a black element next t
4. and then disappears in a cycle creating a flicker Buzzing originally re ferred to the audible buzzing noise created in a TV signal when white levels were above the NTSC limits or too hot It now refers to the edges of a graphic or font that appear to shimmer glow or move also referred to as Mosquitoing Crawl is when part of an image appears to move or crawl across the screen These artifacts are difficult to explain so it s best to look at menus to see for yourself Start look ing at DVD menus even professional ones and you ll see plenty of examples of artifacting Look at what works and what doesn t See if you can determine patterns Are there particular fonts colors or designs that work or don t work As you start to look closely at professional DVD menus you ll start to notice that artifacting many times is unavoidable Designing DVD menus is not about eliminating artifacts but learning how to minimize them When testing your menu there are several factors that will affect how your menu will appear The type of cable used to connect to the monitor or TV can affect how well it displays Your options from worst to best are 1 Composite RCA connector 2 S video 3 Component professional analog 4 SDI Serial Digital Interface The lowest quality image will be created using a composite cable This is the type of cable used in the majority of home viewing situations so if you want to see what y
5. are referred to as rollovers but this term as applied to DVDs is incorrect Rollover applies to button states or link states PLAY BCHAPTERS Left Selected State and Right Activated State for the Chapters option for web and computer applications With DVD menus we refer to the button states as Normal Selected and Activated On most DVD menus the normal state is not visible or is considered off However there will always be one button in the selected state by default The selected state indicates which button has been navi gated to The activated state refers to a button that has been triggered by pressing the enter button on the remote and causes something to happen most often to play a part of the DVD Depending on your DVD player this state can last from up to a few seconds to not visible at all There are two methods used to create button states 1 subpicture overlay and 2 the use of Photoshop layers Subpicture overlay uses a black image on a white back ground imported the same way as other menu assets The black areas are assigned a color in the authoring software to indicate the state and the white area is transparent Alpha channel Subpicture Overlay There are some drawbacks when using this method Only solid colors can be used to indicate a button state Also subpictures cannot be antialiased and can result in overlays with jagged edges Because this may appear unprofessional mo
6. e end result is that the two fields appear to be seamlessly integrated into one solid picture Fig 3 This happens so quickly approx 1 60th of a second that the human eye cannot detect it is occurring because of a phenomenon called persistence of vision However it is this process of interlacing that causes problems with com puter generated graphics ona TV DESIGNING A MENU Now that you better understand how images display on a TV let s present some guidelines for designing DVD menus Horizontal Lines Horizontal lines present one of the most common issues with DVD menus During scanning if a horizontal line is too thin it can be visible in only 1 field of video Since the cathode ray alternates scanning between odd and even fields the line will seem to appear and disappear causing it to twitter or flicker By making horizontal at least 4 pixels thick you can help avoid this issue You can also try shift ing the line a pixel or two up or down Sometimes this will alleviate the problem Fonts Fonts can be an issue if not used carefully It s recom mended that Serif fonts be avoided Serif fonts have small design details that often consist of horizontal lines These elements can cause twitter It s best to stick with Sans Serif fonts but there are no hard and fast rules when it comes to designing graphics for display on a TV Just because a font is Sans Serif it doesn t mean it will work as different fonts have d
7. f you can only use a standard TV that will have to do Remember your graphics might look great on your computer monitor but until you see them on a TV you won t know what the final DVD will look like In addi tion to artifacts color will differ from a computer to a TV so you will not know how it really looks until you see it on a monitor So how can you look at menus on a TV without making a DVD There are applications designed to display graph ics TV out of Photoshop You may need to purchase a converter that accepts firewire or USB cables from the computer and converts it to composite RCA connector or S Video unless you already have a video card with those outputs Once converted you can hook up your monitor as you would a VCR or DVD player TERMINOLOGY ARTIFACTS When talking about graphics not displaying correctly on TVs we refer to artifacts or artifact ing Artifacts as they apply to DVD menus are distortions or errors created during compression during the process of building the DVD mixing or created by the interlaced scanning process Essentially artifacts are any visual distortions not desirous in the image The terms used to describe artifacts distortions are Twitter Buzzing Mosquitoing and Crawl These terms all apply in general to artifacts on a TV but there are subtle differences Twitter refers to a flickering that happens to a thin horizontal line The line actually appears
8. ifferent styles erif Font Sans serif Font Font size can also be an issue A font that s too small can buzz crawl or mosquito It s generally accepted that font sizes smaller than 18 20 points should be avoided Although this is a good starting point it s not a rule Differ ent fonts can be larger or smaller than one another even though they may be the same point size This is a good time to check things on your monitor No matter what the point size if it doesn t look right don t use it Some experts recommend adding a very slight blur to text that doesn t display well though sometimes that affects the readability of the menu Another approach is putting a drop shadow or a glow on the fonts This not only can help reduce artifacts but it can add to the readability of your menu If you re careful when choosing fonts and test your menus a monitor shouldn t have any need to add a blur Chrominance color As previously mentioned staying within the NTSC color safe limits is important but it is no guarantee Colors especially red and yellow if too hot bright can mosquito or crawl A good place to start is adjust them to within the NTSC limits Review your menu on a TV and if those colors look bad you will need to go back and drop the saturation until it looks OK Work ing within a single color palette is a great way to reduce artifacting Use a light blue font on top of
9. ixel vs Non Square Pixel The first concept you must understand is the difference If you are working in an older ver between the way a TV screen displays an image and the way a computer displays an image TV uses a non square sion of Photoshop using software pixel 1 0 high x 0 9 wide while a computer uses a square pixel 1 0 x 1 0 If you were to create a DVD menu on a that doesn t support the ALESIS computer and import it into your DVD authoring software pixel format you can still make th Id b horizontall d menu wou e squeezed horizontally and appear adjustments that will ensure your menu displays correctly elongated vertically e Open your graphics program e Create a document 720 wide 534 pixels high 24 bit 72 DPI and RGB or YUV color space not CMYK It is possible to set the DPI higher than 72 but NTSC televisions display at 72 DPI so anything higher will not improve the Left Square pixel image displayed on a computer resolution of your graphics Right Square pixel image displayed on a TV When finished designing resize the image to 20 x 480 Your image Your graphics must be designed with the non square pixel will appear elongated vertically but environment in mind This is not difficult to accomplish E 9 y especially if you re working in Adobe Photoshop CS when imported into a DVD authoring which comes with a series of templates that allow y
10. lso limit your saturation to below 90 and keep luminance val ues below 80 It s much easier to limit your colors now rather than to try to correct them later especially after your client has approved the menu Why limit colors Colors outside of the broadcast safe range are considered illegal and can tend to bleed buzz flicker or crawl Visually this translates to images that seem to move or shake Not only is this unpleasant to look at but it can make text illegible By limiting colors you help ensure the viewer will be able to read your menu without straining their eyes Bear in mind that just because you have created Broadcast Safe Colors doesn t mean your menu will look good on a TV There are many factors that can affect how your menu will appear ona IV Safe Levels for Black and White In addition to Broadcast Safe Colors there are limitations on white and black levels called luminance White levels that are too high referred to as hot can cause buzzing bleeding crawling and flickering just like illegal colors Be sure to set your white RGB levels no higher than 233 luminance values below 80 and black no lower than 16 White set to 233 may look gray on your computer monitor but rest assured will look white on TV Button States Normal Selected Activated For a DVD menu to be truly interactive there needs to be a way to indicate button states Often these states
11. o a white element try changing the white to gray or some other color Sometimes even rotating the element slightly can alleviate the artifacting Designing a DVD menu is a trial and error process What may work one instance won t in another You may need to experiment with fonts colors and designs before you get an acceptable combination The important thing is to recognize what works and doesn t work and above all test your menus on a TV O hate Learn more about authoring at The Authoring House website Email the Authoring House at Disc Makers at authoring discmakers com
12. ou to application the image will be resized design a non square pixel menu on the computer and will appear normal on a TV There are many different formats associated with film and video and each has it s own template To keep things simple we will design in the NTSC DV format NTSC stands for National Television Systems Committee In Photoshop go to the File menu and choose New e In the Preset Size drop down box select NTSC DV 720 x 480 with guides or NTSC DV Widescreen for 16 9 e This template ensures you re working in a non square pixel format and your graphics will display correctly on a TV In the Color Mode drop down choose 16 bit If possible modify your document to 24 bit color by selecting Mode in the Image menu e Finally in the Advanced drop down menu select NTSC 1953 in the Color Profile pull down menu e Click Untited 1 p Preset Custom OCaml widtn 720 pixels W Height 480 pixes W Delete Preset Resolution pixels inch b Cancel ANE A TE Save Preset Color RGB Color B 16 bit B Background Contents White fa Advanced Color Profile NTSC 1953 Pixel Aspect Ratio D1 DV NTSC 0 9 Image Size 1 98M After clicking OK a warning dialog box may appear This is nothing to worry about Click OK The pixel aspect ratio cor
13. our menu will look like in the most common scenario use this type Another factor to keep in mind is all TVs are different If possible use a production monitor to review your menus Newer TVs have comb filters and line doublers These filters help improve the TV so you won t be seeing the raw video signal as you would with a production moni tor If you only have a consumer TV it s best to test your menu on several different TVs to get a good understand ing of how it will display If you are using a production monitor make sure to turn off the comb filter to see the graphics in a raw worst state After a little practice you may be able to judge what fonts colors and designs will work and what won t Important tools of the trade In addition to a production monitor it s important to have the proper tools to create professional looking DVD menus Two important tools are the waveform and vector scope Explaining how to use these is beyond the scope of this guide but in short these are engineering tools used in professional video production that measure luminance light and dark and Chrominance color levels and phase These tools will allow you to measure video levels in graph ics to determine if they are within NTSC guidelines and are available in hardware and software forms When buying software based Waveforms Vector scopes some only display one line of video per field instead of the full field or frame This doe
14. rection shows you the menu as it will appear on a TV Remember you are designing with square pixels Photoshop is compensating for this and has automatically adjusted your design If you turn the preview function off the image will appear stretched horizontally Leave this pixel aspect ratio on You ll want to see your menu as it will appear ona IV Action Safe and Title Safe When you selected a preset in Photoshop you chose NTSC DV 720 x 480 with guides The guides are there for a reason TVs with a picture tube have what s known as overscan area Overscan is the area beyond the bezel or frame of the TV screen that is not visible The overscan area was devised because not all TVs especially older models display the image in exactly the same way Some TVs show more picture some show less and others may shift the image to the left or right If you place important information outside the Action Safe area you run the risk of its not being seen by the viewer The Action Safe area was created to ensure all important infor mation is visible on all TVs These are the way the guides look in Photoshop Jery CRUST amp CRUMB PLAY CHAPTERS Menu with the Action Safe and Title Safe guides As you can see from the example above there are two boundaries created by the guides The outermost guides are Action Safe as explained above The innermost guides are called Title Safe The Title
15. s not give an accurate representation of your graphics Professional video edit ing applications such as Final Cut Pro come with their own versions of Waveforms and Vector scopes and FCP shows a full frame of video Check your software as you may already have these tools If you don t know how to use them consult your user manual or search the web there are many good resources out there Mechanics of a monitor Now that you have all the right equipment let s discuss why TVs and computer monitors display images differently A computer screen is made up of individual pixels each assigned it s own discrete luminance light and dark and chrominance color scanned progressively That means each line is scanned one after another in order from top to bottom A TV screen is made up fields These fields are created by a single electron beam scanning across the phospho rus coating on the back of a picture tube The point of this beam changes chrominance and luminance values as it scans comprising the TV picture In a video image each second contains 30 frames and each frame consists of two fields odd even 60 fields a second These fields are not drawn progressively as with a comput er monitor or on high definition TV sets The beam traces across the picture tube creating field one first Fig 1 then retraces to the top of the screen and creates field 2 Fig 2 This process is known as interlacing Th
16. st DVD designers do not use elements such as text or complex shapes as a state indicator and opt to use simple geometric shapes instead On professional DVDs designers often use something as simple as a small square to indicate button states A square does not have any diagonal lines so the edges won t appear jagged or rough As you become more familiar with DVD menu design and understand ways to work around these limitations you may find you can start to use more intricate shapes Because of limitations with subpicture overlays design ers may opt for another option This second method sup ported by Apple s DVD Studio Pro and Adobe s Encore allows you to import Photoshop layers The designer can utilize layer effects such as glows drop shadows and other antialiased effects producing a more dynamic overlay The drawback of this method is layers are larger than subpictures and can cause a decrease in performance on a DVD player It takes longer for the DVD player to swap out layers than it does to swap a subpicture overlay Using layers may result in a one to three second delay between button states or navigation This may not seem like a considerable amount of time but if you are trying to scroll through 10 scene selections it can quickly become annoying All monitors are not created equal When designing DVD menus look at your graphics on a TV before you create your DVD Preferably a production monitor but i
Download Pdf Manuals
Related Search