Time Saving Photoshop Method (co-ord layout)

[Ryuno]

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.
7. Done.

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.


Nadger

[Mongo]

There is actually an easier way than using transform, at least in PhotoShop CS. I used this method to figure out all my window dimensions for my skin.xml.

On your PhotoShop tool bar there is an eyedropper icon, if you click and hold that more tools will appear. Drag your mouse down to the the ruller icon. Now in your image click and drag with the mouse. You will now have a line. You will also notice in the top left of your photoshop window you will see the X/Y coordinates of the first point on the ruler. I call this the base point, there is no indication on the screen which of the points is the base point so if you ever forget, just drag them around until you see the x/y changing.

Now drag your base point to the top left of the image you want to figure out coordinates and size for. (Not the entire image but the element in the TGA you are framing) Now drag the other point of the ruller to the bottom right of the element. Up top you will now see all the information you need for your skin.xml file. X coordinate, Y coordinate and just to the right if that it will give you Width and Height numbers. If you look further over it will tell you the angle and distance between the points, but this information is not helpful to us.

[Nadger]

I still prefer the transform method because a simple ctrl+t then clicking on the top left box in the toolbar gives you your x y coords as well as width and height since i have all of my elements on individual layers. It tells me exactly where it starts instead of me doing zoom in guesswork with the mouse.

[Hintshigen]

I'm not getting the right X/Y Co-ordinates in Photoshop CS2, I'm using VgrdParts02.tga as my reference along with the corresponding XML file and looking at the platinum coin section, which says the X is 716 and y 85, however in the image X is 9.9 and Y is 1.1.

I'm looking at the Info tab on the right, I've also used both methods above and still getting the same X/Y coordinates. Is there a way to change how the X/Y is displayed?

[Nadger]

Not sure how you are getting 9.9 and 1.1 but since the vgparts isnt a layered file you will have to zoom in on the part you want, and use the alpha chanel to draw a box around it. Then the easiest thing to do to get the perfect x,y would be to go to edit and hit copy...then edit and paste. Then hit ctrl+t to transform the new layer you just pasted, then move the anchor to the top left and get your x,y coords....you can just use the mouse and eyeball it with the info tab but this method is a little more exact...just be sure you paste into your selection.