Generating UI and HUD Elements

A game's interface (buttons, panels, health bars, frames and the title logo) sells its polish as much as the characters do. The key is consistency: every piece should look like part of one set. In this guide we'll make a UI kit with the UI type.

Set up the UI type

In the image generator, set Type to UI. A UI Mode menu appears:

• Graphic: a text-free element, such as a button, panel, frame, bar or icon.
• Game Title: your game's title rendered as a logo. Put the title in the prompt.
• Text: a short label or word rendered in the chosen style.

For titles and text, GPT-Image 2.5 renders lettering most reliably.

Lock the style first

Pick a Style and Colour Palette and generate one element you like, such as a single button. Keep those settings for every other piece. If you're on Voidless+, save that look as a style so later pieces can use it from My styles.

Generate the core set

Most UIs need the same pieces:

• Buttons: normal, hover and pressed. Generate the normal one, then use Edit this image for "pressed, slightly darker" so the states match.
• Panels and frames: inventory windows, dialog boxes, tooltips.
• Bars: health, mana, stamina, XP. Ask for the empty frame and fill it in the engine.
• Icons: see the items and icons guide.

Make panels stretchable

Panels and bars get resized in the engine. Ask for simple borders and a plain centre so they work with 9-slice scaling. Ornate details only work at one size.

Test them together

Put the pieces side by side at their real size, in a mock-up or in your game. Mismatches that hide in isolation show up as soon as the elements sit together.