How to Make Pixel Art in Illustrator for Beginners

In this beginner tutorial you will learn how to create pixel art for your games and projects using Adobe Illustrator! We will cover everything from creating a pixel art image to sharing it with the world!

Pixel Art Tutorial for Beginners using Adobe Illustrator

Are you excited to make your own pixel art? Whether you are looking to create  something to share to your Instagram or maybe you need a pixel character for your next video game, this Illustrator tutorial will help get you creating pixel art quickly with Adobe Illustrator.

Getting Started

Pixel art is a great way to create 2D image sprites for your games or for projects like in the pictures you see in popular mobile games like Slayin and Apple Knight! It is also the building blocks for creating great voxel art. Now there are several tools available for creating pixel art, but in this tutorial we will be using one of the most popular vector editing software available on the web. Illustrator is a good choice for making pixel art because it allows you scale up and down your pixel art with ease allowing you to use your sprites for the actual game as well as using it for promotional images.

Sponsored Ad

Create a New File

Once you have Illustrator installed via Creative Cloud, go ahead and open up the program. You should see a menu similar to the one below. This is called the Welcome Screen. Go ahead and click Create New.


A New Document screen will then appear. Here you can select from pre-made templates to help build vector projects designed for different screen sizes. For this tutorial we will show you how to make a pixel art frog. To do this we will use the Web category and select the Common option. Inside the menu on the right called Preset Details type the name PixelFrog and enter 500px for the width and 500px for the height. Click Create when you're done.


Basically this creates a new vector file called PixelFrog with a canvas that is 500x500 pixels in size. This canvas will be what we use to draw our pixel art. After you hit Create, you should see a screen like the one below. Keep in mind even though are canvas is 500x500 pixels, our grid is going to be much smaller. That is because pixel art in general tends to use really small grids to emphasize the pixels. We can always scale our images up or down later, but while we are designing we will stick to this resolution.


Before we move to the next step make sure your screen look similar to the one above. Next we will set up our grid so we can start drawing some pixel art!

Sponsored Ad

Set up Adobe Illustrator for Pixel Art

Now that you have your canvas, we need to set up some basic settings in Illustrator that will help us make our very first pixel art character and also so that it displays properly.

Create a Grid

When you first created your file in Illustrator, by default it will not have a grid. In order to make pixel art properly you will need to have a grid inside of your canvas. So to create a grid, select the Rectangular Grid Tool


To create a grid in Illustrator, make sure the Rectangular Grid Tool is selected. Next double-click on the canvas to launch the Rectangular Grid Tool Options window. This window will allow you to define different properties of your grid such as the size and how many cells the grid will contain. 

For this tutorial enter 500 for the width and height to match the canvas size. Then enter 18 for the horizontal dividers and the vertical dividers. Once you do this click OK.

You should now have a grid inside of your canvas. Make sure it is aligned inside of your canvas. 

Sponsored Ad

Turn the Grid into a Live Paint Group

Before you can actually start drawing pixels the grid you just created needs to be turned into a Live Paint Group. To do this you need to select the Live Paint Bucket Tool.


With the Grid selected click on the grid. You should see a message like the one below.


When you finish clicking on the grid the grid is now ready to be colored. In the next step we will start drawing some pixels to make our pixel frog!

Sponsored Ad

Draw Your Pixel Art Image

Now that you have Illustrator set up for pixel art its time to choose the tool we will be using to actually draw our pixel art. Believe it or not its the same tool we used in the previous step: the Live Paint Bucket Tool. This will be the primary tool we use throughout the tutorial to create pixels on our grid.

Choose a Color

So make sure you have the Live Paint Bucket tool selected. Next we will choose a color for the outline of our pixel frog. A popular choice is to outline characters with the color black. So go to the top of the windows and click on the first color palette drop down. This allows you to change the fill color. From the list of pre-selected colors choose the color Black.


Keep in mind when working with pixel art in Illustrator always use the Fill color drop down which is on the left and not the Stroke color drop down which is on the right.

Outline the Head

And now the moment we have all been waiting for! To draw a pixel simply click anywhere inside of the grid you made earlier. Since we did all the hard work of setting up Illustrator, it should literally be like filling cubes on a grid. We will start by outlining the body using the color Black.


Very nice! Now that we have the outline for our pixel art character we can begin adding some more detail inside of the body such as eyes, mouth and arms. Continue adding more detail using the same method you used for the outline. Repeat the image below.


It is starting to take shape now! In order to bring our frog to life we need to change the color. Click the color box again and select a green color from the color palette.
Sponsored Ad

Now that we changed the color lets begin coloring the inside of the frog. Try to replicate the image below using the same Live Paint Bucket tool.


Great work! We now have the majority of our pixel art frog drawn out. As you can see it is literally like color by number! You can change the colors and simply tap inside the grid to draw pixels. We decided to add a little more details to our frog. Try to complete the image below using the techniques you've learned so far.


Great work! You now have the skills to create your own pixel art for your projects. However it would be nice to see what our pixel art looks like without the grid. The grid has a Stroke color applied to it. To hide the grid simply set the color to transparent. So select the grid, then click on the Stroke color drop down menu. Use the image below as a guide.


Once you do that you should see something like the image below. The grid is now completely hidden from view leaving our pixel art uncovered.

Where to Go From Here

Now that you have learned how to set up Illustrator and the fundamentals for creating pixel art, it's time to learn how to export your pixel art images for so you can use it in projects like video games and promotional art. We will be covering this in our next tutorial.

To Learn this, view our next tutorial How to Export Pixel Art Using Adobe Illustrator.

Comments

More Interesting Posts


Sponsored Ad