en-USfr-FR
Pinnacle Studio, AVID Studio, HFX, proDAD, Boris FX Tutorials, Tips & Tricks
25 Latest Tutorials

DV FX RSS Flux Subscribe to Articles update by email - All Tutorials - Search - Tutorials by Category / Author / Month

Customize Your DVD Menu Buttons with Studio

Customize Your DVD Menu Buttons with Studio By Le Papy - Last updated on Sunday, January 13, 2013
21089 Views :: 2 Comments :: Article Rating (Total Votes: 3)
Category: Pinnacle Studio 20 & S16-S19 Tutorials / Menus  -  Previous tutorials  -  Associated File(s)
Published on Sunday, April 1, 2012
Created on Wednesday, February 15, 2012 8:56 AM
 

In the past, many Pinnacle Studio 1-15 users have wanted to create buttons for their customized disc menu. Different methods and "inventors" have given rise to four tutorials:

These tutorials are still relevant to anything that is ordinary buttons. In addition, many techniques (selection, layers, masks, fills) used in photo editing software such as the freeware PaintNet or GIMP for example are also used to create custom buttons with Pinnacle Studio 1-15. You can refer to them as needed. We recommend using one of these two programs because not all software for photo retouching supports the alpha channel in the same way, especially in regards to the Targa (TGA) file format.

But with the arrival of Avid Studio and new Studio versions, it was necessary to face the facts, the good old recipes do not work anymore because the alpha channel method for tga buttons used with Pinnacle Studio 1-15 was no longer compatible with that used by Avid Studio and new Studio versions. It is unfortunate that the Pinnacle Studio 1-15, Avid Studio and new Studio versions buttons are mixed in the same folder, since the Pinnacle Studio 1-15 thumbnail buttons no longer work with Avid Studio and new Studio versions. More Avid Studio and new Studio versions icons (png files) are mixed with the Avid and Pinnacle 1-15 (tga files) buttons, which does not really help anything when using Pinnacle Studio 1-15 when Avid Studio and new Studio versions are installed on the same computer.

Aficionados of custom buttons then reached out to the people on the Pinnacle forum to see if anyone knew how ... Alas, the answers were evasive, even demoralizing. Along with Francis57, we searched on our own to try to find a solution to the challenge. Thus, two different approaches were pursued in parallel and resulted in two methods to achieve similar results. By mutual agreement, we decided to show them both to you. This tutorial consists of two independent processes and you can address them separately.

Step 1 : The Francis57 Method

Francis57 has worked extensively on the general and navigation buttons. The advantage of his work lies in the ease of implementation consisting essentially of drag & drop based thumbnail buttons except for where he had to use alternatives to an existing button. For the most part, he used the free PaintNet software which suited his needs well. As the tutorial progresses you will also learn about this new image editing software.

Step 1/1 : Creation of a Normal Button Using a Shape Extracted from an Image
The goal of this process is to use a shape in the foreground of an image to create an object that will turn into a button without embedded video.

The free software used is PaintNet. After opening the software, as with most software, select "File / Open" and choose one of your images.
Opening a file in PaintNet
To cut out the object to be used for the button, select the lasso tool in the toolbox. Select the lasso tool

With the lasso tool, click on the outside of the object to select and, while holding the left mouse button, drag the pointer (see the plus sign) around all sides of the object.

Here's a snapshot of the selection of the object from point 1 to point 2 by moving counterclockwise. All that remains to complete the task is to continue around the object until you reach the starting point (1).

Selecting the object to serve as button

When you have finished selecting your button to be:

  1. Open the Edit menu;
  2. Invert the selection (Ctrl_I).

From this point on, everything that is around the object is selected.

Reverse gear

Once the selection is inverted:

  1. Open the Edit menu;
  2. Delete the selection. Or use the DEL button on your keyboard.
Remove the outer to the object

The button object is now isolated on a transparent background.

  1. Optionally, you can refine the cutout with the eraser tool selected from the tool palette.
The object is isolated from its context on a transparent background

To reduce the transparent area around the object, you can:

  1. Using the Rectangle Select tool, select the area you want to keep;
  2. From the Image menu;
  3. Choose Crop to Selection.
