Handbook · v1

Pixel Studio Pro, from blank grid to exported GIF

Pixel Studio Pro is a free, browser-based pixel art and animation editor — no install, no account, no backend. It runs entirely on-device, saves itself as you work, and installs as an offline app on desktop or mobile. This handbook walks through every panel, tool and export path, with short tutorials you can follow along with in a second tab.

Single-page web app Works offline after first load No account required

The interface, at a glance

Everything lives in one window: a fixed header for project and export actions, a scrollable left sidebar for tools and settings, the canvas in the middle, and a timeline along the bottom for frame-by-frame animation.

Pixel Studio Pro's default interface: header with export buttons, left sidebar with tools, checkered transparent canvas, and timeline strip at the bottom — **The default workspace** — a fresh 16×16 canvas, Pen tool active, one empty frame on the timeline.

Header (top)

Project name, Undo/Redo, New Project, Save/Load, and the export cluster — PNG, Export GIF, Sheet, APNG, Frames (zip), Share, and the .ASE import/export menu. All covered in Exporting.

Sidebar (left, scrolls independently)

Stacked, collapsible sections: Tools, selection actions and transforms, Shapes, brush size and Symmetry, Palette, Layers, Canvas settings, and Reference image. Click a section header to collapse it if you need more room.

Canvas (center)

Your drawing surface, checkered where transparent. Scroll to zoom toward the cursor, middle-click drag to pan, double-click to reset both. The coordinate readout and zoom level sit in the thin status bar just below the canvas.

Timeline (bottom)

One thumbnail per frame. Click a thumbnail to jump to it, hit the play button to preview the loop at the project's FPS, and use Add/Duplicate/Import/Tween on the right. Full details in Frames & animation.

Your first sprite

The fastest way to get oriented is to draw something. This takes about two minutes.

▸ Mini tutorial

