Learn How to Draw Hand-crafted Pixel Art in Photoshop

Pixel illustrations are great for making computer icons, isometric images, and even whole scenes. They can be made quickly and easily using Photoshop with a couple of quick tweaks to the preference settings.

The only drawback, though, is that the pixel art looks best when each pixel has been placed by hand as opposed to using a Photoshop filter. That's right, placed by hand—I know this sounds a little crazy, especially when some pixel scenes have thousands of pixels in them. But without hand placement, your pixel art can look like a bad low-res image, so beware!

Pixel art backgrounds on Envato Elements. — Here's a creative pixel art background from Envato Elements.

I think a good rule of thumb before starting off is that you should be able to see your creation clearly as a group of different-colored square bricks, but then if you squint and blur your eyes, you can make it out as an image. Imagine that you're making a tile mosaic, only you don't need any grout.

Below is a complete piece of pixel artwork, and we'll be creating some of the more basic pieces in this work.

Here's What You'll Learn in This Pixel Art Drawing Tutorial

How to set up a page to make pixel art in Photoshop
How to use the Pen Tool to draw pixel art
How to draw pixel art with angled lines
How to create realistic pixel art
How to draw pixel art from a sketch

For this tutorial, we'll be using Adobe Photoshop.

1. How to Set Up a Page to Create Pixel Art

First things first. If you want to learn how to draw pixel art, you'll have to go through how to set up a page in Photoshop. It's a simple step, but it's crucial when you're learning how to make pixel art in Photoshop.

First, open the preferences in Photoshop and set the Image interpolation to "Nearest Neighbor."
Create a new page with a size of 300 px by 300 px at 72 dpi.
Select the Pencil Tool at 1 pixel. The Pencil and Eraser tools are the only tools you will really need.
Occasionally, you might use the Magic Wand to select an area to fill—just make sure Anti Alias is off.

If you do use the Brush Tool at a whopping 9 pixels instead of 1, you'll get anti-aliasing occurring, and that will spoil the hard-edged pixel effect. So stick to 1 pixel. "Keep it lean keep it mean," as my mother used to say.

When your pixel drawing is viewed at 100% (actual size) the Pencil Tool at 1 pixel wide is very small, so you might find it hard to see and manipulate. An idea is to enlarge the view to 800% so you can see what you are doing. I often have a second window open in Photoshop with the same screen view at 200% so I can quickly see how my drawing looks up close and also from a little further away at the same time.

We can save our working doc as a PSD file and export for web use later as a GIF file. We can also enlarge the file afterwards and turn it into a TIF for CMYK printing.

For this tutorial, we'll be using Adobe Photoshop.

Let's create pixel art!

2. How to Make Pixel Art in Photoshop

OK, let's have a go at drawing an open book. With the Pen Tool, draw around the edge to create your black outline. Then fill in the flat colors of the page and the bookmark.

Create the idea of text on the page with some single pixel lines. See how we put a slight kink in the line to give the impression of a slight curve on the page.

Lastly, add some highlights down the middle of the pages and side of the bookmark. A nice little touch is a single pixel highlight at the bottom outside corner of each page; it just gives a hint of a page edge instead of being a solid block.

Once you've got the basics of outlines, colors, highlights, and shading, you can try your hand at building other simple shapes.

101958 101958 101958

3. How to Draw Pixel Art With Angled Lines

Pixel icons like the ones above can be designed as a series of lines that are just 90º to each other and are very much squares and rectangles. Occasionally, though, you might need a line at an angle.

Something to bear in mind is that angled lines look best when they are a regular pattern. If they are irregular (like those shown below), they can appear lumpy and crude when viewed small. The second example below uses much smoother isometric angles, which look great with pixel drawings, but it's not the 30º "iso" angle you used in technical drawing classes—it's actually something closer to 26.5º. Unfortunately, 30º gives a lumpy line at 100%. If you make a line that regularly runs 2 points over and 1 point up, you'll get 26.5º.

Shall we try drawing something else that's a little more geometric and uses more of those line patterns?

101915 — The irregular line will look lumpy at 100%.

101914 — Smooth line patterns at different angles.

4. How to Create Realistic Pixel Art

The lines down the length are easy, and we know how to do those now, but how about those round ends?

These two are regular patterns but are changing from wide horizontal lines down to squares and then to vertical lines. It does look a little jagged, but if you blur your eyes, it does look correct!

The curve on the top-right of the log end is also the reverse pattern of the bottom-left section. I often count the pixels or remember certain combinations. The pixel combo on the circle is...

3 squares (across)
2
111
222(down)
6
2
1

It's a little tricky to get the hang of at first, like using bezier curves in Illustrator, but you soon get a feel for it. The length of the log is easy: we just use the "2 along, 1 up" system and make the log as long or short as we want.

