---
title: Make vectors, pixel art and layered files
display: 'Make vectors, *pixel art* and layered files'
nav_title: Vectors, pixels, layers
summary:
  - "Recraft Vectorize turns a flat logo or icon into an SVG with the same shapes and colors."
  - "Pixelate snaps a character to a true pixel grid with a small palette. Then Remove Background gives you a transparent sprite."
  - "Seedream 5.0 Flash Layerize splits a picture into the parts you list, each on its own transparent layer."
description: Turn an image into an SVG with Recraft Vectorize, into pixel art on a true grid with Pixelate, and into separate transparent layers with Seedream 5.0 Flash Layerize. Then slice or assemble grids and sprite sheets.
section: images
order: 70
type: guide
level: Build
roles: [artist]
time: { read: 8, do: 10, wait: 2 }
needs: ["A clean source image, ideally 1024 px or larger"]
last_verified: 2026-11-11
models_checked: ["GPT Image 2.6 Sunburst", "Recraft Vectorize", "Scenario Vectorize", "Pixelate", "Pixel Snapper", "Remove Background", "Photoroom Background Removal", "Seedream 5.0 Flash Layerize", "Seedream 5.0 Pro Layerize", "Image to Layers", "Image Slicer", "Grid Maker"]
hero: images/vectors-pixel-art-and-layers/lantern-keeper-pixelate-128.webp
video: tutorials/vectors-pixel-art-and-layers.mp4
video_caption: Vectors, pixel art and layers
about: "A generated image is a flat grid of pixels. This lesson turns one into three other kinds of file: an SVG logo that stays sharp at any size, with Recraft Vectorize; a pixel art sprite on a true grid, with Pixelate and Remove Background; and a stack of transparent layers you can move or replace, with Seedream 5.0 Flash Layerize. The models and prices in this lesson are as of November 2026."
chapters:
  - { at: 0, title: "Vectors", image: "/media/images/images/vectors-pixel-art-and-layers/ch-01-vectors.webp" }
  - { at: 38.76, title: "Pixel art", image: "/media/images/images/vectors-pixel-art-and-layers/ch-02-pixel-art.webp" }
  - { at: 108.94, title: "Layers", image: "/media/images/images/vectors-pixel-art-and-layers/ch-03-layers.webp" }
related: [game-icon-set, sprite-sheet-animation, remove-and-replace-backgrounds, image-models-guide, seamless-textures]
thumb: images/vectors-pixel-art-and-layers/thumb.webp
steps:
  - title: "Pick Recraft Vectorize and add your emblem"
    text: "Create › Edit Image, then Model › Recraft Vectorize, and under Image › Select from Library pick the emblem. Flat art with clean edges works best."
  - title: "Vectorize"
    text: "Recraft Vectorize has no settings: with the emblem loaded, click Vectorize."
  - title: "Check and download the SVG"
    text: "Click Download at the top right of the viewer to save the SVG, then zoom far in in your design tool: the edges stay sharp."
  - title: "Pick Pixelate and your character"
    text: "Under Model, pick Pixelate, then Image › Select from Library and pick your character."
  - title: "Set the pixel grid size"
    text: "Settings › Pixel Grid Size 128px keeps a full character's face readable. Turn on Remove Noise for fewer stray pixels."
  - title: "Set the color palette"
    text: "Color Palette › Image with Maximum Colors at 32 (Presets and Custom are the other options). With 128px and Remove Noise on, click Pixelate."
  - title: "Check the pixel art"
    text: "Every pixel sits on one grid with a small set of colors, and the face reads at game size."
  - title: "Remove the background"
    text: "Pixelate fills the background: click ... above the image › Remove Background for a transparent sprite (here with Photoroom Background Removal)."
  - title: "Pick Seedream 5.0 Flash Layerize and your image"
    text: "Under Model, pick Seedream 5.0 Flash Layerize and select the noodle stall image from the library. Leave Settings › Resolution on Auto."
  - title: "List the parts and generate"
    text: "Open Prompt and write a rule for splitting, naming each part plainly, then click Generate."
    prompt: |-
      Separate this image into transparent layers: the old cook, the raccoon cub in the yellow raincoat, the noodle stall with its counter and bowls, the hanging lanterns, and the background street.
  - title: "Check the layers"
    text: "Each part comes back on its own transparent layer, and the street is filled in where the parts stood. If two parts merged, name them more precisely and generate again."
