How to Make Pixel Art in Piskel for Beginners

In this beginner tutorial you will learn how to create pixel art for your projects and games using Piskel! We will go over everything from creating your first pixel art image to sharing it with friends and family!


Are you excited to create your very own pixel art? No matter if you want to make something to share to your Instagram account or maybe you need a hero for your new mobile video game, this Piskel tutorial will help get you making pixel art fast with Piskel.

Getting Started

Pixel art is a fast and easy way to create 2D sprites and images for your projects or games like you see in popular mobile games like Flappy Bird! It turns out pixel art is also a fundamentals for creating great voxel art because it uses the same concepts. Now there are currently tons of different tools available for creating pixel art, but in this tutorial we will be using an incredibly popular 2D image web application that you can use for free! Piskel is one of the most widely used pixel editors for making pixel art because of its dedicated tools and features for making awesome pixel art!

Sponsored Ad

Create a New Sprite

To begin open a browser window on your computer. Navigate to Piskel.com. You should see a screen that looks like the one below. Go ahead and click Create Sprite

NOTE: If you prefer to use the local desktop version, you can also download it. The steps in this tutorial are still the same. Instead of opening the browser open the program directly instead. 


When you click Create Sprite a new Piskel document will appear. This is the Piskel editor window where you will be creating your pixel art. For this tutorial, know that the left side of the editor contains your tools that you will be using to draw your pixel art. The center contains the canvas where you will be drawing the pixels to make your sprite. The right side contains additional features such layers, grid settings and export options. 


For now we will keep it simple but by the time we are finished you will have knowledge on how to use these different windows in Piskel.

Sponsored Ad

Set up Piskel for Pixel Art

Now that you have a blank canvas, we need to set up some basic settings in Piskel that will help us make our first pixel art.

Turn on the Grid

When you first open Piskel the canvas in the center of the editor is a solid gray background. Now technically you could start drawing pixels, but this would be kind of hard. Instead we will turn on a grid that will help us judge where we are placing our pixels. To do this click on the gear button on the right side of the screen.


When you click the gear button a new window called Settings will appear. Click on the sub-window called Grid to open the Grid Settings. First Enable Grid so that it turns on, then set the Grid size and Grid spacing to the smallest size so we can see it but it doesn't block our pixel art. And lastly select the color black for the Grid color.


Now that you have a basic grid set up it will be easier to see where we place our pixels and how much space we have to work with.

Sponsored Ad

Draw Your Pixel Art Image

In the previous steps we created a new canvas and turned on the grid. Now that you have Piskel all set up for pixel art its time to start drawing pixel art. First we will choose the tool we will be using to actually draw our pixel art. Even though there are dozens of tools and shortcuts you can use to make the pixels in your image we will focus on 1 primary tool. That tool is the Pencil tool.

Select the Pencil Tool

The pencil tool will undeniably be one of the most used tools you will use when you start making pixel art. All you need is to set the size and color.

To begin lets select the Pencil tool from the toolbox. You can find it on the left side. It literally looks like a pencil.


By default the pre-selected color will be black. We will stick with that color for right now because black is the perfect outline color for pixel art.

Outline the Body

And now the moment we have all been waiting for! To draw a pixel simply click anywhere on your canvas. Since we did all the hard work in our previous steps of setting up Piskel, it should literally be like filling cubes on a grid. We will start by outlining the body using the color Black. Use the image below as a guide.


Nice work! Now that we have the outline for our pixel art dog we can begin adding some more details on the outside like some ears on top of the head. Continue adding more detail using the same method you used for the outline. Repeat the image below.


Slowly but surely, our pixel dog it is starting to take shape! Let's continue on by adding some detail to the face.



Sponsored Ad

Now the dog looks great, but so far we have only been using one color. Next let's change the color that our pencil tool is using so we can paint additional details on our dog. Let's start with the eyes. Click the color box on the bottom left. 


Once you click the color box, a color window will appear. Drag the circle to the top left of the window to pick a white color.


Perfect! We now have the white color selected. Using the same technique lets add some eyes to our dog's face. Use the image below as a guide.


Fantastic! Let's color the body now so it looks more like a dog. However this time we will save ourselves a lot of clicking and use the Paint Bucket tool. Click the button with the bucket icon in the toolbar. Then click the color box again, but instead of dragging the color circle enter #e9ac40 into the text box in the color window. This will automatically select a brown color that we can use.


 Simply click inside of the dog's body to paint it the color we selected.


Next lets give our dog a tongue. Again click the color box and enter #e95240 into the text box in the color window.


Color a tongue for our pixel dog using the image below as a guide. 


Once you start getting the hang of it you can begin adding more details to the dog as you see fit. We went ahead and gave the dog a collar. We also painted the chest and ears a darker brown to make them stand out more. Once you're finished turn of the Grid inside of the settings window to get a clear view of your pixel art.

Share your Pixel Art Image

So now that you have some really cool pixel art, how do you share your pixel art in Piskel? To share your pixel art click the button on the right side that looks like a photo. This will open the Export window.


Next enter the settings below. Here is a brief breakdown of the settings:
  1. Scale - By default pixel art comes out the pixel size you set. Usually this is very small so we decided to scale it 16x. The resulting image is 512x512.
  2. PNG - This is the image type that will be exported. Every social network and game engine supports the PNG file format.
  3. Spritesheet file export - This is how the image will be exported. In this case it will export our image as a single 512x512 PNG sprite.
Click Download when you're done.


This will download a copy that you can use to your computer.

Where to Go From Here

Now that you have learned how to set up Piskel and the fundamentals for creating pixel art, you can make more pixel art for your projects and games. Thank you for reading this tutorial. Please share if you found this helpful!

Comments

More Interesting Posts


Sponsored Ad