Also, I have been up for a reeaally long time, and it seems that the preview function is randomly deciding that HTML doesn't count in places, so I may have to fix basic formatting tomorrow, so please gimme a break until then. Thankya!
Skim if you must:
MS Paint Tutorial
This is a walk-through of creating a game sprite using only MSPaint and the internets
Researching the Design
The first step in drawing something is finding out what the thing actually looks like. It may sound kind of silly, after all, you know exactly what a smokestack looks like, or a space fighter, etc. The reality is that the way human memory works is actually pretty fuzzy in it's storage, and if you try to draw something from memory it's likely to come out misshapen, and even worse, unrecognizable. Have you ever tried to draw an X-wing or Tie-Fighter when you were a kid and it never came out right? It's like that. And don't do that.
The best tool for researching subjects is Google's Image search, it lets you just type in whatever you're looking to make, although you may have to think of alternate names to get exactly what you want, by either being more or less specific. For me, that would mean searching for "factory" or a specific location/company, like "Asarco"(A smelting company) instead of just "smokestack."
I'm looking for a generic industrial smokestack, and the search results for it aren't super-duper helpful, at least it appears so. The first Google results page, at least at the time of writing, concentrates on the "smoke" in "smokestack", so I just went to the second page, hoping for more relevant and larger pictures. Generally, the higher res, the better, but sometimes you have to make due with a small picture that has just what you want. On the second page I find this guy:
Link
It's pretty good for the overall shape, but it's kind of simple, and I seem to remember there being other smokestacks with more interesting, um, exhausts. If something is too simply shaped, by which I refer to both the overall shape and internal detail, then the sprite will look boring (over-complexity has its own problems, which I will also cover), unless you can pull off some fancy tricks with texturing and shading. Those fancy tricks can save the day, but they are difficult to do, and it is best to keep that in mind. So with that image in mind (I often save reference pictures into a folder somewhere). The result pages further on just get less helpful, so I go back to the beginning. Ok, remember what I said about having to use thumbnails if the subject is really good? Well, it actually applies; look what I found in looking back on the first page(now it's gone, but I have a copy), a good idea if you can't find anything going through later result pages:
It has a good, sooty top, that conveys 'industrial' , so along with the first picture, it will serve as a model.Drawing the Basics
Now we get down to the actual MS-Painting (Ha! Get it?). Anyway, the first thing you should do is figure out the size you want, which is most often already decided for you by the engine you're using. In the case of the smokestack, it's going to be a destructible entity split up into three 64 by 64 tiles stacked vertically for Angels 22. That means it's 192 pixels tall and 64 wide before it's split it up, so I just Ctrl-E'd to get the 'Attributes' screen and punched in the numbers. That's probably one of the first of the many shortcuts you should get used to using.
When I layed out the basic shape, I used the line tool, as I'm dealing mostly with straight or mostly-straight lines. Mirroring part of the image depends on if what you're doing is symmetrical, but if it is, you should be mirroring often in this stage, trying to get things to come out right. After mirroring the better side using Copy+Paste+Flip-Horizontal(or Ctrl-C then Ctrl-V then Ctrl-R and select Flip horizontal), I come up with this in a couple minutes:
Now, it isn't quite shaped right, which I could easily tell by using Ctrl-F to back away and see how it's looking overall, something that is hard to do while zoomed in. Ctrl-F is one of the most used shortcuts because backing away from the subject is very important; it allows you to see things you missed while zoomed in and see how it is coming together overall. I generally work in 8x because my monitor resolution is pretty high.
I continued working on the tower, revising it, which will happen a lot in these first steps unless you get exactly what you want on the first try. This means looking more closely at the examples, fixing things and using the mirroring technique, and adding more detail. Here we go:
You can see where I added more detail, although it is important to note that I left a lot of blank space for some of those horizontal ridges that I will put in a later step, as this one in mainly to establish the basic shape. I also added a wider base, which is important because in our game, it will be connected to various factory structures, so it needs some random space-consuming shapes down there.
This would be a good time to discuss outlines. Black is the common choice, but it is often not the best. Black is most useful for the outside lines, to give the sprite a distinct shape when in the game, but often a much darker version of the inside color will do just as well. Lines on the inside should be a darker version of the color they are on, which you'll as I get futher on.
Color
It's time to start thinking about color, which is already sort of decided for me by the color of the factory this guy is going to be connected to. It's going to be a grey-ish red-brown. To select a color, I double-click on the grey in the color pallete (you can use any of the colors there to start, but I usually pick the one closest to what I want), and move my cursor in the rainbow-looking sub-window to the area where yellow and red meet near the bottom. Moving towards the bottom is important, because using an over-saturated (too colorful) color will make the sprite stand out too much, not to mention look just plain ugly. Generally, you want to save the bright, saturated colors for the HUD or for things the player has to pay attention to (like the way bright street signs are used in real life). Using the default colors is a bad idea. Don't do it.
Using one color is obviously pretty drab, so I created a darker gray using the slider in the color selection window in paint. Here is what that paint window looks like:
After being colored up, using the Paintbucket/Fill tool, the smokestack looks like this:
Shading
Here is where things get more complicated: shading. Shading is extremely important, about as important as color is. It is what gives the sense of more dimensions than are actually there. Choosing a light source and shading for 2D sprites is actually easier than for most other art, generally you can get away with picking a general direction for where the light is coming from(like top-left). So then if the light is coming from the top-left, the top-left of the sprite will be lighter, while the lower-right will be darker. Easy as Pi.
The light source for the Smokestack will be pretty simple, just the left, but things are a little more complex as it is a cylinder. To make it look 3D, it's actually going to start on the left being darker, get lighter, then get really dark on the right. It's tempting just make the brightest part in the middle, going less and less dark from the outline, but that is a big Don't. Don't ever. That is what is know as Pillow Shading, and it is known for being both a beginner mistake and for looking terrible.
To actually shade something in Paint, your best friend is the Eraser tool, suprisingly enough. To make part of an area of plain color a different shade or color, you can use the Eraser tool's secondary function; the Color-Replacer. To use this, use the Eyedropper tool to 'grab' the color of whatever you're trying to modify so it's the foreground color, and place whatever color you are trying to replace that one with in the background color slot and use the eraser while right-clicking. For Senor Smokestack, I would get the inner brown color(it should also be in the color pallet still), and put a darker shade, obtained by using the color pallete's lightness bar, in the background color slot and Right-Click-Erase what I want changed, like so:
Perfectly straight lines aren't necessary, you'll see soon.
Going further:
Here I added more shades, and you can see the dark-light-darker gradient I was talking about.
Things from here get more interesting; instead of just adding more shades in the gradient to make it smoother, you should start dithering additional shades. 'Dithering,' in this sense refers to messing up the shading to make it look rough. A plain gradient on the smokestack would simply be a straight line for each different shade, but if you start breaking up the lines with adjacent colors, the effect is much more pleasing to the eye. Look at the lower center section of the smokestack where I did this:
On this step, you can see how the bottom I haven't touched, and from the top you can see how the technique gets more complex the further down until the base. The next step in dithering is this:
As you can see, all of the smokestack is dithered to some degree, which I will build upon in the next step, where I add weathering.
Weathering
"Weathering" is not an entirely accurate term, but the gist is that for something to look natural, it needs to look worn, like it really has been sitting outside since 1987. For most man made things this means rust and making them look like they haven't been washed, ever. A good place for looking at weathering techniques is the world of scale modeling; this post, which is on a site for model trains, in a forum dedicated to weathering, is a good example of the difference in realism in before and after.
Weathering is a step that occurs concurrently with the dithering for me, but for the sake of simplicity I've split it up for the smokestack. For the weathering, you should concentrate on adding the actual effects to where there is a major change in the structure of what you're trying to draw, since that's where it tends to happen in real life. The effects shouldn't be too different from the base color, so rust, for example, would be pretty gray on a dark gray surface rather than a bright rust-orange. Pretend that you're working on a picture, but for every square 10cm, you have to average all the color in that area together. When applied, the smokestack with weathering looks like this:
The difference is pretty subtle here, but if it was supposed to be delapidated instead of functional, then it would be much more extreme.
Accessorizing
The next step is another one that usually happens together with the late stages of dithering, along with weathering. This step is basically to add little things that add more realism. This basically includes things that indicated human interaction, like signs and railings. An example of the absence of this is things that are supposed to be really huge don't really give the impression of being that large, because there is no human reference for you to look at. Little things like trash cans can also dress up rather boring spaces in things, the bottom of my smokestack being a prime example:
Of course this is very easy to overdo, but I'll take care of that later, I have an even greater addition to the tower: letters! I can't really explain it, but putting numbers or letters on man-made things really makes them feel less inanimate. In Paint, there is a text tool, but it has a bug when using colors close to pure black and pure white, where it anti-aliases blue and red around the letters. To use the Text Tool, all you really need to know is that you can set the transparency of the background, and that sometimes the text toolbar doesn't show (Just right-click the text area with the Text Tool and enable it). For the smokestack, I opted to do the letters by hand, and anti-alias them by hand while weathering them. I used Ctrl+drag to copy the section to use, in case I made some major mistakes:
To finish up, I just made a few little improvements, stuff that occurred to me while I was working, which will happen; don't be afraid to modify your design mid-course. Here is the finished smokestack:
Fin
...maybe.
Don't forget to gimme some feedback, even if you just skim1
Goodnight!
I'm gonna try the moment I get home, AWESOME WORK!