Trimming the selection

You can save your object in tga or png file format but the PNG format is preferred for it's size and ease of use.

  1. From the File menu;
  2. Save as;
  3. Choose a filename, format and location.

Click the Save button.

Recording the final file

Your button object can be used on any background because of its transparency. You can easily resize it:

  1. Maintain the aspect ratio by using the corner handles;
  2. Change its proportions by using the handles on the sides of the marquee;
  3. You can also rotate it by selecting the pivot point.
Example using your future button
Using the new button on a DVD menu

You can use your new button in the DVD Menu Editor.

  1. Select the folder where you saved it;
  2. Drag the button to the Menu Editor;
  3. Set it to the parameters you need.

This button is from a picture that was not cropped.

You set the desired button function from the four options available to you.

For the highlight, choose the look that will be selected from the three options available to you.

Button from a non-cropped image
Here is a selected button from an image that was cropped. Button from a cropped image
With the Alpha option, whether the image has been cropped or not, the button will look the same when it is selected in the DVD simulator. Button used with the alpha parameter
Step 1/2 : Creating a Custom Mask Shape for a Thumbnail Button

A thumbnail button will display a still or moving image in the middle of the button. We will now create an image with a transparent middle part. A map is a good example of what can be done.

After opening your image in the image editing software:

  1. Select the brush tool from the toolbox;
  2. Set the brush size to 14 pixels for example;
  3. Use your talents as a painter to draw around the entire perimeter of the map.

You can try several times to paint the edges of the form but your tracing must be continuous and the shape must be closed.

Creating an edge of color with the brush tool

When your track is continuous and closed:

  1. Select the Magic Wand from the tool palette;
  2. Click inside the border of the path you just created.
Selecting the color of the track with the magic wand
  1. From the Edit menu;
  2. Select Invert Selection.

At this time the inside and outside of the shape are selected.

Reverse gear
  1. Again from the Edit menu;
  2. Choose Erase Selection.

All that remains is the outline you created.

Clearing the selection
  1. From the File menu;
  2. Save your work as ...;
  3. As a mnemonic name to save as png transparency. I chose "Calque.png";
  4. Save your file.
Backup work
Loading the empty file tga format for Avid

The buttons for Studio DVD menus are stored in files as special AVID tga. So you need to copy your layer as a png files to a special AVID tga file format.

  1. From the File menu;
  2. Open ...;
  3. The Fond pour AVID.tga file available in the « Associated Files » section below, at the bottom of this tutorial;
  4. And click Open.

In this empty file, you will import your previously made layer.

  1. From the Layers menu;
  2. Select Import From File.
File import layer
  1. Select the overlay file you just created;
  2. Open the file.
Opening file layer made ​​previously

To combine the two layers:

  1. From the Layers menu;
  2. Select Merge Layer Down.
Merging layers

To select all of the merged file:

  1. From the Edit menu;
  2. Choose Select All.
Global selection

Keep only the part of the layers you need:

  1. From the Images menu;
  2. Select Crop to Selection.
Trimming layers

To select only the area outside:

  1. Select the Magic Wand in the tool palette;
  2. Click in the outer part of the image.
Selection of the outer zone

To erase the entire outer part of the form:

  1. From the Edit menu;
  2. Select Erase Selection or press the DEL key.
Clearing the selection

Save your work in tga format, with a temporary name since you'll have to rename it later for use as a thumbnail button with the Studio interface.

(To rename the file, see the Papy method)

Backup File
Step 2 : The Papy Method

My first choice was to create identical files in order to integrate them in a "Personal" folder as we did previously. But I had to give up that idea because my research quickly led to an encrypted file impossible to edit.
On the other hand, it was possible to replace a thumbnail button file in Avid Studio tga format (or new Studio versions) by another custom file, produced under certain conditions, and also in tga format no matter the shape of the button. It is this path that I explored and I will describe below.
As we have already used the free GIMP software several times, I will continue with this software which you can find in our links page - GIMP(EN).

Step 2/1 : The Basis for Creating the Avid Studio (or new Studio versions) Compatible TGA File

