Making a custom T-Shirt: Simple Re-texturing


In this guide, I am going to explain how I made a custom texture for a T-Shirt for FreeRealms. I highly suggest either reading about "Player Studio" on their official website or reading my guide on getting started with "Player Studio", which can be found on the Mystic Mayhem website, before reading this guide. I just have to get through some disclaimers before I can continue:


  • I am not affiliated with SOE / Sony / FreeRealms
  • This guide is not the definitive or official guide to "Player Studio", it is just my personal experience
  • The processes described in this guide were made using Windows 7, GIMP and Blender. Other operating systems and programs may differ from this guide
  • This guide is subject to updates pending more information about "Player Studio" that will emerge over time
  • The example T-Shirt in this guide is not one that I have submitted. It is intentionally a bad design to be used for demonstration purposes only
  • This guide only covers "re-texturing" a T-Shirt, it does not describe any methods of editing a 3D model
  • Do NOT copy this guide in whole or by portions or link directly or use any of the images contained herein
  • Please do not Private Message me to help or provide more information about this, I will try to keep this guide as up-to-date as possible


Alrighty then, now to get started. First things first. Let's go to the official web site for "Player Studio" to download some examples. You can find the examples at: Free Realms - Player Studio Style Guide

Look for the T-Shirt example:


The example is a ZIP file which we will need to open to see what makes up a T-Shirt for FreeRealms. These are the files that are inside:


I would suggest making a new folder somewhere you can easily find it and copy these files into it. Now, I should explain what these files are, but I am only going to focus on the ones we need to worry about for changing the texture of the T-Shirt.

tshirt_example_texture.tga:
This is the actual graphic that gets applied to the 3D model of the T-Shirt. This is what we are primarily going to be working with

tshirt_mesh.obj:
This is the actual 3D model data for the T-Shirt. We are not going to edit this file in this guide, but we will need to know about for later on

tshirt_mesh.mtl:
This is a file that contains extra data for the 3D model, this file tells what texture should be applied to the 3D model

The first file we need to edit is tshirt_mesh.mtl. In the example for some reason, it contains the wrong information, so we need to fix it before we continue or else this will never work in a 3D modeling program. Open tshirt_mesh.mtl in a text editor, Notepad works just fine. It will look like this:

newmtl lambert5SG
illum 4
Kd 0.00 0.00 0.00
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
map_Kd freestyle_m_chest_shortslvshirt_cardduelist-cardclass-L1.tga
Ni 1.00

We need to change "freestyle_m_chest_shortslvshirt_cardduelist-cardclass-L1.tga" into "tshirt_example_texture.tga" so that the 3D modeling program will use our texture that is in that folder. Just save the file when you are done.

Now, let's move on to the graphic file for the T-Shirt. Let me explain what is going on with that. Here is what it looks like:



I know it looks weird to think that is what the T-Shirt texture really looks like, so let me explain and show what each area of this texture is used for:


The red shaded part is what will be on the front of the T-Shirt.


The red shaded part here is what will be put on the back on the T-Shirt. You may notice that it is a lot more narrow than the front. This is because the game is going to mirror what is on the back. Whatever is on one half, will be flipped over to the other half to make up the back of the T-Shirt. We will get into this again later on in the guide.


This red shaded area is what is used for the sleeves of the T-Shirt. The graphic gets wrapped around the arms.

Let us check out what the example from SOE looks like in a 3D modeling program, so we can get a feel of how it works. I am going to use the program "Blender" to view this 3D model. Open up Blender, and it will display some kind of starter work area, we don't need all of that stuff, so let us get rid of it.


Right click to select an object, then press delete on the keyboard and then click on delete in the popup to remove the object. Make sure you do that for all three objects I have highlighted in the above screenshot. It's not too important, but it makes for easier viewing of the T-Shirt. Now, let us click on File, Import, Wavefront (.obj):


This will bring up a listing of folders on your computer, just navigate to the folder you made that contains your files for this. There is also a "recent" area where we can find files we have opened before, it will prove helpful later on, so remember that it is there:


When you navigate to the folder you had your files in, you should see this:


tshirt_mesh.obj is the file we want to open, so double-click on that to view it. This will now display the 3D model for the T-Shirt. You may have to zoom out to see it, which you can do using the mouse-wheel.


If you want to center the shirt into view, right-click it to select it, then hit the "home" key on your keyboard. You may notice that the shirt appears to be a solid black. This is okay, we are not in the right viewing mode just yet. Let's take a look at the texture now by clicking on the "i" symbol that is all the way to the left of the "file" button. Click on "3D View", this will make a drop-down menu appear over to the right:




From the drop-down menu, click on "Texture Paint" and there you go! Now it will show the texture applied to the T-Shirt!


Now that we can see just how this texture works with the 3D model, let's have some fun making our own texture!

[hr]

Let us start editing the graphic file for the T-Shirt, I am going to do this using the program called "GIMP". Open up tshirt_example_texture.tga. Now you should be seeing this:


For this guide, I am intentionally going to create a bad T-Shirt design, this is just for demonstatration purposes. So for fun, let's put the FreeRealms logo over those TCG symbols. Here is the logo I "borrowed" from the official website:


So now, I am going to copy and paste the logo into GIMP. After you paste it, make sure to right-click on the "Floating Selection" layer that will appear at the top of the layer list that is on the right of the screen and then click on "To New Layer" to make it a new layer that you can work with. I had to re-size the logo to make it fit, then I just moved it over the TCG symbols. After that is done, we have to save our work. Make sure to over-write the file we were working on and do not save in a different file format. So now we have a texture file like this:


If we follow the same steps again to view the 3D model of the T-Shirt now, it will have the newer texture on it:


Now it gets trickier when you put something on the back or on the sleeve. You must remember that the back gets mirrored, so it always has to be symmetrical. Also, there is only one sleeve graphic, this means that whatever you put on the sleeve in the graphic file will be applied to both sleeves on the 3D model. Let's see what happens if I try to put the FreeRealms logo on the back of that shirt. Going to open up GIMP again and now place the logo on the back, giving us this:


Now let's see what it looks like on the 3D model:


See what happens there? The image gets flipped on to the other side to make up the whole back on the T-Shirt. Keep this in mind when trying to put something on the back.

So that concludes this guide for simple re-texturing a FreeRealms T-Shirt. There are so many other things you can do with this, more advanced techniques involving editing the other files that came with the example, so even more things are possible! This is just the tip of the iceberg! I hope this guide at least helps people get started with making a custom T-Shirt and I wish all of you creative people much luck with your creations and hopefully we will all see them in the SC shop soon!