Pixel Art Animations

Introduction

Being good at art does not mean you have to be great at drawing or painting. If you don’t see yourself as the ‘artistic’ type this also does not mean that you are not creative. This is where technology plays an important role by giving students tools to allow many different kinds of creative expression that is not limited by access to materials.

Pixel art are pictures made from a series of coloured pixels or squares. They can either be multicoloured or the same colour like the old space invader aliens from the 1980s. If you look closely you can see that each of the aliens occupy a grid of 12 x 12 or 8 x 8 pixels.

The first computer games used simple pixel art

They can also be multicoloured and larger like a 32 x 32 or 64 x 64 grid. The grids do not need to be square. The larger the grid and the more colours you use – the more details you can include.

PIxel art is simple, but beautiful in their own way – a bit like poetry. The checkered background represents a transparent background

Creating pixel art is as simple as selecting colours and filling in squares to form simple pictures. It’s this simplicity that also makes them accessible to the youngest of students. Just because they are simple doesn’t mean that they cannot be sophisticated. It takes just as much skill and practice to create great pixel art as it does to create other art forms.

So simple yet so … beautiful

Objective

In this post we will look at how we can use a website to create simple animated pixel art. The example is to show you how easy it is once you learn a few simple concepts. Then you can use your imagination to create something amazing.

Step 1 – Navigate your browser to PixilArt.com

This website is a fantastic, free resource that students can use. There are several others that are similar (like piskelapp.com), but this is a great place to start. There is also an app version of this if you are using an iPad that you can install apps on. Otherwise it should work fine from the browser. I’ll add some tips for iPad users on another post.

It does not require any login so click this link to get started or the picture below: https://www.pixilart.com/

No login required – click ‘Start Drawing’ to start creating!

Step 2 – Click ‘Start Drawing’

We won’t be logging into this site for this exercise. I don’t recommend that students create accounts without any parental approval or guidance.

Step 3 – Accept default settings and click ‘New Drawing’

We will use the default option of 100 x 100 for our first project. Click ‘New Drawing’

The image below shows a blank project. I’ve highlighted the main areas we will be using as well as some important buttons.

Use the drawing tools to create your first pixel drawing
What colour will you start with?

Step 4 – Start drawing

My example is very simple and I didn’t really know what my robot would do in the animation. I just drew a few simple shapes and then thought about what I could do. When you create an animation there are always lots of pictures (called frames in pixel art or costumes in Scratch) that are displayed quickly to make the animation happen.

Step 5 – Create new frames by duplicating

Use the ‘Copy Frame’ button to copy the current frame so you don’t have to redraw everything. It’s much easier to change the drawing using tools like the eraser, select (and move), paint bucket etc. I recommend you adjust the speed that the frames are displayed to 1 or 2 frames per second (500 or 1000ms) using option pictured above.

You can see how I’ve copied the first frame and made small changes and then repeated this process.
Everybody should recognise the paint bucket tool. You see it in so many apps.
I’m sure you can think of something much more interesting to animate.
The select tool can save you a lot of time by helping you re-use parts of the picture you’ve already drawn.
It’s fun to add pre-made pixel art to your own drawings.

Step 6 – Preview

You don’t have to wait until you’ve nearly finished to preview. Of course you need to have at least 2 frames otherwise there’s nothing to really see. The preview will display each frame in order in a loop. The speed is defined by the frame speed setting which I recommend you set to 500ms (half a second) or 1000ms (1 second).

Remember to adjust the frame speed down to 500 or 1000 ms (milliseconds).
I’ve set mine to 500ms which will display 2 frames per second or 1 frame every 500 milliseconds.
It’s not moving… that’s because this screenshot is not a GIF.

Step 7 – Save and export

Once you are happy with your creation or it’s time to finish up we will need to save our work. Because we are not logging into this site we must download the project file so that we can upload it later if we want to continue working on it. We will also export our project as an animated GIF. This is a special type of image file that will play the animation like the space invader animation on this page. It can also be emailed, uploaded into ClassDojo and even Scratch.

The project file is like the blueprint that has all the information in it. The GIF is the animated image.
The pixil file will allow you to continue work on your project later.
Here’s my exported GIF.

Step 8 – Share your work

You can only share the exported GIF as this is an image format that is supported by most programs. You can email it, post it on websites and also upload it onto apps like ClassDojo.

22 Comments

  1. Anonymous

    Hello?

    Reply
    • admin

      Hello!

      Reply
      • 0-0
  2. Verity3e

    Cool
    I love the sound of it

    Reply
  3. Jordan

    Mr Ong I tried to save it but it did not save and I accidentally pressed the sign in button and then I pressed the back button and then I lost MY WORK!!!

    Reply
    • admin

      oh no

      Reply
  4. Elliott wong

    hi everyone

    Reply
    • Anonymous

      cool

      Reply
  5. Levi

    I canโ€™t get in

    Reply
  6. Anonymous

    cool

    Reply
  7. Anonymous

    hi
    cool

    Reply
  8. angus

    nice

    Reply
  9. Anonymous
  10. Sophia

    Can you do on IPad?????
    Me confused ๐Ÿ˜.

    Reply
    • admin

      Yes

      Reply
  11. Evi

    I like doing pixel art on the computer.

    Reply
  12. Isabella

    I can’t save mine

    Reply
  13. Lexin

    Hi guys, Lexin here.

    Reply
  14. Cissy

    Fun….

    Reply

Submit a Comment

Your email address will not be published.