Author:
Alexandra Houff, Leah Canner
Subject:
Computer Science, Graphic Design
Material Type:
Lesson Plan
Level:
Middle School, High School
Tags:
  • Bcpl-computing
  • Design
  • Games
  • HTML
  • Pixel Art
  • License:
    Creative Commons Attribution
    Language:
    English
    Media Formats:
    Interactive, Text/HTML

    Pixel Art and Sprites with Piskelapp

    Pixel Art and Sprites with Piskelapp

    Overview

    Learn how to create and animate art one pixel at a time with Piskelapp! 

    Supplies & Products

    You will need a computer with a mouse and the Piskelapp website. 

    Piskelapp

    Head to the Piskelapp website.

    If you'd like to save your creation to work on later, create an account before you begin drawing and animating!

    If you'd rather jump right in, click "Create Sprite" to get started.

    Pixel Art

    "Pixel art" is art created by coloring individiual sqaures, or "pixels", on a "bitmap". "Bitmaps" are basic image files comprised of colored pixels. In this activity, pixels will be your medium and bitmaps will be your canvas!

    Use the various paint and brush tools on the left to fill in the bitmap squares and create a picture made entirely of pixels!

    When you're finished, use the "save" and "export" tools on the right to save the image to your Piskelapp account, or to create a finished product in the form of an image file.

    Sprites

    A "sprite" is a series of pixel art images, or "frames", played in succession at a high rate of speed, or "framerate". If drawn correctly, the frames will appear animated and convey motion!

    Start by drawing a simple picture or shape using the tools on the left.

    Once you complete your first image, hover your mouse over frame #1 on the left and click the "duplicate this frame" button on the right corner of the frame.

    Select your duplicated frame and make a small, subtle change to one of the elements of your drawing. The smaller the change, the better. Once you've made a change, use the "duplicate this frame button" and make a copy.

    Continue making subtle changes to the elements of your drawings, duplicating your frames as you go.

    When you feel like you've made enough changes to create an animation, adjust the "FPS" slider on the right to control how quickly your frames are looped. Use the tool above the slider to preview your work.

    Use the "save" and "export" tools on the right to copy your project to your Piskelapp account, or to greate a .GIF of your sprite to share!

    Share your work

    Proud of your pixel art or your sprite? You can save it to a public or private gallery right on the piskelapp site.