PLEASE PLACE YOUR PHONE IN THE VIP LOUNGE!

Start your day with a warm-up

Play around in Piskel for 10 minutes then be ready to talk to the class about something you found interesting.

What are we working on today?

Piskel!

Why is it important?

This is the program we will be using to create the art for our 2D games.

How will you show you understand?

Follow along with me as we go over all the tools then play!

Piskel (https://www.piskelapp.com) is an open-source, web-based pixel art and animated sprite editor. Its primary drawing, editing, and selection tools are located on the left toolbar:

1. Drawing & Painting Tools

• Pen Tool [P]
  • What it does: The primary drawing tool used to place individual pixels or draw continuous freehand lines on the active layer using your selected primary or secondary color.
• Vertical Mirror Pen [V]
  • What it does: Draws symmetrically across a vertical center line (or horizontal / dual-axis symmetry when combined with Ctrl or Shift). Ideal for designing symmetrical characters, faces, or objects.
• Stroke / Line Tool [L]
  • What it does: Click and drag to draw straight lines between two points.
• Rectangle Tool [R]
  • What it does: Click and drag to create rectangular or square outlines.
• Circle Tool [C]
  • What it does: Click and drag to create circular or elliptical outlines.
• Paint Bucket Tool [B]
  • What it does: Performs a standard flood fill, replacing a contiguous region of identical-colored pixels with your selected active color.
• Paint All Pixels of the Same Color [A](also called Global Paint Bucket)
  • What it does: Replaces all occurrences of a target color across the entire active layer, regardless of whether the pixels are connected or separate.

2. Selection & Manipulation Tools

• Rectangle Selection Tool [S]
  • What it does: Selects a rectangular portion of your layer. Once selected, you can move, copy (Ctrl+C), paste (Ctrl+V), or delete (Delete) the selected pixels.
• Shape Selection Tool [Z](Magic Wand)
  • What it does: Selects a contiguous region of pixels that share the same color.
• Lasso Selection Tool [H]
  • What it does: Allows you to draw a freehand shape around any area of pixels to make a custom selection.
• Move Tool [M]
  • What it does: Drags and reposition the contents of the current frame/layer around the canvas. Holding Shift while dragging applies the movement to all frames in the animation.

3. Eraser, Shading, & Color Tools

• Eraser Tool [E]
  • What it does: Erases pixels, restoring transparency to the active layer. Holding Ctrl while using the eraser clears the entire active layer.
• Lighten / Darken Tool [U]
  • What it does: Increases the brightness of pixels as you paint over them. Holding Ctrl reverses the action to darken pixels. Useful for quick highlights and shading.
• Dithering Tool [D]
  • What it does: Paints a alternating 50/50 checkerboard pattern between primary and secondary colors, creating retro pixel-art shading textures.
• Color Picker / Eyedropper Tool [O]
  • What it does: Samples a color directly from any pixel on the canvas and sets it as your primary (left-click) or secondary (right-click) active color. (You can also middle-click at any time while using another tool to sample colors).

4. Canvas & Brush Size Controls

• Pen Size Selector [1, 2, 3, 4]
  • What it does: Located at the top of the left toolbar, this adjusts the thickness/brush size for drawing tools (1px, 2px, 3px, or 4px square strokes).

5. Transform Tools (Right Sidebar)

While not on the left drawing toolbar, Piskel includes quick transform actions in the panel on the right side of the screen:

• Flip Horizontally / Vertically: Flips the active frame or layer content along its axis.
• Rotate 90°: Rotates the content 90 degrees clockwise.
• Center / Align Canvas: Centers the artwork within the current canvas dimensions.
• Clone / Apply to All Frames: Applies transform actions across every frame in the sprite project.