Drawing a new UI skin from scratch, with blue (B) as the accent color
Instead of polishing the old flat brown skin, I drew a new GUI skin in GIMP. Out of three accent colors I picked B, blue, which is Karin's color, and brought 23 double-resolution 9-slice parts into Unity to check they don't break when stretched.
I decided to redo the game's GUI, and the first job was the UI skin. The current UI (inventory/shop, dialogue box, combat menu) was all flat: a dark brown, semi-transparent rectangle with a single thin gold line, and that was it.
Polishing the old skin didn't seem like it would be enough, so I decided to make a new one from scratch. For the mood, I used the GUI from the remaster of The War of Genesis: Rhapsody of Zephyr as a reference.
Screens I built
I drew the belongings menu layout over the village screen, using real item icons. The three options, A copper / B blue / C silver, differ only in accent color, and I went with B blue, which is Karin's color. The accent colors are glow #3aa8ff, dark #132c4a, mid #2d66a4 and light #8fd0ff.
What I took from the reference GUI were the things that set the mood: a nearly opaque charcoal panel, 45° beveled corners with a silver-gray metal double line, side tabs that come to a point on the right, a selection highlight made of an accent-color gradient and glow, English subheadings on a black band, and key icon hints.
Actually, I started out by drawing V1–V3, polished versions of the old skin. They didn't look bad, but in the end they were still just the old skin with fixes, so I dropped them and drew a new one.
There are 23 parts: the window and its shadow, side tabs in 5 states plus glow, buttons in 5 states plus glow, list selection and hover rows, an inset panel, section bands, icon slots, a quantity stepper, key icon backgrounds and a close X. Each state gets its own panel gradient and border color. Normal is gray, Hover has a blue-gray border, and Selected is a blue mid → dark gradient with a highlight on top.
I laid the parts out stretched to different sizes on a 1920×1080 screen, and the corners, tab tips and glow all held up without breaking. So far I've only seen it in the preview screen, so the actual game UI is unchanged.
Things I thought about
- 2× textures + PPU 200. I drew everything at 2× so it shows at native size at 1920×1080 and stays sharp at 4K. I set 9-slice borders and imported with mipmaps off, Clamp, and no compression.
- No text baked into sprites. Text uses the Nanum Gothic Bold font I'm already using.
- No original assets. I only borrowed the mood from the reference. I didn't trace anything, and every part was drawn from scratch.
Rabbit hole: the hover row was too bright
On the stretch test screen, the row that appears when you hover over a list item stood out way too brightly. It was white at 8%, so I lowered it to 4% and remade it.
Next up
- Apply it to the actual game UI. The inventory is currently a 4×4 grid, but the mockup is a list, so I need to settle the layout first
- Hook up button state transitions, and make shared skin data that bundles the parts together
- Check whether it's actually sharp at 4K