DVDBuilder

Create Thumbnail Menu Background and Mask in GIMP

This topic shows how to use GIMP to create a background and a mask for a thumbnail DVD menu.

Project Directory

You need a directory to store the source images and the DVDBuilder project. This can be anywhere on your machine. For example create C:\TitleMenuDVD directory. We will refer to that as the DVD Project Directory.

Create Menu Background

We will create a GIMP project that has all required layers that are needed for the DVD menu. At the time of writing the latest available GIMP version was 2.8.14.

Background Image

Download the image AquaBlue.jpg from the Internet Archive to the DVD Project Directory.

The size of AquaBlue.jpg is 1600 x 1024 which is roughly 16:10 width to height ratio. That must be cropped to 720 x 480 for the NTSC system. We can do the dropping in GIMP.

  1. Open the AquaBlue.jpg image in GIMP 2. GIMP will create a new project for you.
  2. Crop it to Width x Height: 1440 x 960, i.e. double the NTSC resolution of 720 x 480
  3. Save the GIMP project as AquaBlue_1440x960.xcf.

Background Crop 1 Background Crop 2 Background Crop 3

Scale Background to 720×480 (NTSC)

  1. Open AquaBlue_1440x960.xcf in GIMP
  2. Scale the image to 720×480
  3. Save the project as AquaBlue_720x480.xcf
  4. Rename the AquaBlue.jpg layer to Background
  5. Save the project one more time as Menu_NTSC.xcf

Background Scale 1 Background Scale 2 Background Scale 3
Background Scale 4 Background Scale 5 Background Scale 6

  1. Open Menu_NTSC.xcf in GIMP
  2. Create a new layer group with a name MenuBackground
  3. In the MenuBackground layer group, add a new later group with a name Display.
  4. Move the Background layer to the MenuBackground layer group below the Display layer
  5. Save Menu_NTSC.xcf

Background Layers 1 Background Layers 2 Background Layers 3

Button Layers

Elephant DVD button

Download the image Elephant_000150.jpg from the Internet Archive to the DVD Project Directory.

  1. Open Menu_NTSC.xcf in GIMP
  2. Open Elephant_000150.jpg in a separate GIMP
  3. Select the whole image and copy to clipboard
  4. Go back to Menu_NTSC.xcf
  5. Select the Display layer group
  6. Paste the Elephant_000150.jpg as a new layer with a name ElephantButton in the Display layer group
  7. Move the selection to position x=150, y=170
  8. Save Menu_NTSC.xcf

Background Buttons 1 Background Buttons 2 Background Buttons 3

Hippo DVD button

Download the image Hippo_000020.jpg from the Internet Archive to the DVD Project Directory.

  1. Open Menu_NTSC.xcf in GIMP
  2. Open Hippo_000020.jpg in a separate GIMP
  3. Select the whole image and copy to clipboard
  4. Go back to Menu_NTSC.xcf
  5. Select the Display layer group
  6. Paste the Hippo_000020.jpg as a new layer with a name HippoButton in the Display layer group
  7. Move the selection to position x=390, y=170
  8. Save Menu_NTSC.xcf

Background Buttons 4

Export Background As JPEG

  1. Open Menu_NTSC.xcf in GIMP
  2. Export as Menu_NTSC.jpg

Background Export 1
Background Export 2

Here is the final background image:

Menu_NTSC.jpg

Create Menu Mask

  1. Open Menu_NTSC.xcf in GIMP
  2. Create a new layer group with a name MenuMask. Place that above the existing MenuBackground layer group.
  3. In the MenuMask layer group, add the following layers: DisplayPattern, SelectionPattern, ActionPattern, BackgroundPattern
  4. In the MenuMask layer group, rearrange the layers from top to bottom in this order: DisplayPattern, SelectionPattern, ActionPattern, BackgroundPattern
  5. Save Menu_NTSC.xcf

Mask Layers 1 Mask Layers 2

Display Pattern

  1. Open Menu_NTSC.xcf in GIMP
  2. Select the DisplayPattern layer
  3. Using the Selection tool, select a rectangular area at position 150 x 170, and size 160 x 110.
  4. Using the Fill tool, fill the selection with red (HTML Notation: ff0000) color.
  5. Repeat steps 3. and 4. but this time select a rectangular area at position 390 x 170, and size 160 x 110.
  6. Save Menu_NTSC.xcf

Mask Display 1 Mask Display 2 Mask Display 3

Selection Pattern

  1. Open Menu_NTSC.xcf in GIMP
  2. Select the SelectionPattern layer
  3. Using the Selection tool, select a rectangular area at position 140 x 160, and size 180 x 130.
  4. Using the Fill tool, fill the selection with green (HTML Notation: 00ff00) color.
  5. Repeat steps 3. and 4. but this time select a rectangular area at position 380 x 160, and size 180 x 130.
  6. Save Menu_NTSC.xcf

Mask Selection 1 Mask Selection 2

Action Pattern

  1. Open Menu_NTSC.xcf in GIMP
  2. Select the ActionPattern layer
  3. Using the Selection tool, select a rectangular area at position 130 x 150, and size 200 x 150.
  4. Using the Fill tool, fill the selection with blue (HTML Notation: 0000ff) color.
  5. Repeat steps 3. and 4. but this time select a rectangular area at position 370 x 150, and size 200 x 150.
  6. Save Menu_NTSC.xcf

Mask Action 1 Mask Action 2

Background Pattern

  1. Open Menu_NTSC.xcf in GIMP
  2. Select the BackgroundPattern layer
  3. Using the Fill tool, paint the whole layer in black
  4. Save Menu_NTSC.xcf

Mask Background 1

Export Mask As Windows Bitmap

  1. Open Menu_NTSC.xcf in GIMP
  2. Select the MenuMask layer group
  3. Deselect the MenuBackground layer group
  4. Export as Menu_NTSC_Mask.bmp. In the advanced export options select the 24-bit option.

Here is the final mask image:

Menu_NTSC_Mask.bmp

Last updated on May 14th, 2015 12:00:00 AM