The complete step-by-step guide to mastering all tools, layers, and animation features in our browser-based editor.
The main toolbar on the left side contains everything you need to shape your pixel art. Hover over any tool to see its shortcut.
The standard drawing tool. Use the [ and ] keys to easily decrease or increase the brush size.
Removes pixels from the current layer, making them completely transparent.
Fills contiguous areas of the same color with your currently selected color.
A powerful tool that replaces a specific color across the entire active layer with a single click.
Creates a scattered texture effect. Great for shading, rust, or adding noise to textures.
Pick any color from the canvas. Pro tip: You can also right-click anywhere on the canvas to instantly pick a color without switching tools!
At the top bar, you can enable Pixel Perfect mode to prevent L-shaped artifacts when drawing fast lines, resulting in cleaner, retro-style outlines. You can also enable Horizontal & Vertical Symmetry on the left toolbar to draw mirrored characters perfectly.
Moving and scaling your art is fully supported through our floating selection system.
Step 1: Make a selection. Use the Rectangular Select M, the Lasso Select L for freehand areas, or the Magic Wand W to select shapes of the exact same color.
Step 2: Transform. Once selected, press the Transform Tool Shift+T. A bounding box will appear around your art.
While the bounding box is active, a live W × H label appears above the selection showing the exact pixel dimensions in grid units. This makes it easy to match sprites to specific tile sizes (e.g., 16×16 or 32×32) without guessing.
When you paste an image (from clipboard with Ctrl+V or by importing a file), it now appears centered on the canvas instead of being dropped at the top-left corner. The image is automatically scaled down to fit the canvas if it is larger, and the Transform tool is activated immediately so you can reposition it before committing.
The editor now keeps a hidden copy of the original imported image at full resolution. This means you can freely shrink and then enlarge the selection again without accumulating quality loss — the result is always sampled from the original, not from a previously compressed version.
To confirm the transformation, simply select the Pencil tool or press Enter.
The right panel handles your Layer stack. Keeping lineart, colors, and shading on separate layers makes editing much easier.
You can adjust the Opacity of any layer using the slider. To reorder layers, simply grab the dotted handle icon and drag the layer up or down.
Next to the Opacity slider, you will find a padlock icon. Clicking this enables Alpha Lock. When active, you can only paint on pixels that already exist on that layer. It protects the transparent background, allowing you to quickly shade or recolor a character without painting outside the lines!
PixelPad Pro is built for frame-by-frame animation, making it ideal for Game Developers.
At the bottom of the screen is the Timeline. Click the + icon to add a new blank frame, or the Copy icon to duplicate the current frame. Enable Onion Skin on the top bar to see a faint ghost of the previous frame, helping you animate smooth movements.
By default, animations play based on the Global FPS value. However, you can now set individual timings for specific frames. Select a frame, and in the bottom panel, type a number in the Timer (ms) box. For example, typing "1000" will make the animation pause on that exact frame for 1 second before continuing. This is perfect for dramatic pauses or attack impacts in games.
All processing is done directly in your browser. No files are uploaded to any server, guaranteeing absolute privacy for your projects.
PixelPad Pro now automatically saves your current session to your browser's local storage every 30 seconds. If you accidentally close the tab or the browser crashes, the next time you open the editor you will be prompted: "A previous session was found. Do you want to restore it?" — keeping your work safe without any manual action needed.
Important: Auto-save is a safety net, not a replacement for saving your project as a .pxl file. Always save your final work using the Save button for permanent storage.
PixelPad Pro now works on tablets and touchscreen devices, including iPads with Apple Pencil.
Tap and drag with one finger to draw on the canvas using your currently active tool, just like a mouse click.
Use two fingers to pinch in or out on the canvas to zoom in and out. Great for working on fine details and then zooming out to check the result.
Switch to the Pan tool H and drag with one finger to move around the canvas when zoomed in.
Any stylus that emulates a touch event works naturally with the editor. Pressure sensitivity is not yet supported, but tap-to-draw works perfectly.
Speed up your workflow with these shortcuts. Most tools can be activated without lifting your hand from the keyboard.
B Pencil E Eraser F Fill I Eyedropper U Shapes H Pan G Grid
M Rect Select L Lasso W Magic Wand V Move Shift+T Transform Enter Commit
Ctrl+Z Undo Ctrl+Y Redo Ctrl+C Copy Ctrl+V Paste
[ Decrease ] Increase
Space + drag to pan Scroll to zoom Arrow keys to nudge selection
Shift+scale = lock aspect ratio Shift+move = snap to 8px grid Shift+rotate = 45° snaps