External downloads

PSD Sample Files
Ready-to-test UI layouts

Download example PSD files and use them to test the Photoshop exporter and Unreal importer workflow. Each sample includes a thumbnail, a short purpose description, and a direct PSD download link.

Location: external / samplesFormat: PSD source filesWorkflow: Open PSD → Run JSX Exporter → Import layout.json in Unreal
Exporter download

Photoshop JSX exporter

Download the latest JSX exporter from this help package, then install or run it in Photoshop before exporting the sample PSD files.

UI Widget Builder Photoshop Exporter

Latest JSX exporter included with this help site. It exports layout.json, textures, text/font data, checkbox-group metadata, wrap data, and protects rounded/masked art from 64×64 solid-color optimization.

File: downloads/UI_Widget_Builder__PhotoshopExporter.jsx

Download JSX Exporter

How to use with the samples

Open one PSD sample, run the JSX exporter, then import the generated layout.json folder in Unreal with UI Widget Builder.

Workflow: PSD → JSX Exporter → layout.json + Textures → Unreal Importer
Font presets

Preset Fonts download

Download the preset font package used by the sample PSD files. Install or import the fonts in your Unreal project, then use the Font Mapping page if any Photoshop font needs to be matched manually.

UI Widget Builder Preset Fonts

Optional font package for testing the sample PSD files and matching the intended text style more closely inside Unreal UMG.

Download Preset Fonts

When to use

If Unreal cannot find a Photoshop font during import, the widget still imports and falls back to Unreal's default Roboto font. Use these preset fonts or your own font assets to improve visual matching.

Fallback: Unreal default Roboto if unresolved
!
Font mapping note

After adding fonts to your Unreal project, open the Font Mapping workflow and resolve any missing Photoshop font names to the matching Unreal font assets.

Samples

All PSD samples

Sample 01 — Main Menu thumbnail

Sample 01 — Advance Main Menu 01

A clean main menu PSD for testing root screens, background images, normal buttons, button text, and imported font/color layout.

Download PSD
Sample 02 — Settings / Controls thumbnail

Sample 02 — Advance Main Menu 02

Advance Menu  PSD for sliders, checkbox groups, text labels, and UI control alignment in the Unreal importer.

Download PSD
Sample 03 — Popup / Dialog thumbnail

Sample 03 — Technical UI Sample

A Menu syatem for testing panels, image optimization safety, nested groups, button states, and etc......

Download PSD
Sample 04 — HUD / Controller UI thumbnail

Sample 04 — Mobile Vertical Menu

A Menu PSD for testing icons, progress elements, controller/help text, wrapped descriptions, and runtime-ready layout.

Download PSD
How to use

Testing workflow

  1. 1Open a sample PSD in Photoshop and check the layer names and groups.
  2. 2Run the JSX exporter to create layout.json and the Textures/ folder.
  3. 3Import in Unreal with UI Widget Builder and compare the generated Widget Blueprint against the PSD.
  4. 4Use samples for support when checking naming, layout, text, hover effects, checkbox groups, and rounded-image export behavior.
BackOverviewNextQuick Start