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.

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.

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.

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/

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’

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

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.

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).

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.

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.