This was posted by Nadger on the beta forums here
I thought it was damn useful, so posted it here
UI Modding: Time Saving Photoshop Method
I got tired of loading all the way into game to set an objects X and Y coords. Then making micro adjustments of +-2 pixels saving, /reloadui etc. This was eating up a lot of my time.
So I figured there has to be a better way. First thought was of course a graphical UI editor like Malak is working on. But since we dont have one of those yet. I looked into finding other ways to do it. I finally figured out how to set almost everything's X and Y coord without ever stepping foot in game.
If you are like me, you make a template concept in photoshop to follow, planning out where different things will go. You will need that concept art here.
First, this required photoshop. Gimp might do it but im not sure. Im using Photoshop CS2. Anyway here is how its done:
Load up your concept art. For this example I will use one of my HUD Concepts.
1. First I crop the image so there is no unused blank space around the bars and text. Then I take the width and height of the canvas and plug it into the xml for the width and height of the window.
2. Next I click on the layer that holds my Player HP bar, and go to edit, then free transform.
3. Now that i have my transform box around the bar layer, I want to grab that little circle thing thats directly center of the bar image. I drag that to the Top Left corner and drop it.
4. Now I look at the top of photoshop just below the menus to the bar thats there. The first box says X and the second box says Y. This should give you the X and Y position of the Top Left corner of the image. If it says 0,0 and its not at 0,0 then click on the little triangle in between the X and Y boxes to change it from relative to actual.
5. Now i see my player health bar is at 17x 13y. I go into notepad or whatever xml program you use and set the statusbar's x and y to 17 and 13.
6. Now I can look at the width and height in the Info window in photoshop. I see my bar is 199x42. So i put width=199 height=42 into the xml document.
Now my bar is set to the correct x and y coords and the correct width and height without ever having to step foot in vanguard. I go through and do this with all the objects in my HUD window, and save it. Load in game and they are all perfectly positioned.
You can also use this tactic when making your skin.tga/skin.xml file.
Anyway I thought I would share that with you other modders out there to perhaps shave some development time off your projects I know this will greatly help me.