How to work with Gamefont.TGA the "Easy" way in Photoshop

Into

Hello. I'm not an artist by trade and the Gamefont files with their craazy alpha channels and what not really had me pulling my hair out for many hours. I used GIMP, DXTBMP, Photoshop and MS Paint to try and get the files going with limited success until I finally figured out "the secret" to do it the "easy" way which I hope will help some other intrepid modders out there struggling with their gamefont's and their diabolical alpha channels.

On to business
So the best tool I've got comfortable with now is Adobe Photoshop. I use CS3 in this tutorial but I think it will work with most/all versions. So in this scenario I will be walking through I will be cutting and pasting from one gamefont.tga to another one. You can adapt these instructions to creating your own new art but near as I can tell you'll have to create your own alpha channel yourself.

What the Heck is an Alpha Channel?
So you may be wondering what is an alpha channel in CIV4? Well it's probably best to just look at the thing yourself in Photoshop. It could be described as a white silhouette on a black background of the visible icon (ex: the christian cross). It manages the transparency in the game. Mess it up and your game will crash. Over and over again. If you have pixels that are 98% black on the alpha layer (not 100%) then your game will crash. Or your missionaries will spread whales. Whatever the case of a messed up alpha channel or gamefont file won't be good.

So back to the scenario which is this: Take cool icon from one mod, paste into another. (note: in this example I'm editing the gamefont75.tga, methods are the same for both). Fun fact: icons in gamefont.tga are 21x20, gamefont75.tga are 16x16.

1. Open up in photoshop the gamefont.tga file that you want to copy from.
2. Open up in photoshop the gamefont.tga file that you want to paste into.
3. Remember which is which on the window bar in photoshop
4. Ok you should see something like this on the "copy from" gamefont file . I've zoomed in a couple times, you probably want to also ("ctrl +" keys for zoom)


5. I'm going to be copying the sword and peace symbol icon. The "secret" I alluded to earlier is very soon forthcoming.
6. Ok I've highlighted using the "Select tool" the two symbols. Don't do anything else besides selecting what you want to copy. I've copied the magenta border and cyan dots. Both very important. I've zoomed in even more to be very precise because this is very exacting work and if you hose it up, you will crash when you try it out. So as I say, the magenta border and the cyan dot are important


7. Now, the secret... First, Click Channels (next to "layers" see 1 in picture). Then click the eyeball next to alpha channel 1 (see 2). Then shift click on the alpha channel so all the channels are highlighted so that it looks like mine where all the channels are blue (see #3 below).


8. Now copy your selection you made earlier and you will also be copying the underlying alpha. This is because all the channels are selected (blue). Note that it is also possible to just select the alpha channel (unselect the RGB channels) and copy only the alpha layer or whatever you need.
9. Now go to your paste into gamefont file.
10. Once again select all channels and view the alpha layer.


11. Now paste your copied image. Use the "Move tool" (see green arrow) to move the selection around then click the select tool anywhere else when you are happy with the location. In this case the new icons are in an empty area so it's not too bad but you may need to move other icons away to make room for your cut and paste job. For example the religions are followed by the corporations then theres a blank space etc. There's probably more info on other threads about this.


12. The cool thing about this way is that the alpha layer was included in your copy so you don't have to mess with it also. Trying it that way can be double the work and it can lead to nightmares - literally. You can always view the alpha channel just by "un-eyeing" the RGB channels as well..

Good luck and happy graphicing!

 

I can't see the pictures in this tutorial. Also, does it work with Photoshop Elements too?

 

I had a copy of elements laying around but after I loaded it keeps crashing so I can't even get it to start much less load a file. Think my disc is bad

That being said, I don't know if it's possible. You need to be able to view channels, this link, http://www.webreference.com/graphics/elements3/ for elements 3 says you can't see channels in elements.

About the pictures, I uploaded them to photobucket and I can see them fine on this page. I've linked pictures in other areas of civfanatics and another guy wrote back based on my pic that I'd uploaded so I'd be tempted to say it might be something on your end. I can upload them to another free photo hosting site if needed.

 

Well, they show up now. Maybe the site was just down. It's too bad that you need a very expensive product to properly edit the gamefont files. I hope in future versions of civ Firaxis will decide to ditch the font files in favor of a different system.

 

Yes gamefont files are nightmares. There are other ways without expensive photoshop "Tutorial: Editing GameFonts.tga for Free" http://forums.civfanatics.com/showthread.php?t=181119 and this is also a good tutorial. http://forums.civfanatics.com/showthread.php?t=278946

That being said, after attempting the methods in those other threads and pulling out my hair, I discovered this method and posted it here to help others avoid similar frustrations I went through if possible. Hope this helps.

 

What you really need is not the ability to view chanels, but the ability of the software to handle i.e. copy&paste transparency info along with the image (stored, but not necesserily diplayed in the alpha chanel).
Aside from PS i know that Gimp, Paint Shop Pro, Paint.Net and PS Elements can do that.

The key is to make sure your edits do not "spill" out and/or not damage icons boarders - by whatever means the software you are using is offering.
This is done with precise, sharp selections.

Copying multiple chanels at once - what Smeagol described - is one convinient and fast way to work.
But if for some reason it does not work out with your software, you can copy chanels separeate as well - just make sure your selection stay precise. You can use Selections, Rulers or Grids to make sure everything matches up exactly, if you are forced to copy the chanels one by one.

 

If elements cannot handle selecting both Alpha & standard layer at the same time, I have noticed that when you paste into the Alpha Layer it retains your selection area, so when you transfer to the RGB layers and paste into the same selection area it will align perfectly. If you instead attempt to do RGB THEN alpha you have some nuisance work to handle with making certain to align things.

 

That method sounds like it will work. When I read first the other tutorials, I was doing double the work in dxtbmp where you have to edit both the alpha and the "regular" channels as separate files. I didn't do the pixel counting method described there, instead attempted to eyeball it and didn't get good results at all.

Keeping the selection tool in the same place or copying all the channels at once as I describe above seem much better ways of working with these somewhat difficult files.

 

Photoshop is only showing the icons, not the white bg or pink grid. How do I get PS to show this.

 

What version of Photoshop are you using?

 

Adobe Photoshop 7.0

 

Make sure you have updated to the Photoshop 7.0.1 patch. It fixes an issue where targa alpha chanels were not loading correctly. After you do, you should see the pink borders and cyan dots just fine.

 

Hello, I followed the instructions of this tutorial, but the icon of my new ressources don't appear in the game. Could anyone help me by checking my .tga files? If you feel helpful, I will send you the files by private message. Thanks!

 

Don't do it manually, use this program instead. Makes life a lot easier .

 

Thanks for the link The_J but I'm playing Civ on Mac... This app doesn't work for Mac. Snif...

 

Oh well...that's bad.
Then attach the files, I'll take a look at them.