Preparing the bottom layer with its alpha channel is a bit tricky, so we will use the same file as Francis57. You can find the Fond pour AVID.tga file located in the « Associated Files » section below, at the bottom of this tutorial;

This project is composed of two invisible alpha areas.

  1. The central area that will receive all or part of the thumbnail.
  2. The outer border of a few pixels to be transparent on the bottom menu.

Note: If you open this file in a program other than GIMP, transparent assets may be replaced by an RGB color. But saving the edited file does not necessarily retain the specific alpha channel.

The alpha layer for miniature Avid Studio

From this background, you can draw any shape or geometric object done in a freehand style, with or without borders. But you can never erase inside the middle area of your shape or you will lose the thumbnail in erased part.

Among the existing tga thumbnails, you will need to sacrifice one:

  • that was provided by new Studio version;
  • works well (ie it correctly displays the thumbnails);
  • you did not intend to use it very often.

All buttons are located by default in : C:\Users\Public\Publics Documents\Pinnacle\Content\Buttons.

You will make a copy of this button as you will replace it with your new button that you have saved using the same name. This is the tactic used by the common cuckoo bird who lays her egg in place of another bird’s egg...well known by ornithologists ...

Example: You choose the file miniature "Baby - Baby Girl 3 frame 2.tga". Make a copy of the file you are archiving carefully and save your new thumbnail file with that name. This button is the third heart-shaped thumbnail icon "Baby - Girl 3 frame 2" in the thumbnails ribbon buttons. Now, if you drag this icon to a menu, it will be your thumbnail button that will appear in the menu editor.

Step 2/2 : Creating a Rectangular or Square Thumbnail Button Without a Border

This is the same method described in the tutorials above, except that we should not start from a new image, it is important that you start with the Fond pour AVID.tga file and try to fill-in the greater part of the inner zone . Here is a brief summary:

Open the file "Fond pour AVID.tga" with GIMP.

With the Rectangle Select Tool, create a rectangle within the central area.

Selecting a rectangle
Invert the selection (CTRL+I) to select the portion around the rectangle and fill the area with a color like green for example.

Deselect everything (Select / None).
Filling zone to remove
Take the Fuzzy Select Tool (wand) and click the green area to select all the green.

Remove the green part using the Delete key.

There is nothing visible yet the alpha channel is retained therefore the inner square bounded by the selection box can accept your thumbnail. Everything else will be transparent and you can see the bottom layer. You will have a rectangular thumbnail without borders.

Save your work as a tga file.
The green area has been cleared, there remains nothing visible
Step 2/3 : Creating a Rectangular or Square Thumbnail Button with a Border

The method is virtually the same except you add a colored border after the first selection process.

After making a rectangle with the Rectangle Select Tool, add a border (Select / Border) about 5 or 10 pixels wide. Fill this border with a color like the background menu or a color different from the active color.

Then continue as described above, but in the end, you still have a colored border.

Save your work as a tga file.
Adding a border to the selection
Step 2/4 : Create any Geometrical Freehand Shaped Thumbnail Button

The principle remains the same whether with or without borders.

  • Draw a closed shape;
  • Select the shape (optional addition of a border and fill for the border);
  • Invert the selection;
  • Fill with a color;
  • Deselect;
  • Select exterior color;
  • Remove the exterior color (Delete key);
  • Save.
Step 2/5 : Create a Normal Button

You can also create a normal button of any shape. In this case, the process is very simple.

  • Create a new transparent image about 575x415 pixels;
  • Paste a shape in the middle that takes up most of the space;
  • Save the file, preferably as a png to maintain the transparency of the surrounding area. Use a name that's easy to remember;
  • Drag the image from its backup folder directly into the menu editor and you will not need to make substitutions in the files.

After you drag your new button into the Menu Editor, you have to set the properties for the button...

  1. Depending on the action you want it to do:
  • A Normal button: Links to any chapter marker on your project timeline or to another menu;
  • A Previous or Next button allows navigation between the pages of a multi-page menu;
  • A Root button is used to link to the main menu in the Menu list

 

Depending on the look you want for that button:

  • Alpha Highlight: when the button is selected, its entire surface is highlighted;
  • Box Highlight: when the button is selected, its frame is highlighted;
  • Underline Appearance: when the button is selected, the button is underlined.
