Skinning 101 Guide

The following guide is originally posted by Ryght family of Orpesia (G1) server in 2009. I'm re-posting his guide here since his site STNWSource is long dead. The guide is old, and somewhat out-dated. Nevertheless, it is still useful for people who want to try messing around with the game client UI skin.

Image from Kokoro Connect, episode 02.

Updating Old Skins
Unlike in the old UI, you can no longer edit the mini-map UI at top-right corner of the screen. The current UI has various new icons/gauge bars which are not in the old skins. If you are updating an old skin, be sure to compare the files for missing icons/bars (e.g. artifact box in character equip window). The files you must take a close comparison are usually (but not limited to) gauge.bmp and button.bmp.

Base File & Skin Folder
If you want the default skin used by the current game client, you can extract the files from ui.ipf using IPF Extractor. Use this for the base skin file mentioned below. Alternatively, you can just use an existing updated skin and customize from there. The GE skin folder is located at Granado Espada\release\user\skin.

---

SKINNING 101

by Ryght family of Orpesia (G1) server

SKIN CREATION

I. Base Skin File
You cannot just make some files and stick them in your GE skin folder. You need the files provided by the game and work from there. You can grab the base skin file at the bottom of this page in the attachments section.


II. Requirements
Adobe Photoshop CS2~CS4
GIMP
Corel Suite
Any other graphics editing program

I recommend Photoshop as its the only thing I've been working with mainly for the past 5 years.


III. Working with the UI Skin Files
There are 2 files types you will be messing with and they are bmp and tga files. You will need to use your favorite graphics editing program to open these files.

Let's take a look at the Korean User Skin manual. Don't worry, I know its all in Korean, but the important thing here is for you to look at the pictures and the filenames. Then when I mention x file, you can refer back to the image and see what I'm talking about.

Click for full size view.

advlistbox.tga - You don't need to mess with this file

baloon.tga - In our version, you do not need to mess with this

button.bmp - I think the items shown here are self explanatory, but I will provide further detail if need be at a later time.

