Forum: Skins - Topic: How To Skin Virtual DJ And How To Resize VDJ Skins - Page: 1
All you ever wanted to say or know about skins
See the latest skins submissions
Please remember skins are for registered users only. Home users may download - skins marked home level , pro users may download, all skins.
Skins can be also used on the MAC version please check the mac forum for more information.
First of all, always remember you don't need to be a genius to begin to skin.
Choose your favorite skin in the skin download section. Take an easy skin, with less buttons or functions in order to make sure
you understand the way it works.
OK Unzip the skin file.
Unzip directly in the skin folder this way the skin will appear in VDJ with it's filename only (easier to rapidly check the results of the modifications). This way you won't need to rezip and move files these operations take many mouse clicks and time.
Open the BMP file
When Paint appears, make sure you can see the status line or click on the view menu then check for the status bar.
Status Bar in PaintShop Pro.
The .bmp file contains all the graphics needed in your skin. You can use any bitmap editor (from Paint to Photoshop) to modify or create it. The bitmap will usually have a width of 1024, and a height of more than 768. In the first 768 rows you'll find the background used for your skin. The next rows are used to store additional graphics, like pushed or selected buttons.
OK. Let's move your mouse around in the pic, and see in the status bar (right) the coordinates of the point you focus. You can focus very precisely when zooming on a part of the pic. Try to draw a selection box : the status line tells you the width and the height of the box. Okay now you can find the line 768 (depending on the skin resolution) in the pic. Below this limit, the skin user won't see anything. Look around, you can see there are all the highlighted and animated stuff, lightening visual parts, moving sliders and so on.
=================================================== Open the XML file
For xml editing you can use Open XML Editor (free)
What is it? The xml script will tell to VDJ all the skin's picture informations, such as the position of the different buttons, where the highighted buttons are, where the browser will be, and so on. WOW there are MANY numbers here! These are the coordinates you saw in paint. You will use paint to get the pos and width of the buttons, then report them in the xml file, and again, and again in order to get the skin working. All the objects in the skin have name coordinates and even some special fields that you have to know. This is very important, the more you learn about the skin engine, the better the skin is. To help you to learn the different elements, Atomix Production wrote a skin development knowledge base Learn all the page and you'll become a skillful skinner! It can sound like a joke but it's true.
OK, Take one button, let's say play. Go to paint and try to move the play button to another location. Save the file, but don't quit paint. Now go to the script and find the line named button action="play_stutter".
Change the button's ordinates according to the Paint status bar. Save it all and test the skin in Virtual DJ to verify your work.
You'll see that verifying is a hard part of the job (I verify maybe each minute the work, except for very long processes. Just modifying a skin will let you know how hard the work is, and how long the process can be. It's not that hard just reporting thousands of numbers into a text file.
Creating an entire new skin
Creating a skin is not that hard, in practice but on the other hand it requieres specific skills. The hard work won't come from the xml script but from the picture part. It will take a long time to elaborate a great bmp file with all buttons (activated or not), with all the features of VDJ. To be beautiful even a small animation part can take hours! Even days! You will have to 'imagine' all the parts of the skin and 'manage' the space allowed. Be consciousness about those things.
What does a skin need in order to go in VDJ?
Must have the 'skin' header & footer
Must have the VDJ logo.
At this point your skin is valuable for VDJ. The following parts are needed to navigate :
A 'browser' element
Minimize, maximize, close buttons
A 'settings' button (NOT NEEDED TO GET STARTED, BUT NEEDED TO CHANGE THE SKIN AGAIN!)
In order to have your skin published
It must the VirtualDJ Logo not an image on the
bitmap.
The Xml version must refer to 3 or above otherwise it
will not be published.
Reference to VirtualDJ website must be found
somewhere on the Bitmap.
There must NOT be any personal email address or web links in either the XML or BMP (you may include your name though)
Feel free to drop me a line with anything I can assist you with. My MSN details are in my
blog, or you can PM me here.
================================================================== VDJ Skin - How to Resize VDJ Skins
So what does it do? It resizes your VirtualDJ skins.
Here is a little tutorial with default options to resize a VDJ Skin File.
After, you can experiment yourself the advanced options to enhance the result.
At the end of the file you can find some other infos that may be useful to tweak the software.
Unzip a skin
Take a zip skin file (by default they are in C:Program FilesVirtualDJSkins).
Uncompress it (open the folder in windows explorer, copy the files and paste them in the skins folder.
Open VDJ Skin Resizer. Click on the OK button on the Message Box.
Resize the XML config file
In Input File, enter the path of the xml file
extracted from the zip. You can do it by clicking on the "..." button to find
the file.
After opened the xml file, it should automatically
fill the Input Size. If this is not the case, open the XML file with Notepad
or another text editor, and look at the very first line, there should be
"width" and "height" values. You must then enter them in the Input Size boxes
(first for width, second for height).
Now enter the desired Output Size (it should
automatically fill with your desktop resolution). Like before, first box is
for width, and second for height.
Enter the desired Output File, for this you can click the "..." button, the program will then automatically propose a filename based on the Input File, but with "-resized-WIDTHxHEIGHT", so you don't have to type anything.
Resize the Image skin file
Now click on the "Image" pannel at the upper part of
the window to show the Image resize parameters.
In Input File, enter the path of the image file
extracted from the zip. You can do it by clicking on the "..." button to find
the file. The Input Size fields will automatically be filled by the size of
the input image, but if this is not a valid image then it won't show anything.
But you still can try to resize the image.
The Output Size should be automatically refreshed
proportionally to the size of the input image. Now you can enter the desired
size.
Tip: You should try to put the same width as for the XML file, to have the same size.
Now enter the desired Output File. You can click on the "..." button, and the program will automatically propose you a filename based on the input image name.
Tip: Try to put the same name as for the XML file, but changing the ".xml" extension to ".bmp", else the final skin won't work.
Run the job
Now go to "Execute" pannel, and click the button
named "Let's go!".
Wait until the process is finished
If you have done all the steps carefully, you shouldn't get any error. If this is not the case, then redo the tutorial since the beginning, including unzipping skin file.
Preparing the skin for VirtualDJ
If the resize process is finished, you can then close
VDJSkinResizer.
Now, you can compress the skin (windows compression)
or test it uncompressed.
Make sure the finished files are in the VirtualDJ skins folder (by default: C:Program FilesVirtualDJSkins).
Load the new skin in VirtualDJ
Launch VirtualDJ
Click on the "Config", "Set" or "?" button to access
VirtualDJ Options. Usually this button is on the upper-right, middle-right, or
at the bottom-left, but it can be at another place if you use a different skin
than default one.
Go in Skin pannel.
Select your skin in the list. The name should be either: "YourZipName:YourSkinName" or "YourSkinName" (for uncompressed)
If everything worked as expected, the skin should be loaded and ready to be used.
Enjoy ! =)
Final Note: You can note that some pixels and animations may be mis-aligned. You can correct these problems manually.
The .bmp file contains all the graphics needed in your skin.
You can use any bitmap editor (from Paint to Photoshop) to modify or create it.
The bitmap will usually have a width of 1024, and a height of more than 768.
In the first 768 rows you'll find the background used for your skin.
The next rows are used to store additional graphics, like pushed or selected buttons.
The .xml file describes each element of your skin.
For each element, it defines what it should be used for,
where are the graphics used for its various states (in coordinates from the
.bmp file),
and various other things.
The xml file
can be edited from a simple text editor (like notepad), but it's more likely
that you will install a specific xml editor
(by the way, by default, Windows will open a .xml file in internet explorer where you can read it but can't modify it).
The xml file is composed of a root element (Skin), which contains all the elements of your skin.
There are 10 different types of elements:
chan can take its value between "1", "2",
"default" (default), or "active".
value specify a value that is
action dependent (usually you won't define a numeric value since the slider's
position will define it,
but you can use the "temporary" value for example)
rightclick can specify a different value if
the slider is clicked with the right mouse button
leftclick can specify a different value if the
slider is clicked with the left mouse button
dblclick can specify a different value if the
slider is double-clicked
direction (horizontal and vertical sliders only) :
possible values: "up" (default) or "down"
relative : if set to "yes", the slider will move its
associated value relatively
And its definitions are:
: Give the width and height of the
slider
: Give the position of the slider on the
screen
: Give the coordinate of the graphic to use
when the slider is normal
: Give the coordinate of the graphic to
use when the slider is selected
: Give the coordinate of the B&W
graphic that should be used as a clip mask when drawing the slider
: Give the coordinate of the B&W
graphic that should be used as a mask to decide if the mouse is over the
slider
: Set a simple rect
zone as a mouse mask
: Set a simple circle zone as a
mouse mask
(horizontal and vertical sliders only)
: The definition is the same as a
element without an action, and it will act as a fader for the slider
(circle sliders only) : define the circular slider
geometry with these properties:
x : center of the circle
y : center of the circle
anglemin : angle (in degree) for the zero position of the slider
anglemax : angle (in degree) for the maximum position of the
slider
sectsize : if not zero (default value), the slider will have a
"fader" of sectsize width
direction : possible values: "cw" (default) or
"ccw"
(round sliders only) :
The move possible values are "full", "horz",
"vert", "v" or "circ". The
element may contains these definitions:
> : give the coordinate of the graphics to use for the
slider (depending on the slider value).
If
nbx is specified, the graphic is split on several rows
> : give the coordinate of
the graphics to use when the mouse is over the slider
The browser element sets the space that will be used to draw the windows
(search, files, ...). You can only have one browser element in a given skin
file, but you do have to define one.
The syntax of the browser element is .
The
browser definitions are:
: Give the width and height of the
browser window
: Give the position of the browser window on
the screen
: Give the main text's font, size and colors
: Give the options text's font, size and colors
stripescolor="" trackcolor1="" trackcolor2=""> : Give the colors and
font for the widgets (scrollbars, ...)
: Set a color transformation matrix that will be applied on the
built-in graphics (icons, ...)
The rhythm element defines where and how the rhythm curves will be displayed.
The syntax of the rhythm element is .
The rhythm
definitions are:
: Give the width and height of the
rhythm window
: Give the position of the rhythm window on
the screen
: give the background graphic to be used
: give the graphic to be used when drawing
the curve for the first desk
: give the graphic to be used when drawing
the curve for the second desk
: give the graphic to be used when drawing a
point that belong to both curves
: (optional) Give simple colors to the curves. The
colors must be a key in the standard VGA palette.
This can be faster on slower systems than to use the chan1,
chan2 and both definitions (see below)
: Set up the CBG (computed beat
grid) for the default channel. The element has these
sub-elements :
: Give the width and height of
the CBG window
: Give the position of the CBG window on
the screen
The songpos is a special slider that is used to display and set the song
position, display the song's structure, display and set the first five cue
points.
It has all the properties and definitions of a , plus those:
: Give the graphic to use for portions of
the song not played yet, and without any volume
:
Give the graphic to use for portions of the song not played yet, and with a
maximum volume
(the display will be a fade
between down and volume)
: Give the graphic to use for portions
of the song already played, and without any volume
: Give the graphic to use for portions of the song already
played, and with a maximum volume
(the display
will be a fade between selected and volumeselected)
: Define the sprites to be used as CUE markers.
Includes the following definitions :
: Give the width and height of
the cue sprite
: give the cue sprite graphic
: give the graphic to be used when the cue
is pushed
: give the graphic to be used when the
mouse is over the cue
: Give the coordinate of the B&W
graphic that should be used as a clip mask when drawing the
cue
A grabzone define a zone that can be used to move the VirtualDJ's window if
it is not maximized. If no grabzone is defined, any zone that is not a
defined element act as a grabzone.
The syntax of the grabzone element is . The
grabzone definitions are:
: Give the width and height of the
grabzone
: Give the position of the grabzone on the
screen
: Give the coordinate of the B&W
graphic that should be used as a mask to decide if the mouse is over the
grabzone
A pannel is a zone that group together several other elements, in order to
hide or show all of them at once. Pannels are very usefull if you want to put
several groups of elements on the same place, and switch from one group to
another with a button or a shortcut.
The syntax of the pannel element is . The properties values are:
visible : "yes" to have it shown at the begining (when
the skin is loaded), "no" to have it hidden, "timecode" to have it available in timecode mode only, or
"DJConsole" to only have it react to Hercules DJ Console buttons
id : every element which has a pannel="" equal to this
id will belong to this pannel
group : only one pannel
from a common group can be shown at a time (that means that when you show a
pannel belonging to a group,
all the other
pannels from that group will be hidden)
The pannel definitions are:
: Give the width and height of the
pannel
: Give the position of the pannel on the
screen
: Give the coordinate of the graphic to use
when the pannel is displayed
: Give the coordinate of the graphic to use to
erase the pannel when it is hidded
: Give the coordinate of the B&W
graphic that should be used as a clip mask when drawing the pannel