Learn How to Draw Hand-crafted Pixel Art in Photoshop
In this tutorial, legendary Aussie illustrator Russel Tate teaches you how to draw with pixels. You’ll learn how to create awesome artwork in the style of eBoy and Army of Trolls. This article was kindly shared with Psdtuts+ by iStockphoto as part of a knowledge exchange between the two sites. Read on and enjoy!
To celebrate this knowledge exchange, iStockphoto have created a special 15% discount for Psdtuts+ readers.
Introduction
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 some 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 the hand placement your pixel art can look like a bad Lo Res image, so beware!
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 squared 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, we’ll be creating some of the more basic pieces in this work.
Software
OK let’s set up for drawing. Just in case you don’t have a copy of Photoshop, there are some free dedicated Pixel drawing programs available for free download:
I’ve had a play around with both programs, but came back to Photoshop because I’m used to the keyboard commands.
Okay, Let’s Set Up a Page
- First open the preferences in Photoshop and set the Image interpolation to “Nearest Neighbor.”
- Create a new Page 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 did use the brush tool at a whopping 9 pixels instead of 1, you’ll get anti-aliasing occurring and that will spoil the hard-edge 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 2nd 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 into a TIF for CMYK printing.
Lean & Mean
Let’s Start Drawing
OK let’s have a go at drawing something like this 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 book mark.
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.
Angled Pixel 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 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 is much smoother Isometric angles, which look great with pixel drawings, but it’s not the 30º “iso” angle you used in Technical drawing class — it’s actually something closer to 26.5º. 30º unfortunately 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?
The irregular line will look lumpy at 100%.
Smooth line patterns at different angles.
Let’s Draw a Pixel Log
The lines down the length are easy 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
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, then to create depth, we can create dithering by placing pixels of contrasting color 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 and get the fuzzier the image may appear if it’s destined to reproduce at small size.
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 dithering pattern from scratch — instead, I just kept adding layers over top of layers. Simple stages work best!
Irregular Pixel Drawing
Let’s move onto 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.
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. Remember that if you’re planning to upload anything to iStockphoto, you need to include any reference material that you used. Then I start to sketch. I pay particular attention to the angle on both ears and feet as I want 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 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 creating the 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 make 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.
Conclusion
The hand placing, removing, 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. Hope this helps, and inspires you to create great work of your own!
Additional Resources
Here are some resources for further pixel reading:
- Mark’s Pixel art tutorial (shows more detailed pixel shading and creating pixel characters called “Sprites”)
- Creating Pixel Art Painting Pixel by Pixel — Tips and Tutorials. A good list of pixel sites to visit.
- 20+ Inspiring Pixel Artists, Tutorials, and Resources – a collection of pixel art resources here on Psdtuts+.
- Some pixel files I’ve drawn and animated as gif files. See the Squirrel in action!
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.
Note from the Editor: Psdtuts+ Thanks iStockPhoto!
-
This knowledge exchange was made possible by iStockphoto. Psdtuts+ regular author Alvaro Guzman has shared some of his best Photoshop tips for iStockphoto’s newsletter subscribers, and iStockphoto have kindly shared this article in return. We know plenty of people who read Psdtuts+ would be interested in iStockphoto, and many iStockphoto users would be interested in Psdtuts+, so we hope this will be a great way to help our audiences to meet each other and cross-over.
To celebrate the exchange, iStockphoto have created a special 15% discount for Psdtuts+ readers.
If you haven’t heard of iStockphoto before, here’s a very quick intro: iStockphoto is the world’s largest royalty-free stock multimedia destination with a file downloaded every second. iStockphoto pioneered the micropayment phenomenon in this industry in 2000, enabling buyers to license images for as little as $1. Now the site is home to more than 5.6 million photos, illustrations, video, audio and Flash files.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Russell Tate
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Photoshop to HTML
Take your Photoshop skills to the next level by learning how to slice up a PSD into a working standards driven HTML website.
The king of tomorrow - More
Follow Psdtuts+ and Tuts+ on Twitter
- Get to know the Psdtuts community and share a link to your portfolio on our Facebook page! http://enva.to/9pGzWM
- Create a Dark and Rainy Crime Scene in Photoshop http://enva.to/bcQAb4
- @JustinLynes Is it worth a try? Why? ;)
- @Colortrails Also trying to get in the habit of using @AlfredApp for searches, much easier, then independent of any browser used...
Join the Psdtuts+ Flickr Group
Photoshop Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
That is cool. Painstaking, but cool. Russell, I’m sure you get this question all the time, but how long does it take to do an illustration like the one at the top of this post.
Incredible Tut… Always wondered about best practices to create this kind of pixel art… Now I know… and knowings half the battle!
great tut.
Pixel art = fail
In what way is pixel art fail? :S
nobody = fail
what are u crazy pixel art awesome
what i think he meant is that he couldn’t get it. I’m sure he realizes that pixel art is awesome
Great tut man! wish i had seen this tut when i made this!
http://www.youtube.com/watch?v=Plhgyp0KNQQ
Sweet, i talked to Zamli about that video on myspace. Its awesome!
Great vid dude!
That video was incredible.
Nice. It reminds me of my experiments with pixel art a few years ago.
Pixel art requires some serious skill to achieve perfection. Thanks for a great tut Russel!
Looks so easy to…can’t wait to try it! Great explanation. I have a feeling I’ll have some trouble with the squirrel though
Really simple, well explained tutorial. Thanks will be giving this a try!
Wow, thanks for the feature! 15% discount on iStockphoto sounds really good!
agreed! That discount will come in handy for sure.
Also neat tut, i’ve always wanted to know more about pixel art workflow.
love iiit …my result http://grandmix.deviantart.com/art/i-love-the-colors-143009154
plz stop spamming these posts with your DA account. this does not even relate to the post.
agreed. ban these kinda spammers!!
I hate people like this.
He would sell his mother for +2 favs and 5 visits. It’s pathetic.
get out of here spammer
Very cool. Thanks!
I’ve always loved pixel art but never really tried doing it myself. This is a nice little beginner tut that will come in handy. Might even post it at the gaming forum I run because lots of people there make sprites/sprite comics or want to start.
Very cool
Thanks you
Could this type of look be achieved with using a pencil as apposed to a brush tool? Or, could you just paint this, and then use some sort of filter to achieve the look (that is, if you would even want to)?
It seems like a lot of effort for something that is outdated, ha, you’d think that something outdated would be easier to make.
No, you can not use a filter to achieve the look. The reason for that is because pixel art (the art form showed here) is 0% computer generated. Pixel art uses the logic of a human being and the illusion that your eyes will have on certain things. (This is why a 4 color pixel art piece can look like an 8 color one, or the fact that it doesn’t look like the same figure zoomed in). Pixel art has been outdated because it is so challenging to achieve a good look with it, and because it is so time consuming.
However, it is a very fun art form to learn. If you are a 3D texture artist, being a pixel artist as well is very helpful because you will know how to get up close and personal with the texture and make the texture exactly how you want it. I hope you practice pixeling some time, if you have the time. It is so much fun
. Just remember that it is an honorary artform. If you do things like color reduce non pixel art to try to make it look like pixel art, it will look horrible, and you will not be liked by other pixel artists 
.
Wow, I always wondering how these things were done. Like Aevion touched on, I sort of thought it was some sort of filter/settings applied to a pre-existing artwork. I guess this is a lesson in appreciating the time and effort that goes into pixel artwork – wow.
And thanks a million for the istockphoto discount – I just topped up
I’m honestly amazed you thought it was just some simple filter …
I absolutely love pixel art and thought to try it myself. Unfortunately, I haven’t got enough time in the world for it – even tiny pieces. You can see my first attempt and second FINISHED attempts*. Emphasis on finished because I have several unfinished pixel art work.
I don’t know, I may try it again with the help of this tut.
*http://pixeljoint.com/pixelart/18397.htm <– Took me forever
*http://pixeljoint.com/pixelart/46100.htm <– Quick one for a challenge
Btw, PixelJoint is an excellent community filled with uber talented and dedicated pixel artists. The work posted in this community is what inspired me to try pixel art.
真的很牛X！
sorry, i means good work~
Wait, I submitted a Pixel Art tutorial an they told me that they are not looking for Pixel Art tutorials.
Dendy
Tutorial added to thewebtuts.com
We want more!
Fantastic! I opened this tut up in fear that it would be a filter effect however I was obviously proved wrong and for that I am glad. This looks excellent! Thanks very much
…ahhh, reminds me of my good times with the Nintendo NES!
Great tutorial
usefull for icons
Oddly cool.
You need a LOT of patience to be able to do this.
Anyone know how to scale this stuff up so you can print it out massive?
Simply scale it up in Photoshop using the “Nearest Neigbour” method.
excellent post! like lots have mentioned, time consuming…but awesome results.
Great tutorial! I’ve been wondering how I could get started on learning pixel art for awhile, and this is definitely a great starting point! Thanks a lot!
Thanks, I love pixel art but was never sure whether it could be done to a high standard in photoshop.
awesome. the log is really rad. tottally into it.
I love it when artists use the tools given to them in unusual ways. I am trying desperately to break out of realism in Maya. I’ll find it, but great tutorial!
very good tutorial because I can create something new with this tutorial .. thank you for your advice..
I love pixel art, have been looking for a good piece to make my desktop background for ages!
Any reccomendations?
check out nitrome.com, they are the best pixle artists ive ever seen, and the games are great
Nitrome has great artists, but the people that *make* the games need to take a lesson in “avoiding unnecessarily hard gameplay”.
OMG people… i was doin this when i was 7 years old… on my dads Amstrad 1512 MsDos PC… in about 1986 only because there was nothing better out there…. dont waste time doing crap like this when you could be using your time creating decent graphics…
I Agree… total fail!
Kristian
Director – Duo Creative Media
`Also… you all say it takes ages… draw something normal in photoshop and then change the image size to something like 100×100 pixels… instant pixel ‘art’!
Or is it because you cant actually draw… mmm the plot thickens!
Oh hang on theres jobs going at lego land… you guys might fit in well there…
I agree
im still only 13 and i think this is stupid …
Pixel art requires a lot of skill and thought to create good results. It also gives people the ability to create much more detailed and photo like images.
Look for ‘Gas13′ at pixeljoint.com
Other than that, you sir are an ignorant ass.
omg.. you need to check out habbohotel.com and thats it kids…
Reminds me of the good old days with Lucasarts games..
Cute and Nostalgic.
Knowing this is a milestone of my life!
Good tut and well presented!
A nice feature if you use Photoshop CS4 is that if you zoom in, you will acctually see the pixelgrid! Very comforting if you, like me, are depending on Photoshop in your normal work and know it in-side-out.
If not, you can allways use paint, guuh
You still need to be able to draw well(!) Thanks for the detailed insights.
Ive found that Ultimate Paint really helps with doing such art. Great Tut!
http://www.ultimatepaint.com/
Windows Paint FTW!
Absolutely in love with this style. Maybe its nostalgia, bringing out the 16-bit kid in me. A very difficult discipline to conquer, but very rewarding visually.
Good job.
Can we stop calling everything “hand-crafted” yet? Buzzword alert. Good tutorial otherwise
Takes me back to the days of Deluxe Paint 3 on the amiga. Used to use the 1px brush all the time AND occasionally animpaint a few details in. Love it!
this artwork was amazing! good to know.