Using Piskel to Make Pixel Art

Have you ever wanted to make your own videogame character? Perhaps you’ve always been inspired by the artwork of old school RPG’s? Using Piskel, whether you want to make the new Mario, or your own fantasy creation, you can!

This resource will guide you in using Piskel, a free web app that provides all the tools you need to make some amazing pixel art. You could create new videogame characters or re-imagine old favourites.

We’ve created these simple instructions for you to get to grips with Piskel, but the best way to learn is to have a go yourself!

We’ve made a video guide too. Watch along, and we’ll make some cool stuff together:

Piskel is completely free and awesome, so to get started head to www.piskelapp.com. Next, select Create Sprite, the sprite editor will then open in a new tab. It should look something like this…

The Piskel app webpage will show the example of Megaman above, but when you select sprite it will be blank for you to get started! Now it’s time draw!

Here is a quick glossary of some of things you need to know:

Drawing Tools: This is where you’ll find the drawing and colour tools that you will need.

Frame Panel: You can also animate your creations in Piskel! Here you can see all the frames of your animation, which we will explain later! You can add, duplicate and edit each frame. 

Canvas: This is where you draw your design – point, click and drag the mouse around to start.

Live Preview Box: This will let you see how everything looks so far, including the animations that you add!

Step 1: Drawing your Piskel

Using the tools below, start drawing and see what you can create!

Pen Tool

Picture of the Pen tool, with a pen icon.

This tool is your main way of drawing!

You can choose the size of the pen too.

Move Tool

This tool will allow you to pick up and move any of your creations!

Picture of the move tool, with a Hand icon.

Erase Tool

Picture of the Erase tool, with an eraser icon.

Made a mistake? No problem, use this to get rid of anything you don’t want.

Colour Selection Tool

Click on the square to reveal the colour selection tool, and then choose the colour you’d like.

Picture of the colour select tool, with two changtable

Step 2: Animating your Piskel

So you’ve drawn your character, well done! Now we’re going to do something exciting – make them move!

The animation in Piskel works a like stop motion animation, playing through the frames that you make to create a moving image!

To start animating, you can copy your creation to edit by hovering over the frame you want to copy and selecting the ‘duplicate this frame’ button.

Or select the ‘Add new frame‘ to add a blank frame!

By editing your creation on the next frame, you can make them start to move! Can you edit their eyes to make them blink, or move their legs to make them walk?

Animating Tips!

How might your character move? If you are stuck think about how characters move in videogames you know…

How does it look so far?

You can see how your animation is working by checking the Live Preview Box. Here you can also change the ‘FPS‘ or ‘frames per second‘.

This changes the speed of the animation by changing how many frames it shows per second – the higher the ‘FPS’, the more frames it shows every second and the quicker the animation will be! Move the bar left and right to see how it changes.

By selecting the Onion, it will show you the previous frame as a faded image, so you can see what changes you are making in the new frame!

Step 3: Saving and Exporting

Once you have finished it’s time to save! The way you need to save will depend on how you would like to use your creation! If you have created an account you can select Save online, if you would like to use what you’ve made in GameMaker for example, or make a animated GIF you’ll need to select Export.

Once you’ve selected Export, you should see a few different options. Follow the instructions below depending on how you would like to save!

Save as a Spritesheet!

If you would like to use what you’ve made in game making software (like GameMaker for example) you will need to export this as a ‘Spritesheet’.

Select Export and chose the PNG option. Increase the number of Columns until the Row changes to 1. This is will download your animation as a row of images! Lastly, download the spritesheet file!

Save as a GIF!

If you would like to make a looping GIF you’ll need to save it in a different way.

Select Export and chose the GIF option. Make sure the Loop Repeatedly box is ticked and then select Download as an Animated GIF! You can change the scale to make it bigger if you need to!

So what can you do with your creation?

Start making your own videogame! The wonderful things you can make in Piskel can be used in software like Scratch or Gamemaker! If you want some more guides on how to do that, check out our Learn At Home guides.

You can also just share what you’ve made with your friends and family. Maybe you can encourage them to have a go too.

We’d also love it, if you could share your creations with us! Tweet us over at @nvmuk and we’ll be sure to share your awesome work.