I use Gimp, but any other program would be just as good
First you make a new file : 1024x1024 px
right klick on your layer; add alpha channel
in your image: select all then delete, so you have a completely empty layer
You can do this in just one layer, but I recomend using a new layer for each component.
Copy the layer, so you have 1 layer for the background image and another for each segment
of the "progress bar".
Draw (or copy - paste) your background and segments where you want them...
Set the alpha for the background to 1, and for the segments acording to the progress.
Alpha should be 100%-progress%, with a minimum of 1 and a maximum of 99.
So if the segment should change at 20%, the alpha would be 80%
Save two exact copies, one called loading_bg_0.xcf (for gimp), the other loading_bg_1.xcf
Change the progress segments in loading_bg_0.xcf to grey, (or whatever you like)
Initially loading_bg_0 will be shown, loading_bg_1 will be placed over it ,following the progress.
Export both files to .tga (eg. loading_bg_0.tga and loading_bg_1.tga)
Make dds files by using tga2dds.exe ("tga2dds.exe loading_bg_0.tga" will make loading_bg_0.dds
in the same directory)
Place both dds files in user/interfaces in your client to test
replace the dds files in interfaces.bnp if everything works.
(don't forget to delete the files in the user/interfaces directory)
- The images MUST be 1024x1024.
- The visible part of the image is 1024x768, in the top part of the image, the rest should be made black.
- Aplha values must be min. 1 and max 99. Only use integer values! (No decimals).
I made an example, using a wallpaper I found on internet.
The file containing gimp files, tga files and dds files can be downloaded from here