Tutorial Description

The excellent dvdauthor application includes a tool named 'spumux' which allows DVD menu creation, with custom buttons.
This package, 'DvdAuthor Buttons', is a Script-Fu plugin to the GIMP, and provides some shortcuts for making menu buttons.

This tutorial's goal is to show how to:

Create buttons within the GIMP
Export these buttons, including images and positional information, for use with dvdauthor's spumux caption multiplexor

Without further ado, here we go!

Tutorial Steps

Create a new 720x480 image.

Next, I simply filled the background with a flat colour. (Mostly to make a smaller XCF file!)

Note: if you have an actual menu background (eg a frame from an MPEG), load it here instead, so you can align the buttons.

Next, right-click the image, and tear-off the DvdAuthor Buttons menu, from under the Script-Fu menu.

Click the 'Add button layers...' from this menu, to add the button layers to the image.

For this example, leave all layers checked.

The "image" layer will always be shown, for all buttons.
The "highlight" layer will be shown for one button at a time, when that button has the navigation cursor.
The "select" layer will be shown for one button when the button is selected.

Note, only ONE layer will be shown at a time! In my first try, I thought that the 'highlight_bl' layer would be superimposed over the 'image_bl' layer, but this is not the case.

Click OK.

You should now see the following layers in the Layers dialog. ('bl' stands for button layer, in case you were wondering....)

Layers dialog showing new button layers.

Next, I selected the 'image_bl' layer, and added the text 'Play'.

Next, I created an ellipse selection, using the ellipse tool.

I didn't want a solid button, however, so after creating my ellipse, I right-clicked and selected the menu option 'Select/Border...', and entered 4 pixels. This created a (thin) donut selection.
Next, I set the 'highlight_bl' as the active layer, and filled the selection with yellow.
Then I set the 'select_bl' as the active layer, and filled the selection with red.
Then, I copied the text from the 'image_bl' layer to the other layers, so that the text doesn't dissappear when highlighted or selected.

Here is the result with all layers visible. You can't see the yellow, because the red 'select' image is obscuring it.

We have our first button drawn!
At this point, I want to actually define a button. So, with the ellipse selection still active,

Click the 'Define a button, using selection...' option in the DvdAuthor Buttons menu.

This will take the current selection, and use it's rectangular extents to create a rectangular path.

Change the Button Name to 'Play', and hit OK.

Then, I repeated this procedure (the text, elipses, and define-a-button) for an 'Options' button.
Here is the resulting 'Paths' dialog, showing two button paths:

If you click the 'eye' icon, you can see the path in the image (the light rectangles):

You can go ahead and move or modify these paths if you desire. In fact, you can create your own, non-rectangular paths, and as long as you name them "button-something" then they will be treated as a button.

NOTE: I do not know what spumux will do if you overlap buttons!!! To be safe, don't overlap!

When happy with the result:

Save the file as an XCF, into the very same directory you want to save the spumux xml, and button images.

I saved the file as "~/example/menu.xcf"

Click the 'Export...' in the dvdauthor buttons menu.

This will generate one PNG image per layer, and will generate the spumux xml.
The script takes the image's path (~/example/menu.xcf), removes the extension (~/example/menu) and then uses that as the basename for all the other files. Therefore, in this case it will generate ~/example/menu_image_bl.png, ~/example/menu_select_bl.png, ~/example/menu_highlight_bl.png, and finally, ~/example/menu_spu.xml

File ~/example/menu_spu.xml:
<subpictures>
<stream>
    <spu
       force="yes"
       start="00:00:00.00"
       image="menu_image_bl.png"
       highlight="menu_highlight_bl.png"
       select="menu_select_bl.png"
      >
        <button name="Options" x0="111" y0="235" x1="275" y1="337"/>
        <button name="Play" x0="127" y0="77" x1="245" y1="169"/>
    </spu>
</stream>
</subpictures>

Note that the three images are listed in bold, and the button names have been stripped of the "button-" prefix. EG., the path "button-Play" became "Play".

You can now use this xml configuration file directly with spumux, for example:
%> cd ~/example
%> spumux menu_spu.xml < Menu.mpg > MenuWithCaption.mpg

Tips:

Do NOT modify the names of the layers, in the Layers dialog. The export script is looking for layers named 'image_bl', 'highlight_bl', and 'select_bl'. Order is irrelevant.
Paths may be moved by holding the 'alt' key, and dragging, when the path is active.
I created a DV-NTSC template, so I don't have to type in 720x480, 80x72 dpi when creating a new image. Simply click 'New image', and then select DV NTSC from the combo-box!
The button's name will be going straight into an XML attribute, so don't use characters like # or " or ' or & etc...
Because the image as saved as an XCF, complete with layers and paths, you can simply reload the file (eg, menu.xcf), modify if desired (eg., add more buttons, rename buttons, change colours), save it, and then export again!
You can rename the buttons in the Paths dialog, however make sure the "button-" prefix remains.
When adding text, it may add it as a new layer. For example, when I added the 'Play' text, it went into it's own layer. You can right-click the layer (eg, the Play layer) and select "Merge Down", thus overlaying the 'Play' layer into the 'image_bl' layer.

Version 0.6.10 of dvdauthor included changes for spumux, changing the button attribute from 'label' to 'name', and so if you still have 0.6.9 or earlier, you can either:

Modify the XML of the generated file every time...
Modify the script to generate <button label="..."> instead of <button name="...">

Next: On to Creating the DVD