21 June 2006

How to do a pixel head

I thought it might be vaguely interesting to go through the process of drawing a pixelly head like the ones I've been doing this week. It's a process that is applicable to all pixel-style drawing: begin with the form and sketch out where the details go, then a trying things out until more and more bits come together. Let's look at the drawing I did of Franz Beckenbauer:



It begins like this, finding a few good close up photos of the subject:



Photo agencies like Getty Images are always better than Google Images; especially if the subject is, or has been, in the news recently, cos there's generally a lot more pictures to choose from, with lots of slight variations which helps gain a more rounded view of what the person really looks like.

Then it's a pretty simple beginning. I always use the same skin tone for Caucasian people, because it could get to be an obsession to pick the exact skin tone of each individual. Plus it's difficult to tell exactly from photos cos you don't always know the lighting situation of the reference images; so someone might look more tanned, but it may just be an overcast day.

I begin with a block, just like a sculptor; chipping away to create the vague head shape, then chuck in a couple of details to try and work out the distances between the key parts of the face and their position on the head:



The next bit is kinda the opposite of what art teachers tell you at college (to slowly build up form and structure and leave details til the end), but I like to get one detail looking nearly perfect early on, cos it keeps my enthusiasm going. With Franz, it was the sunglasses. Once they were right, they helped me work out the other parts of his head. (Sun)glasses are useful for that: their size helps with measuring the proportions of the rest of the head.



So now, the eyes, forehead, hairline and hairstyle are fairly close to being sorted:



But the nose, mouth, chin and cheeks are rubbish. He looks too jowly, too old. So a gradual process of chipping away at the face shape begins. It's all tiny changes that come to these three variation which show how each step is heading in the right direction. Plus I'd focused too much on the creases at the edges of his mouth and coming from his nose; when to portray him correctly, a little bit of lying is needed - making his mouth a bit too small and ignoring those creases in favour of some shading:



Pretty close at that point, all it took to finish it off was to re-add a bit of weight to his face, and add the shadows that infer the creases in his face, rather than making them too strongly defined. The final Franz Beckenbauer:



And here's a little recreation of each of the steps, animated to show how it works.



Oh, and I should point out that the drawing below is the real size; everything else you see is enlarged for clarity and to stop you being as blind as I am:

41 Comments:

Anonymous ed said...

Added this blog post to favourites, which has not happened before. Fantastic, I've always wondered how you did it. I might have to now have a go and post my embarrassing attempt :)

Cheers,

Ed

21 June, 2006 19:47  
Anonymous David said...

This howto is just awesome and amazing to read. But for the future I think I still leave it to you to do all those gorgeous pixel works.

21 June, 2006 20:44  
Anonymous longbird said...

Fascinating stuff! Thanks for the insight...

21 June, 2006 21:09  
Anonymous Massimo said...

Simply brilliant! You are the master. (^_^)

21 June, 2006 23:40  
Anonymous Emily said...

I don't think I could do it- but it is interesting to see how it's done, I have always wondered- thanks craig

22 June, 2006 06:26  
Anonymous chimpy said...

now then arty bum!

brill how to but what program do you use? come on Ukraine!!!!!!!!

22 June, 2006 06:29  
Anonymous Fluffs said...

wow thanks craig! you rock :)

22 June, 2006 09:41  
Anonymous Impa said...

Thanks, Craig. I might have a go but I am absolutely sure I'll never get the essence of someone's face like you can. Actually, that's what I admire even more in the normal pops and minipops: How you get it just right and make them look so real with so few pixels: that's probably even harder to do than in a drawing like this.
Anyway, thanks for sharing, great stuff.

22 June, 2006 10:02  
Blogger Matt Sephton said...

Craig, do you use Photoshop/ImageReady? Have you tried Pixen?

http://www.opensword.org/Pixen/

22 June, 2006 14:15  
Blogger Craig said...

Thanks, all.

I use Photoshop CS for everything that isn't animation. ImageReady for small animation, Flash for bigger animations with audio.

Matt, I've not tried Pixen, but I may well do so this afternoon. Thanks for the tip.

22 June, 2006 14:32  
Anonymous Anonymous said...

Coooooooooooool!!!!!!!!!!!!

22 June, 2006 14:34  
Blogger tinyfish said...

Brilliant to find out at last how you do it, Craig. For my own part, being a designer permanently welded to all things CS I've tried in the past to make my own mini pops without much success. OK, with no success. Until about a week ago.

I found a reasonably hi res picture of me and some friends. I deleted the background to white using the lasso tool. Once happy with the cut out I upped the contrast and brightness and then ran the pixelate/facet filter over it. Once I'd done that I simply reduced the file size step by step until I had a fair approximation of a minipop. I then zoomed in and manually adjusted pixel positioning and shades until... PRESTO! A minipop STILL not as good as the real thing. But close enough for Jazz.

Jim

23 June, 2006 20:40  
Anonymous Ray Frenden said...

Thought you might be interested in a fellow pixelarter's self portrait.

It's the 32x32 image in the Meet the Meat section on the top left. Dig the work!

Graphics Gale is a great, inexpensive pixelart tool, too.

29 June, 2006 23:30  
Blogger Halsnalle said...

Nice. But about halfway through, Der Kaiser looks very much like another German monument... Helmut Kohl, nicht wahr?

30 June, 2006 01:03  
Anonymous 3stripe said...

Nice tute! Luckily my face isn't human so it doesn't have to look realistic in my icons :)

30 June, 2006 10:37  
Anonymous Lawsy said...

The end result is outstanding, I love this kind of drawing, I think I will have a go of it myself!

30 June, 2006 16:45  
Blogger artsnooze said...

