I made this tutorial more as a reference, but I do hope people at least gain interest in drawing their own stuff for their hack.
Note that this is not a YY-CHR tutorial, though I expect you to be using it. Thus, basic knowledge of that would be handy.
MovementThruPortals made a mini-tutorial on outlines and shapes, check it out in this post!
Limitations you should keep in mind:
Layers are only allowed 15 colors per 8x8 tile
Layers are only given 8 palettes. These are shared by layers 1 and 2, with the first two palettes being shared by all 3 layers.
The max size a complete background can be is 512x512
Same with layer 3, but remember that part of it is used by the status bar
Sprites are also only allowed 15 colors per tile.
Sprites are given a separate set of 8 palettes, 1 used by the player sprite.
Most sprites are only 8x8, 16x16, 16x32, or 32x32 in size. Screw Banzai Bill
Color:
Chances are, your hack will not be in grayscale, so colors are important. A level with many bright colors gives off a cheery feeling, while dark colors make a level feel glum. Thus, the best way to start making custom graphics is by making the palette. Look in other available tutorials for what Layer 1/2 palettes are available. For sprites, you can use the second halves of palettes 9-D, and all of palettes E and F if you aren't using some specific sprites. You can go ahead and overwrite all the sprite palettes if you're going for a complete sprite makeover; same goes for the layer palettes (though make sure you don't use the layer 3 space).
If you want to make a good impression with your choice of colors, then keep in mind the color wheel.
If you want to provide vivid contrast, such as a sunset, then you should set up your palette using complementary colors. Complementary colors are colors opposite of each other on the color wheel. For example, red and green. A sunset would make use of bright yellow-oranges and dark blues. Be careful when making a complementary palette; it's very easy to make it eye-searing.
If you want to provide smoothness, such as a gradient, then set up your palette using analogous colors. Analogous colors are colors that are next to each other on the color wheel. For example, red and orange. Because LM has a gradient function, making an analogous color palette is not very hard to do.
Combining both methods makes for a great palette. Of course, you don't have to follow them; they're just guidelines.
Outline:
How an object or sprite is outlined can make a huge difference in the general feel it gives off. Little outline leans towards realism, while thick outline is very cartoony.
Which block looks more realistic? Which looks more cartooney?
For most people's hacks, your generic 1 pixel thick outline should do fine (that middle block).
Antialiasing:
Antialiasing is when you kinda blend colors together, so that the border between them is not clearly defined. This makes it look smoother, and not as jagged. In SMW (well, SNES in general), you can't really antialias the outside of a sprite, so you will mostly do the interior.
If you zoom out, the round thing on the right is smoother than the one on the left. Be careful about using too much antialiasing; it may end up looking like pillow shading (see Shading). Use it only when you think an edge should look smoother.
Dimension:
When drawing sprites/foreground/background/whatever, keep in mind how large or small you will draw these things. You don't want a super small house, or a super large book (unless you're doing it on purpose), so keeping things the "right size" throughout your hack is optimal. How do we do this? You will first need to create a point of reference.
A point of reference is something you will base everything else off of. In terms of drawing stuff for SMW, the best point of reference would be none other than the player sprite, because it will usually always be onscreen. Thus, make sure the house will fit the player naturally, like a real house, and make sure the book is a reasonable size for the player. Of course, you can exaggerate the sizes if you want (I'm sure coins aren't the size of a person's head), for it helps to show importance. You wouldn't collect a very small coin, would you? It's why the SMW coins are large, and why the Yoshi coins are larger. (and why Peach's knockers are... a decent size)
Shading:
One of the most important aspects of drawing is not only the colors, but how they're shaded. Little shading gives off a cartoony feel, while intense shading gives off a realistic feel.
If you haven't realized, shading gives the illusion of 3D. This applies to drawing as well as the real world. An object is shaded when different parts of it are receiving varying amounts of light. A sphere is shperical because the top area receives more light, and proceeds to receive less light as you go down, done in such a way as to suggest a curvature. So, in the art world, keep this in mind: objects aren't shaded. Rather, shading creates an object. A circle will become a sphere when it receives shading. (just fyi, the art world sux)
As mentioned, shading is done due to different areas receiving different amounts of light. Thus, before you begin to shade, you must first discern where your light source is. Most SMW sprites have the light source at the top right corner (or top-left) (this is the most common place for a light source). This area will receive the most light; as you move further from it, there is less light.
The one thing you should never do is pillow shade. This is when all edges receive equal amounts of shading. Not only does it look ugly and unprofessional, but it doesn't even look like shading. Pillow shading should only be done if, and only if, the light source is you (the camera).
On the left is a properly shaded sphere. On the right is a pillow-shaded sphere.
Shine:
Shine is related to shading. Objects that shine are simply objects that tend to reflect light. The more it reflects, the whiter it is; the less, the blacker. Walk around your house (or cave/spaceship/womb/whatever); look for things that shine. You'll see that they are simply reflecting light from a light source.
The sphere on the left has had shine added to it. As you can see, shine is rather easy to create in SMW: just add white (or something close). Antialiasing it is optional.
Notice what objects around your house shine; a fork will shine, but a blanket will not. This is due to the material, which brings us to
Material/Texture:
What an object is made of. Different textures will give off a different feel. In pixeling, texture is achieved by combining color, shading, and shine, as well as how the pixels are arranged. Green pixels, with random shading, and little shine, will give the impression of a grassy texture. Meanwhile, green pixels, with varying amounts of shading, and no shine, will give the impression of a green blanket.
Backgrounds:
I hate making backgrounds. Nevertheless, a background will definitely make or break your level. When drawing a background, keep this in mind:
Go outside. Look down your street. If you live on a long street, then you shold notice that, as things get farther from you, they tend to blur, fade away, become obscure. This is because the amount of air particles between you and whatever start to increase as they or you move farther. Unless you're making a level in space, or on some wacky planet, then let's just assume that the air composition for your level is the same as Earth's at sea level.
A background is just that; a background. It is behind the level, probably a good distance away. To give off that impression, you must make use of the effect explained above. A background will become "fadier" when it's colors come closer to the background color.
Most SMW levels will use a layer 2 horizontal scroll rate of "Variable". IIRC, this is just .5x the speed of layer 1, with "Constant" being 1x the speed of layer 1, "Slow" being .25x the speed of layer 1, and "None" being 0x the speed of layer 1. Because most background will be Variable, this is essentially your reference point, as to how large you should make your background. For example, if I want large buildings in the background, but want them to appear very far away, then I'd actually make them small, and make the background scroll rate very slow. If instead I want them to appear up close, then I'd make them very large, and, say, make the scroll rate constant with layer 1.
Everything else that's been said can apply to backgrounds as well, so use that info.
Reference image:
You want to draw a blimp. Thing is, you've never seen a blimp in your life! What do we do in this impossible situation?!
Solution: search, search, search! Look for good images of blimps, and use it as a reference when drawing. If it's an object you can get your hands on, then go get it!
As I said, this is more of a reference. It'd be impossible to create a full drawing tutorial; I'd have to cover everything from drawing humans to animals to scenery, etc.
Anyways, have fun!
~Ladida
I'm open to questions, and comments as well (especially from pixel artists). I also invite anyone else with knowledge on the topics to help as well.
Note that this is not a YY-CHR tutorial, though I expect you to be using it. Thus, basic knowledge of that would be handy.
MovementThruPortals made a mini-tutorial on outlines and shapes, check it out in this post!
Limitations you should keep in mind:
Layers are only allowed 15 colors per 8x8 tile
Layers are only given 8 palettes. These are shared by layers 1 and 2, with the first two palettes being shared by all 3 layers.
The max size a complete background can be is 512x512
Same with layer 3, but remember that part of it is used by the status bar
Sprites are also only allowed 15 colors per tile.
Sprites are given a separate set of 8 palettes, 1 used by the player sprite.
Most sprites are only 8x8, 16x16, 16x32, or 32x32 in size. Screw Banzai Bill
Color:
Chances are, your hack will not be in grayscale, so colors are important. A level with many bright colors gives off a cheery feeling, while dark colors make a level feel glum. Thus, the best way to start making custom graphics is by making the palette. Look in other available tutorials for what Layer 1/2 palettes are available. For sprites, you can use the second halves of palettes 9-D, and all of palettes E and F if you aren't using some specific sprites. You can go ahead and overwrite all the sprite palettes if you're going for a complete sprite makeover; same goes for the layer palettes (though make sure you don't use the layer 3 space).
If you want to make a good impression with your choice of colors, then keep in mind the color wheel.
If you want to provide vivid contrast, such as a sunset, then you should set up your palette using complementary colors. Complementary colors are colors opposite of each other on the color wheel. For example, red and green. A sunset would make use of bright yellow-oranges and dark blues. Be careful when making a complementary palette; it's very easy to make it eye-searing.
If you want to provide smoothness, such as a gradient, then set up your palette using analogous colors. Analogous colors are colors that are next to each other on the color wheel. For example, red and orange. Because LM has a gradient function, making an analogous color palette is not very hard to do.
Combining both methods makes for a great palette. Of course, you don't have to follow them; they're just guidelines.
Outline:
How an object or sprite is outlined can make a huge difference in the general feel it gives off. Little outline leans towards realism, while thick outline is very cartoony.
Which block looks more realistic? Which looks more cartooney?
For most people's hacks, your generic 1 pixel thick outline should do fine (that middle block).
Antialiasing:
Antialiasing is when you kinda blend colors together, so that the border between them is not clearly defined. This makes it look smoother, and not as jagged. In SMW (well, SNES in general), you can't really antialias the outside of a sprite, so you will mostly do the interior.
If you zoom out, the round thing on the right is smoother than the one on the left. Be careful about using too much antialiasing; it may end up looking like pillow shading (see Shading). Use it only when you think an edge should look smoother.
Dimension:
When drawing sprites/foreground/background/whatever, keep in mind how large or small you will draw these things. You don't want a super small house, or a super large book (unless you're doing it on purpose), so keeping things the "right size" throughout your hack is optimal. How do we do this? You will first need to create a point of reference.
A point of reference is something you will base everything else off of. In terms of drawing stuff for SMW, the best point of reference would be none other than the player sprite, because it will usually always be onscreen. Thus, make sure the house will fit the player naturally, like a real house, and make sure the book is a reasonable size for the player. Of course, you can exaggerate the sizes if you want (I'm sure coins aren't the size of a person's head), for it helps to show importance. You wouldn't collect a very small coin, would you? It's why the SMW coins are large, and why the Yoshi coins are larger. (and why Peach's knockers are... a decent size)
Shading:
One of the most important aspects of drawing is not only the colors, but how they're shaded. Little shading gives off a cartoony feel, while intense shading gives off a realistic feel.
If you haven't realized, shading gives the illusion of 3D. This applies to drawing as well as the real world. An object is shaded when different parts of it are receiving varying amounts of light. A sphere is shperical because the top area receives more light, and proceeds to receive less light as you go down, done in such a way as to suggest a curvature. So, in the art world, keep this in mind: objects aren't shaded. Rather, shading creates an object. A circle will become a sphere when it receives shading. (just fyi, the art world sux)
As mentioned, shading is done due to different areas receiving different amounts of light. Thus, before you begin to shade, you must first discern where your light source is. Most SMW sprites have the light source at the top right corner (or top-left) (this is the most common place for a light source). This area will receive the most light; as you move further from it, there is less light.
The one thing you should never do is pillow shade. This is when all edges receive equal amounts of shading. Not only does it look ugly and unprofessional, but it doesn't even look like shading. Pillow shading should only be done if, and only if, the light source is you (the camera).
On the left is a properly shaded sphere. On the right is a pillow-shaded sphere.
Shine:
Shine is related to shading. Objects that shine are simply objects that tend to reflect light. The more it reflects, the whiter it is; the less, the blacker. Walk around your house (or cave/spaceship/womb/whatever); look for things that shine. You'll see that they are simply reflecting light from a light source.
The sphere on the left has had shine added to it. As you can see, shine is rather easy to create in SMW: just add white (or something close). Antialiasing it is optional.
Notice what objects around your house shine; a fork will shine, but a blanket will not. This is due to the material, which brings us to
Material/Texture:
What an object is made of. Different textures will give off a different feel. In pixeling, texture is achieved by combining color, shading, and shine, as well as how the pixels are arranged. Green pixels, with random shading, and little shine, will give the impression of a grassy texture. Meanwhile, green pixels, with varying amounts of shading, and no shine, will give the impression of a green blanket.
Backgrounds:
I hate making backgrounds. Nevertheless, a background will definitely make or break your level. When drawing a background, keep this in mind:
Go outside. Look down your street. If you live on a long street, then you shold notice that, as things get farther from you, they tend to blur, fade away, become obscure. This is because the amount of air particles between you and whatever start to increase as they or you move farther. Unless you're making a level in space, or on some wacky planet, then let's just assume that the air composition for your level is the same as Earth's at sea level.
A background is just that; a background. It is behind the level, probably a good distance away. To give off that impression, you must make use of the effect explained above. A background will become "fadier" when it's colors come closer to the background color.
Most SMW levels will use a layer 2 horizontal scroll rate of "Variable". IIRC, this is just .5x the speed of layer 1, with "Constant" being 1x the speed of layer 1, "Slow" being .25x the speed of layer 1, and "None" being 0x the speed of layer 1. Because most background will be Variable, this is essentially your reference point, as to how large you should make your background. For example, if I want large buildings in the background, but want them to appear very far away, then I'd actually make them small, and make the background scroll rate very slow. If instead I want them to appear up close, then I'd make them very large, and, say, make the scroll rate constant with layer 1.
Everything else that's been said can apply to backgrounds as well, so use that info.
Reference image:
You want to draw a blimp. Thing is, you've never seen a blimp in your life! What do we do in this impossible situation?!
Solution: search, search, search! Look for good images of blimps, and use it as a reference when drawing. If it's an object you can get your hands on, then go get it!
As I said, this is more of a reference. It'd be impossible to create a full drawing tutorial; I'd have to cover everything from drawing humans to animals to scenery, etc.
Anyways, have fun!
~Ladida
I'm open to questions, and comments as well (especially from pixel artists). I also invite anyone else with knowledge on the topics to help as well.