button.tga - Some of this stuff is self explanatory (unless you don't play the game at all), but in this file, you will find things like the Main Menu button that you press to get the dropdown menu. You will find the quest window here. The submenu box from the main menu dropdown items is also here. My advice is skin everything in this file.

charbaseinfo.tga - This is where a characters info area is shown for each character in your group. Its rather difficult to make something impressive looking here, but I suggest you try and change some stuff up here.

chat.tga - This mainly deals with the chat window area. If you want to skin the All, Guild, party, etc tabs, this is what you need to mess with. If you wish to change the background of the chat area, this is also the place to do it. Its the big square area if you're planning to mess with that. There are two other small rectangular items, but I will explain about those two another time.

clearbg.bmp - Leave this alone. I forget if this still has a use seeing as if you didn't have this file back then in the older clients, your skin would not show up. It does nothing now as far as skinning goes so leave it alone

editbox.tga - I think this is a little self explanatory. You know the textboxes in game right? Well this thing is the one you want to change up if you wish to edit that. You may have a little difficulty designing it how you want which is why you will have to zoom in for best results. This is another reason why Photoshop CS4 is a godsend, well for me atleast. I can't vouch for the other graphic programs.

fixcount.bmp - When you look at stuff in the Market Manager and you want to buy or sell something, what do you press? Those up and down buttons. This is the file to change if you are wanting that.

gauge.bmp - This file deals with the HP/SP (both small and normal), casting time bar for both the player and enemy, stat bars when creating a stock/upc, normal/veteran/expert/stance bars. You may have a little trouble designing these how you want or even knowing which one does what. Its not that hard, just do some trial and error if you don't know what one is.

hotkey.bmp - These deal with the letters you see on your skills for characters. I think this is a bit self explanatory

itembox.tga - I forgot exactly what this covers, but you will want to edit it. I'll update this article later with the information.

labelbox.tga - Ok lets say for example you open up your character information window and you see your equipment, your stats, etc. Well in this file, you are able to change the subwindows for those things along with more things. Be very careful when designing the window style because if you try to go over the top, when you look at it in game, its not going to appear as beautiful as you thought. So this file may be one of many that you will have to work on for a while to get just right.

labelboxclear.tga - Leave this alone, it doesn't need to be edited

labelline.bmp - Leave this alone

mainmenu.tga - What else...the main menu dropdown background. It has a normal, pressed, and hovered state. The first one is normal, second pressed, third hovered. Keep that in mind when designing your main menu.

minimap.tga - What else...edits the minimap. You can come up with some fantastic designs here and you won't have to worry about it like in labelbox.tga.

stancelist.tga - This changes the subwindow (inside window in other words) background for the stancelist window. Be careful with this one also. While its not like the labelbox.tga file, it can give you a headache if you are going for something over the top.

stanceselection.bmp - When you select a stance, you see a selection graphic. When you hover over a item in your equipment for a character, a selection graphic appears. This is what this does. Be careful with this file. I haven't posted my BMP mastery guides so you're on your own on this one.

tab.bmp - You know those buttons in your inventory window or your quest window for example? This is what this is for. Be careful when editing this one as if your goal is a transparent like button, you will have some trouble. There is a normal and pressed state, I'm sure you can figure out which one is which.

taskbar.tga - Most of what is in this file I ignore, but the very bottom items (the brown graphics), that is something to edit. When you look in the market manager for example, you see those headers above the items you are looking at. This is what these are for. The rest of the stuff in this file, I have yet to find a use for as I usually don't see it in game so if you know what they do, let me know.

titlebar.tga - This is self explanatory...especially after looking at the User skin manual picture above. You can do some fantastic designs here, but you will have to be careful.

Window.tga - Take for example your inventory window. Look at where your vis and feso is located. This is the area of the window you are changing. You can do some great work here, but you really got to be careful on this one. It is like the labelbox.tga file with a twist. If you come up with a fancy design the works for most windows, you will need to look at one last window. Its the game options window. If the user cannot see anything in the game options window due to your design, you will have to change this up or else they will complain.

Oh and lastly, I would like to say for some of these files, they are used for more than one thing in game so don't think its used for only one thing in the game. The stuff used in the game comes in all shapes and sizes and if you perfected the design for one window, odds are the other one doesn't look right and so on. The only things that are safe here are mainly the button controls for most of the files. So feel free to go all out on those.


IV. Saving
Save BMP in 24 bit format
Save TGA in 32 bit format

DO NOT save BMP files in 32 bit format. If you do not understand what 32 bit bmp files are, there is no need for you to save it in this format. Its not going to result in higher quality like the average user thinks of.

If you save the tga file in 16 bit, the areas where things are supposed to be transparent will not be transparent and will have white backgrounds in the game. Try it if you don't believe me.

Put the files in your GE skin folder and load up the game to test out your skin. There is no other way than just starting up the game and exiting the game completely to see changes made to your skin. So yes, you will have to launch the game and exit the game a lot if you working on a specific file. Its the only way.


TGA MASTERY PART I
Now I bet some of you are wondering how you are able to do the following

In this shot, I want you to look at the minimap. The rest of the stuff we will touch on later in other guides.

So you must be wondering....how do I do that? I mean, when I open the tga files and add my own thing to it, only part of it shows up when I look at my UI skin in game. Or the other case is, "I tried making that part white to see if it would disappear and it didn't work, it just showed a white background in game!

If you have done this and asked this question to yourself or to another person like myself, you do not understand anything about TGA files and if you asked me at that time, I didn't tell you how it was done. It is quite alright as we are all newbies at start.

Thus part I of this guide is about TGA files and transparency. Before I start, the following is required:

1. Adobe Photoshop CS4 or earlier
2. Be a Intermediate level user in Photoshop
3. Understanding about alpha channels

If you do not have Photoshop and have another program that can open tga files, then you can use that. You will not get support from me or this guide as this guide is a Photoshop based guide. So you may have to do different things in your program.

Ok, do you have all that? While I say you should be knowledgeable about Photoshop and graphic design, I make my guides where a retard could end up doing it.

Now lets get on to the guide. Most people have that mentality of "Lets not understand about x thing and just do it." No, you need to understand vital concepts before executing what you want.


About TGA Files
When it comes to TGA files and transparency, there are three things to remember.

• Black = Transparent
• White = Not Transparent
• 16/24 bit tga files cannot be transparent

Wow, so I should just make the minimap.tga file black in order to get something transparent?! Not exactly, we are going to be working in a different area for this. Follow this simple guide with pictures to help you understand.


Step 1
Open the file you are wanting to edit. For our little example, we are going to be editing the minimap.tga file. So open your minimap.tga file and follow with me.

In the above shot, to the top, we have my modified minimap already finished. To the middle, we have a fresh original minimap.tga file. We will be using the original as a guide as the one above it is already done.

Step 2

1. We are going to be looking at the alpha channel. Select the channel tab like I have done in the below shot.
2. Now select the Alpha 1 channel like I have done in the below shot.
3. You should now have something that resembles mine in the screenshot below.

Now you see what we are about to do and why I said its important to understand how transparency works in TGA files.

*One thing to note is that you should not create a new alpha channel, it is not required. If you are a advanced user, then by all means, do it, but its just more work for you.

Step 3

1. Ok, I want to get rid of the top bar on the minimap. To do this, you must make a selection. There are many ways to do this, but for this simple exercise, all we need to do is use the rectangle marquee tool. Use whatever you like.
2. Make a selection like I have done in the below screenshot.
3. You should now have selected the top part of the minimap and have little marching ants going in a rectangle basically.

Step 4

1. Take your paint bucket tool and make your foreground color black.
2. Apply it on the selection you made. You should have something that resembles the below shot.

Step 5

1. You are done with the channel tab, you can go back to the layer tab and fill the top part with white like I have done so in the already finished minimap. It is not required, but its helpful if you do so.
2. Its time to save your file so go and save it as a tga file as shown here.

Step 6
Its absolutely imperative that you save this as a 32 bit / pixel resolution tga file. 16 bit and 24 bit do not support transparency. Compression is not needed nor did the Korean UI developers say anything about this in their own documentation.

Step 7
Wah-la! You should now not see the top bar in the minimap.

Closing Remarks
It's that easy folks. If you got all the way to step 7 and were successful, you have mastered part I of my TGA mastery tutorials. You should now have...

• A clear understanding on how tga files work.
• How to acheive transparency in tga files

Now lets move on to part II.


TGA MASTERY PART II
In this guide, we are going to learn how to add things like shown here. Once again, this is a update 4 guide.

In this shot, I want you to look at the big rose on the character info area.

In this tutorial, you are going to learn how do things like that. You may have asked yourself, "I have ported a cool looking character info area from another UI skin into mine, but some parts of it get cut off in game." Once again, you need to a clear understanding of TGA files.

If you already haven't done so, read TGA Mastery Part I as I am not going to be as detailed as before in this tutorial.

Ok, in this tutorial, we are messing with the Character base info window so open your charbaseinfo.tga file.

To your left is a unmodified version of the charbaseinfo, to your right is the Gold Rose Black file. That one is already finished and is just shown to show you what it looks like.

In this case, I wanted to use a rounded object and have it appear in game like that on my character info area. If I save the file right now and load the game up, part of that object will get cut off. Your case will be different because you don't have that same object as I do, you have your own thing.

So I suggest you do this before anything....

Whatever the object/graphic is, if you have created it in Photoshop and have 3445408403843 layers for it, flatten it so its only one layer, save it and cut it out, or do something to it so you can easily move it from one place to the other as it will make your life a hell of a lot easier when we execute this.

Step 1
Copy your layer of "the object" to your charbaseinfo.tga file. You should now have the object on this file and you can freely move it around as you wish.

Step 2
Place the object somewhere like I have done in the step 1 shot above.

Step 3
Now this will vary depending on what version of Photoshop you have but we now need to select that layer.

Now if you did not make it a single layer, this is where you can get into trouble. This is why its absolutely necessary to do as I said at start or else you will be consuming more time when you shouldn't have to. If you wish to do that though, you will have even more fun on what we're about to do.

In Photoshop CS3, things have changed as far as selecting a individual layer. You cannot do like you can in CS2 or below and press ctrl + A to select that layer you want. So I will show you how to do it in CS3 if you don't know how :

1. Select the layer in question in the layers tab.
2. You should have a square box with a picture of your graphic beside the name of the layer. You need to CTRL + Click INSIDE the box to select that layer on.

For Photoshop CS2 and below, you can do the ctrl + a method. I don't now about anything below CS so if its different, you should know.

3. With the layer selected, go to the channel tabs like shown below.
4. Select the Alpha 1 channel.

Step 4
This time, we want our paint bucket tool to be a White foreground so select that as shown below.

Step 5
Put your paint button cursor on the selected area and left click. That area should now be white as shown in the below shot.

Step 6
Once again, you need to save as a tga file and save in 32 bit resolution.

Step 7
Go in game, Wah-la! the object you put on your character info window now appears and is not cut off!

Closing Remarks
You have now mastered part II of my TGA Mastery guides. With what you know now, you should now be able to create more attractive UI skins that stand out vs your typical ones that have 0 creative effort into it (if they know about transparency and tga files). My guides only show you the basics even though I coin them as advanced tutorials. You have to use your own creative mind to take what I have taught you and further advance yourself. That is honestly the only way you're going to learn anything and I, your Master, am not going to teach you every single thing I know.