Choosing the type of button
Choice of appearance
Step 2/6 : Creating Associated Text for the Button

Your new button does not have text associated with it like "Chapter #". To complete your project let's create a text layer that you can group together with your thumbnail button. Here are a few quick pointers on how you can accomplish this task.

  1. After adding your custom button to the Menu Editor, your layers will be as shown in Figure 1;
  2. Use the "ABC" button to make a text layer;
  3. This layer, "Your Text Here", will be added at the top by default.
  4. To group the shape and text together with your thumbnail in the "Button" group, move the text layer above or below the Button-Shape layer, select them both and Group them;
  5. Rename the "Your Text Here" layer to "Button";
  6. Change the button text to "Chapter #" and it will update the chapter number once you exit the menu editor.
Animation for the creation of a text for the button
Step 2/7 : Bonus, Creating More Elaborate Shapes

Gimp is just a drawing program for creating simple geometric shapes. You can draw freehand, or if you use more elaborate photo editing software that is not free, you can easily obtain all sorts of shapes. You can export these shapes in to the GIMP core and then incorporate them into the background layer of "Fond pour AVID.tga" and use them as simple forms as we have already discussed above. Here for example are a number of shapes available in photo retouching software that must be purchased:

The drawing software can easily create more complex shapes

But you can also find shapes in word processing software (Wingdings Fonts).

To export such a shape to GIMP, I used the following method:

  1. Copy the shape from the photo editing software;
  2. Open Fond pour AVID.tga in GIMP;
  3. Create a new layer;
  4. Paste the chosen shape into this additional layer;
  5. Anchor the floating selection;
  6. Possibly crop some of the area around the shape;
  7. Remove the selection and select the shape;
  8. Create a border and fill it with color if desired;
  9. Remove the selection and selection within the form;
  10. Deletion of the color inside the shape;
  11. Merger the two layers;
  12. Remove the outer area;
  13. Save.
Here are some thumbnail buttons made ​​from different shapes.

You can also start with an image of a map, a photograph in GIMP that you export to the canvas and then incorporate them into the background mask "Fond pour AVID.tga" to treat them as all shapes we have already discussed above.
Some examples of custom thumbnail buttons
Step 3 : The Common and Artisanal Method

With this method you work primarily in the Menu Editor by mixing combinations of layers and Avid (or new Studio versions) thumbnail buttons. There are limitations on the shape and thickness of the border to choose:

  1. a layer should be a png format to drag it from the library into the Menu Editor;
  2. a thumbnail button adapted to the shape of the layer to drag into the Menu Editor.

Then you have to merge these two elements by adjusting their size. Here is an example of what can be achieved if you stick to these constraints.

You are free to group together the layer thumbnail button and even to add text such as "Chapter #".

And assembling a layer of a button

In short, at just the cost of a few little tricks ... it is possible! And even if you spend a few extra minutes, it will be YOUR BUTTON and not that of Mr. AVID!

Associated File(s)
Share/Save this article


Comments
videoman3857 By # videoman3857 @ Tuesday, July 2, 2013 1:57 AM


Many people are moving away from DVD and want the files as Mpeg2 or Mpeg4

Is it possible to make these files with chapters so you can navigate the file like a DVD ?

Déclic Vidéo FX By # Déclic Vidéo FX @ Sunday, July 28, 2013 2:40 PM
You choose, either:
- do a DVD that you can watch on the TV (or the computer if you have adequate player software)
- do a DATA DVD which is without chapter.

DV FX

 
WARNING: this comment section only relates to the current article. All technical and/or general questions regarding software detailled in our article *MUST* be asked through various forums; we won't even answer to comments which do not comply to this basic rule, and we might even moderate it. Thanks in advance for your comprehension.

Comments support tags : [quote]Text[/quote], [b]Text[/b], [i]Text[/i], [u]Text[/u], [url]www.sample.com[/url] or [url=www.sample.com]Link name[/url].
You can use these tags to highlight your text or insert a link in your comment.

Name or surname (required) - publicly visible on the website

Email (required)

Website

CAPTCHA image
Enter the code shown above:

Pinnacle website access

Site officiel Pinnacle Studio