This is a tutorial for people, who have no clue about graphics, and the intention is to show how to make the most simple possible buttons and flags.
If you've already once created a button, you know at least already the same like what is written down here, no need to read further
.
Attention: This tutorial is not meant to show anyone how to add stuff to the game. So if you don't know how to add a unit or similar things, then please take a look at this tutorial: Guide: Adding new units
Needed software
- DXTBmp. This program is needed to convert the graphics into the right format. This program is free and no payment is needed.
- IrfanView. I use this program to cut the images into the right size. You can sure use every other program to do it, but i'll use this for the demonstration. This program is also free and without payment.
Needed Skills
- Like already mentioned, you should know how to add stuff to Civilization 4
- You don't need any knowledge about graphics
Start
Okay, you have an unit without a button, for demonstration this one here will get used.
Step 1
Take a screenshot of the desired unit (for flags: Search the flag you want to have).
For beginners: How do i take a screenshot?
Additional note:
You might want to take a screenshot from the civilopedia, or use the flying camera to get a better shot of the unit.
Flying camera: Open the Civilization4.ini (My Documents\My Games\BtS\CivilizationIV.ini, rightclick, open with wordpad or notepad), and change
to 1. Press ingame ctrl + alt + F to activate the flying camera.
Thanks to The_Coyote for the additional remarks
.
Step 2
Cut the image down to 64 * 64 pixels (for flags: 128 * 128). Pay attention, that you can still recognize what is on these pixels.
Attention: Bigger flags and buttons will bring the game to crash.
To cut it down, open the image in IrfanView, pull a border around the area you want to have as button, and then go to "Edit" -> "Crop Selection".
Afterwards, it will look like this:
Please save this part as .bmp (bitmap).
Step 3
Now you have to bring the image into the right format.
To do this, open it first with DXTBmp.
It looks then like this:
Because the button shouldn't look completely ugly, we'll add an alpha channel, which tells the game which parts of it should be transparent. Go "Alpha" -> "Import Alpha Channel".
As alpha channel, import a standard button background (supplied here). For flags, just make the alpha channel completely black.
It will afterwards look like this:
Now, just save it as .dds file.
Use always DDS DXT3, unless you know what you are doing!
...and done
. You now only have to add the button to your unit, and nothing else
.
I know, this wasn't great, and the button is not the finest in the world, but it's definitely better than using 100 times the warrior button.
I additionally recommend this tutorial: Fixing blurry buttons without Photoshop easy, else the buttons will look blurry on low settings.
Another, a bit more advanced tutorial for flags can be found here.
If you've already once created a button, you know at least already the same like what is written down here, no need to read further

Attention: This tutorial is not meant to show anyone how to add stuff to the game. So if you don't know how to add a unit or similar things, then please take a look at this tutorial: Guide: Adding new units
Needed software
- DXTBmp. This program is needed to convert the graphics into the right format. This program is free and no payment is needed.
- IrfanView. I use this program to cut the images into the right size. You can sure use every other program to do it, but i'll use this for the demonstration. This program is also free and without payment.
Needed Skills
- Like already mentioned, you should know how to add stuff to Civilization 4
- You don't need any knowledge about graphics
Start
Okay, you have an unit without a button, for demonstration this one here will get used.
Step 1
Take a screenshot of the desired unit (for flags: Search the flag you want to have).
For beginners: How do i take a screenshot?
Spoiler :
Just hit the "print" key (to the right of F12). This will create a screenshot in My Documents\My Games\Beyond The Sword\Screenshots
Additional note:
You might want to take a screenshot from the civilopedia, or use the flying camera to get a better shot of the unit.
Flying camera: Open the Civilization4.ini (My Documents\My Games\BtS\CivilizationIV.ini, rightclick, open with wordpad or notepad), and change
PHP:
; Allow Camera Flying
AllowFlying = 0
to 1. Press ingame ctrl + alt + F to activate the flying camera.
Thanks to The_Coyote for the additional remarks

Step 2
Cut the image down to 64 * 64 pixels (for flags: 128 * 128). Pay attention, that you can still recognize what is on these pixels.
Attention: Bigger flags and buttons will bring the game to crash.
To cut it down, open the image in IrfanView, pull a border around the area you want to have as button, and then go to "Edit" -> "Crop Selection".
Afterwards, it will look like this:
Please save this part as .bmp (bitmap).
Step 3
Now you have to bring the image into the right format.
To do this, open it first with DXTBmp.
It looks then like this:
Because the button shouldn't look completely ugly, we'll add an alpha channel, which tells the game which parts of it should be transparent. Go "Alpha" -> "Import Alpha Channel".
As alpha channel, import a standard button background (supplied here). For flags, just make the alpha channel completely black.
It will afterwards look like this:
Now, just save it as .dds file.
Use always DDS DXT3, unless you know what you are doing!
...and done


I know, this wasn't great, and the button is not the finest in the world, but it's definitely better than using 100 times the warrior button.
I additionally recommend this tutorial: Fixing blurry buttons without Photoshop easy, else the buttons will look blurry on low settings.
Another, a bit more advanced tutorial for flags can be found here.
Attachments
Last edited: