Virtuosa Phoenix Edition : Skin Design Kit



The goal of this document is to help you design your own skins for Virtuosa. As one of Virtuosa's strengths is its full-screen interface, it is great to be able to customize it completely and easily . With this simple step-by-step document, you will see how easy it is to make great skins, and how everything can be defined to make Virtuosa look the way you want it to look !

The tutorial describes Virtuosa's SKIN.INI configuration file settings and provides you with examples. Please open the SKIN.INI configuration file (with Notepad), so you can follow the descriptions of the sections in parallel in the file itself.

The Skin.ini and all Bitmaps should always be stored in the same sub-directory in the Virtuosa Skin Folder (C:\Program Files\Virtuosa\Skins\YOUR SKIN)

Once done, you can share your creations with others by submitting them to us on http://www.virtuosa.com/skins 


SECTIONS
[Skin Information]

This section of the SKIN.INI configuration file holds the information that will appear in the Skin Information Window (which is accessible by the "?" button in the Options/Appearance/Skin Chooser window when using Virtuosa). Version=Skin version number.
Title=Skin title (will be displayed in the Skin Chooser dialog Box).
AuthorName=Put your name or pseudo there.
Description=Enter skin description.
AuthorUrl=Your website address.
AuthorEmail=Your e-mail address (if you wish).
AuthorLogo=Ready for future release.
Top
The Skin Chooser Window in Virtuosa.


The Skin Information Window.

[Bitmaps]

Here are the links to the skins' bitmaps for the Virtuosa interface.

IMPORTANT: All Bitmaps should all be in 256 colorswith standard or custom palette. Black with index 0 and White with index 255 in custom palette. Black color ( RGB 0,0,0 ) is used as transparent color.