agent_steps:
  - title: "Connect the Scenario MCP"
    text: "Connect your agent and sign in once at [mcp.scenario.com](https://mcp.scenario.com). Then tell it which Scenario team and project to use, so every file lands there."
  - title: "Give the agent the files"
    text: "The flat emblem for the vector, the character for the sprite and the noodle stall scene for the layers, each 1024 px or more. Upload them with upload_asset or give their asset IDs."
  - title: "Brief the agent"
    text: "Three tools, one input each. Read each tool's settings with model_schema_get rather than guessing their names."
    prompt: |-
      Three runs, one image each. Read each model's parameters with model_schema_get first. Quote the cost with a dry run first and wait for my go.

      1. Vectorize the emblem with Recraft Vectorize (model_recraft-vectorize), no settings, and download the result as an SVG.
      2. Pixelate the character with Pixelate (model_sc-pixelate): pixel grid size 128px, remove noise on, palette taken from the image with 32 colors at most. Then remove the background of that result with Photoroom Background Removal (model_photoroom-background-removal) for a transparent sprite.
      3. Split the noodle stall image with Seedream 5.0 Flash Layerize (model_bytedance-seedream-5-0-flash-layerize), resolution auto. Prompt, word for word:
      Separate this image into transparent layers: the old cook, the raccoon cub in the yellow raincoat, the noodle stall with its counter and bowls, the hanging lanterns, and the background street.

      Launch the first runs with wait: false and collect them with jobs_wait, then show me every result.
  - title: "Check and redo"
    text: "Accept an SVG made of a few clean shapes, a sprite whose pixels are all one size on one grid with a readable face and clean edges, and one layer per listed part with a clean filled background. Reject hundreds of tiny shapes, drifting pixels, specks, or two parts on one layer."
    prompt: |-
      Tell me how many shapes the SVG has, whether the sprite has stray specks or leftover background, and which layers came back for which part. Redo only what fails: Scenario Vectorize (model_sc-vectorizer) with its Clean preset for a busy vector, a 256px grid if the face is mush, or the layer prompt with each merged part named on its own.
  - title: "File the results and report"
    prompt: |-
      Create a collection called "Vectors, sprites and layers" with the sources and every kept result. Report each asset ID with its model and the total cost spent.
updated: 2026-11-11
canonical: https://learn.scenario.com/images/vectors-pixel-art-and-layers
---

Last updated: 2026-11-11

# Make vectors, pixel art and layered files

> Turn an image into an SVG with Recraft Vectorize, into pixel art on a true grid with Pixelate, and into separate transparent layers with Seedream 5.0 Flash Layerize. Then slice or assemble grids and sprite sheets.

In short:

- Recraft Vectorize turns a flat logo or icon into an SVG with the same shapes and colors.
- Pixelate snaps a character to a true pixel grid with a small palette. Then Remove Background gives you a transparent sprite.
- Seedream 5.0 Flash Layerize splits a picture into the parts you list, each on its own transparent layer.


A generated image is a flat grid of pixels. This lesson turns one into three other kinds of file: an SVG logo that stays sharp at any size, with **Recraft Vectorize**; a pixel art sprite on a true grid, with **Pixelate** and **Remove Background**; and a stack of transparent layers you can move or replace, with **Seedream 5.0 Flash Layerize**.

:::note As of November 2026
The models, settings and prices in this article are the ones Scenario offered in November 2026. New models and updates arrive often, so check the model library for newer options before you choose.
:::

:::steps Quick version
1. For a logo or icon, pick **Recraft Vectorize**, add the image and click **Vectorize**. Download the SVG.
2. For pixel art, pick **Pixelate**, set **Pixel Grid Size**, **Remove Noise** and **Color Palette**, and click **Pixelate**.
3. Open the pixel art, click **...** and choose **Remove Background** for a transparent sprite.
4. For layers, pick **Seedream 5.0 Flash Layerize**, add the image, list the parts under **Prompt** and click **Generate**.
:::

## Before you start

