Pixel Beads Art

Start blank or trace a reference

Complete Pixel Beads Art canvas guide

Set up a board, choose real MARD colors, trace a reference, check materials, and export PNG or PDF with a complete explanation of every canvas feature.

Automatic local drafts14 complete chaptersDesktop and mobile
Open the bead art canvas

Step 1 of 14

Choose a starting method and restore drafts

Start with an empty board, trace an image, or continue the artwork saved in this browser.

Do this

  1. 1Choose Blank canvas or Trace a reference.
  2. 2When a local draft is found, review its size before resuming or starting over.
  3. 3When importing from the generator, review the summary before replacing current work.

What each control does

Blank canvas

Creates an empty bead board without a reference.

Trace a reference

Adds an image as a separate guide layer without converting it automatically.

Resume draft

Restores the locally saved canvas, colors, reference, and material settings.

Import pattern

Accepts a generator matrix and asks before replacing conflicting work.

1 Start blank · 2 trace a reference · 3 decide whether to continue a local draft.

Expected result

A starting method is selected without accidentally overwriting existing artwork.

Step 2 of 14

Set the canvas and board composition

Build the canvas from real 52×52 standard boards or use dimensions detected from pixel-grid artwork.

Do this

  1. 1Review the final canvas width and height.
  2. 2Set the number of boards across and down.
  3. 3Verify the total board count, cell dimensions, and seam layout.

What each control does

Standard board

Each board contributes 52×52 cells.

Board columns and rows

Controls horizontal and vertical board composition.

Board seams

Records physical boundaries for the canvas and PDF.

Detected dimensions

Uses original rows and columns when pixel-grid detection succeeds.

1 Review final size · 2 set board columns and rows · 3 verify board count and seams.

Expected result

Canvas dimensions match the physical board plan or source pixel grid.

Step 3 of 14

Set the MARD set, inventory, and working palette

Limit available codes and enter owned quantities so shortages can be calculated while drawing.

Do this

  1. 1Choose the MARD set you own.
  2. 2Enter a default quantity per color and choose whether to restrict colors to that set.
  3. 3Optionally prepare a working palette before opening the canvas.

What each control does

MARD set

Selects a retail set or all available MARD colors.

Set restriction

Allows only codes actually included in the selected set.

Default inventory

Sets one owned quantity for every color.

Working palette

Stores project colors for fast selection and material management.

1 Choose a MARD set · 2 set inventory and restriction · 3 prepare working colors.

Expected result

The project uses obtainable color codes and can report shortages.

Step 4 of 14

Upload, crop, and classify a reference

Photos and already-gridded pixel artwork use different reference preparation and alignment behavior.

Do this

  1. 1Upload a JPG, PNG, or WebP no larger than 10 MB.
  2. 2Choose Photo or Pixel pattern.
  3. 3Crop the subject, adjust its size, and apply the reference.

What each control does

Reference upload

Reads a local image as a guide layer without publishing it.

Crop

Keeps the useful subject and controls its scale.

Photo

Fits continuous images without a regular source grid.

Pixel pattern

Starts detection of rows, columns, cell size, and offset.

1 Upload a reference · 2 choose Photo or Pixel pattern · 3 crop and apply it.

Expected result

The setup shows a correctly cropped and classified reference image.

Step 5 of 14

Use automatic grid calibration and color advice

Align a pixel pattern automatically and find close colors from the active MARD palette.

Do this

  1. 1Review the detected rows, columns, and alignment.
  2. 2Review color advice and ignore the background when useful.
  3. 3Add selected suggestions and alternatives to the working palette.

What each control does

Automatic calibration

Detects cell size, dimensions, and grid offset.

Color advice

Samples the reference and suggests real bead codes.

Ignore background

Reduces the effect of broad background regions.

Reanalyze

Refreshes stale results after board or palette changes.

1 Review detected dimensions · 2 adjust background analysis · 3 apply suggested colors.

Expected result

