Game UI Mockup on Screenshot
Attach a frame of your game, list what the interface shows, and judge the layout in context
“Here's a screenshot of my game. Mock up a HUD on it that fits the art style, with health, currency and a pause button.”
With a screenshot of your game
The scene is untouched. Health sits at the lower left, coins at the upper right and pause at the upper left, all clear of the platforming route.
A HUD that looks right in a design file can fall apart on top of the game. It turns out too heavy for the art, or it sits right on the route the player runs, and usually you find out after it is built.
Attach a screenshot and list what the interface needs to show. The example on this page asks for a HUD "that fits the art style" and describes the style no further, because Layer takes the look from the image itself and mocks the interface up on your own frame.
Every HUD has to survive the busiest scene behind it. Put the mockup over your most crowded frame and you see at once what covers the action and what gets lost in the background, while it is still a picture and moving an element takes one sentence.
Your art, left alone Layer adds the interface on top and leaves the scene as it was.
A style taken from the frame The HUD borrows what is already on screen, so it looks like part of the game instead of a template laid over it.
Placement follows the conventions players know. Counters and system buttons go toward the top corners, the player's own health sits low on the screen, and the center of the action stays open.
Once a layout is approved, ask for its widgets as separate files in their states for your engine.
See game HUD design for full widget sets, menu and store screens for full screens, and game UI kits for the pieces.
Describe your game and its platform. Layer lays out the HUD for your genre and draws health bars, skill slots and minimap pieces in every state.
Shop and Season Pass Mockups That Look Like the Shipped ScreenDescribe a shop, season pass or gacha screen and get a mockup in your game's style, with sample text written in and the main offer leading the layout.
A Matching Game UI Kit With Panels Built to 9-SliceName a style and the pieces you need. Layer draws buttons, tabs, panels and frames as one matching kit, in every state, with panels built to 9-slice.
Your busiest one, with the play space visible. A HUD that holds up over a calm frame can disappear against a boss fight or a crowded level, so test it where it has the most to compete with.
No. Layer adds the interface and leaves the scene as it was, so you judge the UI against your real art rather than a repainted game.
Yes. Ask for a second version with health at the top, or a lighter frame style, on the same screenshot, and put the two next to each other before anyone builds either.
No. It is one flat image, made for judging the layout. Once a layout is approved, ask for its widgets as separate files in their states, with the numbers left for your engine to draw. See [game HUD design](/use-cases/game-hud-design).
Yes. Ask for a shop, inventory or pause overlay on the same screenshot, or see [menu and store screens](/use-cases/game-menu-screens) for full screens.
Create a free Layer account and attach a screenshot of your game.