Back to Movie Clips

Piskel Tutorials

From blank canvas to animated sprite — in three short lessons.
The tool behind Sergio’s slime, and every pixel that followed.

What is Piskel — and why does TNT use it?

Piskel is a free, browser-based pixel art editor built for creating animated sprites. No account, no download, no install — open the site, click “Create Sprite,” and you are drawing immediately. It exports sprite sheets as PNG (frames side by side in a single row) and animated GIFs, both ready to drop straight into a p5.js, Java Processing, or Python Processing sketch.

TNT students use Piskel because the skill transfer is nearly instant. The tool is minimal enough to learn in twenty minutes, and the output — a properly formatted sprite sheet — is exactly what the nine-parameter image() function in Processing expects. There are no intermediate steps between “finished drawing” and “running animation.”

Sergio Z used Piskel in 2023 to build the animated slime that now lives in the Slime Sprite Teaching Edition. That project — one student, one free browser tool, and about an hour of drawing — became the centerpiece of TNT’s sprite-sheet animation curriculum.

Also See:  Open Piskel  Piskel Cheat Sheet slime  Sergio’s Slime  Slime Chat Log
About TJ FREE — the creator of these tutorials
TJ FREE

TJ FREE is a game-development educator on YouTube whose channel focuses on short, practical tutorials for beginner-to-intermediate creators. His content covers pixel art tools (Piskel, Aseprite), game engines (Godot, GameMaker), and the art-to-code pipeline that connects hand-drawn sprites to playable games. His Piskel series is notable for being exactly the right length — long enough to cover the technique, short enough to watch twice in a single class period.

All three clips below are from his Piskel series. Visit his channel on YouTube to explore the full collection.

Watching order — how the three clips connect

The three clips form a natural progression from zero to animation:

  1. Getting Started — the Piskel interface, canvas setup, drawing tools, and the first pixel. Watch this before opening Piskel for the first time.
  2. Dither, Lighten, Darken & Transform — the power tools that take a flat color block to something with depth and shading. Dithering in particular is the technique behind the “gradient without gradients” look that makes retro pixel art distinctive.
  3. Simple Pixel Animation — adding frames, using Onion Skin, and exporting a working sprite sheet. This is the clip that connects directly to the TNT Cheat Sheet and to the breathing trick in Sergio’s Slime.

You can watch them independently — each is self-contained — but in order they tell the complete story from blank canvas to animated game-ready asset.

Movie clips are only available in larger viewports.
On some mobile devices, rotating to landscape will allow viewing.

Clip 1 — Piskel: Getting Started Pixel Art Drawing

TJ FREE walks through the Piskel interface from scratch — canvas size, zoom, the pencil tool, the color picker, the eraser, and the paint bucket. Everything you need to place your first intentional pixel and not accidentally fill the entire canvas with the wrong color. Start here.

Clip 2 — Piskel: Using Dither, Lighten, Darken & Transform

Once you can draw, you want your art to look like something. This clip covers the tools that add depth: the Dither brush (alternating pixels to fake a gradient), Lighten and Darken (shading without picking a new color), and the Transform options (flip, rotate, resize content without resizing the canvas). The dithering technique alone is worth the watch — it is how classic 8-bit games created the illusion of smooth color transitions on hardware with only 16 colors.

Clip 3 — Piskel: Simple Pixel Animation

The payoff clip — how to add frames, use the Onion Skin overlay to align frames precisely, set frame duration, preview the loop, and export the finished animation as a horizontal sprite sheet PNG. This is exactly the workflow Sergio Z used to build the two-frame breathing slime described in the TNT Piskel Cheat Sheet. After this clip, the nine-parameter image() call in Sergio’s Slime Teaching Edition will make complete sense.