TK Game Boy
26

Author
TK Game Boy

Published
May 2nd, 2006

Read 9,196 times
25 comments have been written
4 people liked this

MS Paint Can Be Your Friend Too

Written by TK Game Boy

Discussion regarding the creation of graphics in the simplest of tools - MS Paint.

MS Paint can be your friend too
MS Paint tutorial by TKGB

[0.1] Intro

I use MS Paint because it's the only paint program I have available to me and I don't like to draw by hand. I find plenty of enjoyment from using this program. After trying GIMP and GraphicsGale, I can honestly say that I love MS Paint even more cuz it's easy to get around and you don't have to be a genius to know how it works. I believe this yet there are some people out there who think that you need to buy PSP or get the full version of GraphicsGale to draw amazing stuff. Yes they are very useful to add effects but when it comes to pixel art, MS Paint's bitmap is all you really need. You got everything you need in MS Paint to make sprites and anything else you want to make a console style game.

I'm writting this tutorial for people who do not have access to other paint programs or find it too dang hard. This tutorial is also to newbies who don't want to use rip tilesets but want to make great graphics. Though I'm not a real pixel artist. I've heard people say to me how great my pixel work is but that doesn't make me a pixel artist...or does it? I dunno. I prefer to program over drawing. I only pixel art because no one else is gonna do it for me and I dont want to have my games look like the little star I posted on the top of this page. ;)

[1.1] The Program



Even the first timers know what to do when they open up the program. All the tools aren't really hard to understand. But just in case someone doesn't know what they see, let me introduce the tools along with some other features you may not know about.

[1.2] Tools and their uses



As you can see, MS Paint comes with 16 tools. I will go over them.

Free-Form SelectThink of this as a pair of scissors. You can select an area, cut it, invert the coloring, ect. It's great to use when you want to get rid of a particular area. You can also select a background color to be transparent so you can overlap it to other places.
SelectJust like the first one only this one only allows you to select things within the range of a rectangle.
Eraser/Color EraserRemoves pixels on the bitmap and replaces it with a background color. You may also erase only one particular color by selecting the color you want to erase on the first mouse button, the color you want to replace it with on the second mouse button, and holding on to the second mouse button while erasing.
Fill with ColorFills an area with a certain color. As long as a pixel is of the same color and does not touch another pixel of the same color, the area will be filled.
Pick ColorSelects a color from the bitmap. Perfect for getting colors that aren't in the pallete.
MagnifierZooms in for a closer look.
PencilDraws a line in free-form one pixel wide.
BrushWoks like the pencil tool except you may choose how many pixels you want to draw at the same time and what shape.
AirbrushRandomly sprays a bunch of pixels on the bitmap depending on 3 ranges.
TextDraws text on the bitmap.
LineMy favorite tool to use. Draws a line in one of 5 thicknesses.
CurveWorks just like line except you can have up to 2 curves.
RectangleDraws a rectangle on the bitmap in one of 3 options: outline, framed, and solid.
PlygonDraws a free-form shape in the same one of 3 options shown above.
EllipseSame as rectangle only it forms a round object instead of rectangular.
Rounded RectangleSame as reactangle only it's rounded.


[1.3] Other tools

On the menu on top, there are 6 drop down menus. Some with other tools you can use.

Custom ZoomView>Zoom>Custom...Opens up the custom zoom window. No different from the magnifier tool but you can select 4x zoom, which is not available in the toolbox.
View BitmapView>View BitmapViews the bitmap on full screen. NOTE: It only shows the area shown on your screen. It does not resize the bitmap.
Flip and RotateImage>Flip/RotateDisplays the Flip and Rotate window. In here, you can edit the image (or selected part of an image) 3 ways: 1.) You can flip it horizontally. 2.) You can flip it vertically. 3.) You can rotate it from one of 3 degrees.
Stretch and SkewImage>Stretch/SkewDisplays the Stretch and Skew window where you can stretch and skew the bitmap by adding values to it.
InvertImage>Invert ColorsInverts the image by contrasting the colors of the entire bitmap, like a negative of a photo before being developed.
AttributesImage>AttributesDisplays the attributes which include the last time the file was saved, the size of the file, the size of the bitmap which can be changed from here, the unit of measurement which you can choose between inches, centementers, or pixels (in this case, pixels will be fine), if it's black and white or color, and which color is transparent. Clicking on Default will set the bitmap to it's default dimensions: 400x300.
OpaqueImage>Draw OpaqueCheck/uncheck if you wish to make an area you selected with transparent or not. You can also do this straight from the toolbox underneat in the little window with the shapes on it.
Color EditColors>Edit Colors...Changes the current color of the first color on the palette to one you desire.


