How To Make a Moonlost Style Pixel Avatar!

Moonlost · **Posted:** Sat Feb 26, 2011 6:40 am

So, I while back, I was promising to make a video of how I do my avatars. Due to technical difficulties, that didn't happen. Instead, I've decided to make a text based explaination with visual aids, using my new Deathwing Avatar as an example.

Please note that my technique in doing these is constantly changing. Also, I'm mosly self taught though trial and error. :3

So, first thing's first. Snap a screenshot of the model that you'll be making an avatar of from WoW Model Viewer. I heavily reference colours from said snapshot, and I often directly grab colours from it using the Eyedropper tool. In the past, I used to make multiple screenshots for pose reference, but I now have an awesome dual monitor set up. This means I can have my drawing program open on one monitor with WMV open for reference on the other.

I personally use Photoshop CS5, but one could use any other complex imaging software for this, such as Painter, SAI or GIMP. I also make use of a Tablet (although I suppose you could do something this complex with a mouse, but you would need the mouse drawing skills of some sort of god).

Anyway, create a new 100x100 pixel picture, which is the maximum this forum will allow. Then open up your colour reference pic, which you should move away and shrink to the side.

From there, create a new layer to draw on, grab your pencil tool, pick a blue colour and set the tool opacity to around 20%. Zoom in to about 500% size, then sketch out your intended image. I usually pencil in a little detail to get an idea of what it'll look like. (I don't use pressure sensitivity for my pencil tool work. Just so I have a little more control over shading and colouring.)

Once you like the where the sketch is going, create yet another new layer. Set the tool back to 100% opacity, change the colour to black and draw the outline. It should be noted that with my outline, I'm actually quite a lazy. Other pixel artists advise you clean up your lines so that they're only one pixel wide, with crisp corners. I tend to ignore that, which makes my lines slightly thicker than normal. Call it a style flaw.

Next, make another layer beneath the outlines and disable the layer you made your lines on. This is where we place our flat colours, which we use as a base for our shading. I used to do all my shading on the same layer, but I've recently changed that to shading on a new layer. If you decide to shade on the same layer, I found it to be useful to lock transparency on said layer (For Photoshop, it's the little square icon on the top left in the Layers window). This just means you can't scribble outside the lines when you're colouring.

Now, we start on the complicated stuff. First of all, go back to your background and change the colour to something that will contrast with the shading you'll be doing. In my case, I chose a light green. Create your last layer, above the flat colours but below the outline. Now, we start sampling the highlights and shadows from the reference picture. Set your pencil opacity to low, generally 15% (although I end up moving that up or down, depending on how harsh the colour I'm penciling in is). From there, it's a slow process of filling in all the details. Just move slowly and refer back to your reference often. Don't be afraid to go back and change things as you go along, and make sure to zoom back to it's proper size every once and a while. Zoomed in as close as we are here, it can be a little hard to gadge how good it looks actual size.

Okay, so we're finally at a mostly finished point. Make sure you clean up any stray shading outside the outline, then disable the background to make it transparent (it'll look like a white and grey checkerboard). Zoom out to have a look, make any last changes. Once you're finished with that, you're done! Save as a PNG for forum use (And another one as the default save type for your program, just in case you need to make any changes).

Hope this sates the curiousity of those who were wondering how I work (and helps those willing to give this a try

).

(Edited a little for grammar. >.>)

Saturo · **Posted:** Sat Feb 26, 2011 6:45 am

0.o

That's pretty much exactly how I do mine, minus the neat shading and awesome coloring work. Thanks for posting it, I'll definitely try it! :D

LupisDarkmoon · **Posted:** Sat Feb 26, 2011 11:27 am

xD Dear gods, Moon. I look at that and go, "Hey, looks like how I do mi- HOLY FEL that looks AMAZING!"
Very well done!

Azunara · **Posted:** Sat Feb 26, 2011 3:59 pm

...Be right back, trying that out.

Silvershade · **Posted:** Sat Feb 26, 2011 5:10 pm

Hmm, I'll have to try this. I love your shading style

LupisDarkmoon · **Posted:** Sat Feb 26, 2011 7:10 pm

<333333 for sharing how you do this, Moon!
I can actually make pretty avatars now!
...And I'm *NEVER* trying to animate them, because it took two hours to add the details. x.x

Saturo · **Posted:** Sat Feb 26, 2011 7:14 pm

0.o
That looks amazing, Lupis! Makes me kinda' ashamed of my new avatar. <.<

Victorelle · **Posted:** Sat Feb 26, 2011 7:17 pm

must try....

LupisDarkmoon · **Posted:** Sat Feb 26, 2011 7:17 pm