TIPS :
  • With some screen resolutions (Ex : high color 16 bits), the RGB VALUES (32 Bits) are converted before being displayed. This can create some UNWANTED TRANSPARENT AREAS. To eliminate this effect, avoid using the RGB colors below value: (32,32,32)
  • All missing bitmaps are automaticaly replaced by Virtuosa's default ones.
    •
    Virtuosa displays buttons under 3 differents states :

    OFF= Normal state
    ON= Active state
    DISABLE= Disabled state

    Each state, for each button, is stored uder different bitmaps. In other words, for each button, you will need three bitmaps : BUTTON MAIN (used for Main ToolBar)
    Size = 48 X 988 ( 19 Buttons 48 X 52 )

    ButtonOffMain= Name of Main button bitmap for Normal state.
    ButtonOnMain=Same for Active state.
    ButtonDisableMain=Same for Disabled state.


    BUTTON CHILD (used for MDB and Playlist)
    Size = 32 X 595 ( 17 Buttons 32 X 35 )

    ButtonOffChild= Name of Child button bitmap for Normal state.
    ButtonOnChild=Same for Active state.
    ButtonDisableChild=Same for Disabled state.


    BUTTON PLAYER (used for CD and Now Playing)
    Size = 48 X 490 ( 14 Buttons 32 X 35 )

    ButtonOffPlayer= Name of Player button bitmap for Normal state.
    ButtonOnPlayer=Same for Active state.
    ButtonDisablePlayer=Same for Disabled state.


     TIPS :
  • The first button of each bitmap has NO LOGO for future release compatibility.
  • Avoid using anti-aliasing in your Graphic Software for button borders (Virtuosa automaticaly does anti-aliasing).
    •
    Buttons... as they will appear in Virtuosa Interface


    Sample
    ButtonOffPlayer

    Sample
    ButtonOnPlayer

    Sample
    ButtonDisPlayer
    BLACK NOTE
    Size = 12 X 18

    BlackNote=Name of the bitmap used for the Toolbar.

    DESIGN LOGO
    Size = 360 X 28

    DesignLogo=Name of the Designer's logo that will appear in the "Title Toolbar".
    BlackNote and DesignLogo in the Title Toolbar.
    LITTLE LED
    Size = 8 X 64 (8 buttons 8 X 8)

    LittleLed=Name of the small bitmap used to display Play, Stop, Pause and Record status next to the tracks

    BUTTON CUSTOM WINDOW
    Size = 16 X 320 ( 20 Boutons 16 X 16 )

    ButtonCustomWindows=Name of the bitmaps used for the window controllers

  • One State (Normal)

    Scrollbar Button (Up, Down, Left and Right)

  • Two States (Normal and Clicked)

    * Close button
    * Expand/Reduce Toolbar (Up, Down, Left and Right)
    * Restore, Maximize and Minimize button
    •      TIPS :
  • ButtonCustomWindows is the only Bitmap in Virtuosa that may be resized depending on the user's screen resolution.
    •
    ButtonCustomWindows and LittleLed in the Music Database window.
    BACKGROUND
    Size = Free

    Background=Name of the bitmap used as background

     TIPS :
  • Background Bitmap is automaticaly tiled.
  • Background Bitmap should be saved with any 256 color palette (custom or optimized).
  • Background Bitmap has NO Transparent Color.
  • The transparency effect in Virtuosa windows can disappear on too dark backgrounds.
    •
    BackGround Samples


    Top



    [Covers]

    This is the link to the bitmaps used for the track "CD" covers. By default, Virtuosa displays TWO covers for each song, based on the song file format (MP3, WAV, etc). First, a small one (LittleCoverDef) that appears in "Database" and "Playlist" windows, and second, a bigger one (200 X 200) to be displayed in the "Now Playing" window.

    As Virtuosa can play more than 30 different file formats (!!!) ... covers are dynamically computed by default, based on the information you provide.
    But you can also create different images for each file format if you wish to define everything (you can also choose to do it just for the most popular formats CD-Audio, Mp3, Wav, Wma ... ).
    LITTLE COVER
    Size = 48 X 48


    LittleCoverDef=Name of the DEFAULT bitmap used for Little Cover.



    LARGE COVER
    Size = 200 X 200


    CoverDef=Name of the DEFAULT bitmap used for Large Cover.



    COVER FONT
    Size = 936 X 24 ( 26 Letters (A-Z) + 10 Numbers(0-9) 26 X 24 )


    CoverTextFont=Name of the bitmap used for Font

     TIPS :
  • Fonts are used to automatically display the format name OVER the standard cover, when cover pictures are missing or when new file formats are supported with no pre-defined covers (Audio Plug-ins).
    •


    LITTLE COVER FORMAT
    Text Field

    LittleCoverFormat= specifies the file format used for the Little Cover file.

    Example : If the LittleCoverFormat is.bmp, Virtuosa will search for a file named LittleCoverDefMp3.bmp in the skin directory.
    If the file exists it will be displayed for each mp3 file in the database.
    But if it does not exist, Virtuosa will dynamically create a cover using LittleCoverDef and CoverTextFont...



    COVER FORMAT
    Text Field

    CoverFormat=Same as previous, but for Cover Format.
    TIPS :
  • All of the additional Cover or LittleCover should be in the same file format.
  • The user can also change the cover for each file by choosing any supported images in the "TRACK PROPERTIES" windows.
  • To avoid black borders around dynamic text, fonts in DefCoverFont should always be anti-aliased.
  • Picture formats can be any of the supported formats (bmp, jpg, gif, png, pcx, tga or dib).
  • Only the first frame of animated GIFs will be displayed.
    •

    Covers... as they will appear in the Virtuosa Interface.

    Default DefCoverFont.bmp extract ...


    Default LittleCoverDef.bmp
    Default CoverDef.bmp
    Top



    [Settings]

    Stores the RVB decimal values ( From 0,0,0 to 255,255,255 ) for all other elements such as windows, texts and animation colors.

    TIPS :
  • You can easily try different RVB values for the same graphic files, by using a set of different Skin.ini configuration files (with different names and a different "Title= "fields) in the same Skin Directory.
    •
    ColorActiveCaption=Color of the Active Title Bar.
    ColorInactiveCaption=Color of the Inactive Title Bar.
    TextColorActiveCaption=Color of the text in the Active Title Bar.
    TextColorInactiveCaption=Color of the text in the Inactive Title Bar.

    ColorShadow=Color of the window shadow.
    ColorPlayAnimate=Color of the Play Animation and Duration Text.
     TIPS :
  • Using the value 0,0,0 for ColorActiveCaption or ColorInactiveCaption may have Unpredictable results (transparency)
    •
    Windows Active and Inactive
    The Virtuosa All Text elements (in the upper-left Virtuosa menu or in windows) have 3 States Standard, Selected and Disabled.
    Each text can be defined with 2 colors (Foreground and Shadow).
    TextColor=Color of Standard text
    TextColorShadow=Color of the Shadow for Standard text
    TextColorSelect=Color of Selected text
    TextColorSelectShadow=Color of the Shadow for Selected text
    TextColorDisable=Color of Disabled text
    TextColorDisableShadow=Color of the Shadow for Disabled text

     TIPS :
  • The shadows over any text can be removed by using the keyword "=None".
  • Do not use the same values for each state (ex: 255,255,255) as it would be confusing for the users (they could make no difference between Allow and Not Allow Command).
  • If the values of the foreground and shadow text are too close, the text might become unreadable.
    •
    Zoom (X 2) on Text Menu
    TextColorButton=Color of Text Over Button

    OpacityPourcent=Windows Opacity Percent ( from 0 to 100 % )

    FontName=Unused, Reserved for future release.
    Text Over Button an Transparency = 50%
    Top