User Guide

A complete walkthrough of Pixelsito — canvas navigation, every tool, layers, animation, colors, and exporting.

Introduction

Pixelsito is a free, browser-based pixel art editor with layers, animation frames, effects, and a full set of drawing tools. This guide walks through everything the editor offers, from your first stroke on the canvas to exporting a finished animation. Nothing here needs to be memorized — the same tools are labeled and organized inside the editor itself, so this page is here whenever a refresher is useful.

Canvas & Navigation

  • The central canvas is where you draw. Zoom with the mouse wheel or the Zoom tool; pan with Space + drag or the Pan tool.
  • Use Resize in the top bar to change canvas dimensions. You can scale content and choose an anchor point.
  • Undo / Redo are in the top bar (Ctrl+Z / Ctrl+Y, or ⌘Z / ⌘Y on Mac). Each stroke or action is one undo step.

Tools

Draw (D)Paint pixels with the primary color. Right-click uses the secondary color. Adjust pixel size in the brush popup.
Eraser (E)Erase pixels to transparent. Size matches the brush size setting.
Fill (F)Flood-fill contiguous areas. Supports tolerance, contiguous mode, and gradient fills.
Eyedropper (I)Pick a color from the canvas into the primary (or secondary) slot.
Dither (Y)Apply a dithering pattern while drawing for shading and texture.
Color Swap (K)Click a color on the canvas, choose a replacement, and swap every matching pixel.
Line (L)Draw a straight pixel line from press to release.
Rectangle (R)Draw a rectangular outline between two corners.
Ellipse (O)Draw an elliptical outline between two corners.
Contour (C)Freehand stroke that follows your pointer path.
Text (T)Place and type text on the canvas. Supports fonts, size, bold/italic, sharp pixel mode, and transform handles.
Select (S)Rectangular selection. Use with Move, Scale, or Rotate to transform the selected area.
Freehand Lasso (A)Draw a freeform selection region.
Contour Lasso (Q)Trace a precise selection path; revisiting a point trims the path.
Move (V)Drag a selection to a new position. Lifts pixels so the original area becomes transparent.
ScaleAfter selecting an area, drag the corner or side handles to resize.
RotateAfter selecting an area, drag any handle to rotate around the selection center.
Zoom (Z)Click or drag vertically to zoom the canvas. Mouse wheel also zooms.
Pan (Space)Drag to pan the canvas view. Middle-mouse also pans.
Mirror H / Mirror VToggle horizontal or vertical symmetry while drawing.
Grid (G)Toggle the pixel grid. Open Grid Settings to change color and opacity.
Tile View (Shift+T)Preview your artwork tiled horizontally, vertically, or both — useful for seamless, repeating patterns.

Layers

  • Layers stack from bottom to top. Click a layer to edit it; Shift+click to multi-select.
  • Buttons: Add, Delete, Duplicate, Group, Effects, Lock, Rasterize, Merge Down.
  • Layer Effects (outline, outer shadow, inner shadow) are non-destructive until you Rasterize.

Frames & Animation

  • The bottom timeline holds animation frames. Add, duplicate, or delete frames as needed.
  • Set FPS and an optional loop range. Play previews the animation directly in the editor.
  • Range Tags let you name and color-code groups of frames — handy for organizing multi-part animations like "Walk" or "Jump."
  • Export the finished animation as a GIF or a spritesheet from the Menu.

Colors & Palette

  • Primary and secondary colors are shown in the toolbar swatches. Click to open the custom color picker (HSV + hex + opacity).
  • Press X (or the swap button) to swap primary and secondary.
  • The palette panel collects colors used in your project; click a swatch to select it, or use + to add a new one manually.
  • Palettes can be saved and loaded as .pixelsitopal files, making it easy to reuse a color set across multiple projects.

File & Export

  • Menu → New Canvas, Open .pixelsito, Save .pixelsito.
  • Import an image, GIF, or spritesheet directly into a project.
  • Export as PNG (current frame or all frames), an animated GIF, or a spritesheet sized to your exact needs.
  • Autosave is on by default and saves to your browser's local storage roughly 30 seconds after a canvas, layer, or frame change. Configure it, or turn it off, from Options → Autosave.

Tips

  • Make a selection first before using Scale or Rotate — then drag the handles only.
  • Right-click draws with the secondary color on desktop.
  • On mobile, use the bottom navigation for Colors, Layers, Frames, and Options; Tools opens a grid of tool icons.
  • Your project autosaves locally, so it's safe to close the tab and come back later — nothing is uploaded to any server.