With the customizable skinning system of DFX, skin designers can change the look of DFX, reposition components, and even change the shape of DFX without any programming! The creative possibilities are limitless with this system.

New: We introduced a new exciting component called the "Spectrum Analyzer", which gives you the ability to apply animation to your skin.
The "Spectrum Analyzer" is a dynamic bitmap area allowing 10 different sound frequency bands, low bass to high treble, to drive the animated display of different images. Each frequency band can drive the display of 20 different image bitmaps that represent the level of that frequency band during song playback.
Create a traditional multi-band spectrum analyzer or surprise users with something totally wild or original. For example, you could have the bass frequencies animate the movements of one character and have the high frequencies animate the movements of a different character. Again, you won't have to do any programming.

Other new components include a mini-mode option and processing mode selection options.

Summary of steps:

  1. Create image bitmaps of skin components using a graphics editing program
  2. Define component parameters such as placement, hotspot dimension, and shape in the skin definition text file
  3. Create matching mini-mode skin (if desired)
  4. Test your skin
  5. Agree to the DFX Skin Submission Agreement
  6. Submit your skin

Detailed step by step instructions:


  1. Install DFX from the link below.

    The installation package includes several factory skins of various shapes, sizes and colors. These skins provide helpful examples of how to develop a new skin and illustrate the skin possibilities.

    Note: If you have a lot of DFX skins already installed, you may want to temporarily rename your DFX skins folder so you can easily browse the factory skin samples. Open C:\Program Files (x86)\Common Files\DFX and rename the "Skins" folder to "Skins_installed" or whatever name you prefer before installing DFX.

    >> Click here to download DFX

    Then double-click on the downloaded file and complete the installation.

    To view the skins, launch DFX and click Options > Skin Browser and select a DFX skin.

  2. Create the folder for your skin
    In this example we will be creating a skin called "Myskin." Therefore we will create the following folder: "C:\Program Files (x86)\Common Files\DFX\Skins\Myskin"
    (Note: The skin name should not have spaces, but underscores and dashes are ok)

  3. Copy default skin bitmaps into your new skin folder
    Copy the bitmap files (.bmp extension) from the default skin folder into your new folder. The default skin folder is located under: "C:\Program Files (x86)\Common Files\DFX\Skins\default_Universal"

    Every bitmap file need to be copied over.

    These are the bitmaps that you will change, replace, or eliminate to create your skin. They must be saved as Windows Bitmap files and must maintain their exact filenames. Make sure all letters including the "bmp" are lower case.

  4. Copy default skin_definition.txt file into new skin folder
    Also copy the skin_definition.txt file located in the same default skin folder from where you got the bitmaps into your new skin folder.

    This file contains the coordinates that you will change to define the location of each DFX component (or lack thereof) and the shape of your DFX skin. The file name CANNOT be changed and the parameters must remain in the same order as the original list.

  5. Edit, remove, or replace your skin bitmaps
    Use a graphics editing program to edit the individual bitmaps or completely create new bitmaps. The following describes each different bitmap:

    master.bmp : Defines the main background of your skin and is always drawn. It can be of any size and shape, and the components of DFX can be placed anywhere on your skin design. Although this bitmap is always rectangular in its raw form, you can redefine its shape through the skin_definitions.txt file which will be covered later.

    Keep in mind that other people may use your skin, so try to be user-friendly with your design. At a minimum, draw the essential interactive buttons and toggles: Power, Presets, Options, Help, and Mini Mode. Other optional components include the Title Bar, Close button, Minimize button, On/Off buttons for each enhancement effect, effects level display field, slider, speakers/headphones toggle, music type buttons, spectrum analyzer, and a logo that links to our website.

    There are some default settings to be aware of when creating the master.bmp:
    Power state is ON, state of each DFX effect button is ON, speakers/headphones toggle is set to Speakers, music type selection buttons are all set to OFF.

    all_off.bmp : Overlayed on the master.bmp at the location of the main Power button. It is used when the DFX audio processing is turned off.

    section_off_*.bmp : Overlayed on the master.bmp at the locations of the on/off buttons of each DFX effect, ie, Fidelity, Ambience, etc. It is used when an individual section (effect) is turned off.

    headphone_on.bmp : Overlayed on the master.bmp at the location of the speakers/headphones toggle. It is used when the DFX listening environment is headphones, not speakers.

    music1_on.bmp : Overlayed on the master.bmp at the location of the Music Type I button. It is used when the DFX processing mode is Music Type I.

    music2_on.bmp : Overlayed on the master.bmp at the location of the Music Type II button. It is used when the DFX processing mode is Music Type II.

    speech_on.bmp : Overlayed on the master.bmp at the location of the Speech button. It is used when the DFX processing mode is Speech.

    slider.bmp : Represents the fader or slider handle that users move to change the level of an effect. This single bitmap is reused as the control for each of the individual effects.

    number_0.bmp through number_10.bmp : This set of bitmaps is used to display the enhancement level of each DFX effect. They are overlayed on the master bitmap at the numeric display locations of each DFX effect. Each bitmap represents an enhancement level, with a total of 10 possible levels.

    spectrum_1_1.bmp through spectrum_1_20.bmp : This set of bitmaps is used to create an animated sound frequency analyzer during song playback. They are overlayed on the master bitmap over the spectrum analyzer region. Each bitmap represents a frequency level, with a total of 20 possible levels.

    Only one set of 20 bitmaps is necessary to draw over the 10 possible frequency band regions because if no other bitmaps are provided, the same set will be reused to draw over the other band regions. You can see an example of this simple type of spectrum display by examining the "default_(player)_mini" skin.

    However, you have the ability to create 10 unique sets of 20 bitmaps for each frequency band region for a total of 200 bitmaps. When you create each additional set, be sure to use the naming convention "spectrum_2_1.bmp" through "spectrum_2_20.bmp", "spectrum_3_1.bmp" through "spectrum_3_20.bmp", and so forth.

    Keep in mind that Spectrum Band 1 represents the lowest sound frequency (bass), and Spectrum Band 5 represents the highest sound frequency (treble). The default_Universal skin is an example of a skin implementing this more complex Spectrum Display. Note how each band of the spectrum uses a different color.

  6. Edit the skin_definition.txt file
    The skin_definition.txt file is an important link to your skin bitmaps. This file defines the placement (or non-placement) of various DFX components on your master.bmp, the "hotspot" regions of interactive components, and the shape of your DFX skin. The parameters are listed in a precise order and must remain in the same order when you edit the file. You will only be changing the numeric coordinates.

    *Note, you don't have to edit this file if you created a skin that has the same bitmap dimensions (width and height) as the default skin and all of the interactive components are in the same xy coordinate locations as the default skin.

    The coordinate system we've implemented to describe the location of various components uses X to represent the horizontal position and Y to represent the vertical position. The upper left corner of your master.bmp bitmap is represented by the x,y coordinates 0,0.

    If you need reference to better understand the system, we recommend that you open the master.bmp and the skin_definition.txt files of the default skin to compare the coordinates. When you edit the skin definitions for your own skin, you should also have your master.bmp file open so you can define the coordinates.

    The following describes the parameters of the skin_definition.txt file in the order that they appear.

    1. border width
      Represents in pixels the thickness of the DFX window border allowing users to drag DFX around their desktop.

    2. placement - slider (fidelity | ambience | surround | dynamic boost | bass)
      xmin = defines the x coordinate of the left end of the slider track where the DFX effect setting will be at 0.
      xmax = defines the x coordinate of the right end of the slider track where the DFX effect setting will be at 10.
      ycenter = defines the y coordinate or vertical center position of the slider track

      The slider.bmp is placed based on these coordinates.

      Set the coordinates for the slider of each effect (fidelity, ambience, etc.) making sure each slider has a unique set of coordinates.

    3. placement - numeric display (fidelity | ambience | surround | dynamic boost | bass)
      xmin, ymin = defines the location of the upper left corner of the numeric display area. Bitmaps number_0.bmp through number_10.bmp will be placed and displayed based on these coordinates.

      Make sure each effect has a unique set of xmin-ymin coordinates for numeric display.

    4. placement - section button (fidelity | ambience | surround | dynamic boost | bass)
      xmin, ymin = defines the location of the upper left corner of the section on/off button. The section_off.bmp is placed based on these coordinates.

      Make sure each effect has a unique set of xmin-ymin coordinates for its section off button.

    5. placement - (power button)
      xmin, ymin = defines the location of the upper left corner of the Power button. The all_off.bmp is placed based on these coordinates.

    6. placement - (headphone on button)
      xmin, ymin = defines the location of the upper left corner of the speakers/headphones toggle. The headphone_on.bmp is placed based on these coordinates.

    7. placement - (music1 on button)
      xmin, ymin = defines the location of the upper left corner of the Music Type I ON button. The music1_on.bmp is placed based on these coordinates.

    8. placement - (music2 on button)
      xmin, ymin = defines the location of the upper left corner of the Music Type II ON button. The music2_on.bmp is placed based on these coordinates.

    9. placement - (speech on button)
      xmin, ymin = defines the location of the upper left corner of the Speech ON button. The speech_on.bmp is placed based on these coordinates.

    10. hotspot - selection button (fidelity | ambience | surround | dynamic boost | bass)
      Defines the rectangular region that is clickable allowing users to switch a DFX effect on or off. Usually this region is the same size as a section off button. Make sure each button has its own unique region.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    11. hotspot - command button (power)
      Defines the rectangular region that is clickable allowing users to enable or bypass DFX. Usually this region is the same size as the main power button.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    12. hotspot - command button (presets)
      Defines the rectangular region that is clickable allowing users to select DFX presets. Usually this region is the same size as the Preset button.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    13. hotspot - command button (options)
      Defines the rectangular region that is clickable allowing users to select DFX options. Usually this region is the same size as the Options button.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    14. hotspot - command button (help)
      Defines the rectangular region that is clickable allowing users to display DFX help items. Usually this region is the same size as the Help button.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    15. hotspot - command button (headphone on)
      Defines the rectangular region that is clickable allowing users to toggle between speakers and headphones modes.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    16. hotspot - command button (music1 on)
      Defines the rectangular region that is clickable allowing users to switch to Music Type I mode.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    17. hotspot - command button (music2 on)
      Defines the rectangular region that is clickable allowing users to switch to Music Type II mode.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    18. hotspot - command button (speech on)
      Defines the rectangular region that is clickable allowing users to switch to Speech mode.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    19. hotspot - (logo)
      Defines the rectangular region that is clickable allowing users to launch an Internet browser to visit the DFX website.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    20. hotspot - window component (toggle mini mode)
      Defines the rectangular region that is clickable allowing users to quickly switch to the DFX mini-mode skin. Usually this region is the same size as the Mini-mode button.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    21. hotspot - window component (titlebar)
      Defines the rectangular region that is clickable allowing users to drag the DFX window over their desktop.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    22. hotspot - window component (minimize)
      Defines the rectangular region that is clickable allowing users to minimize the DFX window. Usually this region is the same size as the Minimize button.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    23. hotspot - window component (close)
      Defines the rectangular region that is clickable allowing users to close the DFX window. Usually this region is the same size as the Close button.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    24. placement - (Spectrum Region)
      This defines the total rectangular area that is continually refreshed for the spectrum analyzer animation. It should cover the entire area where the five bands of the spectrum will be overlayed on the master bitmap.

      xmin = defines the x coordinate of the left edge of the region
      ymin = defines the y coordinate of the top edge of the region
      xmax = defines the x coordinate of the right edge of the region
      ymax = defines the y coordinate of the bottom edge of the region

    25. placement - (Spectrum Band 1)
      xmin, ymin = defines the location of the upper left corner of spectrum band 1. Bitmaps spectrum_1_1.bmp through spectrum_1_20.bmp are placed based on these coordinates. Spectrum Band 1 represents the lowest sound frequency (bass).

    26. placement - (Spectrum Band 2)
      xmin, ymin = defines the location of the upper left corner of spectrum band 2. Bitmaps spectrum_2_1.bmp through spectrum_2_20.bmp are placed based on these coordinates. If they don't exist the bitmaps for spectrum band 1 are used.

    27. placement - (Spectrum Band 3)
      xmin, ymin = defines the location of the upper left corner of spectrum band 3. Bitmaps spectrum_3_1.bmp through spectrum_3_20.bmp are placed based on these coordinates. If they don't exist the bitmaps for spectrum band 1 are used.

    28. placement - (Spectrum Band 4)
      xmin, ymin = defines the location of the upper left corner of spectrum band 4. Bitmaps spectrum_4_1.bmp through spectrum_4_20.bmp are placed based on these coordinates. If they don't exist the bitmaps for spectrum band 1 are used.

    29. placement - (Spectrum Band 5)
      xmin, ymin = defines the location of the upper left corner of spectrum band 5. Bitmaps spectrum_5_1.bmp through spectrum_5_20.bmp are placed based on these coordinates. If they don't exist the bitmaps for spectrum band 1 are used.

    30. placement - (Spectrum Band 6)
      xmin, ymin = defines the location of the upper left corner of spectrum band 6. Bitmaps spectrum_6_1.bmp through spectrum_6_20.bmp are placed based on these coordinates. If they don't exist the bitmaps for spectrum band 1 are used.

    31. placement - (Spectrum Band 7)
      xmin, ymin = defines the location of the upper left corner of spectrum band 7. Bitmaps spectrum_7_1.bmp through spectrum_7_20.bmp are placed based on these coordinates. If they don't exist the bitmaps for spectrum band 1 are used.

    32. placement - (Spectrum Band 8)
      xmin, ymin = defines the location of the upper left corner of spectrum band 8. Bitmaps spectrum_8_1.bmp through spectrum_8_20.bmp are placed based on these coordinates. If they don't exist the bitmaps for spectrum band 1 are used.

    33. placement - (Spectrum Band 9)
      xmin, ymin = defines the location of the upper left corner of spectrum band 9. Bitmaps spectrum_9_1.bmp through spectrum_9_20.bmp are placed based on these coordinates. If they don't exist the bitmaps for spectrum band 1 are used.

    34. placement - (Spectrum Band 10)
      xmin, ymin = defines the location of the upper left corner of spectrum band 10. Bitmaps spectrum_10_1.bmp through spectrum_10_20.bmp are placed based on these coordinates. If they don't exist the bitmaps for spectrum band 1 are used. Spectrum Band 10 represents the highest sound frequency (treble).

    35. Shape Region Points (optional; not necessary if your skin shape is rectangular)
      If you have created a rectangle-shaped skin (no rounded corners), then you may skip this part. Otherwise, if your skin is not shaped like a rectangle or has rounded corners, then you probably want to make the bitmap area around your shape be transparent, which can be done in this section. All you need to do is specify all the xy coordinates that would form the shape of your skin. The points you specify are "connected" together sequentially as if you were drawing an outline of the shape, and any part of the image outside of the outline becomes transparent. Be sure to connect your points in counter-clockwise order.

      This section is to be placed last in the skin_definition.txt file. The following example defines an 8-point shape:

      8: Shape Region Points [represents total number of pts.]
      0,0 [represents point 1 or starting point]
      0,136 [represents point 2]
      83,136 [represents point 3]
      83,191 [represents point 4]
      272,191 [represents point 5]
      312,136 [represents point 6]
      382,136 [represents point 7]
      382,0 [represents point 8 that's automatically connected to point 1]

    Excluding DFX components:
    If you have chosen to exclude any component from your skin design, you need to specify the coordinates "-1" (negative 1) to "turn off" the component as in the following example. DO NOT delete any lines in the skin_definition.txt file simply because you don't use the component:

    In this example we have excluded the 3D surround feature. Notice that we will "turn off" all components related to 3D surround.
    .
    .
    -1: placement - slider (surround) xmin
    -1: placement - slider (surround) xmax
    -1: placement - slider (surround) ycenter
    .
    .
    -1: placement - numeric display (3D surround) xmin
    -1: placement - numeric display (3D surround) ymin
    .
    .
    -1: placement - section button (3D surround) xmin
    -1: placement - section button (3D surround) ymin
    .
    .
    -1: hotspot - selection button (3D surround) xmin
    -1: hotspot - selection button (3D surround) ymin
    -1: hotspot - selection button (3D surround) xmax
    -1: hotspot - selection button (3D surround) ymax
    .
    .

  7. Create matching Mini Mode skin (optional)
    DFX introduced a new mini-mode feature allowing users to quickly switch DFX to the mini-mode skin. On the default skin, the Mini Mode button is located at the upper left hand corner with the down arrow symbol. Clicking this button will switch DFX to the default Mini Mode skin (default_Universal_mini). This is the default Mini Mode skin for all skins unless an alternative is available.

    You may create a custom Mini Mode skin to match your "normal mode" skin and override the default Mini Mode skin when a user clicks on the button from your skin.

    Instructions:
    Create a new skin folder called "Myskin_mini" and create your Mini Mode skin using the same instructions above. As long as the name of your Mini Mode skin is the same as your "normal mode" skin with a "_mini" extension, your Mini Mode skin will be selected when the user clicks on the Mini Mode button.

  8. Select and Test Your Skin
    Bring up DFX. From within DFX click on the "Options" button and then select "Skin Browser" from the menu. Select your new skin from the list of skins and hit "OK". You will now see your new skin. Go back and make any changes to the bitmaps until you are satisfied.

  9. Submit Your Skin
    When you are done creating your skin and want to share it with the public, send us an email with your skin components as a compressed Zip file.

    Instructions for creating your Zip file:
    1. Include all image bitmap files
    2. Include a skin_definition.txt file
    3. Include a skin_info.txt file with the following information:

      Skin Name:
      Developer Name:
      Email Address:
      Skin Description:

    Zip files containing anything other than bitmaps and text data will be deleted.

    Please click here to upload your Zip file.

    Submission Agreement
    By submitting your skin to FXSOUND (each a "Submission") you understand and agree that you are giving a license under your intellectual property rights to all authorized users. In addition, you are giving FXSOUND all the necessary rights to make your Submission available for distribution, including but not limited to, website downloads and software installation packages.

    No compensation will be paid with respect to the use of your Submission, as provided herein. FXSOUND may remove any Submission at any time in its sole discretion.

    By contributing a Submission you warrant and represent that:
    • Your work is completely original or you obtained the necessary permission and rights to use copyrighted materials
    • You own or otherwise control all of the rights to your Submission including, without limitation, all the rights necessary for you to provide, post, upload, input or submit the Submission
    • Your Submission does not contain any viruses, Trojan horses, worms or other components designed to limit or harm the functionality of a computer

  10. Congratulations! Once your skin has been approved it will be posted and enjoyed by millions of music fans around the world.

If you have any question about designing skins for DFX, please click here to contact us.