- **All three tools live in the same place.** Go to **Create** and open the image editing page (its header reads **Edit Image**). Pick the tool in the **Model** box at the top of the left panel. You can also open an image and choose **Pixelate**, **Vectorize** or **Remove Background** from the **...** menu above it.
- **Start from a clean source.** Flat art with clean edges makes the best vectors. A character with a clear outline on a plain background makes the best sprite. For best results, use an image of 1024 × 1024 pixels or more.
- **Know which file you need.** A vector (SVG) is made of shapes, not pixels, so a logo can go on a business card or a billboard. Pixel art is the opposite: a deliberately small grid with few colors. Layers are for compositing, parallax and animation, where each part has to move on its own.
- **The cost shows on each button.** **Vectorize**, **Pixelate** and **Generate** each show the price of the run before you click.

## Step 1: Pick Recraft Vectorize and add your emblem

Click the model name under **Model** and pick **Recraft Vectorize**. Under **Image**, you have three ways in: **Drag & drop or paste**, **Select from Library** or **Upload**. Here, click **Select from Library** and pick the emblem.

![Recraft Vectorize picked, with the Image box offering Drag & drop or paste, Select from Library and Upload](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/9e447ec3389a29cd9e1f8327445be1820339cde0ad72247d50dc5bb810624acd.webp)

Flat art with clean edges works best: solid fills, no soft shadows, no photo texture. Each color region becomes a shape, so a gradient or noisy texture turns into hundreds of tiny shapes.

## Step 2: Vectorize

Recraft Vectorize has no settings. With the emblem loaded, click **Vectorize**.

![The emblem loaded under Image, with the Vectorize button ready](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/d3ce247df1de4c5d1cfb3e0bb31adf0b9d30a1d7641060092099f97318204343.webp)

## Step 3: Check and download the SVG

The vector opens in the viewer with the same shapes and colors as the original.

![The vectorized emblem in the viewer](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/6996535ee60bd19a4711afe7ae5956a9a62653c53f7e7306b951dd2ce5e293f4.webp)

The viewer shows a picture of the vector. To see the real thing, click **Download** at the top right of the viewer to save it as an SVG file, and open it in your design tool. Zoom far in: the edges stay sharp where the original pixels would blur.