[1.4] Shortcut keys

Though you may already know them, I think its a good idea to post them anyways.
  • CTRL+A = Selects the entire bitmap.
  • CTRL+C = Copies a selected area.
  • CTRL+E = Pops out the Attributes window.
  • CTRL+F = Displays the bitmap full screen.
  • CTRL+G = Shows a grid. Only works if you are up to 4x zoom.
  • CTRL+I = Inverts the colors.
  • CTRL+L = Turns the color palette on or off.
  • CTRL+N = Makes a new bitmap.
  • CTRL+O = Opens a new bitmap.
  • CTRL+P = Prints a bitmap on paper. Make sure you have a printer. ;)
  • CTRL+R = Pops out the Flip and Rotate window.
  • CTRL+S = Saves a bitmap.
  • CTRL+T = Turns the toolbox on or off.
  • CTRL+V = Pastes a selected area.
  • CTRL+W = Pops out the Stretch and Skew window.
  • CTRL+X = Cuts a selected area.
  • CTRL+Y = Reverts to the privous state. Only works when you undid something. NOTE: If your using an old model, the key is F4, not CTRL+Y.
  • CTRL+Z = Undo. This will be very useful.
  • CTRL+PgUp = Zooms out the bitmap to normal size. Useful if you want to zoom out quickly.
  • CTRL+PgDwn = Zooms in 4x.
  • CTRL+SHIFT+N = Clears the screen.
  • DEL = Delete a selected area.


  • [1.5] Some cool info

    Here are some tricks you probably didn't knew about.
  • Holding down the SHIFT key, you can:
  • make a perfect shape with the Rectangle, Ellipse, Polygon, and Rounded Rectangle tools.
  • make a perfectly straight line with the Line, Pencil, and curve tool. Though with the Curve tool, you cannot make perfect curves. With the Pencil tool, you can only make the straight line in one direction only and cannot retract it.
  • make a custom brush by selecting an area and drag the mouse while holding down SHIFT. For better performance, do not draw it opaque so it can be transparent.
  • Holding down the CTRL key, you can:
  • have a third color in the pallete. You must hold down CTRL at all times to have this third color, including when you are holding down the SHIFT key. The third color will be displayed on the background in the small window displaying your selected 2 colors. Does not work with the Polygon tool.
  • Though not shown on the toolbox or the Custom Zoom window, you can zoom in 10x by clicking on the white line underneath 8x (this was probably gonna be in MS Paint because there is an empty space on the Custom Zoom window where 10x should of been). This is very useful when you want to get in just a bit closer.
  • If you do the same thing with the Brush tool, you will not have a brush at all. This feature is useless so it's safe to assume it's a glitch, which I find odd they didn't fix.
  • You can resize the canvas by dragging the small squares on the bottom and right side of the bitmap. This is assumed already but my sister didn't knew about that so someone probably didn't either.
  • I don't know if it's true, but there is a way to use Insert to paste, I just can't remember how I did it.
  • Double click on a color on the pallete to pop out the Edit Colors window. This way, you can change the color of a desired color instead of just the first one.
  • You can drag out the Toolbox and Pallete by clicking on the edge. When the entire Toolbox or Palette has a black outline, drag it out and it becomes a window. To revert it back to the wall, simply drag it back in. Hold down SHIFT if you want to put it near the end of the window without making it into a wall. This is perfect having more spaces to see.
  • [2.1] Pixels

    Now that I have explained the program, I will now talk about pixels. Though I'm not a genius on it, I'll try to do the best.

    According to wikipedia.org (http://en.wikipedia.org/wiki/Pixel), a pixel is a tiny dot that the computer uses to make images. A pixel is of different shapes depending on what kind of program you see. For example, the NES and the Atari systems both have pixels but look at the pixels of the Atari and compare that to the ones of the NES. Very different.

    [2.2] Figures

    To make a figure on a bitmap, you'll need to be close up and dot it dot by dot. Though you can make the job easier by using tools like the Line tool and the Fill. It takes some practice to get things right. One pixel can ruin an entire piece belive it or not. If one pixel is off, the illusion is ruined.

    Let's look at an example:



    The char shown should be obvious of who he is, and with great skills of pixel art, you can easily tell. He looks pretty impresive and complex but zoom in and you'll see that it's all simply made:



    Will you look at that. His blue colbat skin is nothing more than 4 shades and it gives a great illusion of shadow. It looks so complex yet simple to pull off. Look at Sonic's belly. It's nothing more than 2 shades but it looks like 3 in it's normal size. Incredible.

    Now let's look at something more simpler:



    Why it's characters from my sprite comic TK Rants. Let's zoom in:



    Nothing but black pixels on a white background yet they show little signs of it. It gives an illusion of actually being a person instead of a bunch of blocks but once we zoom, the illusion is gone and you can tell it's pixelated and it becomes distracting. To create a char this way is not hard at all and it's quiet simple since it's all just pixelated. I'll show you how I create a characters with MS Paint and see how simple it is:

    Here I start with the eye wich is nothing more than a 6x5 square with one side hugging the other to make the illusion of a pupil. Xavier is only there for reference on the size. I always use Xavier to compare size with my next char.
    The nose is added next. The nose is only 3 pixels with the middle one forward of the other two. This is one of the many noses I use.
    The chin is next. I added a 3 pixel long line to represent the mouth. Usually you will see the mouth only 1 pixel long. I usually do that to show shock. In this case, the char is neutral so I made it 3 pixels long. The char also has a neck. It's 3 pixels long but it looks a bit too long. Xavier's neck is only 2 pixels long and it looks fine. Just goes to show you how much damage a pixel can do.
    Now I gave the char hair. Look closely and you'll see that it's kinda pointy. Zoom in and you'll see on both sides of the head, there is a pixel that is clumping together. If we remove them, the hair will look alot smoother.
    I got rid of the clump on the head and now it looks alot nicer. I now added an arm and the sleeve of his shirt. The arm has my trademark blocky hand. It's very difficult to do fingers with pixel art and the way to compesate for this is to use different shades of color to make the illusion of fingers. Look at Sonic's hand on the previous example (the one thats shadowed). It looks like he has fingers doesn't it? Well look at it zoomed in and it's nothing more than two shades of grey working together to make the illusion of fingers. I could do that with TK Rants but I don't wanna.
    I just made the shirt. It's nothing more than a long 15 pixel long line on the front, 4 pixel long on the bottom, and 3 pixels arranged as an arc for the shoulder.
    The pants can easily be made with just a rectangle and erasing the pixels that overlap the arm. Though I use the line tool for everything.
    Finally, we finish off with the shoes. The shoes are 2 pixels tall and that's what I usely use. It's nothing fancy. Just a flat rear and a small stepping design for the front. I usually to always leave the bottom empty. I usually add a bottom to it when I'm re-using the character.


    With the use of pixels, I have now made a char that started out as, well, nothing but an eye.

    [2.3] Color

    What is more harder than pixeling? Adding colors. Coloring is just as easy yet complex like pixeling a black and white figure.



    The coloring in this pic is not the quality of the Sonic sprite but it's pretty good. There is illusion of shadow and highlight.



    Now you can tell the quality is definetly not like the Sonic sprite. For Blue's hair, I only used one color for the hair and added white for highlight to give the illusion that her hair is shiney. sephy too only has one color but on his clothes. The color purple is accomponied by a darker purple to make shadow. Only two shades are used but are used greatly.

    This is good but let's look at an example with more colors.



    Now that's incredible pixeling right there. If you've never seen the char, that's Millian Rage from Guilty Gear series. Look at all that coloring. It looks like the artist used lots of colors. But look again.



    Upon closer inspection, you can see that there is little shades of colors used. Like 3 or 4. Look at her arm in the regular sized image. Looks like she has a shadow on it. Look at it close up and you can see that it's mostly plain dark gray. One of the most impressive pieces though is the hair. You can see that it looks plain yet incredibly smooth. Upon closer inspection, you can see it's nothing more than 5 shades of coloring.

    So you're probably wondering (if not, then now you are :]) if it's possible to do this with MS Paint? Try this. Copy the image and paste it into MS Paint. Do all the colors show? If so, then of course it can. :P

    Alright, alright, I didn't do that to be mean. Let me show you something. Save the image as a 16 color bitmap by going to Save As.



    Will you look at that? You've reduced the piece to 16 colors and it still looks magnificent with little to no loss of quality. I show you this to prove something. Just like the TK Rant that was shown in color, you don't need 5 shades of colors to produce something excellent. Amazing work can be done with 1 or 2 shades only.

    [2.4] Dithering

    Dithering is the use of two colors to make a shade, or something. Ahh...look at this example:



    That's dithering. If you look closely:



    Two colors are crossed together to make a shade. Why use this? To blend in colors. It was used in the old days to make a new color when you only had a choice of a few. It gave the illusion of a new shade when it was really two colors mixed together.Consider this:



    Another beutiful display of pixel goodness. Look at the center where the red box is at. Looks pretty clear don't it, but zoom in and...:



    Looky now. Dithering is used. In fact, it's all over the sky. It makes it very smooth. If dithering were removed, it would look like this:



    Not as impressive. You can tell when one color ends and another begins. How about using gradients? Can that replace dithering? Yes you can, if you want something like this:



    It looks nice but it isn't really pixel art now is it? Besides, it looks like a ceiling.

    [2.5] Anti-Aliasing

    AA is the process of smoothing images by using different shades of pixels around a surrounding area.



    The image is not hard to understand. It's a face, but it's really blocky. There is no smoothness unless you see it from afar. Even at this view from your moniter, you can tell it's blocky.



    Now that is alot better. The pic is a bit blocky but very smoother than the original. Let's zoom in.



    As you can see, there are gray pixels and darkner shaded pixels that surround the pixels to give it a smoother look. Looking afar, it gives the impression that the figure is naturally smoother.

    You probably can tell right now that this was generated by a program, or even by shrinking it with MS Paint since it now has that ability. To do it without it is a really hard process but evedentally it's better looking. Like making bread. Some bread taste better home made by hand kneading than having a machine do it. Dithering by pixel is way better looking than machine generated. Let's take another example from another Guilty Gear sprite:



    Here we have Ky, looking cool as ever. Look at the blade of the sword closely:



    It has AA going on to make it look straight. Remove it and it looks like this:



    The one on the left is the edited one

    Doesn't look different does it. Well compare it with a different background.



    It looks a bit too jagged while the original is alot smoother. The original still looks a bit jagged though. That is because we only use a little bit of AA. Unlike the computer generaated one I used for the face, this one doesn't have true smoothness, but as a plus, it looks alot better plus it can go to any other area without having pixels standing out. What I mean is this:



    While computer generated AA is good, it only does it for one source. We changed the background to green but there are white pixels standing out. Computer generated AA are good for making cutscenes and what not but for sprites, it's best to zoom in and do it yourself.

    [3.1] Doing pixel art with MS Paint

    Alright, enough briefs (hehehe, I said briefs) about about pixel art commons. Time to do some stuff. Like I explained earlier, I'm no true pixel artist but a person can dream, can't he? Pixel art is the same as other forms of art. The main goal is to make an image a person recognizes easily. To do it by paint is not hard, even though it looks like it. With nifty programs like PSP and GIMP, you may have the impression that doing pixel art is an extremly hard process to do it with MS Paint cuz these programs have the nifty tools and gizmos. Well don't be fooled. Just because something is new and shiney, doesn't mean it will do it for you. PSP, GraphicsGale, GIMP; they're all about editing programs by altering the pixels so you're not getting true pixel art. When you use the bleed tool, the blur tool, and that tool that makes it look soggy, you are adding pixels to make it look like the effect you want. Frankly, it ends up being a JPEG format. Well even if you ignore all I just say, you still gotta pixel the piece in. You could do it on paper, scan it, color it and have instant sprites, but whose gonna do that. I think Khin did that, I dunno.

    Well it starting to sound like I'm bashing all the programs I mentioned. Well I don't mean to. They are good programs but I hate it when people say "get PSP or GraphicsGale". Why should you? MS Paint is still good. I only use a graphics program to check for animations and do minor edits, and I use Game Maker's built in image editor for that. Okay, I'm done ranting. On with the lesson. I'm gonna teach you how to make a sprite on bitmap.

    NOTE: The following method is not a true or refered method but one I took from many other tutorials. Also, this will not teach you how to draw figures but only how to pixel them with MS Paint. If you want to draw figures (people, animals, buildings, etc.), you must consult other tutorials around the net.

    [3.2] Making a small sprite

    You first set your dimensions to the size of the sprite you want. Let's make 32x64 sprite, just like the old days. Press CTRL+E and set the dimensions to 32 height and 64 width. After that, we increase the size to 400 times bigger. We do it 400 times only because we can easily revert it back by decreasing it to 25% later on. It will be alot harder to do it with a bigger number. So after you set the dimensions, press CTRL+W and increase the width and height to 400%. Next is the actual outlining.



    You don't like my design? Well I haven't pixeled 32x64 sprites for 2 years or something.

    Firstly I used a light green line. I usually use yellow but I use green this time so you can see what I'm doing. We use a light color to contrast against the line we'll use when we pixelate it later. Also during this state, you can edit the image however you wish. If you feel that it needs to shrink, go ahead and do it. You can add stuff or remove stuff. After all, this is just a rough sketch...ehh, sort of speak. Lastly, I used very thick lines. Since shrinking causes loss of pixels, you'll need to have alot of pixels so the shape can still be current when you shrink it though don't make them too thick or it all might bunch up.

    Next we shrink the image by 25%. Press CTRL+W and shrink it to 25%:



    Some of the pixels have disapeared but we still got the overall shape. Now we zoom in and outline it. How we do this is get a different color like blue or green (do not use black, you might get too comfortable with it) and redraw the pic with the Pencil tool or Line tool, which I like to use. When you have outlined the pic, grab the eraser. Make your first color white (the background), and your second color green (the outline). Second-button click the mouse, hold it, and erase the picture. Only the green should disapear.



    If you notice, some of the details have been changed, like the helmet has been longated a bit. This is because it looked uneven when I was following the outline. You gotta look and see what fits and what doesn't because some of the pixels have been lost and therefore you can't have a perfectly resized pic by following them. Just look at the shrunken outline. Look at the sprites right arm. It looks a bit skinnier than the other don't it? That's why I had to use the other arm as reference.

    Now it's time to add colors.



    This is just filling the sprite with color. You can use the Fill tool to finish off quickly. We then add shading.



    I used the colors from the pallete for the filling but for the shadings, I needed to select darker colors of each. With that, I double clicked on a color and selected a darker tone of it. I'll be blunt, I dont plan for the darkness. I just wing it. Though some ppl like to make custom palletes by getting the color and placing a single pixel in a blank space and adding another pixel of a darker or lighter color next to the pixel. Something like this:



    I don't know how people plan for this. I just selected 4 shades of each color and added it to the pallete. If you prefer to do things this way, go right ahead if you want.

    Now that we shaded, we need to add highlights:



    Since this is armor, we use white to show that it's shiney. The cape has a bit of lighter red to show that its being touched by light but still give the illusion that its fabric. You gotta choose the right kind of tone for the surface you are placing your light in.



    We finish it off by removing the blue outline and replacing it with an adjacent color. The colors used are straight from the sprite itself. Now it looks like something cool.

    The sprite looks good but did I really do it with MS Paint? It appears I didn't explain what exactly I did with paint. Well let me do that just now:

    I used the Line tool, set it to be 4 pixels thick, and chose the color lime green. I outlined what I wanted my creation to be.
    I shrunk it by 25% by using the Stretch and Skew window.
    I re-outlined the sprite in blue while making a few alterations. I erased the green tool with the Eraser tool, selecting white on the first color, lime green on the second, and using the second mouse button to erase the green without touching the blue.
    Using the fill tool, I selected my colors and filled in every space with a desired color.
    I then grabbed my Pencil tool, a darker color and carefully selected areas to have shading in it. You must always remember where your light source is.
    I then grabbed lighter colors to make highlights on the armor and the cape while keeping in mind my light source.
    Lastly, I grabbed my Color Picker to select a color from the sprite and then carefully replaced the blue outlined with the desired color. This part of the drawing process is important. You want the colors to blend in with each other just right. You got to select the colors so the sprite will look like it doesn't have an outline.
    After you done with the sprite, modifying should be easy.





    Looks a bit too bland don't you think? All I did was just modify the feet. Aparently it's got the illusion of walking but as if it's a robot. We'd like to move it like a human.





    Looks good but we'll need more touch-ups.





    Now that's a whole lot better. What exactly did I do. Let's see:





    I did nothing special really. All I used was the select tool and the Pencil tool. First I worked on the legs. I raised them each like about 4 pixels high, dragged the highlight a bit up, and added a small 2 pixel long line to represent the knee. I then raised the arm like 1-2 pixels high on one arm and for the other, I grabbed a piece of it and moved it closer to the body by about 1 pixel. I then grabbed the hand and moved it even closer to the body 1 pixel. For the shoulders, the ones with the arm that's sticking out, I raised it by 1 pixel and for the other side, I removed some pixels. This gives the illusion that they are going in and out. Lastly for the cape, I edited by removing some pixels on the side having the arm sticking and increased the darkness of the cape on the other. It took me just a few minutes. What made the job easier was using other features like making the background the same as the cape when editing the arms or turning on the grid when I want to move the shoulders.

    [3.3] Making a big sprite

    Okay so you made a small sprite for the walking animation but what about fights? And not 32x32 fighting sprites, you want to make it big. Just like Khin did for his game Heraldry.



    Yes the hype is true. This game is genius for using such incredible art. Just look at these sprites. It's obvious he didn't use paint, so it's impossible to do something like this in paint, right? WRONG! It is possible but it just takes a bit more work. What? You don't like work? Then why are you even using the TK in the first place. Well let's take a close look at one of Khin's works.



    So much detail is put to this sprite, it looks magnificent. Each color must have at least 4 shades. To do this pixel by pixel would be forever. Well it might but with practice, the time will be reduced. I'm gonna teach you do to a sprite but not as high quality like that. Why not? Because if I knew how to draw such a high quality sprite, I would've callen myself a sprite artist in the begining. :>

    Just like the small sprite, I start out with an outline of what I want. If you notice, it looks a bit squiggly. That's because I stretched it because it started out too small. Remember, in this stage, you can modify it however you want since we are gonna make it better.

    Like I said before, use a thick line and a bright color.
    Now I shrunk it by 25%, outlined it with a blue color, and erased the green coloring with the use of the Eraser tool and its ability to erase one color only. Well that's what I'm gonna do anyways. I've left in on right now to show you something. If you notice, some of the features don't follow the original outline like the right arm is a bit behind. I did this because it didn't look right to me. Sometimes you see some parts that look weird to you and will look better if you work astray from what you original drew. Sometimes it's neccessary.
    This is shown just to see what it looks like without the green.
    A simple color fill. I took the same colors from the walking sprite as well as made new colors for the new stuff like the sword.
    I now added shading. Because this sprite is much larger, I had to make more colors from the pallete since the walking sprite didn't had enough shadings, like the shoulders. There is a second color that is not on the small sprite.

    For the shield, instead of the basic outline of a shadow, I made a small dithering effect to make it look old. This can be accomplished with the Spray tool but since the space is too small, I had to do it with the pencil tool.

    Lastly, the helmet has 3 shades and one of them is black. Since the darkness of the shading on the helmet is dark enough in itself, to use black finalizes it perfectly because it blends easily.
    Shading is one thing, highlight is another task. Highlights are a bit harder to pull off. Since you gotta be careful where you put them. You got to consider the light source and the material you are pixeling on and by material, I mean by what the surface is. In this case it's mostly armor so it's gotta shine.

    This was the best I could do. Not too much light but just enough to make the illusion of there being light.
    Lastly, we replace the outline with another color. One trick I use is to first outline the things that appear more forward than the rest. For example, the shoulders are more upfront than the body so I outline that first.


    The last step is not seen in cormecial games quite often. They outline the sprites with a darker tone than the one it's joining it with. I did that just to simplify the tutorial.

    [3.4] Making backgrounds

    In MS Paint, it is more difficult making backgrounds because unlike sprites, you got a more items placed in. You can probably use the tileset of the TK to make your boards but some newbs have trouble with so. Thus I come in.

    Firstly, look at this background from the game "Garou: Mark of the Wolves":



    Impressive isn't? From afar, it doesn't look like Pixel art does it. Well look closer:



    There's a reason why I like this game. The pixel art here is intense. Something so simple makes something so complex. How'd SNK do it? I dunno.

    Alright, firstly let's begin with a bitmap of 640x480. Then we plan out what we want:



    So now that we got the design planned, we must next draw out what we want. We will begin with the foreground which happens to be a grassy plain. For this, we'll need a new bitmap. The reason why is because since we will have different depth's, a good idea is to draw them seperately. So let's get out another MS Paint bitmap and outline what we want.



    First, outline the foreground. In this case the tree and the grassy area. Just like the sprite, I outline it in blue.



    I then fill in with a color. Do not just use the basic colors on the pallete because they are so bland and boring. I used a bit darker tone for the trunk and leaves. The grass has been painted with that bright pinkish purple color. I'll explain that in a little bit.



    I then drew in the tree a little leaf thingy.



    Nothing special. Just two shades of green shaped like a leaf. What we are gonna do with this is fill the entire leaf area of the tree with these. To do it by C&P is too hard to do so we will have to "brush" in the leafs. Remember as I explained in the begining, you can select an object, hold down SHIFT, and drag it around like a brush. So let's do that. Grab the Select tool and select the area of the leaf as perfect as you can and drag it around, but don't go blindly with it. Keep it uniformed. Zoom in if you have to. If it takes too long, C&P to make four copies, select all four and brush on that. If it doesn't blend in right, then recolor the selected area with the electric pink color like so.



    Then turn off the opaque, select the second color as the electric pink, and brush on.



    Well it aint high standard quality but it sure beats just using the spray can or gradient. There are some leaves that are sticking out and are white. We can remedy that by filling them in ourselves with a green color from the tree. Okay now we do the trunk.



    The background has been changed to grey for easier viewing.

    I'll be blunt, I'm not good with trees so I just did something fast and quickly. What I did here is just a fast and simple design. A tree's trunk is suppose to look scratchy and rough. If you look at any tree in the park, such look can be seen. What I first started was with a shadow. The trunk had a dark brown color so I selected a lighter color and selected the left side to be hit by the light. I then grabbed the line tool and just made random scratches on the tree. Don't overuse the line tool and just make a bunch of lines. Uniform it. If you notice, I made little triangles on the trunk. This is to give it a feeling that it has small ridges. Though not perfect it does the job. What about the spraypaint job? That was because I thought the tree still looked to plain. I used the spray paint to add to the texture. If you find it hard to follow with just words. Here is a visual example.



    1,2,3,4 and done. Though this example can do fine without the 4th. It kinda looks good at 3. I only did it to show you that it was the last step I did for this tree. You should try and not to depend on the spray paint too much. Some newbs use it to draw out splashes and liquid based effects, usually being blood splattering from some person. Yeah, it looks terrible dont it. That's why you should make it a habit not to depend on it so much. Only if you really need it AND if you know how to use it properly. Alright now the grass. Why'd I made it the electric pink color is because we are gonna draw the grass in another bitmap. Why? To make things easier. Just watch. Get out another bitmap of the same size.



    I made a little spray spot there. I learned this from another tutorial but retooled for my own use. Get a darker shade of the green and spray paint a corner. Then get a even darker shade and spray paint the same corner. Use the Select tool and grab like the center of it and brush it on. The reason why we get only the center is because it will look kinda tiled if we grab it all.



    Another clever trick I used is grabbing the area and brushing on a quarter of the bitmap. Then regrabbing that entire corner and brushing that in, thus saving me some time. Okay so we got our grass. Now what? Well we are gonna paste it into our other bitmap. C&P the first pic and paste it into the one with the grass. Make sure opaque is turned off and your second color is the electric pink.



    Very good but not great. Is good on it's own but why stop here. Let's give it a bit more. Say in the left side of the screen, we got some grass that is growing just a bit taller. Let's do that.



    Oh I'm sorry. I went ahead without you :P. Look at the left side now. It looks like the grass is growing a bit. What I did is really simple. I just grabbed the Select tool, selected a very small area (like 90x20), and stretched it just a bit. I did this over and over with small areas. I didn't do it all at once cuz it will be obvious that I streched it. I later grabbed the lightest green color from the grass and lightly sprayed a bit of it around. I could've gotten any color but by random choice I grabbed the lightest green.

    Were almost done so let's finish it off. We'll have to get rid of that blue outline around. Select the first color blue and the second color the darkest brown from the trees. Use the second button and erase the blue outline of the tree trunk only. Next select the second color as the darkest green of the grass and second-button erase the blue on the grass. Last, we select the second color as the darkest green of the leaves and second-button erase the blue on the leaves.



    Now why do we select the darkest color? It's something I noticed in some pixel works. Sometimes, the outline of an object is the color of the darkest shade of color in the piece and it usually works.

    Looking at the leaves, it looks pretty empty because of the green spaces on the leaves. Let's try remedying that by filling them with the darkest green.



    Now it looks completely filled. That's another reason why use the darkest shade. Okay now that we are done with the fore ground. Let's start on the back ground. Get a new bitmap out and make the outline.



    Now hold on a minute, why does the castle look like that? Why didn't we make the base of it? Since this is the background, the foreground will overlap over it, therefore to draw a base would be useless. To show you what I mean:



    Hope that clears things. Okay, seeing as this is the same thing as the foreground, I'm just gonna go ahead and just do everything in at once.



    Here's what I did step by step. If neccessary, zoom in on the pic.
  • First I worked on the castle. I selected my colors. I used 3 shades. I added a little dithering effect on the left side of the tower to give it a smooth effect. I also added a dark shadow with no dithering effect. During this stage, I decided to have the windows a bit closer to the right side. I also gave them depth. I finished off with adding a highlight to the right side. Why? Cuz I felt it needed it. The top part of the tower consists of two shades of dark red. I added a little brick design to make the illusion that it is made of such. The side of the castle has a small brick pattern to give it the illusion that it's made of bricks. The top part of it is a bit on the crocket side and the shading may be off but it's the best I could of done.
  • The mountains were colored all in green. I then grabed a very dark green and added shade. At first it was skinny but then I decided to have a big shadow. The mountains still looked plained, so I grabbed a shade that was between the dark and original and added it.
  • The floor is mainly just a dithering effect.

    Now paste the foreground to the background and it's complete.



    Well it isn't Khin material, but I rather see this that another one of these:



    [4.1] What else

    Well, that's pretty much the basics of it. Here are some tips that may help you out.

  • Save constantly. You never know when something might go wrong with the computer and have to end up starting over again. So make sure you got your finger on the CTRL and S key for quick triggering.
  • Study others works but don't copy them. You can use the work of others as a reference to guide like if you are trying to get a good pose, there may be a pic on Google you might just use. But don't copy it exactly because it wont be your own creation.
  • Learn to use the shortcut keys. They will make tasks alot easier.
  • Pen Tablet? I wouldn't know since I do stuff with the mouse but dont think that you will be a better artist with it. If you cant draw by hand, there is no way a stylus will make you a better artist. So I say practice with the mouse and if you got one with a trackball on it, I suggest you buy one with the red light.
  • Zoom in alot. Sometimes a close look is needed.
  • Practice alot. That is always the best way to learn and better yourself. I didn't just one day pick up the mouse and started drawing like this. It took me alot of trial and error but eventually I got the jist of it.
  • Try out other software if you want. If you think you can handle GIMP, by all means, go for it. But if you realize that it's too hard, then you can always come back to MS Paint. I did that once. Still sticking with MS Paint.
  • Post your stuff on the forums. Usually when you think you've gotten to a point where you think you've reached a peak in an area, get conformation of it by posting your piece on the forums. You can get more feedback and see if you are ready to go to the next level or are still in need of training. Though don't take criticism too harshly. Learn from it. Only then you will succeed.

    Lastly, do not think this or any other tutorial is the only way to go. I spent many a year listening to tutorials and going by them word for word. I then found out that tutorials aren't 100% full-proof guides to go about. Besides tutorials, I grabbed sprites from other games (TK and proffesional), put it in MS Paint, Zoomed in, and studied them. I would sometimes take from tutorials but also try to add some of my own style into it.

    There are billions of ppl in the planet with our own styles and creativity. If everyone had the same techniques, then every animated show, game, or comic book would end up looking the same.

    [5.1] Then-End

    Sionara Baby. If you got any questions, you can try to e-mail me at tk_game_boy@programming.net, or if you want fast results, try PM'ng me on the forums.

    [5.1] Credits

    Microsoft for making the software and hardly changing it.

    Google image search for the Sonic Sprite.

    http://ggxlol.highervoltage.net/ for the Guilty Gear sprites.

    RPGMaker 2000 (Don't look at me like that) for the background image.

    Khin for letting me permission for using his sprites.

    http://fightersgeneration.com/ for the Garou: Mark of the Wolves background.



  • website by phil carty © 2011
    additional icons by matty andrews and dana brett harris