Hi, my english is bad, but I will try explain to you.
Considering that you already had designed the skin in your image editor, first thing to do is download a xml editor, I use XML Copy Editor (you can use the default notepad too, but I think it's bad

)
Now go to the skin folder, choose one skin that you like and change the extension from .wzp to .zip and extract it.
Replace the all the .png files with yours. In almost all folders theres a .xml too, you will not need edit the little ones (buttons in most) if you do, their are self-explanatory.
The main .xml files are Skin.xml, Mini.xml, Popup.xml, Library\Library.xml and Playlist\Playlist.xml.
I'll give a example of Skin.xml here, which is divided in layouts, and every layout have Elements (.xml files for buttons, playlist, texts and so forth) and Background (images or fill).
Basically you'll have to change the position of everything, modifying layouts or creating new ones.
Some basic examples:
Here I have the Library on the top left (Top="0" Left="0"):
<Layout Name="Library">
<Position Top="0" Left="0" Width="200" />
<Elements>
<Library>
<Position Left="0" Right="0" Top="0" Bottom="0" />
<Skin File="Library\Library.xml" />
</Library>
</Elements>
</Layout>
Here I have the Controls on the bottom (Bottom="0"), with BackControls.png in background:
<Layout Name="Controls">
<Position Bottom="0" Left="0" Right="0" Height="100" />
<Elements>
<PlayPause>
<Position LeftRight="0" Top="23" />
<Skin File="SwitchPlay\Play.xml" />
</PlayPause>
</Elements>
<Background>
<Image>
<Position Bottom="0" Left="0" Right="0" />
<Image File="Background\BackControls.png" />
</Image>
</Background>
</Layout>
I hope this helps, it's hard to explain everything, so I highly recommend you poke around all to learn better.