Fast Newbie's Skinning Walkthrough for MM 3: Difference between revisions

From MediaMonkey Wiki
Jump to navigation Jump to search
(Major edit and restructuring)
(steegy there was too much detail to be of fast use for newbies who need a checklist not a lab report)
Line 1: Line 1:
''Tutorial written by Roving Cowboy.''
the theme editor is an program made to edit skin files and make new ones.  


the version to use now is the found at a link in this post by steegy.


The [http://www.mediamonkey.com/contrib/artwork/themeeditor7.exe theme editor] is the (only) program used to create and edit skin files. The following tutorial will show you some basic steps to get you started with skinning for MediaMonkey v3.  
http://www.mediamonkey.com/forum/viewtopic.php?p=70332#70332


===Open up an existing skin===
click that link it goes to the post then just click on the link steegy gave.  
#Make a copy of an existing skin, e.g. the default skin "''Royal Blue.msz''" (usually located under "''C:\Program Files\MediaMonkey\Skins''"), and place it in an easliy accessible location.
#Change the extension of the copy from ''.msz'' to ''.zip''.
#:'''Note:''' If you can't see the extension at the end of the file name, you might first have to change the folder settings in Windows: uncheck "Hide extensions of known file types", through menu Tools > Folder options... > tab Display.
#Unzip the ''.zip'' file, e.g. as subfolder of the folder where the ''.zip'' file is in.
#Open up the unzipped folder and look for the ''.mskn'' files. These are the files that can be opened and edited by the theme editor. The one named ''Theme.mskn'' is the skin file that specifies the skinning of the main MediaMonkey program (not the player). If there is a ''default.mskn'' file present (from an older  v2 skin), you can rename it to ''Theme.mskn'' or delete it (if you already have a ''Theme.mskn'' file).
#A good advise is to make an empty subfolder for each ''.mskn'' file you have. In the next section you will export the source images for the ''.mskn'' file you want to edit, so it's best to keep these source images separated from the other skin's images.
#Next to the ''Theme.mskn'' (main program) skin file, there are also the player skin files:
#*''Player.mskn'' and ''Player.ini'' for the internal player
#*''FloatPlayer.mskn'' and ''FloatPlayer.ini'' for the floating player
#*''MicroPlayerH.mskn'' and ''MicroPlayerH.ini'' for the taskbar player (use H for a horizontal player, use V for a vertical player)
#:These different player skins are similar, so to start you can create them all out of a base file, like the ''Player.mskn'' file you start with.


===Export the skin's images===
to learn on making a skin.  
#When you're ready to start editing, start the theme editor and load the ''.mskn'' file you want (located in the directory where you unzipped the files) through menu File > Open...
#:'''Note:''' It's best to work on and complete one ''.mskn'' file at a time. That way, you can work more efficiently and you'll be able to use a completed ''.mskn'' file as base for another one.
#In order to modify the images used by the skin, you first have to export them. For that, use menu File > Export Bitmaps... This will export all image resources used in that skin as bitmaps. You can put these bitmaps in the folder you created specially for each ''.mskn'' file.
#Go to the folder where you exported the bitmaps to and take a look at the images. Usually you'll see either one big image ([http://www.mediamonkey.com/wiki/index.php/Image:Skin_layout_guide.jpg annotated example]), or a lot of small ones. The <font color="magenta">magenta</font> color on the images represents the transparent parts of the image. You might want to change the file names of the images first, as the theme editor adds ''.bmp'' to the complete file name without removing the previous extension first (e.g. it creates "''myimage.png.bmp''" instead of "''myimage.bmp''").
#:'''Note:''' For the moment, you won't need theme editor anymore. You can minimize or close it.
#To modify the exported images, you can use any image editor that supports bitmap files. Even MsPaint supports this, but a more advanced image editor (e.g. [http://www.getpaint.net/index2.html Paint.Net], [http://www.adobe.com/nl/products/photoshop/photoshop/ Adobe Photoshop], [http://www.wingimp.org WinGIMP], [http://www.corel.com/servlet/Satellite/us/en/Product/1166553885783 Corel Painter], ...) is recommended.
#Modify all the skin's images that you want to change, and save them on the same file name.


1. make a copy of the default skin royal blue.msz


===Replace the skin's images with the modified ones===
2. place that copy of the skin in a new folder with the them engine.  
#Once the images have been edited, reopen the ''.mskn'' file (in case you closed the theme editor, otherwise just make it visible again). In the theme editor's theme tree, click the + sign in front of "images". It will show you a list of all the images in the ''.mskn'' file on the left, and 3 buttons (Add Image..., Delete Image, Replace Image...) in the middle. Click on the name of an image that you want to replace with the modified version.
#To replace the image, click on the "Replace Image..." button. Then click "Load bitmap..." and browse to the modified image and click Open and then OK.
#:'''Note:''' You don't have to worry about "From Gallery..." or "Mask" yet. You will find out what those mean later. Just remember that the theme editor by default will interpret all <font color="magenta">magenta</font> color on an imported image as transparent.
#Do the same for all images you modified outside the theme editor.
#When all needed images in the ''.mskn'' file(s) are changed and replaced, you then copy the ''.mskn'' file(s) to the main folder where you originally unzipped them.


===Other skin files to include===
3. change the name of the copy of the skin file from .msz to .zip  
#In the main folder, you can also create an "''Icons''" folder (if it isn't there already). There you can put an image ("''NoAArt.png''") that is used when there's no album art. Later on, you will be able to put your custom skin icons there that will replace the respective original MediaMonkey program icons.
#You can also change the background images for the various panes in MediaMonkey:
#*''sdb_background_aaview.bmp'' for the Album Art background
#*''sdb_background_list.bmp'' for the Tracks List background
#*''sdb_background_playing.bmp'' for the Now Playing background
#*''sdb_background_tree.bmp'' for the Tree background
#:Resizing the images (certainly the 'list' and 'playing' one) can be tricky, so for now it's best to stick with the size and only change the image itself.
#Now everything is changed and all skin files (the ''.mskn'' and ''.ini'' files, the ''Icons'' folder and the background images) are present. Select all those files/folders and zip them back to a ''.zip'' file (e.g. "''MyNewSkin.zip''"). Then rename the ''.zip'' extension to ''.msz''.
#:'''Note:''' Don't forget to add a ''Readme.txt'' file too, with some information about the script like it's name, release date, author, origin/idea, ...
#Copy/move ''.msz'' skin file to MediaMonkey's skins folder (usually "''C:\Program Files\MediaMonkey\Skins''") to complete adding the new/modified skin to MediaMonkey.
#:'''Note:''' MediaMonkey will read subfolders in the ''Skins'' folder in the same way as it reads the ''.msz'' files. So while you're creating and testing your skin, you can put all the skin files in a subfolder of MediaMonkey's ''Skins'' folder (with the skin's name as folder name), without having to zip/rename constantly. Once you completely finished the skin, you can zip the folder and rename it to a ''.msz'' file.


===Test the skin in MediaMonkey===
4. unzip the file in to that same folder it is in.  
*If MediaMonkey isn't running yet, then start it now. You can test your skin in real-life by selecting your skin from MediaMonkey's settings: menu Tools > Options... > Appearance > Skin > Select Skin. Choose your skin and click OK.
*:'''Note:''' To reload a skin (e.g. if you modified it while MediaMonkey was running) you don't have to restart MediaMonkey. Just go to the options where you can select the skins and reselect your skin (select another skin and then select your skin again).
*Now you can check out all of the skin elements as they are used in MediaMonkey, and see if anything needs to be fixed or improved.  


5. then just look for the mskn files if you see one that says default in the folder after you unzipped the royal blue skin you can delete that default one but only from that new folder you just made.
you need to look for the .mskn files those are the ones that are opened
and worked on by the theme engine.


6. find all the mskn files you then should make a folder for each mskn file in the skin just to keep the images separated. then copy or move the mskn file for the name of the folder you made for it. in to that folder.


7. you will have to copy the micro player mskn and ini files then rename them both the copy's and the original one. they should be named micorplayerH.mskn and microplayerH.ini and micorplayerV.ini and micorplayerV.mskn.
they are both the same player just one is vertical and the other is horizontal.


''Enjoy, and good luck on making new skins. Feel free to ask any questions you might have, preferably using the [http://www.mediamonkey.com/forum/viewforum.php?f=9 skinning forum] or by sending a private message to one of the skin makers out here.''
8. you need to once you get all the mskn files copied and or moved in to their own folder, it is time to get the theme engine in to use. start the theme engine up and use its open button to browse to the folder for the
first one you want to change images on. then open that folder's mskn file.


--- [[User:Rovingcowboy|RovingCowboy / Keith hall]]
9. now look at the engines menu bar. click on the word file or edit. you need to find the words export bmp's click on that export bmps.
on that panel make sure it will export them in to the folder that mskn file is in. then click on export. then close out and exit the theme engine for now.
 
10. now go in to that folder and look around at the images.
you will see a couple big images with lots of pink on. that is the skin or part of it. you need to open that image with your image editing program like picture it. but first check the format of the images. for some reason when i export the images from the skin's mskn file the engine adds an extra set of format letters? remove the last set so it looks like [http://www.mediamonkey.com/wiki/index.php/Image:Skin_layout_guide.jpg themeskinimage.png] and not like .png.bmp
once you open the image in your photo editor go to work scanning the images on the makin / working image there are some places you can cover the pink but not all places. just for the first time cover the exact same images
you see on the main image map.
 
11. do that with all the images and reopen the mskn file with the theme engine editor this time click on the plus sign by the word images.
it will show you a list of images in the mskn file. and 3 buttons. click on the name of an image and then on the replace image button then browse to the same image name that you changed and put that in the mskn file it will be used now. so do that to all the images that were in that mskn file that you changed.
 
12. now do the same for the other mskn files. the one called theme has the most images to change so it will be the toughest one.
 
13. when all images are changed and replaced in their respective mskn files. you then if the mskn files are in separate folders. copy all the mskn files and paste them back in the main folder that they were originally unzipped in .
 
14. now you see the icon folder. that is only usable for the no album art image. you can open that image up and change it if you want too.
 
15. now every image that was unzipped in to the folder like the sel.png and the sdb list background images? change them to what you want.
only the long thin ones cant be changed in size and no image will work on them with out some trickery so just change their colors for the first attempt at skinning.
 
16. okay now all is changed and all the mskn files are back in the folder with each other. now just select all the images and ini and mskn files and the icon folder. use your zipping program and zip them in to one zip file.
change the name of the zip file to what ever name you want to call your new skin and make it an .msz file.
 
17. now copy that msz skin file you just made. take it to the program folder you made for the mm3 alpha test version. then in that folder you will see a skins folder go in to that skins folder and paste that new skin you made in there.
 
now when you go and open mm3 you can go to the menu bar click on tools go to the options link click the link when the panel shows up you just scroll the tree down to see the directory for skins. click on skins and you will see the choices of skins you have on the right select the name of the skin you just made and monkey will change to use it then click okay.
 
now check out all the stuff and see if anything needs fixed in your new skin.
 
the media monkey 2.5.5 skins are made the same way only there is no image map and they are a combination of winamp classic skins and a theme .mskn skin. you unzip that wsz file by changing it to zip just like the mm3 skins only when you unzip it you will see all the winamp images that you need to change in your image editor.
and an mskn file you use the theme engine on that file tool only there is tons of images in it since there is no image map.
 
mm 2.5.5 skins take me about 15 to 20 hours to make i can get the mm3 skins done in about 4 to 6 hours depending on how much i change.
 
enjoy and good luck on making new skins.
any questions ask away lots here can answer.
but i don't work so i am in here a lot.
hope to see new skins shortly glad your willing to make some

Revision as of 07:53, 6 April 2007

the theme editor is an program made to edit skin files and make new ones.

the version to use now is the found at a link in this post by steegy.

http://www.mediamonkey.com/forum/viewtopic.php?p=70332#70332

click that link it goes to the post then just click on the link steegy gave.

to learn on making a skin.

1. make a copy of the default skin royal blue.msz

2. place that copy of the skin in a new folder with the them engine.

3. change the name of the copy of the skin file from .msz to .zip

4. unzip the file in to that same folder it is in.

5. then just look for the mskn files if you see one that says default in the folder after you unzipped the royal blue skin you can delete that default one but only from that new folder you just made. you need to look for the .mskn files those are the ones that are opened and worked on by the theme engine.

6. find all the mskn files you then should make a folder for each mskn file in the skin just to keep the images separated. then copy or move the mskn file for the name of the folder you made for it. in to that folder.

7. you will have to copy the micro player mskn and ini files then rename them both the copy's and the original one. they should be named micorplayerH.mskn and microplayerH.ini and micorplayerV.ini and micorplayerV.mskn. they are both the same player just one is vertical and the other is horizontal.

8. you need to once you get all the mskn files copied and or moved in to their own folder, it is time to get the theme engine in to use. start the theme engine up and use its open button to browse to the folder for the first one you want to change images on. then open that folder's mskn file.

9. now look at the engines menu bar. click on the word file or edit. you need to find the words export bmp's click on that export bmps. on that panel make sure it will export them in to the folder that mskn file is in. then click on export. then close out and exit the theme engine for now.

10. now go in to that folder and look around at the images. you will see a couple big images with lots of pink on. that is the skin or part of it. you need to open that image with your image editing program like picture it. but first check the format of the images. for some reason when i export the images from the skin's mskn file the engine adds an extra set of format letters? remove the last set so it looks like themeskinimage.png and not like .png.bmp once you open the image in your photo editor go to work scanning the images on the makin / working image there are some places you can cover the pink but not all places. just for the first time cover the exact same images you see on the main image map.

11. do that with all the images and reopen the mskn file with the theme engine editor this time click on the plus sign by the word images. it will show you a list of images in the mskn file. and 3 buttons. click on the name of an image and then on the replace image button then browse to the same image name that you changed and put that in the mskn file it will be used now. so do that to all the images that were in that mskn file that you changed.

12. now do the same for the other mskn files. the one called theme has the most images to change so it will be the toughest one.

13. when all images are changed and replaced in their respective mskn files. you then if the mskn files are in separate folders. copy all the mskn files and paste them back in the main folder that they were originally unzipped in .

14. now you see the icon folder. that is only usable for the no album art image. you can open that image up and change it if you want too.

15. now every image that was unzipped in to the folder like the sel.png and the sdb list background images? change them to what you want. only the long thin ones cant be changed in size and no image will work on them with out some trickery so just change their colors for the first attempt at skinning.

16. okay now all is changed and all the mskn files are back in the folder with each other. now just select all the images and ini and mskn files and the icon folder. use your zipping program and zip them in to one zip file. change the name of the zip file to what ever name you want to call your new skin and make it an .msz file.

17. now copy that msz skin file you just made. take it to the program folder you made for the mm3 alpha test version. then in that folder you will see a skins folder go in to that skins folder and paste that new skin you made in there.

now when you go and open mm3 you can go to the menu bar click on tools go to the options link click the link when the panel shows up you just scroll the tree down to see the directory for skins. click on skins and you will see the choices of skins you have on the right select the name of the skin you just made and monkey will change to use it then click okay.

now check out all the stuff and see if anything needs fixed in your new skin.

the media monkey 2.5.5 skins are made the same way only there is no image map and they are a combination of winamp classic skins and a theme .mskn skin. you unzip that wsz file by changing it to zip just like the mm3 skins only when you unzip it you will see all the winamp images that you need to change in your image editor. and an mskn file you use the theme engine on that file tool only there is tons of images in it since there is no image map.

mm 2.5.5 skins take me about 15 to 20 hours to make i can get the mm3 skins done in about 4 to 6 hours depending on how much i change.

enjoy and good luck on making new skins. any questions ask away lots here can answer. but i don't work so i am in here a lot. hope to see new skins shortly glad your willing to make some

Retrieved from "https://www.mediamonkey.com/wiki/index.php?title=Fast_Newbie%27s_Skinning_Walkthrough_for_MM_3&oldid=2473"