So you want to make a custom HUD...

easy peasy. Don't let the job intimidate you!

here's a simple guide on how I do it.

First things first, You'll need an image editting program that can save transparent PNG files, and DNF extractor. once you have these, it's prettymuch a cakewalk... assuming you know how to work your image program, anyway.
Also, Just incase I really have to say this... Don't be replacing files with dfo open...

STEP 1:

Alright.

Here is the jist of your DNF Extractor. There are alot of files involved, but you really don't have to be worried about most of them.
Here's a basic rundown of the essentials.
0 = main HUB
1 = HP Bar
2 = MP bar
3 = FP bar
4 = Dungeon Exp Bar
20 = HP Poison status bar
36 = not sure what this is, honestly. Just keep it the same shape as your health and mp bar.
54 = Pet status bar
55 = pet exp bar

The rest is just event junk and the such.

However, I reccomend saving all the files for a few reasons I'll bother with later.

STEP 2:
Now you have your files saved, let's start with the Main HUD setup.
Now open up your image editting program and let's get crackin.

now you have this lonely looking HUD. The main things to keep tabs with are the skill/ item slots, HP/ MP bars, FP bar, EXP bar, sp points and level.

the best way is to take the default HUD and work directly over it... on a different layer of course. It's alright to edit certain things (note the HP bad doesnt align perfectly) but for simplicities sake, it's nice to keep everything basically the same.

I MUST NOTE: Dont make your hp bar much bigger than the main one, here. for an odd reason it'll cut off

not a happy sight after hours of work.
I know there is a solution for this, however, I have not figured it out yet.
the default hp/mp bars are about 56x56 pixels... try to keep in that range.

Now you get everything down to your hp/mp bar. you want these to fit as well as possible... so heres an easy solution.

ON ITS OWN LAYER draw out your HP containter


If you want this same container for mp, it would be wise to also duplicate it and move it over to the other side of the hud bar.
copy this layer only, and open it as a new file. Color it red for HP, blue for MP and purple for Poison and save as 1.png, 2.png and 20.png respectively. (make sure it's transparent)

now for that mysterious white thing. have this same hp container and go to EDIT-->FILL and fill with white, locking transparency ofcourse.
once you did this, you should have a completely white
but you arent done!
go to layer-> layer style-> stroke. (all this assuming youre using photoshoop) for the stroke color, pick a nice golden yellow/orange color and put the stroke at 1 px. set the stroke position to "inside" and check ok. now save this thing as 36.png

with all that out of the way, you have the fp and exp bars to worry about.

open 4.png and copy it. paste it onto your HUD in progress, hide all layers except the original hud, and line it up with the exp bar on the original. now unhide all the other layers (exp bar being on top) and set as multiply.

if you want to change color, go to image->adjustments-> hue/saturation and fiddle with that.

now that this is lined up, go to layer-> layer style, and stroke again. this will make a nice exp bar case for your exp bar (lol).
choose color and width to your liking... and if you want mess with other layer settings.

repeat with fp bar if you wish.

for the sp and level boxes...theyre just boxes, so go ahead and...make boxes lol. The "SP" is part of the HUD graphics though so youll wanna text that in yourself.

now for skill icons. this is fairly simple since they're the same as the item boxes in terms of size and spacing.
once again, hide all layers but the default hud, and do the following... on a new layer, as always.

^select all 5 precicely.


^take the deselect tool, and select the pillars of pixels between all the boxes (theyre only 2 pixels wide so zoom in close. If you mess up, ctrl+ z and try again.)


^fill bucket in whatever color you feel like.


^for the fancy bastards.

now set the layer to whatever layer setting you want. (my favorites are OVERLAY, MULTIPLY and SOFT LIGHT... but its all case dependant on which looks best.)
now the easy part. Duplicate and align the layer of 5 squares over the skill icons. they should fit perfectly.
if you used a layer style, youll have to merge this layer into the item key layer to get it with these as well. (or you can duplicate layer style, but thats impractical in the long run)

for the exp bar, just preserve transparency and color that how you want. save it as 4.png

lasty, is the pet bar. if you want to hid this from the HUB, just skip this part and move to the next step. if you want a pet bar... well i never made one. I just recolored the default :I

STEP 3:
now you have your graphics, but you need to put them in game. Even with the english patch, the engrish can make things difficult to understand.

open up Mainhud.img and youll see the familiar. right click and click Replacement Map (the second on the right click list)
then youll be faced with this.

do as told and click ok.
now do this with all the items you modified.

if you want to hide the pet bar, find 54 and 55 on the list and

^this will make them so they do not appear in game... but the pet icon will appear sooo its a give and take.

before you can save, keep an eye on this

if its blue, it means the file is too small. if its red, it's too big. you want it to look like this.

now if its BLUE, its easy to fix.
right click, and filled that file full of paper! (yay engrish)

and now youre ready to test out your HUD.

however, if it is RED, its alot more annoying.
What you want to do is run through files (mostly unimportant ones), and downsize them.
you can do this with any file in the sprite_interface.npk file so if you find any unused korean ones, just right click and "hide all map."

now save and go open up your dfo client to test dis shit out.

STEP 4:

now this will be good im so excited my own custom hud and all-

WHAT THE FU- NO AWESOME FACE WHY ARE YOU DOWN THERE YOU ARE NOT SUPPOSED TO BE DOWN THERE YOU ARE SUPPOSED TO BE AWESOME

yeah my first initial reaction to this.

simple fix. close your client and open up good ol' dnf extractor
right click the item that needs shifted around and


but next question...how far do i take everything?

let's go back to that screenshot of the failed first try. zoom in realllll close and youll see.

ohhhh yeahhhhh.

though you may want to first see if its actually the HUD graphic that is misaligned. you can typically figure that out by seeing if the fp bar and exp bar are aligned. if not, use the method as above to see how far off they are.

now here is how to actually apply the alignments.

x is horozontal, y is vertical, basic geometry stuff.
it supports negative numbers, too so you may need to work with those.
as far as im concerned, negative numbers will take your graphic up or left as positive will do the opposite.
this part still confuses me sometimes *simple minded* so uh... mess around if need be.

now for this, some can share coordinates.
1.png, 20.png and 36.png will all need the same coordinates applied.
in other words, if you boost your hp bar up 3 pixels, do the same for the other two, and vice versa.
sometimes the mp bar can be applied with the same, but it can be a rebel, so don't always rely on it to be like the others.

i have yet to need to adjust the fp or exp bar, so those should be fine as is.

Now, it may take a few tries of saving, opening dfo, seeing it off a bit, closing dfo, wash and repeat... but that's just what it takes.
I don't think I'm missing anything but questions are welcomed...though I'm still a rookie at this so i can't garuntee I'll know the answer x_x