Menu backgrounds and buttons

MovieExpert wrote on 5/27/2008, 7:45 AM
Hello to All. In my DVD movie I want to use certain pictures as menu backgrounds and certain buttons. I prepared the menu backgrounds and buttons using GIMP open source image manipulation program. The backgrounds and buttons are in jpg or png format. Using the backgrounds is quite simple and poses no problems. When it came to use the buttons in place of the thumbnails on the menus I got confused and now I am lost. How should I proceed to insert the buttons in the menu so that it takes up exactly the same place as the thumbnail. Some guýdance will probably help a lot. Thanks in advance.

Comments

TheHappyFriar wrote on 5/27/2008, 9:09 AM
you can make a PSD file. the DVDA help file has info on this. Big thing is the naming convention.

Another important thing with the gimp is to autocrop the layer. the button in DVDA is the size of the layer. :)
MPM wrote on 5/27/2008, 6:31 PM
A few suggestions FWIW...

If you can, stick to png format - Sony products love it & you won't get the artifacting from jpg. OTOH png was broken for several years in Windows - fixed with ie7... just something to keep an eye out for.

2nd, don't import buttons. DVDA will just composite whatever buttons you import anyway, so better off to do the compositing where you'll get a little better quality & have more control over feathering, shadows etc (for interlaced display). If you're doing motion effects for your button graphics/text, do it in Vegas where you'll get a definite boost in quality.

3, when it comes time to set your buttons in DVDA, just use empty buttons without text or graphics to define the *hot* area. If you don't want DVDA to re-render mpg2 menus, don't make any changes to the graphics in DVDA & delete the menu title object. OR, send DVDA avi instead of mpg2 for menu backgrounds.

And 4, button highlights... Import backgrounds and full-page button highlight masks at the final aspect you want shown - otherwise they can be stretched differently & not match. Don't do a *lot* of feathering because it'll be lost. DVDA gives you maybe the most freedom in how you create your masks of any software - you have 3 options in how to map your graphics to the 3 types of fill area/shapes.

Using transparency mapping in DVDA, creating a png with a transparent background, you can set your shape to 100% black, select it and grow your selection by ~ 3-5 pixels, then have a gradient to white... You can play with using half-toning etc to mimic feathering if you want. DVDA will then assign the base fill to the black, and the 2 remaining shapes (outline & blend) depending on the black levels. You want to keep the expanded area to a minimum though - you can use DVD Sub Edit to take a look at the breakdown of highlight shapes on other DVDs to get an idea. If you don't want to go thru all of that, just do the highlights in black over a transparent background in png & they'll still look pretty good.

[if you really want to get fancy try using color mapping in DVDA for the highlights - forget about the shapes being called fill, outline, and blend, and create 3 separate shapes or icons that'll light up depending on the button state.]
MovieExpert wrote on 5/28/2008, 9:53 AM
Thanks a lot for the suggestions. Since I am quite new in this button creation and manipulation area I shall give you an overview of where my problems are. I created a few buttons following the GIMP tutorials. My buttons are square and circular shapes with proper colour gradients used to give the 3D look. Button size is 80x80 pixels. When I want to put these buttons on the thumbnails the button does not cover the thumbnail entirely. I overcame this problem by manipulating the x and y sizes and ratio of the thumbnails. I assume this is the way to go. Now I want the button to change shape when it is pressed. Again I assume the advice to use 3 separate images of the same button is the method to obtain this effect. But I could not get it to work. How should I proceed with 3 images to do this? Help is greatly appreciated.
MPM wrote on 5/28/2008, 11:13 AM
IF I understand what you're after correctly, you might not be able to... ;-(

First off, the buttons themselves don't have to exist as separate objects or layers or anything - DVDA will just composite everything onto one layer as mpg2 video for your background anyway - just do the equivalent of flattening your image in Photoshop. All that matters to the DVD player is the rectangular area of the button and its coordinates. Importing separate graphics for buttons just does the *flattening* in DVDA instead of your graphics app - the only reason to do that is if DVDA does something your graphics app doesn't, like using animated GIF frames or something. Bear in mind that if Gimp or Windows doesn’t handle png files correctly that can cause more problems importing them into DVDA - for example Corel 12 (don’t know about X3 or 4) won’t save them properly so DVDA has problems with them.

When you import your graphics to be turned into button highlight masks, IMHO the easiest way is to do it is as a menu page mask the same size as the background. The DVD player will use whatever shapes are within a button’s rectangular area; you want to set that area to include any highlights plus make sense to anyone viewing your DVD on a PC - if your button area is just large enough for the underline under some button text, someone viewing it on a PC might never find it with their mouse. Generally you can use an empty button & drag the bounding box to include whatever graphics or text makes sense, adjusting it to include any highlight masks.

RE: the highlights themselves, there are 4 kinds of shapes: Transparency, Fill, Outline, & Blend. You can set the color and transparency for each of those shapes individually, for each of the 3 button states: Inactive, Selected, & Activated. But, each shape can only ever be a single, solid color. For anything more than simple effects most people either have a highlight cover part of the background - say a black highlight cover a gold button on a black background - or go to a separate video, either as a title or as a menu background... You could for example have a short video of the button being pressed, including audio, and use that for a background on another menu page -> select the button, press enter on the remote, it goes to the new menu, which then links to whatever as soon as the video’s done.

Matching the background is probably easier, covering a button (or parts of a button) that’s actually part of the background, but you can run into color matching problems since you don’t have 100% control over the highlight color - that’s up to the player & TV.

A cartoonish example just to, well, act as an example... You could create 3 star shapes, one inside the other, & fill each with a different color. Saved to png with a transparent background, and using color to map to highlight masks in DVDA, the unselected button state might have the fill set to black to cover or cut out the underlying background graphics or video, while the other 2 would be invisible. For the selected state the fill might be orange with the outline shape yellow & the blend invisible. The activated state might have all 3 shapes in increasingly bright shades of red. Or using 1 star and zig zag lines radiating from the center for the other 2: fill = the star, outline = lines inside the star, blend = lines outside the star... The outline shape would either match the fill with the blend invisible, or the outline would match the blend with both visible.
ChrisMN wrote on 5/28/2008, 2:51 PM
I too have had difficulty with the whole button concept with DVDA but the info MPM has provided is very helpful. When starting my current (first) project I had all sorts of creative ideas but found by keeping it simple was the best way.