Piskel Cheat Sheet
Quick Start — From Zero to Your First Sprite
No account required. The editor opens immediately in your browser with a default 32×32 canvas. The drawing area is the large checkered square in the center (the checks show transparent areas — they are not actually part of your sprite).
Click the Resize icon in the right panel (it looks like arrows pointing outward) to set width and height. Classic pixel art sprite sizes are 8×8, 16×16, or 32×32. For a slime like Sergio’s, 32×32 gives enough room for detail. Important: resize before drawing — Piskel’s resize does not scale existing artwork cleanly.
Use the + and − zoom buttons at the top-left of the canvas, or hold Ctrl and scroll with the mouse wheel. A 32×32 sprite at 1:1 size is tiny on screen — zoom to 8× or 16× so each pixel is clearly visible and easy to click.
The large color square at the top-right is the color picker. Click anywhere inside it to choose a hue and saturation, then use the vertical strip on the right of the color square to set brightness. The two overlapping squares below it show your current primary (front) and secondary (back) colors. Click the primary square to change it.
Click or click-and-drag on the canvas to place pixels in the primary color. Each pixel you click is one square on the grid. Use the Eraser tool (E) to remove pixels, or right-click while using the Pencil to erase. The Paint Bucket (B) fills all connected pixels of the same color at once — great for quickly coloring a large area.
In the Frames panel at the bottom-right of the screen, click the + (Add frame) button. A new blank frame appears. Click the first frame, then click the Duplicate icon (two overlapping pages) to copy it exactly. Modify the duplicate slightly — make the slime a pixel taller, or shift the outline one pixel — to create the subtle shape change that reads as a breath. The Preview window at the top-right cycles through frames automatically.
Click Export in the top menu bar. Choose Spritesheet (PNG), set the layout to Horizontal (frames side-by-side in a single row), and click Download. The downloaded PNG is your sprite sheet — ready to be loaded with loadImage() and drawn with the 9-parameter image() call in any Processing language. See the Export Guide below for full details.
Key Interface Areas
Where you draw. The grey-and-white checks are the transparency indicator — they mean no color has been placed there, not that the background is grey. Toggle the pixel grid on and off with the grid icon at the top of the left tool bar; the grid is essential for placing individual pixels precisely.
Contains Pencil, Eraser, Paint Bucket, Eyedropper, Rectangle, Circle, Move, and Stroke tools. The currently active tool is highlighted. All tools have keyboard shortcuts (shown in the Drawing Tools section below). Tool size (brush width) is set in a slider that appears below the tool palette when a drawing tool is active.
The large gradient square selects hue and saturation by click position. The vertical strip to its right sets brightness. Below the square are two stacked color swatches (primary in front, secondary behind). Click either swatch to change it. The Saved Colors strip beneath stores up to a dozen custom colors — click any slot to save the current primary color there for quick recall.
Loops through all your frames at the current FPS (frames per second) setting. Use the FPS spinner next to it to control animation speed. This is the only place where you see the animation as it will actually look at real pixel size. If the preview looks blurry, that is the browser — the actual exported PNG is always crisp.
Shows thumbnails of every frame. Click a thumbnail to edit that frame. Use + to add a blank frame, the duplicate icon to copy the current frame, and the trash icon to delete it. You can drag frames left and right to reorder them. The number in the corner of each frame is its duration in milliseconds (only used for GIF export; p5.js controls speed in your sketch code).
File saves to your browser’s local storage or lets you download/upload a .piskel project file. Export opens the download dialog for PNG, GIF, or ZIP. The Resize icon (in the right column, not the top bar) changes canvas dimensions. Changes are applied with or without content scaling — choose carefully.
What Each Tool Does
The default tool. Click a pixel to color it. Click-and-drag to draw a continuous line. Right-click to erase. Set brush size 1 for pixel-perfect art; larger sizes place a square of pixels at once. Start here for all fine detail work.
Removes pixels back to transparency. Works exactly like the Pencil but clears instead of colors. Right-clicking with the Pencil active also erases, so you rarely need to switch tools if you are already drawing.
Flood-fills all connected pixels that share the same color as the pixel you click. Essential for quickly coloring the interior of an outline. Watch out: Piskel considers transparency as a color, so clicking an empty area inside an outline fills all the empty pixels inside that outline — exactly what you want for a sprite body.
Picks a color from any pixel on the canvas and sets it as the primary color. Invaluable when you need to exactly match a color you have already placed. In most tools, you can hold Alt to temporarily activate the eyedropper without switching tools.
Draw rectangles and circles (actually ellipses) by clicking and dragging. These use the primary color for the outline and the secondary color for the fill. Hold Shift while dragging to constrain a rectangle to a perfect square or an ellipse to a perfect circle. Great for adding a round body shape quickly before refining by hand.
Moves the entire artwork within the canvas. Useful if you realize your sprite is off-center. This moves all content on the current frame only — if you want all frames shifted identically, you must use it on each frame separately.
The Stroke tool draws straight lines between two click points. The Symmetry toggle (a mirror icon in the toolbar) enables horizontal or vertical mirroring so every stroke on the left is reflected on the right simultaneously — perfect for drawing a symmetrical slime body or eye pair in half the time.
Build Sergio’s Slime — From Scratch
This walkthrough recreates a simplified version of the slime sprite Sergio Z built in 2023. Two frames — one slightly squished, one slightly rounder — produce the breathing animation when cycled in a Processing sketch. Open Piskel in a second tab and follow along. The full breakdown of how the frames create the breathing illusion is documented in the Slime Development Chatlog.
Set up these four colors before you start drawing. Save each to a Saved Colors slot so you can switch without re-picking.
#1a3d1a — very dark forest green
#5CB85C — medium grass green
#81C784 — lighter, upper-body sheen
#1a1a1a — near-black pupils
Frame 1 — The Squished Shape
On piskelapp.com, click Create Sprite. In the resize panel set width = 32, height = 32. Leave the background transparent (the default checkered pattern). This matches the dimensions used by Sergio’s actual sprite. Zoom to 10× or 12× so each pixel fills most of a fingertip on screen.
Select the Dark Outline color (#1a3d1a) and the Pencil tool (size 1). Draw a rounded dome shape that is about 24 pixels wide and 18 pixels tall, centered horizontally in the canvas. Think: wider than tall — a squished blob, not a round ball. Leave the bottom open (just two short vertical edges on the sides) so the slime looks like it is sitting on the ground. The outline should be 1 pixel thick everywhere.
Switch to the Main Body color (#5CB85C) and the Paint Bucket (B). Click anywhere inside the outline. The interior fills with the medium green in one click, leaving the dark outline ring intact. If the fill leaks outside the outline, there is a gap in the border — undo (Ctrl + Z), close the gap with the Pencil, and try again.
Switch to the Highlight color (#81C784) and the Pencil. Draw a thin crescent-shaped lighter zone inside the upper-left area of the body — 3 to 5 pixels wide. This is the “sheen” that makes the slime look like it is made of jelly rather than a flat green square. The highlight should not touch the dark outline.
Switch to the Eyes color (#1a1a1a) and the Pencil. In the lower-center of the dome, place two 2×2 pixel squares separated by about 6 pixels. These are the pupils. Optionally, draw a single white pixel (#ffffff) in the upper-right corner of each eye for a tiny glint. Check the Preview window — if the eyes look right at this scale, they will look right in the game.
Frame 2 — The Rounder Shape (the “breath”)
In the Frames panel, click the Frame 1 thumbnail to make sure it is selected. Then click the Duplicate icon (two overlapping pages). Frame 2 appears as an exact copy. Click Frame 2’s thumbnail to start editing it.
Using the Pencil with the Dark Outline color and the Eraser, carefully extend the top of the dome 1 or 2 pixels upward, and pull the left and right sides inward by 1 pixel each. The result should feel slightly fuller and rounder than Frame 1 — like the slime inhaled. Use the Move tool if the slime has shifted position between frames (they should sit at the same vertical baseline). The eyes may need to shift up 1 pixel to stay inside the new outline.
Use the Paint Bucket to re-fill the interior (because erasing and redrawing the outline may have left gaps or wrong colors). Re-draw the highlight crescent slightly adjusted to match the new rounder shape. The two frames do not need to be drastically different — subtle is better. Watch the Preview window play both frames on a loop; if it reads as a breathing pulse, you are done.
Toggle the grid off (G) and look at the whole sprite. Check: Does the outline fully close (no leaks)? Are the eyes at the same position in both frames? Does the Preview show a smooth, subtle breathing motion? Is the slime centered horizontally in the canvas? If yes to all, you are ready to export.
Getting Your Sprite into a Sketch
Go to Export › Spritesheet. Set Columns to the number of frames (2 for a two-frame slime). Set Rows to 1. The preview on the right shows both frames side-by-side in a single wide PNG strip. Click Download. The file name defaults to “piskel_spritesheet” — rename it to something descriptive like slimeSprite.png.
Exports only the currently selected frame as a standalone PNG. Useful for a back-facing sprite or a one-frame prop image (like a grass tile). This is what Sergio used for the slimeBack.png back-facing sprite — he created it separately as a single frame with the body slightly reshaped and the eyes replaced by a back-of-head view.
Creates an animated GIF of all frames cycling at the specified FPS. Useful for previewing your animation in a web page or sharing in a chat. The frame duration in milliseconds per frame (set in the Frames panel) controls GIF speed. For game use, always prefer the PNG spritesheet — GIF lossy encoding can introduce color artifacts in pixel art.
Go to File › Export as .piskel to download the Piskel project file. Unlike the browser auto-save, this file is permanent and portable — you can reopen it in Piskel later to keep editing. Keep this file alongside your spritesheet PNG. Without it you cannot go back and edit individual pixels later.
Using the Spritesheet in p5.js
Place the exported PNG in an images/ folder next to your sketch. Load it with loadImage() (or await loadImage() in p5.js 2.x). Then use the nine-parameter form of image() to crop the correct frame — this is the same technique used in Sergio’s slime sketch:
idle = loadImage("images/slimeSprite.png");
// In draw(): pick frame 0 or 1 based on the animation counter
var frameIndex = floor(animFrame); // 0 or 1
var srcX = idle.height * frameIndex; // x offset into the strip
// 9-param image(): crop one square frame from the strip
image(idle,
x, y, // destination: center on canvas
displayW, displayH, // destination: draw size
srcX, 0, // source: crop offset (picks frame)
idle.height, idle.height); // source: one square frame
The Sergio’s Slime Teaching Edition page shows this technique with every parameter documented and commented. The Development Chatlog includes a step-by-step diagram of the breathing trick in the Player.js file header.
What Trips People Up
- Enable the pixel grid before you start drawing — press G or click the grid icon. Without it, adjacent pixels blur together at high zoom.
- Plan frame dimensions before you draw anything. Resizing after does not scale artwork cleanly in Piskel. For a spritesheet, decide on frame size first (16×16, 32×32, etc.) and stick to it.
- Use Symmetry mode (mirror icon in the toolbar) to draw both halves of your sprite simultaneously — saves half the effort on symmetrical characters.
- The Onion Skin toggle (an onion icon in the Frames area) shows the previous frame as a ghost overlay while editing, making it easy to line up Frame 2 with Frame 1.
- Keep a copy of the
.piskelfile. Browser local storage can be cleared by privacy settings, extensions, or a browser update. The.piskelfile is the only permanent save.
Piskel saves to browser local storage as you work — but this data can be wiped by clearing browser data, using private/incognito mode, or a browser update. Always export a .piskel file before closing the tab.
The 9-parameter image() call in p5.js calculates the source crop by multiplying idle.height × frameIndex on the X axis. This assumes frames are arranged left-to-right in a single row. If you export with multiple rows, the math breaks and the wrong frame shows. Always set Columns = number of frames, Rows = 1.
On a white page background, transparent and white pixels are indistinguishable — but they behave very differently. Transparent pixels disappear over any background; white pixels show as white. Always check with the checkered background visible (Piskel’s default shows this on the canvas). Export with transparency preserved by choosing PNG, not JPG.
Perfect For … / Not the Right Tool When …
- Creating sprite sheets for Processing or p5.js game characters
- Making simple 2-frame or 4-frame animations (walk cycles, breathing)
- You want to work entirely in the browser with no install
- Teaching pixel art fundamentals to beginners — the interface is minimal and approachable
- Quickly iterating on small sprites (8×8 to 64×64 pixels)
- Exporting both an animated GIF preview and a PNG spritesheet from the same project
- You need more than 2–3 layers (use Aseprite or Libresprite)
- Your sprite is larger than about 128×128 pixels (Piskel slows down)
- You need advanced palette management (Aseprite has indexed-color mode)
- You need tile map editing or background scene design — Piskel is sprite-only
- You require professional export options (multiple scale factors, APNG, etc.)