How To Start Spriting Monsters

[Stopsignal]

Hello, and welcome to Stopsignal's Small Spriting Seminar! Actually it's just an small guidance tutorial, i just liked the whole "Four S" thing. Anyways, i'm quite rambly, so from now on i'll try to keep it brief. (Future me: I actually kind of didn't. But i hope it helps anyways!)

 

Shameless self plug:

Spoiler

https://www.doomworld.com/forum/topic/110658-sprites-stopsignals-beastiary

 

I thought it would be good to make a small post showing my process of how i do my sprites, so at least people can get the courage to make new sprite sets entirely from scratch, or at least edit existing ones! It feels great. Specially finishing the set. If you are thinking of trying it, just do it! PREPARATION. The most important thing in my opinion is to have a cool idea. Something you are hyped about. That one monster, that one creature, that idea that can't get away from your mind. It's the best place to start. In any case, if the result ends up kinda floppy, you can just edit it again some time later, i do it all the time! In this case, the idea i have is a monster called The Red Monkey. Trying to brainstorm monsters to draw one day my eyes wandered around in my room and i looked at this paint bucket thing:

 

 

 

And that gave me an idea. Coupled with my love of pig noses and just general weirdness, i came up with this:



This is the red monkey. It didn't evolve much from there, thankfully. I'm quite used to falling in love with the first design i sketch, though i'm trying to move away from that. I thought of some variations, with guns, with crow feet, etc. But i just ended up liking the first design.

 

Let's not stop there, however. You need to draw him some more times, in different poses. Just go wild. Cartoonize it. Play with the creature. Go drink something then go back to the drawing, and check if you still like it. A good design will stick in your mind.
 

Spoiler

All of this is important. You are checking how much you have the design in your mind, you are realizing if there are any flaws on it by drawing it on different poses, you are checking if you can even replicate the drawing again. It can happen that you can't! Maybe the creature only works in 2D, like mickey mouse's ears. You can work that in or change it, but it's good to start spriting knowing that ahead of time.
 

 

STEPS AND THINGS TO KNOW BEFORE GOING ALL IN TO DRAW

First, i'm using Photoshop here. (DISCLAIMER: You can use whatever you want. Some people even use Paint. SLADE can crop out background colors, so it's fine. Whatever you are comfotable with! I do say, i recommend programs that you feel comfortable with and that have layers and stuff. If they have stuff to help you with animation, that's better. I feel photoshop has it all for me, so i stick with it.) Second, if you probably don't have it, download SLADE. It's a neat program used to mod Doom. For this we will mostly use it to grab fresh sprites right from Doom.wad to use as style reference.



 

Open Doom2.wad with it. In the red square you'll see the filter option. Here you can search for sprites and stuff! Some good sprites to extract as reference are the Imp (TROO), the Baron (BOSS) and obviously, Doomnguy (PLAY). In the other square you'll see how to extract the ref image. Just right click, export image, export as PNG.

You'll use this program later to add in the creature that we'll create in a wad. Also decorate. That's a bit of a different topic, but still ridiculously easy.

Drop all your reference images to a new image (make a new image, just in case, some editors get weird with palettes) in your program of choice.

Also remember that doom's monsters drop a few pixels under the terrain, so consider this when thinking of the size. Personally i dislike using Smart Sprite Adjustments and all of those because they break some animations, which is kinda sad but understandable.

 

First, draw the silhoutte of your monster. How you envision it.
This is really important:
-We need to get its size
-We need to get its normal pose
-We need to make a readable and easily identifiable shape and pose. Limbs separated if possible, make everything easy to see.

 

RAMBLE ABOUT STUFF TO LISTEN TO (skippable)

Spoiler

Do listen to something while drawing. Enjoy yourself! I'd absolutely recommend podcasts though, as you have to go to change the music every once in a while but with pocasts that doesn't really happen. And because i am a podcast freak, lemme recommend MBMBAM (wholesome goofs), Lets Drown Out (two dudes talking about games and having common sense) and Please Stop Talking (4 dudes sharing stupidly funny stories, i recommend the Aslan one) If music, lemme recommend Metric as it's the last thing i have been listening to. Combat Baby from them is Great. If not, listen to The Whalers, (my favorite band) or Black Keys (a really close second) OK SORRY LETS CONTINUE

I'll make the first pose i drew him on, more or less, so i'll go like this:

 

This is what i ended up with.

IMPORTANT NOTES
-It's REALLY important to have the different parts of the creature (head, torso, arms, etc) be easily identifiable with just a glance. I'm kind of in a pickly here with this creature having basically no neck, but i tried my best. Do all parts with different colors if possible. Having clashing colors in the same creature can help distinguish limbs apart (see the skin color compared to the fur) HOWEVER do not rely only on this.
Posing is important.
Shadows too.
-Usually you should start with the front or the side. Starting with the angle is, eh, complicating. I do like to do this one however because i get to see this guy's face earlier on (as it's an elongated, eyes on the sides face) and i like it that way.
Avoid this though! Making the diagonal side is way easier when you have the other two done.


