The New Hollywood Workshop: Using overlay buttons
By Eliot Hochberg (eliot@high-mountain.com), April 30, 2003
Feedback Farm
Have something to say about this article? Let us know below and your post might be the Post of the Month! Please read our Official Rules and Sponsor List.
Forums
Want to dig even deeper? Post to the new MacEdition Forums!
I have in the past described how to create buttons using Photoshop layers in DVD Studio Pro. This method can provide some very nice looking buttons. However, many of you may notice that the performance of these buttons seems a bit slow. I noticed this too, so I did a bit of research and this is what I found out.
Although Photoshop buttons used in DVDSP appear to be one screen with overlays, they are, in fact, multiple screens. To be exact, there is one screen for each state of buttons on an apparent screen. So, for example, if you made a screen with four buttons, each with a unselected, highlighted and selected state, you would actually be making 12 different screens. For simple discs, this might not be a big problem. But for complex discs, this can be horrible. For example, the Extras Menu on “The Bad Father” originally had 8 buttons, each with three states. Because there were two states for the subtitles and three for the audio, there were six screens to keep track of what button was to be selected (this was one of my attempted work-arounds for the return button not functioning). In addition, there was an Easter egg which required two additional versions of each screen that looked the same, but kept track of a secret button press, and then one additional button leading to the egg in the last set of screens. That meant a total of 150 buttons. Multiply that by 3, and you get 450 screens of content, just for the Extras section. Insane!
Well, when I learned this, I immediately restructured my buttons. I found out that overlay buttons are significantly more efficient. Instead of making separate layers for each button state, you simply designate a color and opacity for each state, and have one master overlay bitmap. This cuts down on the data needed to have these buttons and increases the performance, mostly due to the fact that you never have to leave the screen to go from one button to the next. This is a much more efficient button methodology.
The first step in using overlays is the same as for other Photoshop buttons: Make a background with all of your imagery and buttons in place. Then, instead of saving a Photoshop file, save the background as a PICT file.
It’s worth noting at this time that you should start your files at 780x534, and not 780x540. This has to do with the difference between D1 and DVD NTSC footage. If your footage uses D1 NTSC, then you’ll likely know to use the 720x540 aspect. But for most footage, starting with 720x534 is the way to go (this is to compensate for TV pixels being “non-square”). Then resize to 720x 480 before importing into DVDSP. If you do this right, the menus will match up perfectly with any image you put in a program like Final Cut Pro to make motion lead-ins or lead-outs. (Thanks again to DVD Studio Pro for Macintosh Visual QuickPro Guide.)
To create your overlays, make either a two-bit image or a special grayscale image with all of the shapes of your buttons in it. (I’ll explain the special grayscale image below.) Be sure that your highlights don’t overlap; each button’s highlight must fit in a box around the button. This means no fancy shape tricks – you have to give those up when you decide to have faster menus.
Once you have your bitmap image, you import it into DVDSP. Create a new menu, and import your background into your menu. Open the menu, and under Button Highlights you’ll find Overlay Picture. Select the appropriate bitmap file here.
When you choose your bitmap, you have to decide if you want to use Simple Overlay mode or not. The difference is basically whether you use one color or multiple colors for your highlights. This is where that special grayscale image comes in. DVDSP analyzes the levels of gray in your highlight overlay. If you use just two colors, black and white, it uses your selected colors as either on or off. On the other hand, if you use grayscale, it averages the colors to 0%, 33%, 66% or 100%. This results in an effect of shaded transparency. Not a full alpha channel, but close.
If you really want to get fancy, you can purposefully set your gray levels to 0%, 33%, 66% and 100% to control exactly what shows up as what level of color. In Simple Overlay mode, DVDSP will do this for you. I suppose if you selected blue at 60%, DVDSP would pick 0%, 20%, 40% and 60% as your colors. I’d have to check, but I believe this would happen.
But if you want to go even farther, say “no” to the Simple Overlay, and you now have the option of selecting multiple colors for each highlight. This means you could designate 33% as blue, 66% as red, and 100% as green. Why you would do that, I have no idea, but you could.
Also, don’t forget that you have two sets of highlight colors. This means you can have buttons in one area of the screen with one color range, and another set with a different color range.
An idea you might try if you wanted even more colors would be to use each percentage level as a different color. This means you could have as many as six different highlight colors available to you. Just designate each button with a different level of gray, then use one set of overlay colors for half, and the other for the other half. Fun!
One important item to point out here is that the colors Apple provides are not necessarily NTSC safe. Since many DVDs will end up playing on computers, this isn’t a completely horrible situation. However, it can be somewhat misleading. So make sure you do a test disc and play it on an older TV before you commit to your colors. I will be making a chart of which colors are NTSC safe in a future article.
Once you’ve set your colors, the rest of the button process is the same as with layered buttons. Select the button area; the selected area defines what part of the PICT file will be used for your highlight. Then define your actions, etc.
A final note: Be sure to check out the Buttons menu. It will help you to preview what your various states will look like.
Next time, we’ll cover ideas on how to make a Storyboard menu and footage.
The New Hollywood Workshop is dedicated to using Macintosh computers and software to do what the big boys do. Want an example? Check out Duality, a short made completely with Macintosh products.