[Tutorial] A guide on how to skin the Garena Client.

A guide on how to skin the Garena Client.

Due to the amount of people requesting for the unprotected skin.ggz, I have decided to make a small tutorial about it . Please do read everything as every step is important.
--------------------------------------
UPDATES

* The skin.ggz is a .zip file and not a .rar! Putting it as .rar will crash the client.
* This unprotected skin is quite old, you can get through the new one using this password: xC&V3s9vaUSmc@s
* Updated the tutorial
* Small minor update to the tutorial

--------------------------------------

First of all. Before you begin, make sure you have one of these following programs

* A Graphics Editing Software (Photoshop, Corel Draw, GIMP, etc)
* An archiver with support for .zip files (WinRAR, WinZIP for example)
* Atleast half a brain =.="

In this tutorial, i'll be using Photoshop CS2 and WinRAR.

The skin files, or the image files which Garena loads from for the skin is located in your Garena installation folder. And in there, a folder called skin.ggz. If you tried to open it, the file is an unknown type file. But, it can be opened with an archiver. Just rename it to skin.zip and poof! it can be opened and the files are shown. The only problem now is that when you try to extract them, your archiver requests for a password. So, the only way to open it is of course, get the password. But I made it simpler and you can download the following file which includes all the images and configs inside.

Assuming you have WinRAR, open the skin.ggz file with WinRAR.

USE PASSWORD "xC&V3s9vaUSmc@s" (without quotes) TO EXTRACT THE CONTENTS OF SKIN.GGZ

Once extracted, open that folder and you should see quite a number of files inside. All these are files used by Garena to skin their client (which is horribly red). Remember the following:

* In most of these image files, transparency is aquired by using the colour "Magenta" or pink. Its R:255 G:0 B:255 on the RGB code and "ff00ff" on the hex code.
* All these images have margins, which means an area where only that particular area is stretched when it requires stretching/tiling. For example, look into Window.bmp and you should see the basic Garena Window, but its basically a small one. It is stretched on a particular spot so it doesnt mess up the whole client.
* It takes time to make a skin.

Each of the image included in the .RAR file is explained in the following (A-Z)

* Arrow_Down.BMP : Games List Down Button
* Arrow_UP.BMP : Games List Down Button
* Button.BMP : Unknown
* Comment_Header : Unknown
* GameIconsBig.bmp : The game icons you see on the left side of the client.
* Gold.bmp : The GOLD member bar under your name (If your gold)
* Header : The bar you see in the "Room's List"
* login_gg_logo.bmp : The logo you see on the login window.
* Login_Header_Bar : The bar you see under the Garena logo in the login window. The one containing the "Garena Login" text.
* Logo.bmp : The Garena logo you see in the Main client window. Located at the top left corner.
* menu.bmp : The "Right Click Menu". Inside are two seperate parts of the client. One for the border and one for the menu.
* MessageTab.bmp : Obviously located in the message tab.
* Others.bmp : Lots of seperate images inside. Ranging from small imaged buttons to the big buttons at the top
* outbar_lab.bmp : Most probably unused by the client.
* Panel.bmp : Unknown, not tested.
* ProgressBarBGh.bmp : The background of the progress bar (Your EXP bar).
* ProgreeBarBGv.bmp : The vertical version of the horizontal progress bar.
* ProgressBarH.bmp : The bar itself.
* ProgressBarV.bmp : The vertical progress bar.
* ScrollbarArrows.bmp : Unknown
* ScrollNews.bmp : Located in the Garena client, the one with the marquee in it. (Located under the Garena Controls buttons).
* shop_*.bmp : These buttons are located in the "Gold Member" window.
* skin.xml : An XML file which doesnt show any association with the Garena Client.
* skinmsn.bmp : The image/window you see when a friend comes online (The small window that comes up at the bottom right corner, a copy of MSN. Hence the name).
* split_*.bmp : Unknown
* Tab.bmp : The tabs you see in several windows. Mainly in the Settings Window.
* TabBG.bmp : The background of the tabs.
* ui.xml : The main configuration files of the skin. Includes margin, colours, etc. The colour code is in a BGR colour code. (Thanks onigoo)
* Window.bmp : The main part of your skin/client. Includes main window, buttons, drop down buttons, scrollbars, etc.

Question