We have already issued one tutorial regarding the creation of customized menu buttons.
TIWA now gives us his method. It is interesting because it raises several points that were not covered in our other recent tutorials.
Step 1 : The Need
Studio allows only three ways to highlight menu buttons:
- Framed by a rectangle;
- Covered by a color, more or less transparent;
- Underlined.
These are rather limited and lack imagination.
Professional DVDs generally use "tokens" or symbols that represent some element of the video. That is what we will try to achieve here.
Step 2 : The Principle
Obviously, we must stay with what Studio allows us to do.
The only Studio highlight mode that will serve us is the one where the entire button is covered by a color. Indeed, highlighting can use any form. So, this is not really a limitation.
For this method, only the selected button should be visible. (We will show you how to make the others invisible.). So, text and images that must remain visible cannot be used for our buttons! Additionally, this method can only be used for menus without thumbnails.
One last point to resolve: How to hide the buttons that are not selected? Well, we'll do like the chameleon, so that the image of the button is superimposed over the background. This, therefore, excludes the use of menus with animated backgrounds.
Enough of the theory, here we go. It will become clearer in practice!
Hang in there. It's a little long, but not too complicated!
Step 3 : The Method
We will learn to:
- Cut shapes on an image to make buttons;
- Save these images to have any outline (in tga format used by Studio);
- Use these images to highlight menu options in Studio.
- Prepare your menu background:
| The first thing to do is prepare your menu without any buttons, (but knowing where you want to put them). Here for example is my menu. The token buttons will go to the right of the text. |
Prepare the image and place the text. That's all for now.
|
- Prepare the token buttons for the menu :
Here I will use buttons that represent the contours of the island of Martinique. Use your favorite drawing or image editing software for this.
For now, don't worry about the size of the button image. What matters is that the background of the button image be a solid color (here, it is white) and that it contrasts with the rest of the design.
One thing I have not yet mentioned : The button tokens can only be one color. (Blame this on the DVD Standards Forum). |
 |
- Prepare the "chameleon" buttons:
I use Paint Shop Pro 8, but any software that can manipulate layers and tga files will do.
- Open PSP 8.
- Open your menu in TitleDeko (the Studio menu/title editor). Simultaneously, press "Alt" and "Print Screen" to copy the active window to the clipboard.
- Switch to PSP and press "Ctrl"+"V" to paste the image. The screen image appears.
- In PSP, open the button image, and use the Image => Resize control to make your button the correct size. (Make sure that your two images -- the menu and the button -- are set to 100% zoom). I suggest that you place the button image over the menu image to better judge the size.
| Here is what you should have: |
Adjust the button to the right size.
|
| With the "Magic Wand" tool, select the white part of the image and press "Ctrl"+"C" to copy it to the clipboard. |
 |
| Select your menu image and press "Ctrl"+"V" (Paste as a new selection) to paste the clipboard contents as a new layer. Move the white box with the mouse and place it where you want the button placed and click to attach it to the menu image. |
This will be the base for the future menu button.
|
| Repeat with all your buttons. They don't all need to be the same, although mine are here! |
The 3 chameleon button images.
|
Well, we are now ready to create images for our buttons.
- Creating buttons :
| Choose the rectangular selection tool. |
 |
|
For each token button:
- Select a rectangle that covers the white rectangle;
- "Ctrl"+"C" to copy the selection;
- "Ctrl"+"V" to put the selection in a new image.
|
Each button is now a white background with a "clone" of the base image.
|
Do the same with as many images as (future) buttons. Then, we only need to make the images transparent (using "tga" format, which is one that Studio can accept).
For that:
| Take the "Magic Wand" (setting a tolerance that is not too low if there are points of color in the white, like here) and select the white background. |
 |
| Create the mask : Select the menu "Layers => New mask layer => Hide selection" |
Create a mask which makes the selection transparent.
|
Only the image of the token remains.
Save the mask in the Alpha Channel: Select the menu "Layers => Load/Save Mask => Save to Alpha Channel" |
Save the mask in the Alpha Channel.
|
Click "Save" in the dialog box. Then do a "Save As" choosing the format "True Vision (tga)".
Tip : give the files usefull names like "FilmButton.tga", "BonusButton.tga" ...
Now...the hardest part is done, shall we continue ?
For information, you can also read the tutorials of saby "Create transparent areas in still images with Gimp" or "Handling layers with Gimp" that will give you the foundation needed to perform all these operations with Gimp which is free.
Step 4 : Using in Studio
Return to Studio and open your menu. Find your images. Place each token in its place and resize if necessary. If everything has gone well, they are completely invisible. Everthing is OK, yes?
Tip : Do not use the menu mode in the title editor yet, otherwise the buttons will be difficult to move. |
Here the three buttons are placed and selected. Without that, nothing would be seen!
|
| There is nothing left to do but choose "Normal button" and Highlight style:"Highlight is the shape of the button." |
Voilà !! Once selected, the button appears.
|
Preferably, increase the opacity of the highlight color (why not 100%?) so that the button is more visible.
{Thanks to gjslaw who translated this tutorial from French to English, and Loosecannon who cross-checked it}