As a former teacher of analog drawing and as a casual portrait painter, and as everybody knows from looking at their own face, the two halves on one's face are not symmetrical: what appears on the right side of one's face is dissimilar to what is on the left side. This is a mistake that digital artists have to avoid. Transferring lines that are essentially a mental construct onto a two-dimensional surface is an exercise in determining spatial relationships, as our features are not outlined on the flesh covering our skulls. The method is useful, as I see it, for consistency of characters in, say, graphic narratives (e.eg., the graphic novel), which also call for 360-degree views of the face suitable for illustrating action in all situations. As well, the method is a starting point for creating characters in animations.

artsnooze

30 June, 2006 17:05  
Blogger Craig said...

This I understand, but when drawing something so small, I'm not looking for a perfect representation of Franz's "real" face; I'm looking to convince the viewer's eye that it is Franz. With so few pixels in the drawing, any noticable variations in the left/right sides of the face would just make the subject look like he'd had a stroke or something.
Thus, it's not a mistake as you suggest.

30 June, 2006 18:03  
Anonymous Ivan said...

Keiser lookin good

30 June, 2006 20:28  
Blogger artsnooze said...

The epistemology of a "drawing" of anything is purely representational. A drawing of a person is not a person, nor in your example is it even a representation of a person, as your intention is to "convince the viewer," meaning some viewers (those who may not be artists, say), not his or her eye, that your image is whom you claim it is. Spots of color or lines on a two-dimensional surface are spots of color and lines on a two-dimensioal surface; they are not persons whom the spots and lines may to some viewers resemble.

artsnooze

01 July, 2006 05:31  
Blogger Craig said...

I'm glad you weren't my art teacher.

01 July, 2006 12:53  
Blogger artsnooze said...

The put-down is the sissy way of flattering your demons. I'm gladder than you are.

artsnooze

01 July, 2006 15:23  
Blogger Craig said...

And I'm sure your dad could beat up my dad, too.

01 July, 2006 15:35  
Blogger Ray Frenden said...

This isn't a comment, but a mere alpha numeric string of characters.

1h677jjhui

Just because I want to represent a thought via written word doesn't mean non-writer readers will understand my meaning.

01 July, 2006 19:38  
Blogger Ray Frenden said...

Or, yeah, my dad could beat up yours.

01 July, 2006 19:39  
Anonymous Lisa Clarkson said...

artsnooze said:

As a former teacher of analog drawing...


Emphasis on "former".

02 July, 2006 05:10  
Blogger stephenliveshere said...

Thanks for giving me something new to get addicted to.
Great explanation and easy to follow.

02 July, 2006 15:28  
Blogger artsnooze said...

A major art foundation grant made me a "former" teacher of analog portrait painting, enabling me to swtith to digital portrait painting. I paint digital portraits from live models, not from photographs. I was 82 when I got the grant. A combination of factors made a "former" teacher of drawing and a current teacher of digital portrait "painting." I am now in my late 90s and readily admit that I am not as good as I might otherwise be. I've been making digital portraits from live models for 18 years and have a ways to catch up with my friends at Pixar, as well as you, Craig, artists who work at Pixar in my granddaughter's neighborhood in northern California.

artsnooze

02 July, 2006 17:23  
Anonymous stephen craig rowe said...

Yikes! Am glad I am only a simple painter poet. The oil and the words are enough for the likes of me. Be well. Stephen

03 July, 2006 07:43  
Anonymous sedgemonkey said...

Love to see any pixel artist's mehtods. Nice breakdown of the minimalist pixel style. Definitely one to add to the collection of pixel tutorials (st0ven's and Derek Yu's are still my faves)...

http://www.pixeljoint.com/pixels/links.asp?id=2192

03 July, 2006 22:58  
Blogger Stacy said...

Fantastic! Thank you for this.

04 July, 2006 05:01  
Anonymous Lautreamont said...

Fantastic tutorial. Pixel art at its most. :o)

04 July, 2006 07:24  
Anonymous Anonymous said...

I couldn't get past the first "cos."

05 July, 2006 21:58  
Blogger Craig said...

Meaning...?

05 July, 2006 22:06  
Anonymous XINERGY said...

This is rather impressive. Thanks for sharing that.

XINERGY

08 July, 2006 04:26  
Anonymous Jonas said...

Hi,
I like your pixelart,
just thinking there would be a more automatic way from a real photo using photoshop and posterizing or using filters and then resizing into that tiny format,,,, I am all into efficiency, but I guess then it probably wont look as good and artistic,
to the art teacher: art doesnt have to represent or be accurate or anything else, thats the beauty of it, you just have to like it,

31 December, 2006 10:42  
Anonymous trademark registration said...

Thanks for the tutorial on pixel art. Great job!

27 November, 2007 07:14  
Anonymous gifts said...

Great, this actually can be very helpful even in making 2D adventure games. I know, know, who makes 2D adventure games these days? Well, there's certainly a bustling community out there with guys that still love and play those games... and they're making a heck of a lot new ones as well. I've always wanted to add my bit to that community, and this certainly gives me some great insight how to get a great pixel-art character going.

06 March, 2008 16:23  
Anonymous original oil paintings said...

I used to create pixilated scribbles hoping that I can create abstract masterpieces out of my unclean creations. I never actually tried creating something simple yet complicated like a pixel head. Isn’t it harder to create a cleaner object than an abstract one with this method?

30 April, 2008 12:16  
Anonymous Clif said...

http://www.youtube.com/watch?v=4ibvendiyYA
http://www.youtube.com/watch?v=kRiCpAq_YFE
http://pixel-art.cz

08 June, 2008 16:08  
Anonymous Xoobie online auctions said...

Fascinating insight. Thanks for that!

23 June, 2008 15:04  

Post a Comment

<< Home