PAINTING AND ALL THAT COMES WITH IT

Ok. Let's continue. It's time to start painting! This is the most daunting part, i know. It's ok, we are here together! I really don't think i am smart at all yet i can do this, so can you. Just takes a bit of practicing your aestethic sense.

Now. Important: Doom has a weird aestethic. Yes, they are sprites, but they are actually edited pictures. This is KEY as usually picture based sprites are more contrasted than normal, and don't have a common distribution of shading. The painting is more erratic and has no sense of being digital at all. It's weird.
So what do we do? Let's lay some ground rules:

-DO NOT USE THE BRUSH PLEASE. AT ALL. Brushes leave an uniform shading and you can't really control the colors at all. I mean, if you are good with this go ahead, but you'll lose control of your colors. You will have a harder time fixing the mistakes the brushes do than if you just place each pixel by hand, really! Talking from experience.

-You will do this wrong the first time. The shading of my characters usually evolves over the time i am drawing the sprite. Like at least five times per sprite. I even end up pillow shading a lot before i get to my senses (if you don't know what this is look it up, and AVOID IT LIKE THE PLAGUE). You'll probably need to take some time off the computer and come back to see your errors. It happens to me a lot!

-If you can, bind a key to flipping your canvas horizontally, and get used to pressing it constantly. Eyes aren't fair, usually your right eye is better than the left. By seeing the character flipped all the time you'll be able to fix errors you won't realize are there.

 

-Don't worry about what colors to use. What is important is to have the shading right. We can change the colors in any time in production. (When i finish the sprites i tend to make a dummy actor in decorate, add the rotations to it and summon other monsters just to compare if the coloring is correct and goes well with doom. IT'S ALL SUBJECTIVE, but important)

 

 

Now. I can't really teach you how to paint. But i'll give you some key points.

 

1-Usually you should paint everything without light or shadows like up there. Grab the pixel tool, choose the same color but brighter and add a new layer of light, or darker for shadows. If the contrast is too much, use 50% transparency to get the color inbetween the base and the new one, and so you'll have a new color to the palette.

 

 

2- BORDERS. Doom sprites have borders most of the time. They are really subtle and unnoticeable. They are most of the time the color that is adjacent to it, just a bit darker. Never brighter. Looks weird. Also if they are on a side with light, they are a bit lighter than usual, if dark, they are even darker.

 

 

 

3- ANTI ALIASING. I have a hard time explaining this as it's mostly perceptive. Basically try to soften your shapes with the palette you have. As much as possible. Also don't be shy with anti aliasing. A good test is to make the program resize the image to a ludicrous size, and give it a bilinear interpolation. The shapes should look smooth and she shading should look correct. Example:



I was too careful with the shading on the arm, and it does not look as good as a result. The shading on the shoulder is good, though!

4- ANTI ALIASING vs CONTRAST. Quite simple to grasp, kinda hard to do right. Basically, if you change from from dark to light or viceversa in not many pixels, then you are changing the shape, while if you are softening the light, then you are doing only one shape. I am really bad at explaining this! Let me show you instead:





In this you can see how the shapes of the face alone are aliased (well, as much as i could do with that few fixels) but the contrasts are the ones that actually make the shape of the face. I am so sorry about the horrible drawing though, my tablet's sensibility broke and i need to reset the PC to fix it and i'm not doing it.

