This tutorial was initially written by Nyarlathotep and was hosted on DCHomebrew. Unfortunately, DCHomebrew has long since disappeared. This version of the tutorial was rescued from the Internet Archive and has been reposted by Curtiss Grymala for DCHelp. The layout of the tutorial has been edited slightly and some of the links were updated. However, none of the content was edited (except for a minor note about the DivX codec). Some of the images are missing from the tutorial. I am working on tracking down copies of those images.

So you have your perfect Dream Inducer disk thought out, you have all the programs you want laid out correctly, and you’re all ready to go: theres just one problem. Every theme you have found is either rubbish or fits really badly with your idea for what the perfect Dream Inducer Disk should be like.

Well this page is here to help you with that, by quickly and easily making your own Dream Inducer theme to your own hearts content.

We’re going to begin with a very simple ‘wallpaper’ style theme, so that you understand the basics, before moving on to some of the advanced features that Dream Inducer includes, such as a realtime clock updated from your DCs system memory, multiple graphical overlays (when done correctly will make your theme stand out from the crowd) and even intro movies.

What you will need before beginning:

Essential:

A Graphics application capable of exporting 24 bit PNGs (The Gimp or Paint Shop Pro are both good choices for those without access to professional design apps).

Even better is a graphics app that has an onscreen pixel display too (I’ll come to this later on) so that you know exactly where your cursor is at all times by the X and Y references.

A Text editor. (Notepad is more than adequate for this)

A little design flair.

Optional:

‘Advanced’ users will also want to have a video editing app (I would suggest VirtualDUB) and the DivX Codec (at the time this tutorial was written, DivX was in version 4 or 5 – major changes were made to the codec sometime around v5.5, so you may want to download an older DivX codec from http://www.oldversion.com/).

kRYPTS DI Theme Preview Tool

The Basics

First of all you should think about the overall design layout you would like to use in your theme. The background image needs to be a PNG at 640×480 size, but thats basically your only limitation, although high colour images tend to look quite ugly on a television with its lower definition, so you may want to stick to 16bit colour.

Depending on how you would like it to look, there is only one *essential* component you will need, and that is the file listing, although the majority of themes around use 3 different components:

• Screenshots
• Descriptions
• File List

Also remember that all the images used in Dream Inducer have to be in PNG format, so you will need a graphics package that supports PNG (most do, its a very handy format to use)

Most people for their first theme just alter an existing theme without worrying about the theme.dxt and other Dream Inducer files. If thats what you want to do (and frankly, if it is, you really don’t need to be reading this tutorial) then it works a little like this: The first image to the right is the layout of my original theme.

So open up your preferred photo editor / paint app and mark out which parts of the theme do what. [The screen shot that accompanied this paragraph is no longer available]

Now, you can of course simply add a wallpaper and vaguely remember where the components are, or mark them out in your wallpaper.

Good graphics programs such as photoshop will let you use this as a ‘guide’ layer, and put whatever picture you want underneath for a fairly ok looking effect. Needless to say however; this is a really bad way of doing it.

Not only will it be blatantly obvious that thats what you have done to anyone who sees it, but it will also look incredibly ugly as well compared to what you can achieve with a little more effort.

I strongly suggest you do not use an existing theme.dxt with just half assed modifications to the background, but instead go the whole way and make your own from scratch.

So lets make a theme that uses all three elements (file list, screenshots and descriptions!

The first thing you should do is open up Javexs theme.dxt that comes provided with Dream Inducer (As it contains all of the elements you are likely to use) so that you can see what you are doing with it:: it should look a little like this.

<?xml version='1.0' encoding='UTF-8'?>
<THEME>
  <INFO>
    <AUTHOR VALUE="Javex"/>
    <TITLE VALUE="Greencast"/>
  </INFO>
  <FONT SRC="/cd/images/font.png"/>
  <LAYOUT ELEMENTS="7">
    <IMAGE X="0" Y="0" Z="8" W="640" H="480" SRC="/cd/images/back.png"/>
    <IMAGE X="0" Y="46" Z="16" W="231" H="44" SRC="/cd/images/time.png"/>
    <TIME X="48" Y="56" Z="32" FONT="24" R="136" G="184" B="100"/>
    <IMAGE X="0" Y="0" Z="24" W="640" H="480" SRC="/cd/images/fore.png"/>
    <DESC X="154" Y="348" Z="32" W="288" H="72" R="136" G="184" B="100" FONT="18"/>
    <SCREENSHOT X="52" Y="150" Z="16" W="210" H="140"/>
    <LIST X="312" Y="136" Z="32" W="228" H="168" R="136" G="184" B="100"/>
  </LAYOUT>
</THEME>

Now you might be thinking – what the hell does that all mean? Well, heres a simple break down. If you’re at all familiar with HTML, XML or CSS this should all be fairly self explanatory, and if you’re not, theres not much of it you need to worry about.

For your first theme, the only things you are going to need to use are:

<AUTHOR VALUE>

you will put your own name here for the world to admire

<TITLE VALUE>

Whateevr you would like your theme to be called. This doesn’t really matter, as people are going to call it what they want anyway as its never shown unless someone specifically looks in the theme.dxt out of interest to see it anyway.

<IMAGE>

For your first theme this will only be used once, as a ‘wallpaper’, but as you get more advanced you can use  this tag for overlays, layered backgrounds, anything you can think of really!

<DESC>

This is where the descriptions from the SBIs will go: ideally it should be long or wide enough so that people can easily read the descriptions, but this is down to you. ***OPTIONAL***

<SCREENSHOT>

This defines the size and placement of any screenshots you want to use. ***OPTIONAL***

<LIST>

The only ***ESSENTIAL*** thing you will need in your theme. Screenshots and descriptions are nice, and go towards making a good looking Dream Inducer theme, but in the end they are totally optional, as you might want to just admire your background and have a simple Demo Menu style loader. You really do *need* the file listing for a Dream Inducer CD however.

Lets Go To Work

First remove all unneccessary elements and pre-made settings from the theme, so that it looks like this.

<?xml version='1.0' encoding='UTF-8'?>
<THEME>
  <INFO>
    <AUTHOR VALUE=""/>
    <TITLE VALUE=""/>
  </INFO>
  <FONT SRC="/cd/images/font.png"/>
  <LAYOUT ELEMENTS="">
    <IMAGE X="0" Y="0" Z="8" W="640" H="480" SRC="/cd/images/back.png"/>
    <DESC X="" Y="" Z="" W="" H="" R="" G="" B="" FONT=""/>
    <SCREENSHOT X="" Y="" Z="" W="" H=""/>
    <LIST X="" Y="" Z="" W="" H="" R="" G="" B=""/>
  </LAYOUT>
</THEME>

Now you should by this stage have already picked what picture you would like to use as a background.

Your background should be 640 x 480 in size and inPNG format, and it should be named “back.png”. If you look in the <IMAGE> tag, you can see why this is. If your background is named something different, then you will need to change the SRC=”/cd/images/back.png part of the IMAGE tag to SRC=”/cd/images/your_file_name.png. Similarly if you are *NOT* going to be putting your background picture in a subfolder called ‘images’ (although I recommend you DO) then yuo will need to change the SRC.

MAKE SURE YOU DO NOT REMOVE /CD FROM YOUR PATH, IT IS *NEEDED* TO CORRECTLY WORK

Now the easy bits out of the way, lets move on to the ’slightly more difficult’ bit.

Configuring Your Elements And Creating The Final Theme

For each of the <DESC>, <SCREENSHOT> and <LIST> tags you can see a number of variables: X, Y, Z, W, H, R, G, B and FONT. What these do is configure your theme precisely.

X – is the number of pixels from left to right you want your element to be placed at, so.on a 640 x 480 image, an X value of 0 will be at the far left hand side of the screen, an element value of 640 will be at the far right of the screen.

Y – is the Y value of your element in pixels, going from top to bottom of the screen, so on a 640 x 480 image, a Y value of 0 will be at the top of the screen, a value of 480 will be at the bottom.

Z – is how ‘near’ the screen the element will be. The higher the number the more ‘on top’ the element will be. For this tutorial theme, this isn’t something you really have to worry about.

***PLEASE NOTE*** these values are for the top left corner of your image or element.

W – specifies the width of your element in pixels

H – specifies the height of your element in pixels

R, G and B – specifiy the colour of your text in standard RGB values – so a value of R=”0″ G=”0″ B=”0″ will give you black text, a value of R=”255″ G=”0″ B=”0″ will give you red text, a value of R=”0″ G=”255″ B=”0″ will give you green text, a value of R=”0″ G=”0″ B=”255″ will give you blue text and a value of R=”0″ G=”0″ B=”0″ will give you white text. You can choose any colour you want by altering these values accordingly (a color picker chart or even Paint can do this for you).

FONT – specifies the size of your font.

So. I have a background image that is a 24bit PNG at 640 x 480 (click the image to the right), I have a bunch of screenshots that are 100 x 100 in size, and I want to have my file list in white and my descriptions in yellow.

I also have decided I would like to layout my theme as follows. [The screenshot that accompanied this paragraph is no longer available]

Note that the fugly red squares aren’t actually on my PNG – they’re just there as placeholders while I’m working on it so that I can see exactly where my descriptions, screenshots and file list will appear so that they are not too intrusive over my final background image.

If your Graphics program supports ‘layers’ it is a good idea to do this on a new layer, so that you can tweak your layout to your hearts content – but as this is just a quick tutorial example I’m not going to spend too much time worrying about the layout; you should however as its the difference between a good theme and a lazy generic one. So lets open up that theme.dxt again and change it accordingly.

<?xml version='1.0' encoding='UTF-8'?>
<THEME>
  <INFO>
    <AUTHOR VALUE=""/>
    <TITLE VALUE=""/>
  </INFO>
  <FONT SRC="/cd/images/font.png"/>
  <LAYOUT ELEMENTS="">
    <IMAGE X="0" Y="0" Z="8" W="640" H="480" SRC="/cd/images/back.png"/>
    <DESC X="" Y="" Z="" W="" H="" R="" G="" B="" FONT=""/>
    <SCREENSHOT X="" Y="" Z="" W="" H=""/>
    <LIST X="" Y="" Z="" W="" H="" R="" G="" B=""/>
  </LAYOUT>
</THEME>

Now, I know that my screenshots are 100 x 100, I know what I want to call it, I know the name and size of my background image and I know who the author is (me). I also know that I want to have my file list in a white colour( R=”255″ G=”255″ B=”255″), and my descriptions in a yellow colour (R=”255″ G=”255″ B=”0″). So lets add that to the theme.dxt.

Im also not bothered about the Font size of my descriptions, so I am going to remove that tag from my DXT, and I now know I am only using 4 elements in my theme (background image, description, screenshot, and list) so I am going to put that in the appropriate place. Also all of my elememnts are on the same ‘layer’ so I will give them all the same Z reference (i am making it 1 more than the background *just to make sure* they are visible)

<?xml version='1.0' encoding='UTF-8'?>
<THEME>
  <INFO>
    <AUTHOR VALUE="Nyarlathotep"/>
    <TITLE VALUE="Tutorial Theme 1"/>
  </INFO>
  <FONT SRC="/cd/images/font.png"/>
  <LAYOUT ELEMENTS="4">
    <IMAGE X="0" Y="0" Z="8" W="640" H="480" SRC="/cd/images/back.png"/>
    <DESC X="" Y="" Z="9" W="" H="" R="255" G="255" B="0"/>
    <SCREENSHOT X="" Y="" Z="9" W="100" H="100"/>
    <LIST X="" Y="" Z="9" W="" H="" R="255" G="255" B="255"/>
  </LAYOUT>
</THEME>

As you can see, theres still a lot of stuff missing from the dxt however. This is where a ‘guide layer’ over your background comes in handy.

All I have to do is look in my graphics program at where each of my elements is placed on my guide layer, and see what pixel references they have. It is also a very good idea to show gridlines in whichever editor you are using, as it makes it easier to see the pixel references you have. This is what my picture with guidelines showing looks like.

So, I can now see that my screens are 100 x 100, with an X refernce of 50 and a Y reference of 50.

My descriptions are (600-250) 350 x (100-20) 80, with an X reference of 250 and a Y reference of 20

My File List is (200-10) 190 x (470-300) 170, with an X reference of 10 and a Y reference of 300.

If you cannot see how I got my figures for the sizes of my elements, look carefully at the above picture, and note where the numbers I have shown came from. Generally speaking, to get the size of an element, take the furthest point the element reaches, and subtract the smallest point the element reaches; so in the case of ym descriptions ‘box’, it ‘ends’ at the 600 pixel mark, and ‘begins’ at the 250 pixel mark, so its width is furthest – nearest, or 600 – 250.

Lets add those numbers to the theme!

<?xml version='1.0' encoding='UTF-8'?>
<THEME>
  <INFO>
    <AUTHOR VALUE="Nyarlathotep"/>
    <TITLE VALUE="Tutorial Theme 1"/>
  </INFO>
  <FONT SRC="/cd/images/font.png"/>
  <LAYOUT ELEMENTS="4">
    <IMAGE X="0" Y="0" Z="8" W="640" H="480" SRC="/cd/images/back.png"/>
    <DESC X="250" Y="20" Z="9" W="350" H="80" R="255" G="255" B="0"/>
    <SCREENSHOT X="50" Y="50" Z="9" W="100" H="100"/>
    <LIST X="10" Y="300" Z="9" W="190" H="170" R="255" G="255" B="255"/>
  </LAYOUT>
</THEME>

You have just made your first DI theme! You can either burn it right now, or use kRYPTS dxt to HTML converter to preview it, and then tweak it a little more. If you want to use this tutorial as a theme, all you have to do is copy and paste the above white box into Notepad or a similar text editor, and then save it as theme.dxt, putting font.png and back.png into a folder called images.

That was easy right? But the themes still kind of lame looking….

In my next tutorial I will show you how to use the advanced features of DI to make a good looking theme, and I will show you how to use loading screens (and movies!), transparent overlays, replace the included font with something a little snazzier, and even add a real time clock.