# Extract UI Elements

Call a vision model on a scene screenshot to extract UI elements into one sprite bitmap.

## TL;DR: 3 steps

Extract UI Elements fits a concrete game-scene screenshot when the goal is to pull UI pieces into one sprite bitmap via a vision model. It is a poor fit when region count and boundaries must be exact: results stay approximate and depend on the chosen model.

**Extract UI Elements** runs model-based UI extraction on the current image. No prompt is required; the flow is driven from the UI.

## Step 1: Select the feature from the menu

Start from a scene or sprite capture before extraction. The example below is the source image used in this walkthrough.

![Game scene sprite before Extract UI Elements](/images/extract-ui-elements/extract-ui-elements-base-sprite-image_.webp)

With the target image selected, open **AI tools**, then **AI Extract**, and choose **Extract elements**.

<figure>
  <img src="/images/extract-ui-elements/extract-ui-elements-step1_.webp" alt="AI tools menu with AI Extract open and Extract elements highlighted">
</figure>

## Step 2: Set the model and parameters

In the dialog, pick the model and output size. Supported options include GPT Image 2, Nano Banana / Nano Banana 2, and Nano Banana Pro. Larger sizes tend to yield more items and more variety in the extraction.

<figure>
  <img src="/images/extract-ui-elements/extract-ui-elements-step2_.webp" alt="Extract UI Elements dialog with model and output size options">
  <figcaption>Use this shot only as a reference for the click-through entry. Latest product screenshot as of 2026-09-03.</figcaption>
</figure>

## Step 3: Check the extraction result

After generation, review the assembled sprite. The current output is a **non-transparent** bitmap layer; cleanup is usually needed before feeding it into later steps.

<figure>
  <img src="/images/extract-ui-elements/extract-ui-elements-step3_.webp" alt="Extracted UI elements assembled on a non-transparent sprite bitmap">
  <figcaption>Result with GPT Image 2, Output Size 1K.</figcaption>
</figure>

## Better fit: bitmap to sprite sheet

A UI-dense single bitmap is a stronger scene for Extract UI Elements than the walkthrough above. The model pulls discrete controls and panels from one source image into a single sprite map; coverage and boundaries here are richer and more precise than the Step 3 demo.

<figure>
  <img src="/images/extract-ui-elements/extract-ui-elements-user-case-2-base-image_.webp" alt="UI-dense game bitmap used as the Extract UI Elements source">
  <figcaption>Source: one UI-dense bitmap.</figcaption>
</figure>

<figure>
  <img src="/images/extract-ui-elements/extract-ui-elements-user-case-2-output-image-gpt-image-2-1k_.webp" alt="Extracted UI elements laid out on a single sprite sheet">
  <figcaption>Output sprite sheet with GPT Image 2, Output Size 1K.</figcaption>
</figure>

<figure class="video-embed">
  <div class="video-embed-frame">
    <iframe
      src="https://www.youtube-nocookie.com/embed/bh2G7L_9MYs"
      title="VberAI Studio Extract UI Elements demo"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    ></iframe>
  </div>
</figure>
