Custom UI graphics tutorial!

Are you tired of every hack using the vanilla FE8 UI? Well. With this tutorial, I will teach you how you can give some more style to your hack.

And big thanks to @Stephano and @Huichelaar for helping me figure this out.

With this tutorial, you will be able to make your UI go from looking like this…
123

…to THIS!
456

You just have to download a few things:

First, download the patches HERE. And put these folders into your FEBuilder Patches folder for them to show up. They appear under these names:
image

Second, download these custom UI graphics made by Stephano (These are updated from his original post). Get them HERE.

You don’t NEED to use them, but they are very useful as a template.

NOTE: I recommend editing the graphics with a dedicated sprite editor like Aseprite, that allows you to conserve the palette order of the image. Otherwise, results can vary.

Now, let’s actually implement them. Here’s what each of the different graphics does:

Menu GFX
image
These graphics are like 90% of what you need. They impact most menus, including Weapon Select, Battle Forecast, Preparations Screen, and more.

Preps extra GFX
image
These are the other 10%. For some reason, the preparations screen loads these extra separate tiles, on top of the others. You need to implement these too for a clean look.

Minimug Box HP Bar GFX
image
Depending on the look you’re going for, the HP Bars in the Minimug Box might look a little off. For Stephano’s graphics, I made an edit. This is optional, but recommended.

Minimug Box Numbers
image
Same as the previous one, these numbers can look a bit off if left unedited, so you should edit them too. These are also optional.

So you only need to edit the graphics to your liking, and then just insert them!

But we’re not done! We also have to take a look at the palettes:

Let’s go to the Menu GFX patch, and click on Graphics Editor

5B6BB4 Blue
5B6BD4 Red
5B6BF4 Green
5B6C14 Gray

Blue, as you can imagine, is used for most menus.
Red is used for Battle Forecast.
Green and Gray, for some reason, are used for the Preps screen, as you can see in this following image:

The bar highlighted in the middle uses the Green palette, and the right side, obviously, uses the Gray palette.

For some reason, Minimug boxes use separate palettes. The addresses are these:
image

There is no minimug box palette for gray, which is odd. I assume that if you are using 4th Allegiance, it will use the previous gray palette for the minimug box. But I have not tested.

IMPORTANT: Do NOT, I repeat, DO NOT edit the palettes for Minimug Box HP Bar or Minimug Box Numbers. They pull from the Main Blue palette (5B6BB4).


…And with all that, we’re done! Enjoy the new fresh look of your UI!

Also, these graphical edits are compatible with both Moduar Minimug Box and Battle stats with anims off!

37 Likes

This is definitely a pinworthy post. Credit goes to Stephano, too. All of us users who want make something like that sleek-looking menu really appreciate the tutorial!

4 Likes

Thank you!

1 Like

Thank you so much for the tutorial! I am going for a Fates coloured UI for my game, so it really helped me sell the feel.

1 Like

It’s great!I am currently troubled by this issue. :heart:

1 Like

UPDATE: Added 2 extra patches for missing graphics:
“Menu Extra GFX 2” and “Menu Extra GFX 3”.

Here’s what the first one affects:
image

7 Likes

UPDATE: Added the patch “Preps Use Menu GFX” for the missing tiles in the item use menu in preps. In the corner where the 2 windows meet.

Before VS After
D B

Also, the window for HP healing in the map is an existing patch. So I didn’t have to make one myself. Look for the patch called “Map animation palette 1” and click Graphics Editor to import your custom graphic. The Import button in this window i just for palettes.

And this is how it looks with a custom graphic
A

5 Likes

How do we use this with Stephano’s custom UI graphics?

1 Like

His don’t include the graphics for that. You would have to make them yourself matching the existing ones.

Later I will make more graphics for the new patches.

1 Like

UPDATE: You can use the pre existing patch “Menu decoration on right side of preparation” for the gray box on preps.

Before VS After
C E

5 Likes

Was looking for something like this, thank you so much!

1 Like

Made this to be used with the default template for my game. Thought I’d share.

Preps Use Menu GFX for default template

Patches __Preps Use Menu GFX___Template

Before vs After

egesgsehsehseaegawgawgawgaw

3 Likes