The source grid is aligned and a useful MARD working palette is ready.

Step 6 of 14

Understand the editor and local saving

Desktop uses floating panels; mobile uses bottom tools and a side sheet. Artwork is saved locally automatically.

Do this

  1. 1Locate undo, size, move, zoom, save status, and export in the top bar.
  2. 2Open and move the desktop panels from the left rail.
  3. 3On mobile, use the bottom tools, panel sheet, export, and quick colors.

What each control does

Automatic save

Writes the project to browser IndexedDB after edits settle.

Save status

Reports saving, saved, or retry save.

Desktop panels

Opens tools, symmetry, materials, layers, reference, and grid.

Mobile navigation

Provides brush, eraser, eyedropper, move, panels, and export.

1 Open task panels · 2 edit on the center canvas · 3 check local save and export.

Expected result

Every editing area is identifiable and the draft reports that it is saved locally.

Step 7 of 14

Draw, erase, and navigate the canvas

Drawing tools change the bead matrix; move and zoom only change how it is viewed.

Do this

  1. 1Choose Brush, Eraser, or Eyedropper.
  2. 2Choose Single cell or Rectangle, then click or drag on the canvas.
  3. 3Use move mode, zoom, undo, and redo to navigate and correct work.

What each control does

Brush

Adds one bead or a continuous stroke.

Eraser

Clears cells, strokes, or rectangles.

Eyedropper

Selects an existing code without changing the cell.

Move and zoom

Navigates a large canvas without drawing.

Single and rectangle

Controls freehand or block editing.

Undo and redo

Restores committed drawing and setting changes.

Tracing reference01
Gingerbread reference image used for the bead tracing demonstration
Artwork with reference hidden02
A manually drawn bead sample with the reference image hidden
The reference only guides placement. Hide it after drawing to inspect the actual bead cells, codes, and outline.
1 Choose an editing tool · 2 choose a fill mode · 3 draw or switch to move mode.

Expected result

A reversible bead stroke is complete and the large canvas can be navigated safely.

Step 8 of 14

Choose codes, working colors, and source samples

Quick colors handle frequent switches, the full palette supports search, and source sampling helps match a reference.

Do this

  1. 1Choose common codes from the working palette or mobile quick colors.
  2. 2Open the full palette and filter by code, name, series, or color family.
  3. 3Sample the reference and apply one of the nearest suggested codes.

What each control does

Quick colors

Shows up to eight recent, used, and working-palette colors.

Full palette

Search every code allowed by the selected set. Select an active color again to remove it from the project palette without deleting placed beads.

Color grouping

Browses by code series or color family.

Pick from source

Suggests three nearby colors without editing automatically.

1 Search by code or color · 2 filter by series or color family · 3 apply the project palette.

Expected result

The brush uses the intended MARD code and common colors are ready for reuse.

Step 9 of 14

Move, scale, and calibrate the reference

The reference is independent from the artwork and can be positioned, scaled, hidden, locked, or calibrated.

Do this

  1. 1Enter Move reference, drag it into place, then finish positioning.
  2. 2Adjust scale, visibility, and opacity.
  3. 3For a misaligned pixel grid, edit rows, columns, cell size, and offsets manually.

What each control does

Move reference

Moves only the guide layer, not artwork or canvas view.

Scale and lock

Resizes the guide and exits positioning to prevent accidental moves.

Manual calibration

Adjusts dimensions, cell size, and X/Y grid offset.

Replace or delete

Changes the guide while preserving artwork, with confirmation before deletion.

1 Position the reference · 2 adjust scale and display · 3 open manual calibration if needed.

Expected result

The reference aligns with the bead grid and remains fixed during drawing.

Step 10 of 14

Resize the canvas, boards, and grid

Change dimensions while choosing how existing artwork is anchored, then configure numbers and guide lines.

Do this

  1. 1Choose Free grid or Standard boards.
  2. 2Set the new size and one of nine artwork anchors.
  3. 3Review clipping and reference refit, then configure numbers and guide lines.

