# Mock Up UI on Your Screenshot Without Touching the Game Art > Attach a screenshot of your game and get a HUD or menu mocked up on it in your art style, with the scene untouched and the play space kept clear. --- ## Messages to send, and what they made ### “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: ![A side-scrolling fantasy platformer screenshot with no HUD](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/b5d13873-781f-4862-ac34-3f9ee971ae3e/game_asset_clean_gameplay_screenshot_from_a_sidescrolling_fantasy-2026-09-25-204650.png) - ![The same screenshot with a health bar, coin counter and pause button added](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/fd00cbcc-7edc-431b-9890-b1599c4d0fb3/game_hud_mockup_edit_add_only_three_minimal_inplay_ui_overlays_to_the-2026-09-25-205128.png) 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. ## Judge It Over Real Gameplay 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. ## The Scene Stays Yours **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. ## Turning the Mockup Into Widgets Once a layout is approved, ask for its widgets as separate files in their states for your engine. See [game HUD design](/use-cases/game-hud-design) for full widget sets, [menu and store screens](/use-cases/game-menu-screens) for full screens, and [game UI kits](/use-cases/game-ui-kit) for the pieces. ## Frequently Asked Questions ### Which screenshot should I use? 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. ### Will it change my game's art? 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. ### Can I compare two layouts on the same frame? 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. ### Can I ship the mockup? 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). ### Does it work for menus too? 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. --- [View original](https://layer.ai/use-cases/game-ui-mockup) | [All Use Cases](https://layer.ai/use-cases)