How to create Sprites using Piskel

In this video I’m going to show you how to create Sprites using the Piskel app.

In this video I’m going to show you how to create Sprites using the Piskel app.

I’m gonna guide you through the creation of the laser cannon. We’ll see how to use the most common tools, how to save your project and export your creations.

PISKEL

Piskel is a free online editor for animated sprites & pixel art.

It is available at https://www.piskelapp.com.

You can use the online or the offline version. Either way you don’t need to create an account to use it.

Press Create Sprite | Piskel Overview | Scratch Tutorial

Press Create Sprite to open a new file and start drawing.

SETUP

RESIZE

Before start drawing make sure the sprite has the correct size. By default, the file will have 32x32 pixels.

Resize the drawing area| Piskel Overview | Scratch Tutorial

Open the Resize tab on the right. Here you can resize the current sprite or set the default size for all new sprites.

The laser cannon and most of the Sprites of our game have the size of 20x20 pixels. So change both the size of the current one and the default size to that value.

Note: don’t forget to press the Resize and the Set default buttons to apply the changes.

COLOR PALETTE

A color palette is the collection of colors that you’ll be using in your drawing. It makes it easier to switch between the colors instead of inputting each color every time.

Manage the Color Palette | Piskel Overview | Scratch Tutorial

By default you start with an empty palette. You can edit the colors by pressing Manage this palette.

Add a new Color to the Color Palette | Piskel Overview | Scratch Tutorial

This opens the Edit Palette dialog. Here you can add new colors to the palette and edit their values.

To choose the color value you can either drag the color picker or input the desired values.

The color palette | Piskel Overview | Scratch Tutorial

Since we’ll be using very basic colors - white, green and red - it’s easier to input the corresponding hex codes:

  1. White: #FFF
  2. Green: #0F0
  3. Red: #F00

DRAWING

The drawing toolbar on the left side of the screen has all the drawing tools.

Draw with the Pen tool | Piskel Overview | Scratch Tutorial

The Pen tool is the default one. It allows you to paint pixel by pixel by left-clicking and dragging on the canvas.

The drawing tools will always use the currently selected color. You can see the selected color below the drawing toolbar.

To select a different color you can use the palette by pressing the colors or the associated numbers.

Note: you can also edit the selected color pressing on it.

Besides the primary selected color, you also have a secondary color. You can paint with this one by right-clicking on the canvas.

By default, the secondary color is transparent. This makes it easier to paint and erase without changing tools.

Note: you also have an eraser tool that does the same.

The main drawing toolbar | Piskel Overview | Scratch Tutorial

Here are some other drawing tools that make it easier to create more complex shapes:

  • Paint bucket: paints an entire area;
  • Stroke: draws a line;
  • Rectangle: draws a rectangle;
  • Circle: draws a circle;
  • Vertical Mirror: mirrors the drawing vertically, horizontally or both.

Now that you have an overview of the most common drawing tools, proceed to creating the laser cannon.

The completed drawing of the laser cannon | Piskel Overview | Scratch Tutorial

TRANSFORM

Center the drawing in the canvas | Piskel Overview | Scratch Tutorial

The Transform toolbar has tools to change the entire drawing:

  • Mirror: Flip the drawing vertically or horizontally;
  • Rotate: Rotate the drawing;
  • Clone: Duplicate the drawing to all frames;
  • Align: Position the drawing in the center of the canvas;
  • Crop: Fit the canvas size to the drawing.

In this case, we only need to use the Align tool to center the drawing on the canvas.

ANIMATION

Animations consist in cycling many images - **Frames ** - to create the illusion of movement.

Example of animation frames | Piskel Overview | Scratch Tutorial

The Laser Cannon has a destroy animation that consists in two frames. When we cycle between these two frames it gives the illusion of the cannon explosion.

Add a new animation frame | Piskel Overview | Scratch Tutorial

We can create Frames in Piskel and preview our animations.

To create a new Frame press the Add new frame on the top left-hand corner.

Animation preview window | Piskel Overview | Scratch Tutorial

On the right side you have the preview window. Here, you can change the amount of frames per second - FPS - to speed up or slow down the preview.

Duplicate the frame | Piskel Overview | Scratch Tutorial

Since we’ll be destroying the Laser Cannon, it’s easier to duplicate the original frame. This way we can start from the original drawing and start destroying it.

Toggle the onion skin option | Piskel Overview | Scratch Tutorial

It also helps to toggle the Onion Skin on. This allows us to see the previous frame on the canvas when we’re drawing the new one.

In this case it doesn’t make much of a difference. But it’s really useful when you’re creating more complex animations.

Add all animation frames | Piskel Overview | Scratch Tutorial

To create the last frame, duplicate the second one and keep erasing a few more pixels.

SAVING

Don’t forget to save the drawing so that you can edit it later if you need it.

Save the project as a piskel file | Piskel Overview | Scratch Tutorial

The save panel is on the right side of the screen. You can change the name of the file and either save it as a *.piskel file or in the browser.

I prefer to always save it to a file. This way I have the file stored in my computer and I’m not dependent on the browser that I used to create it.

Import a piskel file| Piskel Overview | Scratch Tutorial

After saving it, you can edit the drawing by loading the file or the local saves using the Import tab.

EXPORTING

To use the drawing in the game engines you need to export it.

Export the drawing as a spritesheet | Piskel Overview | Scratch Tutorial

The export panel is on the right side of the screen. You can export the drawing in multiple formats: GIF, PNG, Zip and Others.

The most common options you’ll use are the PNG and the Zip file.

Export as spritesheet | Piskel Overview | Scratch Tutorial

The PNG option exports the drawing as a Spritesheet. A Spritesheet is a single image that contains all frames arranged in columns and rows. Something like this:

A spritesheet example | Piskel Overview | Scratch Tutorial

It’s common to use Spritesheets to create the sprites and the animations in game engines.

But, Scratch for example, does not use Spritesheets. So we have to export each frame into a single image.

Export drawing as separated files | Piskel Overview | Scratch Tutorial

To export each frame into separate images select the Zip option. This will export a *.zip file containing all the frames.

All frames as separated files | Piskel Overview | Scratch Tutorial

Now that we have all the images we’ll see how to import and combine them in Scratch.