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 pixel art in illustrator to sharing it with the world!
Are you excited to make your own pixel art using Adobe Illustrator? Whether you are looking to create pixel art 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.
Create a New File
Once you have Illustrator installed via Creative Cloud, we can begin the tutorial. 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 create this pixel art 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 for your pixel art called PixelFrog with a canvas that is 500×500 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 500×500 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 and create our pixel grid 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!
Set up Adobe Illustrator for Pixel Art
Now that you have your pixel 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 pixel art 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 Illustrator 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.
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!
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 this Illustrator 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 in the tutorial 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 for our pixel art frog.
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 pixel frog to life we need to change the color. Click the color box again and select a green color from the color palette.
Now that we changed the color lets begin coloring the inside of the pixel 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 pixel art 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 in Illustrator. 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 your pixel art inside of Illustrator should look a bit more clear like the image below. The grid is now completely hidden from view leaving our pixel art uncovered.
Congratulations! You have completed the tutorial on how to make pixel art in Illustrator.
Where to Go From Here
Now that you have learned how to make pixel art in Illustrator, including the fundamentals for setting up the environment for 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.
