How I animate pixels in Piskelapp

Hey guys, ToffeeRaven here.

    Today I'm gonna talk about Piskelapp. For those of you that can use Piskelapp, it's a great online tool. As it says on the site, "Piskel is a free online editor for animated sprites & pixel art."

    And that's exactly what you can do with it. If you have sprites you want to make/edit or pixel art gifs you want to bring to life, this is the site for you.

Piskelapp can be found here at: https://www.piskelapp.com/

To use Piskelapp, go to the site and log in with your Google Account.

Once you're in, you'll see a page similar to this:

To make a "sprite" (whether it's a sprite or pixel art) click "Create Sprite" in the upper right corner. Once you've done that it should open a new tab with a screen that looks like this:

If you click on the sidebar to the right,

and explore, you'll find that you can resize your canvas. The default is 32 x 32, but you can resize the canvas however you want. Keep in mind that large canvases may slow the program down. This is also recommended to be done before you draw anything.

While you're here, mouse over all the icons and buttons and see what they do. There are some really neat ones like:

and

.

The keyboard shortcuts (which can be found in the tiny keyboard icon at the bottom left of the screen) are also very useful:

After you're done looking through the program and seeing what it can do, it's time to start drawing. The gif  I'm going to demonstrate making is this one:

This was made by uploading an image I drew separately then manipulating it in Piskel. To upload an image, click "Import" in the sidebar (the folder icon). From there, you can upload any file you have that is supported by the program. When importing an image, keep in mind that it will erase your existing progress to make a new canvas with solely the image on the canvas. 

After you upload an image, you can manipulate it. To make this gif I selected the "jaws" and moved them apart from each other:

Using rectangular selection, I selected one half. While it was selected I pressed shift and moved it a bit, after which I clicked away from the canvas, which cancels the selection.

Select.

Hold shift and click and hold the selection

Move the piece up (very slightly but I did move it)

Click away and there you have it!

And repeat for the other "jaw."

To make another frame (without redrawing) click the "copy" button in the lower right corner of the frame.

For this animation I made the changes to the animation exponential with every frame (and added some duplicate frames for timing) then added a repeat frame at the end so it loops smoothly. The animation was meant to be a jerking motion, which is why I made such a big change in the 6th frame. You can see the sprite sheet below:

Piskelapp is a very useful tool, and I've made many pixel animations with it. Hoping you guys learn something from this post!

See you guys in the next post, and if you like this blog, don't hesitate to subscribe! Bye for now!

-ToffeeRaven