How to Create a Pixel Art .gif Using Piskel

Piskel is an online, in-broswer application for easily creating static pixel art images and animated pixel art gifs. The program is easy to use and offers many features, such as the ability to live preview your animations and the ability to save and export your images and gifs to easily distribute and share.

Step 1: The Program Basics

Piskel has an easy to use interface with a variety of tools that can be used in the creation of your pixel art.

By using the variety of tools located in the tool bar on the left-hand side of the screen, you can draw and color the pixel art you choose to create.

The upper right-hand corner contains the live preview box, where you can view the image and can preview the animation, and select how many frames per second you want your animation to cycle. The more frames per second, the faster your frames will cycle, so take that into account and preview your animation before you export.

The far right-hand side has the tools used for exporting your finished image or gif.

Step 2: Drawing Your Image

This step is, obviously fundamental in creating your animation; Drawing the first image. It is, of course, up to you how and what you decide to draw as your image (in this example, a rose), but it is important to note the differences between pixel art and more traditional drawing. Pixel art is comprised entirely of square pixels, so it is impossible to create a true curve. However, you can create the illusion of curvature via your placement of the pixels.

When this image is complete, it will become frame one of your animation.

Step 3: Adding Frames to Your Animation

This is the part where the actual animation process begins. First, decide what portions of your image you want to move. In this example, sparkle shapes were added to the image to be animated. Then, decide and create the frames necessary to transition the moving objects from one position to the next.

You can use the live preview window in the Piskel app to adjust how many frames per second the animated gif will cycle through. The more frames per second, the faster the gif will cycle through the frames. You can pick at which speed you would like your frames to cycle based on what looks best for what you are trying to animate. Of course, the more frames you add to the animation, the smoother it will look, but pixel art allows for some liberties to be taken.

Step 4: Exporting and Sharing Your Gif

Piskel allows for images created in your browser to be exported as image files and .gifs for easy sharing and distribution. Simply click on the options present on the far right-hand side of the screen, and pick which option works best for what you want to share. You can save each individual frame of your animation as a still image, or download it as an animated .gif, which you can then save onto your computer and upload and share to your heart's content.