NOTE: The May 23, 2012 patch (Darius, V184.108.40.206) has changed the way in which much of the UI operates. All of the normal on-screen panels now use a different rendering method. The replay screens, the options menu, the tab menu and a couple others still use the older method, but are likely to be changed soon. A tutorial for the new method is unlikely, unless there is significant interest.
HACKING YOUR HUD
For those of you who want to do some in-depth modding to your HUD, this will give you some basis.
For a basic mod, you can easily move the HUD panels with skinLOL or manually editing the .ini files \League of Legends\game\DATA\Menu\HUD (ACE Client). The skins can be changed by editing the .dds files in \League of Legends\game\DATA\Menu\ with some image editing software. A good bit of info can be found on the European forums (you will need to translate from German, Google can do this).
SWiX - http://www.swftools.com/tools-details.php?tool=4666653156
Trillix - http://www.flash-decompiler.com/
A Hex editor - http://www.physics.ohio-state.edu/%7Eprewett/hexedit/
ACE Client - http://www.ace-client.net/
An Image Editor - http://www.adobe.com/products/photoshop.html
A Flash Editor - http://www.adobe.com/products/flash.html
Skin Installer Ultimate - http://forum.leaguecraft.com/index.php?/topic/28336-tool-lol-skin-installer-031111/ (if you want to port to the official client)
A text editor - http://notepad-plus-plus.org/
FLASM - http://flasm.sourceforge.net/
Step 1 - Create your new UI by modifying the .dds files
It's easiest to create a new UI if you have a background to work with once you import the .swf into Flash. Open up the particular .dds file into an image editor and make whatever changes you'd like (remember to update the alpha layer as well).
Step 2 - Back-up and convert all of the .gfx files you want to modify into .swf files
The ACE client uses the old file system, so making changes is a ton easier. The directories in this will use the file structure from ACE, not from the default client as it's a ton more work.
So, after you install the ACE client, backup the entire \League of Legends\game\DATA\Menu\ directory. Otherwise, if you screw-up a .gfx file, it won't display in LoL and will need to be re-downloaded.
Then, for the particular .gfx you want to modify, open it in a hex editor to change the first 3 characters from either GFX to FWS or CFX to CWS. Save the file as '<original name>.swf'. Delete the .gfx file as LoL can read from the .swf file (the .gfx file will take priority if you leave it in, so make sure it's gone). (Pic 1)
Step 3 - Find the assets you want to modify
With Trillix, open up the new .swf file you want to edit. Click the file under 'My Tasks' and it'll bring up a list of assets within the .swf file. Shapes and sprites are the ones you want to look at right now. (Pic 2)
Trillix is only going to give you the name of the sprites/shapes you are going to modify, you won't be doing any actual work with it.
Step 4 - Modify assets in the .swf file
Open your .swf file with SWiX. This will give you an XML representation of the .swf file. Here is when you do the actual editing. (Pic 3)
With Trillix, click the 'Convert' tab and press 'Convert Current' to create an .fla from your .swf. Flash should automatically start up and give you access to the assets within, otherwise, open the .fla manually. (Pic 4)
Now you can do some real editing. You have very little visual feedback with placement, as the images are not stored within the .fla file. They are added in after the fact with Scaleform (which is responsible for the <Unknown TagType="1000" and "1001"> in SWiX. If you apply your .dds backgrounds to the background shape (ie. for HudLeft, it would be bkgLeft), it's a ton easier to line everything up.
Once you're satisfied with your modifications, export to a .swf. Unfortunately, all of the CharacterId's of each asset has been changed. Flash removes or reorganizes some assets when you export the .swf, so using this .swf within LoL won't work.
Fortunately, it leaves the Name intact. So, load up the new .swf inside Trillix and SWiX. Use Trillix to find the assets you need to change and SWiX will give you the new values for location and scale. You need to match-up the correct Name and replace the tags inside the <PlaceObject2> from the new .swf to the old .swf (you might see PlaceObject3 in the new .swf, but it's doesn't actually need that tag, so just put the info in the correct PlaceObject2) (Pic 5).
IE. To move and change the scale of the background of the HudLeft.gfx, you'd have to change:
<DefineSprite Id="99" FrameCount="1">
<PlaceObject2 Depth="26" CharacterId="60" Name="bkgLeft" Move="false">
<Translate TranslateX="0" TranslateY="-3544" /> <-- CHANGE
<Scale ScaleX="0.784179688" ScaleY="1.13449097" /> <-- CHANGE
Once you've made the changes to the original .swf from your modified .swf, save the original and discard the one you exported from Flash.
Step 5 - Editing Actionscript
There are 2 methods to editting the actionscript. You can either directly edit it in Flash, or you can edit the byte-code directly.
To edit the byte-code directly, drag the .swf you want to edit onto the FLASM program. This will create a .flm byte-code version of your .swf (or use the command line as read in the FLASM documentation). Open it up in some text editor. It's easiest to use Trillix to view the Actionscript source and find what you want to edit, then go back to the .flm and find the corresponding section (Pic 6).
IE. To remove the sliding animation of the buff icons when you level up, you'd remove the following code from the HudCenter.gfx (NOTE: You'll have to go back into the .gfx to update the locations of the buffs - they move for some reason):
push r:1, 'showLevelupBackground'
function2 (r:2='bl') (r:1='this')
push 7, r:3, 2, r:this, 'buffs' <-- CHANGE TO : push 0, 1, 2, r:this, 'buffs'
push r:this, r:this, 'hideLevelupElements'
push 7, r:4, 4, r:this, 'buffs' <-- CHANGE TO : push 0, 1, 4, r:this, 'buffs'
end // of function
To edit the actionscript from Flash, convert your .swf to a .fla with Trillix. Open the .fla in Flash. Find the code you'd like to edit and make your changes. Then, export the .fla to a .swf. Drag the .swf to the FLASM program to create the .flm. Repeat this with the original .swf. Open the .flm files side-by-side. Locate the section in the modified .flm and copy and paste it into the old .flm (typically, see not. Save the new .flm and drag it back to FLASM. The .swf will be recompiled with your changes.
Note: Editing from Flash is no where near foolproof. The compiler used by your Flash editor is likely not the same as the one Riot uses (It's some version of MTASC, I think). The byte-code generated by Adobe Flash is different than what is generated by Riot's. You can typically copy and paste small sections, or they're at least distinguishable so you can manually make the changes. It might be possible to export the assets from Trillix, edit them, then use MTASC to compile.
Step 6 - Test your work
Load up LoL with the ACE client. Create a practice game and view your changes.
To install the changes into the default LoL client, use Skin Installer Ultimate and follow the same directions as if installing a skin.
Anchoring - the anchoring within HudResolutionDefaults.ini doesn't seem to do anything. The anchoring actually relies on the xy values of each component in relation to the anchor point of the Flash stage. You must use the actual sprite, not the 'compiled' sprite (ie. for HudCenter.gfx, you need to shift the elements of Sprite 174, not Sprite 2).
Tooltips - the position of the tooltips can be changed by modifying the value of setTooltipX and setTooltipY within the Tooltips.gfx. I haven't bothered to figure out the formula yet, but making it a static value is an easy solution (ie. setting setTooltipY to 500 will put it a pixel 500 as measured from the top of the monitor, so it depends on resolution where the actual box will end up).
Here's a list of the files that are actually in use within the UI. Some may have to be extracted from HeroPak_client.zip.
\Menu\HudCenter_I13 - Pulsing back for level up buttons
\Menu\HudCenter_I4B - Level up button (greyed out)
\Menu\HudCenter_I9B - Abilities panel
\Menu\HudCenter_I47 - Level up button
\Menu\HudCenter_I49 - Level up button (on Roll over)
\Menu\HudCenter_I87 - Level up frame
\Menu\HudLeft_I38 - Player inventory and stats panel
\Menu\MiniMap_I40 - Option\Char. Info\Camera Lock outline
\Menu\MiniMap_I46 - Minimap panel
\Menu\Surrender_I23 - Surrender panel
\Menu\TargetBar_I16 - Target hp and mana (compact)
\Menu\TargetBar_I51 - Target hp, mana, inventory and stats panel (expanded)
\Menu\TeamFrame_I11 - Boxes with teammate portraits and hp
\Menu\TitanBar_I66 - Game time, fps and latency panel
\Menu\ChannelBar - Channel bar
\Menu\HudCenter - Abilities, spells and hp/mana bars panel
\Menu\HudLeft - Player's items, stats, gold and xp panel
\Menu\InGameScoreboard - All players items, cs and building kills
\Menu\ItemShop - Item Shop
\Menu\Minimap - Minimap
\Menu\Surrender - Surrender panel
\Menu\TargetBar - Current target items, stats
\Menu\TeamFrame - Team portraits panel
\Menu\TitanBar - Game time, fps and latency panel
\Menu\Tooltip - Tooltips
This method is tedious - You can do a fair bit of editting with this method, but matching up the changes to the .gfx file and the overlay will be slow and annoying and manually changes the values in SWiX or with FLASM is slow. A Scaleform SDK (like Unreal has - http://udn.epicgames.com/Three/Scaleform.html) and the original .fla would be incredibly helpful (HINT HINT RIOT).
Scripting - Finding out how to manipulate the individual variables of your champion would be very helpful. It's easy to see how they set them within the .gfx, but not so clear where the actual values are retrieved from. Also, how to import objects from other .gfx (like moving the game time into the TAB menu).