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.
You should now see the following layers in the Layers
dialog. ('bl' stands for button
layer, in case you were wondering....)
- 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