Analysing Existing Pixel Art

Learning Intentions:
  • Investigate existing pixel art outcomes to identify conventions, design principles, and technical skills.
  • Apply those findings to design and develop our own original pixel art characters.
Success Criteria:
  • I can identify four features of the given pixel art (e.g. style, size, colour, consistency).
  • I can explain how the designer used simplicity, consistency, and clear shapes.
  • I can create my own set of pixel characters that follow similar conventions.
  • I use appropriate canvas size, layers, and clear naming.
Have a look at the image of eight pixel characters on the right.
What do you notice about the art style?
What makes them look like they belong together?

Technical features:
  • Approximately what canvas size do you think each character was made on?
  • How many colours are used overall? Is the palette limited?
  • Are the outlines consistent? How are the eyes and faces drawn?

Design principles:
  • Consistency - What makes all eight characters feel like they are from the same set?
  • Simplicity - What has the designer left out that a realistic drawing would include?
  • Contrast - How do colours and shapes help each character stand out?

Class Discussion:
As a class, gather 4–6 key observations on the board under the headings: Canvas & pixel size, colour, style consistency, design principles used.

Activity: Create your own set of 2-4 original pixel art characters in a similar style.
Requirements:
  • Use a small canvas (recommended 32×32 or 48×48 per character).
  • Keep a limited colour palette.
  • Maintain consistent proportions, eye style, and overall look so the characters feel like a matching set.
  • Use layers (e.g. outline, skin, clothes, hair, details).
  • Name layers and files clearly
  • Save versions of your characters as you go (version 0.1, 0.2, etc.) for each character
  • Get feedback from the teacher/a peer about alterations/improvements that you could make.

Extra for experts: Add a simple idle animation (2-4 frames) to one character.

Exporting as a set of .png files for video games (7 Minutes)

You may want wish to use these pictures in Scratch or another video game.

​For other programming platforms you will use a Sprite Sheet, Gadot and Unity use Sprite Sheets.

For scratch however we can use a Gif or .PNG

PNG

We want to use .png as .png has a transparency layer, Gif would translate to white.

Task: Ensure one of your animated sprites has a transparent layer
Picture
The background of this coin is transparent meaning invisible. You can tell because you can see the checkered background
Picture
Different frames of a spinning coin saved as a series of images
Gif's allow animation which we will use for displaying work, they do not have transparent backgrounds. 
Activity
Find one of the characters that you have made that featured more than one frame (they had some animation). Ensure that they have a transparent background.

Follow the instructions in order to save it as a series of images.


1.) Click "File" --> "Export/Download"
See picture on the Right

2.) Change the size to 10x
3.) Click export all as indicated by the picture below

​
5.) Finally navigate tot he file location right click on the file and extract the images
4.) Name the file correctly and save it to your documents.