5- Go BOLD. It might be hard, but sometimes you'll feel like you are getting stuck shading a part. Say fuck it, get a brighter/darker color, paint over most of the part that is bothering you, and try again. If you get stuck you won't get anywhere. Ditch that shading and start again, i swear, it's faster! Don't be afraid of moving parts around with the selection tool either. Try everything.

6- If in doubt, check the references. You'll never realize how sexy the back of the baron is until you see that sweet sweet shading. Oh man. Kidding aside, it's the best you can do. I am a firm advocate that aestethics are the most important thing of all, and if i'm doing sprites for Doom, i want them looking like they came straight out of Doom. It's hard, and i haven't reached that, but i try to get as close as i can each time! No 3D, no brushes, just straight pixel by pixel placing.

7-Have fun! If i remember anything more, i'll post here.


ENDING THOUGHTS (for now, still not finished)
 

Basically, just start. Seriously, that's the best advice i can give you.
It's fun, incredibly rewarding and you feel like you did something awesome at the end.
There will come a time after the inspiration wears off that it will be hard to continue, but just barrel through it, go on, because the end product is always exquisite. JUST FINISH IT. Then start another one. You'll be better and faster. And then another one. And so on.

I hope this inspires you and gets your creative juices flowing. Just start! If you have any doubts, ask me, i'm here. Sooner or later i'll continue this tutorial, as it's not finished: i want to add coloring and recoloring, and animating, which is the thing i love the most. I can even help with sounds and code!
We'll see. Maybe the tutorial becomes How To Make A New Doom Creature From Scratch, but for now it's this.

In any case you can check this video out: https://www.youtube.com/watch?v=O_hCjVVrwMY
It's me drawing an Abutor frame. Maybe you can see some more stuff i didn't say here, because, really, i don't think of all this stuff while drawing. With time you won't either, you'll just draw and this will come naturally.
It's just perception and willing to do something awesome!


One final treat: I'll leave you my first ever "doom style" sprite i made, just to compare:



I think we are going rather swimmingly, hahahah!
Don't do ultra dark contrasty sprites like me, hahahah
At least you can see that the process hasn't changed much. That was in 2014 i think. I was a wee lad! You can do better than me, so go and do it, hahahahah

 

<3

Edited January 27, 2020 by Stopsignal

[Rainne]

Great advice generally! I'll try the bilinear-zoom-in thing with my own work to see how it holds up; although if you're targeting vanilla, it'll only zoom in with nearest-neighbor anyway. But it still fits the general advice: changing your perspective can help you see your work better. Like flipping it horizontally, or changing colors, or just unfocusing your eyes so everything blends together.

[Stopsignal]

Thanks! Glad it helps!! I actually just make the image bigger in photoshop, that should do the trick. You can say that it'll always look pixellated anyways, but that's the magic of pixelart, the brain forms the image together even though you are only seeing squares. Looking at it blurred can help realizing small mistakes that you perceive yet can't really see! Though with time you won't even need to do that.

Another one is just zooming out! But that's better for sprites that are meant to be looked at from a bit more further away, while doom's really aren't, hahahah

[Stopsignal]

HOW TO ANIMATE IN PHOTOSHOP
*the technical side*

 

In this part i will write about Photoshop's Timeline function. It's a really small and neat window that let's us animate. It's quite finicky, but it's perfect for small scale pixelart, which is exactly what we'll do when animating on PS.
Please note i am using the CS6 version of Photoshop.
Please don't take this as an *animation* tutorial. It's mostly about how i use the tools in Photoshop.

 

This will be divided in three small parts: 1-What everything is, 2-(My) Workflow and tips, and 3-Extra tips

 

 

WHAT IS EVERYTHING
*it's just explaining the buttons. please read, however, it's got some essential info*

First of all we need to open the tab. It's located here:

 

It should open automatically at the bottom, which is the most comfortable place to put it anyways.
Now, what is this thing?

 

For now, we only have two buttons. Let's go over them.

1- The "Create *Frame* animation" button is the one you need to click to enable the timeline.
2- Click this if the "Create *Video* Timeline" appears instead. Here you'll be able to choose the first one.
What is the difference between video timeline and frame animation? Well, the former acts more like your standard video editor. It might be powerful (never used it myself) but the frame animation seems simpler and easier to understand, and it's the one i've been using for years. The other one seems more aimed at tweens and stuff, things we won't need.

 

 

