Other work — Game & Visual
UI Game Assets
- Role
- UI Artist & Designer
- Year
- 2024
- Tools
- Photoshop, Graphic Tablet
- Context
- Standalone Asset Kit
A game UI kit built from the style of another artist's illustration: I analysed its shapes, colour, shading and lines, then designed a start menu, settings screen and component set that belong to it — built in Photoshop, ready to slice for a game engine.
The brief
Learn a style first. Then design the interface it would have.
A UI kit for a hypothetical game: start menu, settings and every component in between. Instead of starting from screens, I started from a reference illustration by another artist — taking its style apart in a style guide, then using those findings as the rules for my own interface.
Style guide
Four things make the style: its shapes, colour, shading and lines.
The reference illustration (top right) is not my work — it is by another artist and was used only to study the style. The analysis and the UI are mine.
- 01
Shapes
Simple shapes with high contrast and size variation — mainly circles, curves and a few triangles.
- 02
Colour
A split-complementary palette: black and white with saturated orange and green, high contrast for readability.
- 03
Shading
Barely any: the style lives on silhouettes, with shadow only under hair, mouth, eyes and flowers.
- 04
Lines
Mostly vertical, plus dotted and curved lines that give the composition flow and rhythm.
The screens
Every screen built from the same few shapes, colours and lines.
- 01 / 03
Start menu
The character and the snake frame the menu; one strong orange button makes Start the obvious first move, with Options and Quit stepping back.
- 02 / 03
Settings
The same circle carries difficulty, volume and brightness. Sliders and radio buttons reuse the eye, flower and dotted-line motifs from the art.
- 03 / 03
Components & themes
The full kit on a lighter theme: buttons, toggles, sliders, inputs, icons and type (Montserrat), so any screen can be assembled from parts.
Design decisions
- 01 Hierarchy Size, contrast and spacing put the primary action first — Play, Resume, Save — so nobody hunts for it.
- 02 Affordance Buttons look pressable and panels sit clearly apart from the art, with hover, pressed and disabled states.
- 03 Consistency One palette and one shape language — circles, dotted lines, thin borders — tie every screen together.
How it's built
- Hand-drawn with a graphic tablet in Photoshop, built from vector shapes and smart objects so it scales from 1080p to 4K.
- Layers grouped and named the way a developer would structure them in CSS or a Unity canvas, for a clean hand-off.
- Colour themes made with adjustment layers, so a new mood or game mode is a quick variation rather than a redraw.
Why it matters Making the assets myself taught me how UI is drawn, sliced and handed over — so I can talk to artists, and structure CSS or a Unity canvas to match how the design is built.