Making Yahoo! Messenger Skins

Starting
It's entirely up to you how you want to achieve the bulk of the work required to make your base skin, personally I wouldn't consider starting from scratch, simply because of the huge amount of work and time required (which I just don't have) in making all the graphic colour changes and then the xml file colour and settings changes, but that's just me and I have YIM Skin Maker PLUS++ which does all the hard work for me but if you wish to start from scratch then don't let my opinion put you off as it can be a great learning curve for you and it will help you familiarise yourself with the files :)

If you start from scratch my personal recommendation would be have a good look over our articles Yahoo! Messenger Skin Reference Table and Yahoo! Messenger v8 .xml file , these will help you identify the graphics referenced and let you know which files are required for specific versions of Yahoo! Messenger.

Once you have done that, make yourself a copy of the Yahoo! Messenger Indigo skin (default), provided in Yahoo! Messenger v8.1 which you can find at
C:\Program Files\Yahoo!\Shared\Graphics\Indigo
the copy you make will be your working files and if at any stage you make a mistake simply grab the files you need from the original Indigo skin to overwrite your working files, rename your copy to whatever suits e.g if you are going to make a coffee themed skin you could rename the directory from Indigo to Coffee.

From your working copy e.g Coffee (which you can leave in C:\Program Files\Yahoo!\Shared\Graphics\) open up the .xml file (indigo.xml) in notepad or whatever text editor your prefer), near the top of the file you will see the following:
<skin version="2005.5.17.1"
compatible="2"
AuthorName="Yahoo!, Inc."
AuthorURL="http://www.yahoo.com"
Signature=""
SkinName="Indigo"
PreviewImage="preview_indigo.jpg">

Your first step is the change the SkinName entry, this is what generates the name used in your preview selection, and also change the name of the PreviewImage.

so if your skin is going to be called Coffee your xml file changes would look like
<skin version="2005.5.17.1"
compatible="2"
AuthorName="bee"
AuthorURL="http://www.wackyb.co.nz"
Signature=""
SkinName="Coffee"
PreviewImage="preview_coffee.jpg">
at this point you can also change AuthorName and AuthorURL, once that is done, save your .xml file as your skin name e.g coffee.xml

Don't worry about making your PreviewImage="preview_coffee.jpg at this stage, you will go back and create this once you have completed your skin and it's ready for a preview screenshot :)

oodles of graphics...
will need to be edited if you are going to make substantial changes to the look and feel of your skin, there are 85 .bmp file and 25 . png files and while not all these files are actually in use the fair majority are, see Yahoo! Messenger Skin Reference Table and Yahoo! Messenger v8 .xml file if you need a hand with identifying the files, remember you don't have to change all the files if you don't want to.. you just pick and choose which you would like a new look for :) Either way, how you change these files is up to you, stock up on coffee and take your time.. it can be a long drawn out process. As I mentioned before, I use YIM Skin Maker PLUS++ which does all the graphics for me.. and it also sets the font colours...

Fonts Colours?
The font face, colour and size settings are located in your .xml file e.g from Yahoo! Messenger v8 .xml file
<color name="back" value="f4f5eb"/> (off white)
<color name="frame_h" value="ffffff"/> (white)
<color name="frame_shadow" value="b3b6b0"/>
<color name="text" value="0"/>
<color name="groupbox_border" value="0xb3b6b0"/>
<color name="groupbox" value="eff0e6"/>
<color name="button_h" value="0x001d71"/>
basically it's trial and error gaining the look and feel that you want but as you get familiar with the files referenced you will find the job much easier :)

Testing

border_top.bmp	border_left.bmp

Skin on White Background	Skin sitting on top of browser web page

Note: If your graphics sit outside the main skin area, you will need to edit your .xml file settings to compensate for this increased graphic size, this will take some tweaking based on your individual image size/s and text placement allowance / compensation.

Once you skin is complete, you can now take a screenshot of it and reduce it for your preview_skin_name.jpg file.

With our Sailor Skin I ventured a little further, this time I edited 4 of the files as I wanted something a little different for the online / offline notification window as well editing the main windows.

Main Messenger Windows	online / offline notification

border_top.bmp	border_left.bmp
tool_border_top.bmp	tool_border_left.bmp

Whatever method you use to create your base skin, whether manual or using YIM Skin Maker PLUS++, if you decide to edit of the any original files produced don't forget to make copies along the way, this will make life so much easier should you need to return to a previous graphic or settings :)

For more information on Skin Making see Andy's article Skin Making Hints, Tips and Tricks which sums up some of the pitfalls and limitations you may come across... reading his article will save you loads of time and frustration so if you're going to leap into Skin Making boots and all it's a must read article.

MORE ARTICLES FROM THIS SERIES:
- Yahoo! Messenger Skins
- Installing Yahoo! Messenger Skins
- Making Yahoo! Messenger Skins
- Skin Making Hints, Tips and Tricks <--Next
- Skin Problems & Issues with Yahoo! Messenger
- Yahoo! Messenger Skin History
- Yahoo! Messenger Skin Reference Table
- Yahoo! Messenger v8 .xml file
- Yahoo! Messenger Pink .xml file
- Our Yahoo! Messenger Skins (Downloads)