Creating Pixel Art

pixel art illustration of rocket blast off Blast Off! © Amy Richardson '23

Pixel art is featured widely in web and software design, from retro styled websites, profile avatars and sprites in gaming. Want to make some? Here is a bumper pack of resources to creating your own pixel art in Procreate, MS Paint and beyond!

Getting started in Procreate

Before we get started, I have been making art my whole life, but I am only using Procreate for the last six months. It is a game changer. I feel very lucky to be able to create art with it after years of hoping to pick one up. Once it arrived I immediately looked up some tutorials and Art with Flo jumped out. Her Pixel Brush tutorial and Pixel Canvas tutorial are where I learned the basics and I will summarize them below to help you get started.

Making a Pixel Brush

In Procreate, make a new canvas, any size. In the top bar menu, go to the Wrench icon -> Canvas -> Crop & Resize.
Go to Settings and change the canvas size to 1px x 1px, click Done.
Grab a brush (eg. Monoline), set its colour to white and click your canvas to fill it with white.
Drag down with three fingers on the canvas to bring up the Copy menu, choose Copy.
In the brush library click '+' to make a new brush. From the menu on the left, select Shape -> Edit -> Import -> Paste -> Done.
Back to the menu, choose Wet Mix -> Charge & Pull, drag sliders all the way to the left.
Go to Apple Pencil -> Opacity, drag slider all the way to the left.
Go to Properties -> Smudge & Maximum Size, drag sliders all the way to the left.
Give your new brush a name in the About this Brush setting -> Done!
Create a pixel canvas, follow the below steps...

Creating a Pixel Canvas

Create a new canvas in Procreate by selecting the '+' icon in the Gallery page, click the smaller '+' icon and choose a height and width of 100px (Art with Flo chooses 50px x 50px but I preferred more space) -> Done.
Choose the Wrench icon -> Canvas -> Drawing Guide 'on' -> Edit Drawing Guide -> Grid Size, set to 1px -> Done -> Done.
Choose your pixel brush and get creating!

What Should I Do Now?

If you are not used to drawing, pixel art is very forgiving and you can create cute sprites with just a small colour palette so just jump in and give it a try. My approach is to:

Choose a main colour palette from the Procreate library
Block out the main shapes of my drawing with mid-tone colours.

pixel art illustration of rocket blast off-step1 Here I used the Symmetry Drawing Tool to ensure my rocket was uniform.

Add shadows with the darker tone of that colour and light areas with the light tone of that colour.

pixel art illustration of rocket blast off-step2 Using the 1px Drawing Guide, I placed my colours.

Repeat with all colours until you are satisfied.

pixel art illustration of rocket blast off-step3 Remove your drawing guide to see your finished image.

For dark and light tones, it's best to pick a direction that the 'light source' is coming from to help create depth in your image. Check out this tutorial to learn about light source.

Resizing your Canvas for Exporting

If you try to resize your canvas using the transform tool in Procreate you will find it becomes blurry. To combat this I follow this tutorial by Noisy Blue on Youtube. To prepare the above finished rocket image, I resized the canvas to 1000px x 1000px and exported as a PNG for hosting on my GitHub Blog Repo. There is no loss in image quality when exporting as a PNG and it leaves the image ready for use anywhere on the web.

Experiment with recreating your favourite characters to grow your skills. There are many levels to pixel art and many tools to help you level up. As with everything else in life, practise, practise, practise!