How Do You Composite a HUD Still into a UI Mockup?

Place the HUD still as a texture on the screen of the mockup, not as a second artboard dumped on top. In Figma, that is an image fill inside the device frame with a hard mask. In Photoshop, that is a Smart Object clipped to the screen shape, set to Screen or Linear Dodge (Add) if the plate is already on black. You are making a product picture. You are not keying a live overlay in OBS.

Download a HUD, radar or futuristic-interface master from the archive. Work on a copy.

Build the stack so the device still looks like a device

Start with the bezel photograph or the vector device. The screen area is a rectangle, a rounded rect, or a slightly trapezoid because of camera angle. Make that shape first. Everything HUD-related is clipped to it. If the plate hangs over the bezel, the mockup reads as a poster, not a product.

Set the plate to Fill the screen shape, then nudge. HUD compositions have a subject: a reticle, a sweep origin, a stack of readouts. Put that subject where the product UI will not sit. If your app chrome is a bottom tab bar, keep the sweep in the upper two thirds. If you are presenting a watch face, you will crop hard; pick a plate that still reads at 400 pixels.

Blend mode depends on the plate and the screen:

• A full-frame plate that already includes a background: Normal, 100 percent, maybe a slight darken overlay so the app type you add later survives.
• Cyan or green graphics on true black: Screen, or Linear Dodge (Add) at 60 to 90 percent, over a dark screen base. Black disappears. The lines sit on whatever wallpaper or blur you put underneath.
• A glitch or neon field you want as the entire display: Normal, then add your UI as a separate group above.

Do not use Overlay on a busy HUD unless you like muddy greys. Do not use Multiply on a black plate; the plate vanishes.

Perspective: if the device photo is not orthographic, convert the HUD Smart Object with Edit > Transform > Distort, or use a vanishing-point grid, so the scan lines recede with the glass. A flat HUD on a three-quarter iPhone is the tell that the mockup was rushed. In Figma, use a 3D mockup kit or accept an orthographic device. Do not fake perspective with a non-uniform scale; circles become eggs and the grid shouts.

Color: stay in sRGB. Mockups are screen pictures. A FOGRA conversion here is wasted and will brown the cyan. Assume sRGB and export the mockup as an sRGB JPEG or WebP for the deck.

Type you add is your UI, not part of the plate. Keep it in a separate group named ui-chrome so a developer can hide the HUD or swap it. Do not rasterize the plate into the same layer as the buttons.

What this is not, and how you hand it over

This is not an OBS luma key and not a transparent video. These PNGs are RGB work files, usually opaque. If you need a real alpha overlay for a stream, that is a different product. The still is for still mockups: Dribbble shots, App Store frames, pitch slides, packaging that shows a device.

Keep the 3840x2160 master outside the PSD. Smart Objects that only exist inside a 3 GB mockup file will be flattened by someone who needs a smaller share. Store slug-3840x2160-srgb.png in 02_original/ and let the PSD reference a 2560-px working copy if the file gets heavy.

Export a review JPEG at 2000 px on the long side, sRGB, quality 80. That is the email picture. Export a 4K JPEG only if the mockup itself will be presented full screen. Do not send the layered file unless the client asked for layers, and then pack the folder so the HUD master travels with it.

If the same plate must appear as the in-app wallpaper inside a prototype, use a cropped derivative at the device's logical resolution, not the full 3840 width on a 390-point iPhone frame. The prototype will feel slow and the HUD will be microscopically fine.

Rights: placing the still inside a product picture is commercial use and is allowed. Selling the PSD with the PNG embedded as a stock mockup kit is redistribution. Swap in a placeholder before you sell the kit.

When the client sees the still and asks for the display to move, send them to Unique Live Wallpaper and keep this composite as the poster frame of the mockup. Do not promise that a blend mode in Photoshop is a player.