Language…
12 users online: BUX88, DanMario24YT, deported,  DeppySlide, Domokun007, ForthRightMC, hhuxy, Knight of Time, koffe190, Pizzagamer9791,  Ringo,  yoshi3706 - Guests: 301 - Bots: 252
Users: 64,795 (2,375 active)
Latest user: mathew

Drawing/Pixeling 101

  • Pages:
  • 1
  • 2
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.
I've been thinking the tutorials subforum needs something like this, and I'm happy to see someone stepping up to the plate (:
Youtube (Main) | Youtube (Alt) | Bandcamp | DeviantART
I'm not quite sure I get your choice of shading the sphere, why is there that brighter part on the bottom right of it?
No matter how I look at this shiny blue ball I hold in my hands, that lighting just doesn't happen.
Your layout has been removed.
One thing you have to keep in mind is that a sphere is... spherical, and curves.

Another thing you have to keep in mind is that light bounces all over the place, and comes from many sources, and, most importantly, can create illusions.

Since a sphere curves, it will be shaded according to various light sources, not just the main one at the top left. It will get progressively darker as you close in on the bottom right, but due to the spherical nature, the sphere essentially "bends" the light, and thus you see that bent light on the side away from the light source.

It may be faint and not very noticeable, but it does occur.


(I guess this would be part of the tutorial, lol)
Oh so that sphere is a little translucent like a bubble or what?
I was thinking it was just rock solid green stuff. And if it is, then I don't get what you're saying since none of these balls I'm looking at are getting lighter anywhere.
Your layout has been removed.
well, I guess I kinda exaggerated the lightness. It's more pertinent to the real art world anyways. For the purposes if SMW, you can do without it, unless you're making a large sprite (see: Big Boo)
Not RYB, it's RGB:

edit: android keyboard sucks
Your layout has been removed.
In art/painting, RYB is used. Reason is: go get your crayons and mix blue and yellow. You should get green. Try mixing blue and green, or green and red. You shouldn't get yellow.

RGB only really works for computer stuff, printing, etc. In terms of palettes, IMO, it'd be best to go with RYB.


Though I don't see how any of this applies at all. I didn't even mention RYB, lol
Technically CYMK would work better for (subtractive) crayons, but it's not kid-friendly enough. SMW is completely on-screen, so there's no reason to use an outdated, irrelevant "traditional" color wheel. [The] PC/YYCHR/CRT/LCD/SNES/display/everything is additive, and RGB works best, so why do you still use a RYB color wheel? I believe the one I found is more accurate and potentially useful.

And wrong, it's red, orange, yellow, yellow-green, green, bluish green, cyan, sea blue, blue, indigo, magenta, and red-purple.
Your layout has been removed.
I'm not talking about the technical details (I'm aware RGB is more accurate in terms of displaying stuff), but rather the artistic/visual presentation. There are just some things RGB won't work for.

Either way, colors will still go from red->orange->yellow->green->blue->indigo->violet, so it doesn't matter :P
I'm sorry if this seems rude, since I'm pretty new here, but what won't RGB work for? It presents a possible 16 million colours. If that's not enough for your "artistic/visual presentation" than I don't know what is.

I've never seen a graphics program that uses a subtractive model for its colour chooser before. I'm not saying one doesn't exist, but in my experience, if you're doing anything related to graphics on a computer, you'll be using either RGB or HSL to make your colours.
Yeah, RGB is colors. Subtractive is printing, and RYB is useless. So you probably only need to use RGB. If you use the gory technical details of printers (or 4-color colored pencil art), you need CYMK. RYB is outdated and not a very accurate representation of either additive or subtractive.

So you only need to use RGB or HSL.
Your layout has been removed.
aaaaaaaaaa fine

Originally posted by moi
Either way, colors will still go from red->orange->yellow->green->blue->indigo->violet, so it doesn't matter
Might I post this here?



It might be more relevant in a Palette tutorial, but what they hay, why not put it here too.

Also, how does this Wood Block look? I made it myself for my own ROM hack, and I just want a professional's opinion. (do not mind the other graphics, the level is a test level while I create these graphics)


Hmm. . . not sure what to say so I'll just stop talking. . .

Looks great, but I dunno about putting shine on it. I guess it adds a nice effect.

Can't tell because JPG, but I would add a bit of shading near the bottom/side
Thanks Ladida! But now I need some help on something a little more complex. I'm trying to make a coin graphic that has 8 rotation frames as opposed to the four the normal coin has, and what's even harder is the coin has a number 10 in the center of it. So, how would I make a decent rotated graphic for the number ten with a very limited amount of pixels and colours?

Here is an image of it in YY-CHR, I can't figure out how to make a .GIF yet sorry.


Hmm. . . not sure what to say so I'll just stop talking. . .

What do you mean? What you have there looks fine.
Oh. Really? Okay, thanks! I guess I must've just been too critical.
Hmm. . . not sure what to say so I'll just stop talking. . .

I guess I should adapt this into an animation thread too :P

As long as it looks good animated, then it doesn't really matter what the individual frames look like. You only see them for a split second anyways.
  • Pages:
  • 1
  • 2