Smaller concentric circles on the end give a nice ring pattern, and some areas of darker shading at the bottom of the log give it some depth. We'll give the log a flat fir color to start, and then to create some depth, we can create dithering by placing pixels of contrasting color on either side of our high light/low light lines.

You can build up the patterns and make them more complex. Careful, though: the more realistic and tricky you try to get, the fuzzier the image may appear if it's destined to be reproduced at small sizes.

I did throw in a few more random pixels on log #3 as I wanted it to have a rough look and contrast a little with the squirrel.

For the final log, I worked in an area of stripped bark and a small branch. I found it best to complete one area or style first and then work more detail into it. I don't think I could have drawn the stripped bark log with a dithering pattern from scratch, so instead, I just kept adding layers on top of layers. Simple stages work best!

5. How to Draw Pixel Art With a Sketch

Let's move on to something a little more irregular, like a squirrel to sit on our log. For something complicated like this, it's best to start out with pencil and paper. Let's create a sketch and then convert our picture to pixel art!

First, I drew an isometric square on my page to get the right dimensions. Since we're using this particular example for editorial purposes, I used a photograph for reference. Then I started to sketch. I paid particular attention to the angle on both ears and feet as I wanted them to follow the isometric lines.

As you can see, the detail is very minimal—I just want to get the basic shape and correct angles worked out first. We'll do the rest of the work in Photoshop.

Bring in the sketch, put it on a new layer, and ghost the opacity so you can see the pixels you are about to create clearly. It's not a hard and fast rule, but I find pixel drawings look best when they have black outlines.

Here I am going around my squirrel with the Pencil Tool to create a black outline. One thing to be avoided is clumping up where outline pixels touch each other on more than one side. If you draw an extra square, just delete it with your Eraser Tool (also kept at 1 pixel width, see the red circle). It will look neater, and your audience will thank you for it.

It still looks a little messy, but it will shape up! Keylines inside the illustration also help to give it a bold look; just make sure they are a darkish color that isn't black to create some contrast. Call me a radical, but I went with brown on this one.

When the shape is complete, fill the inner area with a nice mid-tone color (soft brown), and maybe use a light color to bring out some highlights.

The black outline rule is not a hard and fast one. I did leave some black keylines below the front jaw and paw as it was getting hard to see what was going on.

Congratulations! You're Done Learning How to Create Realistic Pixel Art in Photoshop

The hand placing, removing, and changing of pixels is where the skill comes in. Sometimes. But once you start to get the hang of it, you'll be able to draw just about anything—all you need is some patience. I hope this inspires you to create great work of your own!

Unlimited Files to Draw Pixel Art

If you don't feel like creating pixel art drawings from scratch, don't worry. On Envato Elements, you'll find thousands of files to download as many times as you want for one low price.

Envato Elements offers many premium options for you to create professional design projects. Grab one of our multiple realistic pixel art templates and elevate your designs.

Pixel art Templates on Envato Elements — Save time by not having to draw pixel art from scratch. Envato Elements offers many pixel art drawings and templates ready to be used in Photoshop and other programs.

1. Realistic Pixel Art Background (EPS, JPG)

These cool halftone realistic pixel art backgrounds are amazing for any design project. Pixel art drawings have never looked so modern and creative. Go ahead and use them with Photoshop, Illustrator, or InDesign. Customize these files to create pixel art that fits your needs!

2. Pixel Art Drawings (AI, FIG, JPG, PDF, PNG, PSD, SKETCH, SVG)

Are you looking for pixel art with easy customization? This premium pixel art icon set is the best option for you. Drawing with pixels can be intimidating at first, but this icon set will make your life easier. Use these files with a variety of design programs.

3. 3D Pixel Hearts (AI, EPS, PNG)

Get three cute pixel heart designs for your art projects. They have a high resolution, so you will have no trouble adapting them to your mockups or designs. Experiment with pixel art drawings—these look great on tote bags, cards, and invitations!

4. Isometric 3D Pixel Font (AI, EPS)

Although this isn't a font file but a package containing a pixel art alphabet, you won't have any problems when using these files. Creating a font or converting a picture to pixel art from scratch is difficult and time-consuming. This package is ready for you to use and enjoy.

5. Cute Japanese Illustrations: Picture to Pixel Art (EPS, JPG)

If you're into kawaii illustrations, this cute pixel art with easy customization is the right package for you. Get a variety of Japanese dishes like sushi, ramen, dango, takoyaki, and more! Creating and drawing with pixels has never been so much fun.

Discover More Pixel Art Drawings, Graphics, and Tutorials

Do you want more realistic pixel art graphics? Or do you want to learn more about how to make pixel art in Photoshop? In this section, we'll show you a curated selection of Envato Tuts+'s best template lists and tutorials related to pixel art drawing and other design-related content. Check them out: