I can say for now, that all the graphical elements are located into several files which are in the \<mod name>\data\ui\<culture>\interface folder. They are either called stratpage*.tga for strategic map ui's, battlepage*.tga for battle ui's or sharedpage*.tga for both. As they are tga's you get an alpha1 layer that allows you to play on the transparency.
Other than that, you can see on existing files and by switching to the game (you can easily do so by alt+tab, since when the game reload, it automaticall takes the last changes so ne need to restart the game, just doing alt+tab is enough to check the changes).
You will see what the following files are mainly used for:
- sharedpage_00.tga: upper scrolls borders and backgrounds
- sharedpage_01.tga: OK button in the upper scrolls
- stratpage_01.tga: lower ui frame
- stratpage_02.tga: finances button
- stratpage_03.tga: some element used as a tab in upper scroll
- stratpage_04.tga: all tabs and buttons remaining
- battlepage_01.tga: all you need to change for battle ui's is here
Now the tricky thing is to connect the files and UI elements together. Some elements are simply pasted, while other are stretched automatically by Kingdoms engine.
Additionaly the mouseover for all clickeable elements are also located in those files and can be modified as well.
Things i now focus on are: quality, clearness, originality and fidelity to the faction. If one of them is missing people will complain and sooner or later vanilla UI will be prefered over your UI.
By quality i mean not only visual quality but also all mouseover and elements connection must be as smoother as possible.
Note: This tutorial cover the remake of the layout of the UI and buttons, but faction shields are also located in those files. Most of the time they are not done by the same guy on most of the mods So we won't speak of them in this tutorial.