![Zoomed in on the eagle's eye: the original PNG on the left, the SVG on the right](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/e66975fbefdbf7f6751eb61d9144854a32cb598442b9bf06759a3b59d957232a.webp)

### The other vectorizer: Scenario Vectorize

**Scenario Vectorize** is in the model library too. It has three presets:

| Preset | What it does | Use it for |
|---|---|---|
| **Clean** (recommended) | Flat shapes with smooth curves, in the colors already in the image | Icons, logos, stickers, illustrations, comics |
| **Minimal** | The same flat look with the fewest colors possible | A bold, poster-like version of a busy image |
| **Textured** | Keeps the shading and texture, with many more shapes | Photos and painterly art where gradients matter |

Images smaller than 1024 px are enlarged first so the shapes come out clean, which adds a little to the cost.

## Step 4: Pick Pixelate and your character

Now pixel art. Under **Model**, pick **Pixelate**, then click **Select from Library** under **Image** and pick your character.

## Step 5: Set the pixel grid size

Under **Settings**, choose the **Pixel Grid Size**: **16px**, **32px**, **64px**, **128px** or **256px**. It's how many pixels wide your pixel art will be.

![Pixel Grid Size set to 128px, with Remove Noise below it](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/dc9df9aa5c1b27bce90d6648ebd04f988dc389dbe5369f48413f9fc282aad139.webp)

| Grid | Look | Good for |
|---|---|---|
| 16px, 32px | Big, chunky pixels, a strong retro look | Small sprites, items, classic 8-bit style |
| 64px | A balance of detail and retro look | A good first try when you're unsure |
| 128px, 256px | More detail, light pixelation | Full characters, portraits, larger scenes |

For a full character, **128px** keeps the face readable. Use it here.

Turn on **Remove Noise** for cleaner shapes, with fewer stray pixels. It helps most on detailed images.

## Step 6: Set the color palette

**Color Palette** sets the colors your pixel art can use. It has three options:

- **Image** takes the colors from your own picture. **Maximum Colors** sets how many to keep. **Auto** lets Pixelate decide. Fewer colors give a more retro look.
- **Presets** opens **Choose color palette**, with ready-made palettes under **Platform Palettes** and the ones you saved under **Your Palettes**.
- **Custom** lets you build your own palette, color by color with **+**, for example to match the rest of your game.

![Choose color palette, open on Platform Palettes](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/74fc5a6a124cfe47b619fe0625c6f89eb0f5aa9c4d1b478910a6cd4eac6e89eb.webp)

Here, choose **Image** and drag **Maximum Colors** to **32**. The panel now reads: **Image**, 32 colors, **128px**, **Remove Noise** on. Click **Pixelate**.

![Pixelate set up: Image palette with Maximum Colors at 32, Pixel Grid Size 128px, Remove Noise on](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/71b69f1805a64a448ddb07db264fd7edb895648ef52c83d33769becdb6c56cef.webp)

:::tip
For a set of sprites that belong together (a character's animation frames, a family of items), use the same grid size and the same palette on every image. Save a custom palette once and pick it from **Your Palettes** each time.
:::

## Step 7: Check the pixel art

Every pixel now sits on the grid, with a small set of colors.

![The pixelated character in the viewer, on a filled background](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/4ee7230e030d64df44f2b43b3f2d281199254e7cc169c2ae2580d0b17401f7b6.webp)

:::compare
![The source character, a smooth illustration](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/84ebf77740bf20c2d66d1ad99f0dd3a079e6b31f2efdc5b2b988ca83fd94c872.webp "Source")
![The same character after Pixelate at 128px with 32 colors](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/0dcbeebe2ea60d3d31d5a41ee6e3d508b98000d075427f1654fe35fad3d7e3e9.webp "Pixelate, 128px, 32 colors")
:::

## Step 8: Remove the background

Pixelate fills the background, so the sprite isn't ready for a game yet. Above the image, click the **...** button and choose **Remove Background**.

![The ... menu above the pixel art, with Remove Background in the list](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/f3acf6a08c588a970b5e006145134a1f38df8ef6545e4659b8ccddbd9942629b.webp)

The same menu has **Pixelate** and **Vectorize**, so you can run either on any image straight from the viewer. In the film, Remove Background ran with **Photoroom Background Removal**.

The result is a transparent sprite, ready for your game.

![The pixel art character on a transparent background](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/8f65e5372c55fff6e05b37d67cdc991cf64a706265e7c49ddfb21be24337fc85.webp)

:::check
**Accept when:** every pixel is the same size and sits on one grid, the face reads at the size the game shows it, the palette has no stray in-between shades, and the edges of the sprite are clean against transparency.
**Reject when:** pixels drift or differ in size, the face turned to mush (raise the grid size), there are lone specks (turn on Remove Noise), or bits of background are left around the outline.
:::

### When the pixel art came from a generator: Pixel Snapper

Image models often make "pixel art" whose pixels differ in size and drift off the grid. **Pixel Snapper** fixes that: it snaps every pixel to one consistent grid and reduces the colors to a strict palette, while keeping details such as dithering and curved lines. It takes PNG or JPG images up to 10 MB. It works on art that already has fairly clear pixels; a blurry image or a photo won't gain much. Use **Pixelate** to turn an ordinary image into pixel art, and **Pixel Snapper** to clean up pixel art that's almost right.

## Step 9: Pick Seedream 5.0 Flash Layerize and your image

To split a picture into parts you can move or replace, pick **Seedream 5.0 Flash Layerize** under **Model** and select your image from the library.

![Seedream 5.0 Flash Layerize picked, with the noodle stall image loaded and Prompt still closed](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/f991b480fdccddda3d2fa435688361b6ab946b539752ed7a2e527ace074035c7.webp)

**Settings** has one option, **Resolution**. The film leaves it on **Auto**, which matches the input image.

## Step 10: List the parts and generate

Open **Prompt** and list the parts you want, one by one. The film uses:

```text
Separate this image into transparent layers: the old cook, the raccoon cub in the yellow raincoat, the noodle stall with its counter and bowls, the hanging lanterns, and the background street.
```

![The Prompt open with the list of layers, ready to generate](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/7601fd2f582212a7e642ef7eb5c938673cc538cde05afe69fd68013bdee0edf4.webp)

Write it as a rule for splitting, not as a description of the scene. "Two people walking a dog" tells the model what's there; "split the two people, the dog and the background" tells it how to divide it. Name each part plainly, and add a detail when two parts could be confused ("the raccoon cub in the yellow raincoat"). Click **Generate**.

## Step 11: Check the layers

Each part comes back on its own transparent layer: the cook, the raccoon, the lanterns, the counter, and the street behind them, rebuilt where they stood.

:::gallery The layers from one Layerize run
![The noodle stall scene before splitting](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/2e77924fc1e261dee6c45bf2c6341b56ee145d1a4088f6871d34a3da0df7d394.webp "Source")
![The old cook alone on transparency](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/e1b2b1ae7878d4dbd598e661e89c27cf663c7d70db6f8a94a0e57b6a3ff86168.webp "The cook")
![The raccoon cub in the yellow raincoat alone on transparency](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/07dd56a757407e55ac89478581535c1ae7643289a86f9fadd3879948c823cc8f.webp "The raccoon")
![The two hanging lanterns alone on transparency](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/9269e5ccb2d4a931277acc4ddaa50af45cd7026e39ea761d9a64b2347a064775.webp "The lanterns")
![The counter with its pot, bowls and jars alone on transparency](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/6c252c2da2268db1b44ba440d138c9cd7db7cd8c1b368594a68a456f3cb399d8.webp "The counter")
![The rainy street, filled in where the stall stood](https://ufgc0c9mhl4ueq76.public.blob.vercel-storage.com/academy/3c9dbbc9367f7bd5860b8b53041fc324df7a960f6fb29a8b8d536f4fbff91edb.webp "The street")
:::

The background is filled in where the parts were, so you can move a layer or drop in a new one without leaving a hole.

:::check
**Accept when:** each part you listed is on its own layer, edges (hair, fur, steam) are clean enough for where it's going, and the background has no ghost of the parts that were lifted out.
**Reject when:** two parts merged into one layer, a part is missing or cut off, or the filled background is smeared. Name the parts more precisely and generate again.
:::

### Other layer tools

The model list also has **Seedream 5.0 Pro Layerize**. **Image to Layers** splits images too, with a **Separation Instruction** (up to 2000 characters) and a **Max Layers** setting: from 1 to 10, default 6, plus the background. It may return fewer layers if it finds nothing else worth separating. Set **Max Layers** to about the number of parts you want, since more layers cost more without improving the main one. **Video to Layers** does the same on video.

## Slice and assemble grids

Two utility tools work with grids of images, for sprite sheets and boards:

| Tool | What it does | Settings |
|---|---|---|
| **Image Slicer** | Cuts one image into equal tiles and saves each as its own file, for example the frames of a sprite sheet | X and Y subdivisions: 4 × 2 gives 8 frames |
| **Grid Maker** | Assembles several images into one aligned grid, for a sprite sheet, a pose sheet or a review board | Columns, rows, padding, background color |

For a sprite sheet a game engine can read, keep the padding at 0 and match the columns and rows to your animation. To cut one back up, use **Image Slicer** with the same numbers. Image Slicer always makes equal tiles, so an image that doesn't divide evenly may give an extra row or column to discard.

## Common problems

| What you see | What to do |
|---|---|
| The SVG has hundreds of tiny shapes | The source had gradients or texture. Use a flatter source, or **Scenario Vectorize** with **Clean** or **Minimal** |
| The vector looks soft in the viewer | The viewer shows a picture of it. Download the SVG and open it in your design tool |
| The pixel art face is unreadable | Raise **Pixel Grid Size** to 128px or 256px |
| Stray single pixels and specks | Turn on **Remove Noise** |
| Too many colors, not retro enough | Choose **Image** and lower **Maximum Colors**, or pick a small palette under **Presets** |
| The sprite has a colored background | Pixelate fills it. Run **Remove Background** from the **...** menu |
| Generated "pixel art" has uneven pixels | Run it through **Pixel Snapper** |
| Two parts came back on one layer | Name each part on its own in the prompt, with a detail that tells them apart |
| A part is missing from the layers | Check its name matches what's in the image; for Image to Layers, raise **Max Layers** |

## What's next

Lettering in images is its own skill: [Text and typography in images](https://learn.scenario.com/images/text-and-typography-in-images.md) shows how to get words right in one generation, or use your own logo. To build a full set of icons, see the [Game icon set](https://learn.scenario.com/playbooks/game-icon-set.md) playbook; for animated sprites, [Sprite sheet animation](https://learn.scenario.com/playbooks/sprite-sheet-animation.md).

Source: https://learn.scenario.com/images/vectors-pixel-art-and-layers