Making custom loading screens with progress indicator

Owned by Ronald Delvax
Last updated: Feb 26, 2013
2 min read

I use Gimp, but any other program would be just as good (wink)

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)

Important :

  • 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 100. Only use integer values! (No decimals).

 

Have fun (wink)

 

edit:

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