What each control does

Free grid

Accepts custom width and height within the supported range.

Standard boards

Resizes in 52×52 units and keeps board seams.

Anchor and clipping

Places old artwork and warns before beads are removed.

Numbers and lines

Controls coordinates, intervals, start values, and colors.

1 Choose a size mode · 2 set size and anchor · 3 review clipping before applying.

Expected result

The canvas matches the physical board plan without unexpected clipping.

Step 11 of 14

Use symmetry and layers to inspect artwork

Symmetry mirrors future edits, while layers change the editor view without deleting data.

Do this

  1. 1Enable vertical or horizontal symmetry and center or place the axis.
  2. 2Test the mirror with brush, eraser, or rectangle edits.
  3. 3Control drawing, reference, and board visibility and opacity separately.

What each control does

Vertical and horizontal symmetry

Mirrors later edits around the selected direction.

Axis position

Centers automatically or can be dragged on the canvas.

Drawing and reference layers

Toggles and fades artwork and the guide independently.

Board layer

Hides the grid board to inspect color and silhouette.

1 Set symmetry and axis · 2 verify mirrored edits · 3 adjust the three layers.

Expected result

Mirrored edits follow the chosen axis and layer combinations reveal the structure clearly.

Step 12 of 14

Check used colors, inventory, and shortages

The Materials panel calculates how many beads are needed, owned, and missing for every used code.

Do this

  1. 1Review actual codes and quantities under Used.
  2. 2Override the owned quantity for individual colors when needed.
  3. 3Switch to Shortage to focus on colors that need replenishment.

What each control does

Used

Shows codes actually present and their required count.

Owned quantity

Uses the default inventory or a per-color override.

Shortage

Calculates and highlights demand above inventory.

Shortage warning

Reports how many colors are short on the canvas and status bar.

1 Review used codes · 2 update owned quantities · 3 filter the shortage list.

Expected result

A per-code material list and replenishment list are ready.

Step 13 of 14

Export a PNG or PDF pattern

Export uses the bead matrix, not the reference. PDF also includes codes, materials, and board-seam information.

Do this

  1. 1Hide the reference and inspect the final artwork.
  2. 2Choose PNG for an image or PDF for a printable chart.
  3. 3Wait for generation and download to finish before trying again.

What each control does

PNG

Creates a gridded image for viewing and sharing.

PDF

Creates a printable chart with size, codes, and materials.

Seams and statistics

Includes standard-board boundaries and actual usage when available.

Private download

Saves to the device without publishing to the gallery.

1 Open Export · 2 choose PNG · 3 or choose a printable PDF.

Expected result

The browser downloads a PNG or PDF containing the current artwork and material data.

Step 14 of 14

Fix draft, reference, and export problems

Trace issues through file validation, calibration, clipping, inventory, and local save status.

Do this

  1. 1Read the current warning before confirming replace, clipping, or exit.
  2. 2Return to the earliest failed step and reclassify, recalibrate, adjust inventory, or retry save.
  3. 3If export fails, keep the draft open, allow downloads, and retry another format.

What each control does

Upload failure

Use JPG, PNG, or WebP no larger than 10 MB.

Reference misalignment

Check the image type, then use automatic or manual calibration.

Save or clipping warning

Retry local save and review clipped beads and the anchor.

Export failure

Allow downloads, wait for the current task, then retry the other format.

1 Read the warning · 2 adjust or retry · 3 continue only after the impact is clear.

Expected result

The failed stage can be recovered without replacing artwork or losing the draft.

Start placing beads

Set up your board and materials, then begin drawing

The canvas stores the artwork, reference, inventory, and view settings in this browser. Finish a small section and verify the physical color codes before expanding a large project.

Open the bead art canvas

Still need help?

Tell us what you’re trying to do and at which step the problem occurs.

Email ushelp@pixel-beads.comContact Us