Confirm the Pen tool is selected in the Tools list (it's the default) — shortcut P.
Open the Palette section and click a swatch, or click the Active Color chip to pick any hex value with the color wheel.
Pick a Brush Size (1px is standard for fine pixel work) and click or drag across the canvas to place pixels.
Made a mistake? Switch to Eraser (E) to remove pixels, or press Ctrl+Z to undo — undo history goes back the full length of your session.
Try Fill (F) on an enclosed outline to flood-fill it in one click, and Picker (K) to sample a color already on the canvas.

A small pixel-art heart drawn with the pen tool on the 16x16 canvas — A heart sketched with the Pen tool, one click per pixel — the coordinate readout (**X 7 Y 9**) tracks the cursor's exact grid cell.

Tip The canvas starts at 16×16 pixels. If you want more room before you start, jump to Canvas & reference art and resize first — resizing later keeps your existing artwork intact, but it's one less thing to redo.

Tools & brushes

All drawing and shape tools live in the sidebar's Tools and Shapes sections, each with a one-key shortcut.

Pen P

Freehand pixels at the current brush size and color.

Eraser E

Clears pixels back to transparent.

Fill F

Flood-fills a contiguous region of matching color.

Picker K

Samples a color from any visible pixel into Active Color.

Select S

Rectangular marquee — drag to lift and move pixels.

Magic Wand W

Selects contiguous same-color pixels, like Fill but non-destructive.

Lasso

Freehand selection outline for irregular shapes.

Line L

Drag to draw a straight, anti-alias-free pixel line.

Rect R

Drag to draw a rectangle outline.

Rect Fill T

Drag to draw a solid filled rectangle.

Ellipse O

Drag to draw a circle or oval outline.

Gradient G

Drag an axis for a smooth or dithered two-color fill across already-opaque pixels.

Brush size & symmetry

Brush size steps through 1px / 2px / 4px / 8px. Symmetry mirrors every stroke across the canvas — Off, X (left/right), Y (top/bottom), or both at once — indispensable for characters, icons, and tileable patterns.

Rect tool selected in the sidebar, highlighted in amber — An active tool is highlighted amber in the sidebar — here, **Rect** is selected and ready to drag on the canvas.

Color & palettes

The Palette section holds your working set of colors, with a dropdown of built-in retro palettes and full support for building your own.

Sidebar showing brush size, symmetry, the Pico-8 palette grid, and the active color chip — Brush size, symmetry, the **Pico-8** palette, and the **Active Color** chip with its hex value — this panel sits just above Layers.

Built-in palettes:

Pico-8DB 16DB 32C64NESRetro GB ZX SpectrumArne 16Endesga 32Synthwave1-Bit (Mac)PastelCustom

The DB 32 palette loaded, showing 32 muted retro swatches — Switching the Palette dropdown to **DB 32** swaps every swatch instantly — your artwork's actual pixel colors are untouched.

Pick Custom to build your own: add the Active Color as a new swatch, edit or remove existing ones, or extract a palette straight out of an image you upload. A separate Recent row remembers colors you've used lately regardless of which palette is loaded.

Whole-image color tools

Three project-wide tools live under the Canvas section:

Adjust Color modal with Hue, Saturation, Brightness and Contrast sliders and a live preview — **Adjust Color** — Hue/Saturation/Brightness/Contrast with a live preview, applied to the active layer (or just your selection).

Outline modal with a color swatch and Include Diagonals checkbox — **Outline** — stamps an outline of the active layer's opaque pixels onto a new layer beneath it, original art untouched.

Replace Color modal with From and To swatches and All Frames / All Layers checkboxes — **Replace Color** — an exact find & replace across the project. Deliberately *not* selection-scoped; check **All Frames** / **All Layers** to widen its reach, e.g. for a project-wide re-color.

Selections & transforms

Three ways to select pixels, and a shared set of actions once something's selected.

Select — drag a rectangle. Drag inside it again to lift and move the pixels underneath.
Magic Wand — click to grab every contiguous pixel matching that color.
Lasso — drag a freehand outline for irregular selections.

A rectangular marching-ants selection outline drawn on the canvas — An active rectangular selection — the dashed "marching ants" border marks the region; drag inside it to move what's selected.

With something selected: Cut / Copy / Paste, Select All / Deselect / Invert, nudge with the arrow keys (hold Shift for 10px jumps), and Flip or Rotate (90° either way, or 180°) — each transform applies to the selection if you have one, or the whole active layer if you don't. Toggle Move All Layers before dragging a selection to shift every layer in the stack together, useful for repositioning a whole multi-layer composition at once.

Layers & groups

Layers stack per-frame, same as in any image editor — but in an animation, every frame carries its own copy of every layer.

Layers panel showing three stacked layers with visibility, opacity slider and blend mode dropdown — Three layers stacked, top-most active. Each row has a visibility toggle, and the active layer exposes **Opacity** and **Blend** mode below the list.

▸ Mini tutorial — organizing a multi-part sprite

Click the + next to Layers to add a new, empty layer above the current one.
Double-click a layer's name to rename it — "Outline", "Base", "Shading" reads better than "Layer 3" once you have five of them.
Drag a layer by its handle to reorder the stack; click the eye icon to hide it without deleting it.
Lower a layer's Opacity for a soft shadow or glow, or change Blend from Normal to see it interact with the layers beneath.
Click the folder icon to gather related layers into a collapsible group — handy once a character has a dozen parts.

Tip A hidden group hides every layer inside it, even ones you've individually marked visible — group visibility and layer visibility both have to be "on" for a layer to actually render.

Frames & animation

The timeline along the bottom is where a static sprite becomes a loop.

Timeline with four frame thumbnails, the fourth one active — Four frames on the timeline — click any thumbnail to edit it, or drag to reorder. The active frame gets an amber border.

▸ Mini tutorial — a simple loop

Draw your first pose on frame 1.
Click Add Frame for a blank frame, or Duplicate to start the next pose from a copy of the last one — usually faster for walk cycles and small movements.
Turn on Onion in the Canvas section: the previous frame ghosts through in one tint, the next frame in another, so you can line up movement precisely.
Set FPS with the slider (1–24) to match the speed you're aiming for.
Hit the play button on the timeline to loop the whole sequence at that FPS.

Timeline in playing state with a pause icon and PLAYING label — Mid-playback — the button becomes a pause control and the status reads **PLAYING**.

Tween & hold

Rather than drawing every in-between frame by hand, use Tween on the timeline:

Canvas & reference art

Canvas-level settings and one-off destructive actions live together under Canvas in the sidebar.

Canvas settings panel with Size, FPS, Onion, Background, Export Scale controls, plus Resize/Adjust/Outline/Replace/Clear buttons and the Reference section — Canvas size, FPS, onion-skin tint colors, background style, export scale, and the destructive actions — **Clear Canvas** is the only one marked in red.

Resizing

Pick a preset from the Size dropdown (8×8, 16×16, 32×32, 64×64, 128×128, 320×180, 640×360) or open Resize Canvas for exact dimensions and control over where existing art anchors as the canvas grows or shrinks.

Resize Canvas modal with Width/Height fields, a 3x3 anchor grid, and Resize canvas / Scale artwork modes — The 3×3 **anchor** grid picks which corner or edge stays put. **Resize canvas** keeps existing pixels at 1:1 and grows/crops around the anchor; **Scale artwork** stretches the art to fit the new size instead.

Frame & layer limits scale with canvas size

Larger canvases cost more memory per frame, so the maximum frame and layer counts shrink as you size up:

Canvas size	Max frames	Max layers
Up to 32×32	100	16
Up to 64×64	60	8
Up to 128×128	24	5
Up to 320×180	12	4
640×360	8	3

Tip Resizing the canvas itself never deletes existing frames or layers, even if it lowers the cap below your current count — the cap only blocks adding new ones past the limit.

Reference image

Click Load Reference Image to drop a photo or drawing behind your active layer as a tracing guide. Toggle its visibility with the eye button while you work, or remove it entirely once you've traced what you need — it never exports with your project.

Exporting

Every export button lives in the header, and every export respects the Export Scale multiplier set under Canvas (1x/4x/8x/10x/20x) — a 16×16 sprite at 10x exports as a crisp 160×160 image.

PNG

The current frame only, as a single transparent PNG.

Export GIF

The full animation, looping, using the project's FPS.

Sheet

A sprite sheet — every frame laid out in a single row of one PNG.

APNG

Full-color animation with real alpha transparency, no 256-color limit like GIF.

Frames

Every frame as its own numbered PNG, bundled into one .zip.

Sends the current frame straight out via the device's native share sheet (mobile).

.ASE in the header opens a small menu for Import .aseprite and Export .aseprite, for moving work between Pixel Studio Pro and Aseprite.

Tip Not sure which animated format to pick: GIF is the most universally compatible but limited to 256 colors per frame; APNG keeps full color and smooth alpha transparency but has spottier support in some older tools — export both if you're not sure where the file is headed.

Saving & projects

Pixel Studio Pro has no server and no account — your project lives in the browser and in files you explicitly save.

Save writes a .pxl file — plain JSON with every frame, layer, palette, and name. Load reads one back in.
Autosave mirrors your current project into the browser's local storage as you work; if you return to a closed tab, it offers to restore that autosave.
Opening a .pxl or .aseprite file that exceeds the current resolution's frame/layer cap truncates to the first N and tells you, rather than refusing to open it.

Tip Autosave is a safety net, not a backup strategy — it lives in this one browser on this one device. Use Save to export a .pxl file whenever you hit a milestone you don't want to lose.

Install as an app

Pixel Studio Pro is an installable Progressive Web App. Most browsers offer an "Install" or "Add to Home Screen" option once you've loaded it — after that first load, it keeps working fully offline, launches in its own window, and behaves like a native app.

Mobile & touch

The whole app is responsive — the sidebar collapses into a compact top toolbar and bottom sheets on narrow screens.

Pixel Studio Pro on a narrow mobile viewport, with a condensed icon toolbar and the same timeline strip — Same project, phone-width viewport — tools become an icon row, panels open as needed.

Touch gestures: drag on the canvas to draw with whatever tool is active, pinch to zoom and pan, and double-tap to reset the view back to fit.

Keyboard shortcuts

The same reference is available in-app any time via the keyboard icon in the header.

Shortcuts and Controls modal listing tool and editing shortcuts with their key bindings — The in-app Shortcuts & Controls panel.

Tools

Pen

P

Eraser

E

Fill

F

Picker

K

Select

S

Magic Wand

W

Line

L

Rectangle

R

Filled rectangle

T

Ellipse

O

Gradient / dither

G

Editing

Undo

Ctrl+Z

Redo

Ctrl+Shift+Z

Cut selection

Ctrl+X

Copy selection

Ctrl+C

Paste

Ctrl+V

Select all

Ctrl+A

Invert selection

Ctrl+Shift+I

Delete selection

Del

Nudge selection

Arrows

Nudge ×10

Shift+Arrows

Confirm move

Enter

Cancel / deselect

Esc

View (desktop)

Zoom in / out

] / [

Zoom toward cursor

Scroll wheel

Pan canvas

Middle-click drag

Reset zoom & pan

Double-click

Touch (mobile)

Draw with current tool

Drag on canvas

Zoom & pan

Pinch

Reset zoom & pan

Double-tap

Tips & troubleshooting

01 Onion skin colors clash with your art? The previous/next-frame tint swatches in Canvas settings are just preview colors — they never touch your actual pixels, so pick whatever's most visible against your palette.

02 Replace Color found 0 matches? It's an exact hex match, not a similar-color match — sample the color you want to replace with the Picker first, or check the layer/frame scope checkboxes if the color only appears elsewhere in the project.

03 Losing work between sessions? Autosave only restores in the same browser profile on the same device — export a .pxl file before switching machines or clearing site data.

04 App stuck offline on an old version? A service worker caches the app aggressively for offline use; a hard refresh (or closing every tab and reopening) picks up the latest release once you're back online.

05 Hit the layer or frame cap? That's the size-based limit in the Canvas & reference art table — either work within it or resize down before adding more.

Pixel Studio Pro is a static, single-file web app — everything above reflects what's built into index.html as of this handbook's writing. No sign-up, no telemetry, no cloud sync: what you draw stays on your device unless you export it.