- Author:
- Alexandra Houff, Leah Canner
- Subject:
- Computer Science, Graphic Design
- Material Type:
- Lesson Plan
- Level:
- Middle School, High School
- Tags:
- License:
- Creative Commons Attribution
- Language:
- English
- Media Formats:
- Interactive, Text/HTML
Animated Sprite
Piskelapp
Swirl
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.