Let's go over each one again!

1- This is your first frame. It's small and pure and beautiful. We shall go over what we can do to it a bit later.
2- How the animation will play out, if it will play Once, 3 times, or Forever. (Also of note- next to this button, to the left, is a button to convert this animation to video, and back again, it's important to note in case you click it accidentally)
3-Playback options! Sadly the backwards triangle won't play the animation backwards, it just goes back one frame.
4- "Tween" options. If you move a layer between two frames, you can press this button to make an small animation between the two, and tell it how many frames it will have and some other stuff. Never really used it.
5- New frame. Copies the selected frame (or frames) you have.
6- Deletes the selected frame(s)

 

Now this option box is accessed by pressing the ridiculously tiny button in the upper right corner of the animation tab. It has some handy hidden stuff. I've took the liberty to cross out what i never use.

 

7- If you are a madman and made the whole animation in different layers before even checking the animation tab, this will make an animation from them. Some tutorials around always teach you this way of doing animations. Please don't, it might be simpler, but it's definitely not easier. At all! As you will need to animate everything without being able to preview. Forget it even exists.
8. This is IMPORTANT. It will be checked by default, and you NEED to disable it. This will make it so any new layer you make will be visible in all frames. This, in my opinion, is what kills it for most people. It's really annoying, and you will realize why when you start using the program without it. SERIOUSLY, DISABLE THIS.

 

You can also change the time each frame is displayed by clicking the time there. A good reference for me is 0,2. It's the timing monsters more or less have when walking.

 

 

 

WORKFLOW AND TIPS
*how i personally work*

Now i need to explain something essential about how frames and layers interact with this. It's important.

A layer can be shown in multiple frames. However, you can change certain things. Some will only be changed in that specific frame, while others will be different across all.

 

What stays the same across all frames--
-The drawing itself.
-The position, if you change it with Transform (CTRL+T) or by selecting it and then moving it (only moving it won't change it across frames. This is because you are essentially editing the drawing when you select it and move it)
-If one layer is over another.

 

What does change between frames-
-The position, if you move it only with the Move tool.
-The opacity (annoying, this one)
-"Blend modes" and "mask options" (like color dodge and multiply and stuff like that)
-If it's hidden or not.

 

You can, however, choose multiple frames and use the Move tool. This will move the layer in all the selected frames by that amount. You can hide and unhide layers this way, too. You can't change the opacity or the blend modes this way, however.

 

Another important thing: Frame 1 has special qualities. Moving the frame here, or changing anything about it will affect ALL frames. This can be desired or not.
You can turn this off in the button under the opacity. "Propagate frame 1". However, this needs to be done *per layer*. If you are swamped with layers it's much easier to just create a new frame copying frame 1, then edit it, then erase frame 1. Done!

 

Now sorry for all the scattergun approach to explaining all of this, but it's important, as it explains small stuff you have to do when using this thing.

 

 

How i usually work is this (in really broad terms)

 

-Draw base sprite.

 

-start timeline, create new frame.

 

-Duplicate layer, hide the original layer. Remember, if you edit the first layer, even if it is another frame, it WILL edit the layer in all frames.

 

-Edit this one. I usually do a really shoddy job at first, as i want the animation to look right before really detailing the sprite.
Another thing i do sometimes is to use the fact that opacity doesn't translate between frames, and unhide the previous frame with opacity at like 30%. This is the poor man's Onion Skin.
(I think the program should have it but who knows, maybe newer photoshop versions actually do)
Of course i hide it when i'm done.
If animating i also abuse Transform in this on parts of the body, as again, it doesn't matter that it looks kinda bad for now, it just needs to be animated well.

 

-Repeat 1 and 2 until i have the animation. I use the Forever loop for walks, Once loop for deaths and stuff like that.

 

I'll end up with something like this.

Then i'll go over each frame and edit it until i think it looks good enough. I might copy and paste parts from the frame before it so it's easier to edit the shoddy frames.

 

 

You will then realize that i barely use the animation tab's features at all, hahahahah.
With duplicating frames i avoid needing to deal with the hassles of the interactions between frames and layers.
If you need a new frame, just make sure the "new layers visible in all frames" is disabled, then you are golden.
It's just that simple. New frame, duplicate layer, edit until done. If animation doesn't feel right, small edits until it does. Then polish. 
It's more of a tool to preview your frames and make it really easy to flip through them, and see the animations.

 

 

 

EXTRA TIPS

 

 

You'll note that if you try to save this, it will save as a PSD file. If you want to save it as a GIF, you need to go to File... Save For Web. There you go!

Make sure the "Forever" loop is selected, otherwise the GIF will stop when it reaches the end. To be honest, i didn't even know that was possible at first.

Want to save all images as single images, fast? I'm sure there is better ways to do this, but one i do is to select all frames, change their frame duration to 1 second, then go to Export... Render Video. There i make it so it renders the images with transparency, and give it 1 frame per second (get it?). It will then save all frames as images to the selected folder. That is absolutely not a "video" but still works!

 

Want an actual video? I think you can do it in newer Photoshop versions, but what i do is this:
First go to Image... Image Size. Make the size bigger, like 500 pixels wide at least. Choose the Nearest Neighbor scaling option. This is important if you don't want a blurry mess!
Save it, then open it in this wonderful free program (https://handbrake.fr/) that should be able to render it perfectly. I found better luck with this program rather than using online converters. More quality, faster. Program has a problem where it is quite slow to open, though, which is quite a hassle.

 

Have all the "history states" you can, if possible. Those are the amount of times you can press CTR Z before, well, you can't animore. To change the amount, go to 
Edit... Preferences... Performance (could be different in newer versions). In here, change History States. I use 120, i'm comfortable with that. 

 

Slow computer? Hey, i've been there. In Edit... Preferences... Performance, you can uncheck "Use Graphics Processor". This will make the program run quite faster if you have a sucky processor. It comes at a heavy, heavy cost, however: Scrubby Zoom. I just can't work without it :(
But it's nothing against, you know, having the program actually work and stuff.

 

 

Need a way to easily see the sprite from afar while working close to it? Window... Navigator. It looks awesome:

 

 

Need a way to see the center of the image at all times, like a helper guide? Go to Edit... Preferences... Guides, Grids, and Slices and edit the grid to have a gridline every 50%, and have 0 subdivisions. Or have 100% gridline and 2 subdivisions, whatever floats your boat.
Then activate them with View... Extras (or CTRL H), and also View... Show... Grid, if it's unchecked.

 

 

I don't have any other thing to say for now. Hope this helps!!!

[Stopsignal]

Taken from a reply in Spriting Carnival, thought i might as well post it here too!
Not really the continuation the first part of this tutorial deserves, but it's the one i can do for now, hahahaha

 

 

So, animating a walk in four frames is relatively easy once you get the hang of it. It's literally two poses, that then repeat for the other leg to give the illusion of movement.

first pose:

-both legs on the ground
-The body is overall lower height than normal. (lower than idle)
-Left leg is all the way to the front.
(just do the legs animation apart, and just then draw the arms, it's easier to separate them mentally otherwise you might get  tangled up, it happens to me if i hurry and do all at once)

-i just realized i never did a good sprite set with actual normal legs, so digitigrade we go. hope it still translates-

 

 

second pose:

-the frontward leg is now going back, but is still on the floor (it's pushing the whole body forward)
-important!!! the leg on the back lifts to let the front leg do the pushing work. It also prepares to touch the floor as to avoid making the creature fall on its face.
After all, walking is really just a controlled free fall, all time.
If you exaggerate the walk, both legs together should make a 4 if viewed form the side. I'm saying this so you have a reference!
-the body is overall taller height than normal. (taller than idle)

 

 

Now the arms. They kinda do the opposite thing. In the "middle frame" (second pose) they should be closer to the middle of the sides. In the first pose, they should be opposite to the legs. The arm that looks closer to the front is opposite to the front leg.

 

Now for the other two frames you do the opposite and you are golden!

 

 

 

most importantly have fun. Sounds lame as fuck, but hey, i have a blast doing this stuff. In slow days i at least force myself to do one frame a day, it's a good way to do work without even realizing it.