The Making Of: El Zombo
I often notice how few game styles I have in my portfolio. Even though it’s because I get the most satisfaction from building the art school-ish block shading of “Capcom vs SNK”, it also means all the techniques I share with people are only made for that one look. What about people who want to edit Mugen characters from other games, for instance? Can the Grayscale Index method that I normally use be adjusted for different styles?
Recently, I got a chance to find out. I was making a sprite for artist extraordinaire Dave Wilkins who requested his character in the ever-popular Marvel vs Capcom (a.k.a. Street Fighter Alpha) style. Challenges laid out, I put together some ideas and went to work using these steps:
STEP 1: Sketch (and references)
Taking the references for El Zombo and also some sprites to refresh my memory of Alpha/Marvel lighting intensity and direction, I sketched out a pose using my trusty Wacom Sapphire and Photoshop with a wide brush at 20% opacity (my favorite way of throwing down lines and then building up shadows), with an eraser at about 50%. This would be the initial artwork, but not the actual image that I’d sprite from, so I could go crazy with shading and pose experiments.
I used a Zangief sprite enlarged to 400% to approximate the size I wanted, so I knew I’d be able to shrink the art by 25% when I was done instead of trying to eyeball it. Once I got something that roughly fit within the proportions for a Marvel game (with the biggest upperbody and smallest legs that would fit the style), I had something solid I could trace for the sprite’s lines.
My initial sketch, at 100% size
STEP 2: Lines
Switching over to ArtRage Studio for my lines, the important thing is that they be not only as thin as possible, but also as sharp and dark as you can make them at the same time. The absolute ideal is to use thin vector lines, but Illustrator shuts my brain off. If you’re doing the lines right in Photoshop, GIMP, Paint.net, etc., draw them on an empty transparent layer. Otherwise, make sure you can import your lines into Photoshop without a background.
As always, make sure the lines are connected and no outline is broken. You need that so you can use the Magic Wand tool to select the space outside the sprite without the selection breaking through the outline and creeping into an inside area.
Once again, I was treating these lines as anchor points for when I shrunk the artwork. This means that small details like fingers and facial features have to be drawn as dirt-simple as humanly possible so that details won’t get smushed together and made incomprehensible when shrunk. In this case, the fingers are so comically large that there wasn’t much risk of that, but the belt details for instance were going to be touchy and the boot laces just needed placeholders.
STEP 3: Shading
This is where things change from working with a single dark and light layer to matching Alpha/Marvel’s multiple shading levels. So for a reference, here’s Adon:
Notice the five skin colors. This is pretty typical for the style. Notice that aside from very specific splashes of highlight, there’s one main color for light area and one for shadow, and then the rest of the colors are devoted to smoothing and fading lines. How to imitate this? First, on the layer with the lineart, use the Magic Wand tool (“Contiguous” checked, “Anti-aliased” checked, “Tolerance” to maybe 15 or 20) to select the space outside of the sprite. Then go to SELECT > INVERT SELECTION. You now have the area that the sprite takes up selected, so create a new blank transparent layer underneath the lines layer and fill the selection with a 50% gray, then De-Select. You’ve now filled in the sprite’s lines way faster than if you were gingerly doing it by hand with the brush tool.
Now create a layer between the gray fill and the lines, and while it’s selected, find the command for “Create Clipping Mask” (in the Layers panel pictured here, it’s found in the top-right dropdown menu that has those 4 small lines). This wonderful command will make the new middle layer’s contents stay within the contents of the gray layer beneath it, and in the layers panel, you’ll see that the layer indents to show that the clipping mask is in effect. Fill that whole layer with 70% gray. Voila, you’ve easily filled in the sprite with a light area without going outside the lines. Now we’re going to draw the shadows with the eraser tool. Pressure-sensitive Wacom tablets are supremely helpful here. This will also be a matter of your skill in imitating Alpha/Marvel linework — find good references and draw lines into the light areas with the Eraser tool that will compliment the lineart you already have, and then simultaneously erase out the shadow areas. Remember, like good theatrical lighting, this style gets darker the further away the body parts are from the camera, to emphasize dimension.
Next, it’s time to add in the highlight patches. Create a new layer above the light gray layer and make it a clipping mask also. This will simply be a quicker version of the light area you just did, requiring a few accents wherever you sense the style requires, and then adding in any needed linework with the eraser again.
Finally, to brighten the outlines in the light areas, duplicate the ‘white highlights’ layer and move that duplicated layer on top of the ‘traced lines’ layer. Turn the duplicated layer into a clipping mask and reduce the opacity to 50%. Now your outlines will be dark in the dark areas and light in the bright areas.
STEP 4: Shrink and Sharpen
Now it’s time to actually get things to the final size and see what we’re up against. Since I used the Zangief sprite to size it, I know I can just shrink it 25% (with a bicubic interpolation). Believe me, it’s much easier this way than trying to manually shrink artwork by eye.
At last, the moment of truth. Will the magical color-reduction sharpening trick I normally use work just as well for this style?
Well.. not horrible!
True, it’s not quite as effective as before, but the amount of work it takes to clean is still far less than if it were all done by hand. Clean up the details like fingers and outfit accessories (the skull on the belt, etc.), make sure the outlines are toned down so they’re not too thick and not too jagged (note how I smoothed and thinned out the curves of the undersides of his legs’ outlines), sharpen any possible angles to make details easier to read and to take advantage of the angular nature of pixels (the prime example is the lines for the quadriceps on his right leg, in the light), and adjust things like head tilt to make the mouth conform to a pixel-able direction (that’s an advanced topic for later discussion: planning a sprite’s pose and positioning ahead of time for pixel-able details).
STEP 5: Colors
Well the hard work’s pretty much done at this point. Now it’s just a matter of converting back to RGB mode, adding a layer on top of the sprite, making it a clipping mask, setting its blending mode to Multiply, choosing some light base colors and filling things in with the pencil tool. Again, the color choice doesn’t have to be perfect, just enough to separate the skin from the shirt, legs from boots, etc. Once your colors are filled in, merge the layers and adjust to your heart’s content with Photoshop adjustments. Your contrast will automatically be lovely. If you run into trouble while adjusting your colors, palette-stealing from another sprite with the colors you like is always a sure-fire fallback strategy that works perfectly well with this technique.
STEP 6: Final cleanup
With the colors in place, you may find some minor details suddenly look off. Face wrinkles, certain muscle lines and maybe some outlines may need to be adjusted with your new set of eyes. But at this point, it’s a matter of sitting back and going over the pixels at a leisurely pace. Don’t be in a hurry to post things. You never know what little thing you’ll find a day later.
El Zombo completed.. for now
Would this same technique work for the CPS3 shading style? And what would I have to alter from this technique to make it work for CPS3 style (specifically Street Fighter 3)?
This wouldn’t be as helpful there because SF3 lines and colors are so smeary in comparison to SFA that you can’t break it down into light, medium, dark. On the other hand, there might be a way to incorporate the Smear brush in Photoshop/GIMP to replicate how the colors blend and the lines fade. That would need some experimenting though. In the end, I don’t think the ‘start with grayscale’ trick would work with SF3. Probably any shortcut with colors that complex would involve having the colors painted on your art from the beginning, before shrinking it down, then doing the Index Mode trick.
In the third step, after you speak to create the “Clipping Mask”, you say to fill the whole layer with 70% gray. What’s this?! You mean 70% in opacity?! Because the only option of fill that I find is the 50% gray! And I’m using photoshop.
By 70% gray, that means gray set at 70% Brightness in the Photoshop/GIMP color selection. It doesn’t have to be exact, though.
Ok I got it, but now my problem is in add the highlight patches. I create a new layer and put it above the light gray layer and make it a clipping mask like you say but when a try to make a stroke with the eraser, nothing happens! Why?!
Before using the eraser, use a brush set to white. Add white onto the areas that get highlighted, and then after that is when you use the eraser to undo any white that covers up your lines too much.
Hello thanks for the tutorial,im wondering is this can be done also with gimp?
You can, but Gimp doesn’t have a clipping mask for layers, which means you’ll have to shade your artwork manually. The important thing is that Gimp does have Index Mode like Photoshop, so you can do the real time-saving trick of reducing the number of colors to make cleaning your sprite easy.
Ok thanks,i will try to do the tutorial.
Hello im getting stuck at the third part of the tutorial”shading”.When i fill the selection with a dark gray,that covers also my inside black lines,how i can avoid it?and how i De-Select?
Make sure your layers are in the right order: the lines should be on the top layer, and they should be on a transparent background. Make your selection on that layer, but fill your selection with gray on a new layer underneath that top layer. Because you’re working with Gimp, you’ll have to skip the parts where I talk about Clipping masks, and instead add all the lighting on that one gray layer. Then shrink.
Great tutorial. One sprite finished.
Now I’d like to create more sprites for animating my character- walk cycle, idle, jump, fall…
Can you maybe tell me what would be the best way to make animation sprites for this type of characters?
I don’t mind having to sketch every single sprite and go through this process if that would get me good results, but is there any faster method?
For major animations like walks and attacks, try sketching out the silhouettes of each with a thick transparent brush in photoshop. In other words, put down blobs instead of lines so that you can see the movement quicker without distracting your brain with anatomy rules and such. Then when you have a good motion at a good framerate, draw in the lines on new layers on top of the shapes. Your trial-and-error will go way quicker and the process will be less frustrating because you’re mentally doing fewer things at a time.
Thanks, I’ll give it a shot.
Otherwise I love how my sprites look so far. After bashing my head against the table for 2 weeks I finally got good results.
Lineart is giving problems most of the time, but I’m starting to learn how pixels form shapes, so it’s easier to do cleanups. But this method of shading and coloring with multiply option works realy well.
Like I said, this tutorial is great.
My sprites look like they were ripped from an actual game :)
OK, I’ve read 7 different pixel art tutorials now and they were all exactly the same.
“Use a one pixel brush to draw your outlines, bucket-fill your colors, dither painfully etc.”
Your tutorial was like a breath of fresh air; it makes pixel art so much more accessible to non-pixel artists.
In saying that, I think your sprites look great because they have a very strong drawing to begin with.
I actually started reading your pixel background tutorial and have clicked through your journey of different tutorials until I finally reached this one. Thank you for sharing your growth with us, I really appreciate the knowledge you’ve imparted.
..Well. That’ll be going straight onto the back cover of my book if I ever make one (I’ll cite your username and IP address). Times like this, I think about starting up a Facebook page.
But anyway, yeah, decent drawing really is needed for sprites larger than a certain size. The twist is that if you can’t draw, pixel-by-pixel gives you a fighting chance at making a good looking small sprite, which is probably why there’re so many of those tuts.
Hello, I’m working on a game and I want to have sprites similar to that of BlazBlue. Could you make a tutorial on how to achieve sprites of this quality, or do you think the above method would suffice if shading was used sparingly?
Actually I can do better: here’s a link that shows how BlazBlue sprites were done
Beautiful, thank you! One more question. As I said, I am working on a game, I am not a great pixel-pusher (yet). So, would you suggest I work on big BlazBlue-esque sprites or smaller StreetFighter-esque sprites. Thanks again :D
Perhaps surprisingly, I’d recommend using BlazBlue’s style if you’re not comfortable with pixels but need to get something out. Reason being that hi-res sprites require practically zero pixel tricks to look right. You’re just doing a straight conversion of a drawing. Street Fighter size would require certain tricks to look good like anti-aliasing a face correctly, etc. With hi-res, you can just trace over and all you have to worry about is a good drawing and animation.
I wrote a long post and iwas earased oh!! well
loving the web site and realy good styles you got there
actually im doing a home work for some time on getting a sprite as good as blazblue & KOF Xiii
your style im going to try
but i was thinking
did you try to use a 3d program to generate Animation & Grayscale Sprites with one shot
and then use potoshop to fix color and finalize?
Many thanks. You could definitely do 3D for a base (or even photographs/video), but the issue then is the lines. If you want an art style that uses outlines like blazblue, etc., then you’re probably going to need to do some tracing in addition to that unless the 3D program has a way of outlining things. Still, aside from that one part, I can’t think of a reason that this would go any differently by making a 3D character at 400% size, shading it, grayscale coloring it and then shrinking it.
“Giving pixel art unlimited lives by handing people cheat codes.” What an awesome and generous motto!
I just want to say thanks as well for being an AWESOME artist! Your tutorials are helping me build up my visual vocabulary. I have one quick question. What do you think is the optimal scale for a 2D Arcade “brawler” ?
I’m currently using 48 x 48 just to speed up the animation process and find it constricting even though I’m using a toony style with roughly 2:1 head to body ration. Would 80 x 80 be a nice in between scale? Cheers!
Many thanks, and in my personal opinion I think that with character sizes, that and everything else has to conform to an overall style that you choose. In other words, you have to be an actual Art Director. Since technical limitations are rare today, the deciding factors can now rely mostly on what kind of 1) emotion and 2) experience you want the viewer to come away with from the 1) story and 2) visuals/gameplay. So do you want a whimsical story told with cartoony visuals and comical physics (which would mean smaller, “Adventure Island” type sprites) or a deep serious story told with gritty desaturated visuals, etc. (which would suggest more realistically proportioned sprites)?
So let’s say you’re going with the cartoony ‘SD head’ style: how far away is the camera? What angle? Does the ground take up a lot of screen space? Will there be a lot of action happening where a smaller character could get lost easily? Will there be lots of elements on the screen with lots of colors or will it be more clear and simple? Things like that will help you decide what’s best for your players. More stuff happening on screen means a bigger sprite would be more clear, etc.
But if you’re truly in doubt and just want a choice that’ll be more right than wrong, I think in general it’s best to go as small as you comfortably can, and use reasonable restrictions (color count, number of pixels for a face) to help keep your work on a clear and reliable path. Keep in mind that since you’re working with squares, if you double the size of a sprite, you’re not doubling your work, you’re quadrupling it.
Your tutorial is incredibly useful and practical. I’ve been spriting for years as a hobbyist, not trained, and struggled with Paint for the majority of that time. I’m a solo video game developer and your tutorial alone has given me the edge I need to produce the results I have ALWAYS wanted, but never could get. I’m shocked by your generosity in sharing what seems to be an industry trade secret (at least, for those others who need this type of shortcut like me). Incredible. I can’t thank you enough.
If it weren’t for the internet, I’d ask if I could have that in writing..
Anyway, yes, I’m all for getting out all the secrets I can about pixeling since my big goal is for, well, 2D to never die. Best way to keep such a niche style going is to bring more people in by making it simple and understandable. In short, giving pixel art unlimited lives by handing people cheat codes.
I’m just thinking: if the light source is from the top left, shouldn’t the left arm (our left) have a shadow cast onto his body?
Quite true, but that brings up a good point: cast shadows are rarely seen in Alpha/Marvel style. They’re also not seen too often in cartoons either, and consider why that could be. One issue is that it adds complexity to the simplified shapes of light on the body, but the main problem is that it adds complexity to the animation itself (keeping track of and animating shadows is not easy). Ultimately, the most important factor is that you can visually get away with leaving it out and thus safely save a group of artists extra work.
Wow! I fucking love how you do your sprites! Amazing as always, Kiwi! :D