Noo! Your avatar is awesome!
Completely different style, anyway. Yours has a simple black and grey color scheme that matches how it looks calm and detached. Too much random crazyness - like mine has - and it'd look very... lively, which I don't think you were going for.

Saturo · **Posted:** Sat Feb 26, 2011 7:19 pm

Hmm, true, I suppose. I guess it's kinda' obvious which style I'm going for with it. It is awfully dark, though. Too bad I can't get the hoodie and hair into different blacks, without making them blur together like now. :/

It's made in pretty much the same way, though!

Silvershade · **Posted:** Sat Feb 26, 2011 7:33 pm

Done~

LupisDarkmoon · **Posted:** Sat Feb 26, 2011 7:56 pm

Sidenote - not being able to use WMV sucks. xD I had to get on my Drake, fly up to a pillar with no background behind it besides sky, and take a in-game screenshot. Not too bad, but if I want to try other things like beasts I don't have, I'm going to have problems.

Edit - Peep is adorable. ^.^

Azunara · **Posted:** Sat Feb 26, 2011 7:59 pm

Well, hell. I'm no even going to try at this point. xD

Nothing I can ever do in a million years will ever reach the awesomeness of your guys' work.

Moonlost · **Posted:** Sat Feb 26, 2011 8:02 pm

LupisDarkmoon wrote:

<333333 for sharing how you do this, Moon!
I can actually make pretty avatars now!
...And I'm *NEVER* trying to animate them, because it took two hours to add the details. x.x

Seconding Sat here Lupis, amazing work!

I'm a little jealous over how quickly you managed to pick up the style, although I suppose that just points to how effective this guide is. And here I was worrying a little over whether I had enough pictures showing how to shade it.
Hehe, and yeah, that's the one downside to them. They take a while to make, considering how small they are.

Saturo wrote:

0.o
That looks amazing, Lupis! Makes me kinda' ashamed of my new avatar. <.<

Also agreeing with Lupis here. You went for a very different style and weren't just copying from the already made WoW model. I like yours a lot.

SorchaBlueWolf wrote:

Done~

Also looking pretty good there!

Azunara wrote:

Well, hell. I'm no even going to try at this point. xD

Nothing I can ever do in a million years will ever reach the awesomeness of your guys' work.

And how would you know if you don't try?

As Lupis' inspired signature says, only way to improve your skills is to try and fail until you get the hang of it.

LupisDarkmoon · **Posted:** Sat Feb 26, 2011 8:09 pm

Quote:

I'm a little jealous over how quickly you managed to pick up the style, although I suppose that just points to how effective this guide is. And here I was worrying a little over whether I had enough pictures showing how to shade it.

Honestly, I've been trying to mimic your avatars for ages now. xD I never thought of looking at the actual in-game model and taking colors/patterns from that, though. That was an incredible breakthrough.
I took a second to see what it would look like without the base colors... I was amazed. There were about ten pixels on the entire picture without shading. O.o
Compared to my attempts before this tutorial, where almost the entire thing would be blank.

Also, Azu, TRY!!!!
I want to see!!!!!
So there.

Victorelle · **Posted:** Sat Feb 26, 2011 8:11 pm

Mine wont be all pixel like yours

EDIT - NVM (zoomz in)

Moonlost · **Posted:** Sat Feb 26, 2011 8:24 pm

LupisDarkmoon wrote:

I took a second to see what it would look like without the base colors... I was amazed. There were about ten pixels on the entire picture without shading. O.o
Compared to my attempts before this tutorial, where almost the entire thing would be blank.

It's also really interesting to see what it looks like without the outline. :O

Also, side note, I thought there was a Mac version of WMV out there. :S
If not, or if you're having issues getting that to work properly, I can always take screenshots for you.

LupisDarkmoon · **Posted:** Sat Feb 26, 2011 8:33 pm

I don't cross over the black lines much. xD Whereas Deathwing looks amazing without lines, my poor dragon looks ridiculous!

Also, here's my shading layer alone.

Looks kind of cool, actually...

Moonlost · **Posted:** Sat Feb 26, 2011 9:11 pm

LupisDarkmoon wrote:

I don't cross over the black lines much. xD Whereas Deathwing looks amazing without lines, my poor dragon looks ridiculous!

Also, here's my shading layer alone.

Looks kind of cool, actually...

Shading only Tallstriderwing!

Herp derp this is fun :B

Azunara · **Posted:** Sat Feb 26, 2011 9:57 pm

Mmm. It's either my style, or I'm not doing it right. Looks nothing like yours. I do like the spike highlights a bit, I suppose. Not all pixely and shiny, but sadly, it's pretty high up there on work that isn't too bad. Oh well. It's not too bad. I'll probably switch back to my old Azu, but this one is okayish for now.

WoW Petopia Community

How To Make a Moonlost Style Pixel Avatar!

Who is online