Maplemation

Collaborated with Taki in explaining and demonstrating pixel rules.
  This thread may be updated overtime.

Table of Contents
I. General Advice
II. Key Terms
III. Things to Avoid
IV. How to Maplestory
V. Future Topics

"I. General Advice"

No. 1 Rule: No gradience.
I want to learn to sprite. Where do I start?:
[LIST]
Please take the time to go over this thread. There are many fundamentals that need to be practiced in order to eventually become second nature.
Sprite something, anything. Take initiative. Creative platforms, especially, require hands-on learning. When you make something, you are able to think about how you can improve on it by asking for constructive criticism.

[*]Ask for critique and criticism (CnC). You won’t learn what you don’t know is right and wrong. You don’t need to agree/accept all of the critique, but it is good to try out suggestions. If someone is willing to take time to help you, please be respectful about it. It is a give and take. Give back the same effort, or even more, for yourself and the person who is teaching or helping you.

[*]It is trial and error. Nothing works out on the first, second, or third try. Finishing a piece in the creative department can take days, weeks, months, years. Everyone only sees the final product, but there’s always a long process behind the final product.

[*]What program should I use?:

Any program that has a pencil tool.
Most Common: Aseprite, MS Paint, Paint.NET, Photoshop

[/LIST]

"II. Key Terms"

Anti-Aliasing (AA): The process of using a color in between to fill some of those pixels to create the illusion of a softer, easier transition. It is to make jagged edges look smooth.
[spoiler="Example"]

Dithering: Technique most artists used when creating 8-bit games. A technique that aims to achieve a gradient using a minimum of intermediate colors, best used for shading and highlighting.

"Example"

[LIST]

Types of Dithering:
[LIST]

Interlaced: Two dither regions hugging each other. It allows you to blend dithers together to form gradients.

"Example"

Stylized: The addition of small shapes in the pattern.

"Example"

[/LIST]
[*]Line Fundamentals:

"Example"

[*]Pixel Clusters: Groups of pixels of the same color that, together, proceed a solid color field.

"Example"

[/LIST]
[/spoiler]

"III. Things to Avoid"

Anti-Aliasing: You don’t want a stale potato chip, but you also don’t want a soggy potato chip.
[LIST]
Excessive AA: Too much anti-aliasing can make edges look blurry and lose the crispiness of the line. [spoiler="Example"]

Insufficient AA: Too little anti-aliasing can only ease edges slightly but not enough for the edges to appear smooth.

"Example"

AA Banding: When segments of AA line-up with lines they’re trying to smooth out.

"Example"

[*]Banding: You can see pixels pretty obviously. You do not want your pixel art to look like “pixel” art.

45-degree: Rows of pixels lining up, 1-pixel thick.
"Example"
Fat Pixels: Looks like a staircase. Lines of pixels pile on top of each other.
"Example"
Hugging: Creates a pseudo-gradient effect that makes the lines almost "blurry" and indistinct.
"Example"

[*]Dithering:

Random Dithering: Not common, generally not advised. Too much noise. Example:
"Example"
Bad Dithering: Too much dithering. Misused dithering. Can create unwanted texture. Ideally used to taper ends and edges of an opaque field of pixels.
"Example"

[*]Jaggies (jagged lines): Unintentional corners that appear in pixel art. It makes sprites look unnatural and interrupt the flow of a line. Also occurs when a line lacks AA. You want smooth outlines. Often when lines are too short or long.

"Example"

AA with jaggies only when lines are not perfectly horizontal/vertical/45 degrees.
"Example"

[*]Orphan Pixels: “Every pixel needs a friend.” – Taki, 2018

Placing individual pixels stand out on the canvas. It makes the pixel art more noisy. Unnecessary dithering may also be considered orphan pixels.
"Example"
Lone pixels are acceptable when used as a buffer for AA.
"Example"

[*]Pillowshading: When the shading crowds around the outline and the outlines only, making the area of color appear softened. It is having dark colors on the outside, light colors on the inside. When you do this, you don't define a light source.

"Example"

[/LIST]
[/spoiler]

"IV. How to Maplestory"

General Rules

Light Source:
[LIST]
Maplestory’s light source is on the top left.
[spoiler="Example"]

If the light source is the top left, why do some sprites have light on the bottom right?
[LIST]

It is called reflected light. 

"Example"

Sphere light and shadow example:

"Example"

[/LIST]
[*]Hair:

Defining hair strands:
"Example"
Step-by-Step Shading Process:
"Example"
Different Hair Textures: 
"Example"
Limit colors to be no more than 8:
"Example"

[/LIST]
Previous Revisions

"Revision 1 - Shading"

[spoiler="Drew's Sprite"]

I cleaned up his outlining a bit since there were jaggies. I also changed the color palette so it was less contrasted and smoother. When shading hair, you should think about each strand of hair and how it should be shaded. I tried to fix it a bit with the shading and lighting.

"Example"

It's also okay for the lighter colors to touch the darker colors. It'll create more depth in the hair and define it. The light don't only have to neighbor with the light colors. But uh, it needs to make sense for the hair to put the lighter color with the darker color. Where you had the light touch the dark doesn't make sense because the lighting shouldn't go that far to the back. Where I shaded it in my character makes sense because the strand of hair hits the light. It also shows it as the front of the hair while the darker strand is behind.

"Example"

[/spoiler]

"Revision 2 - Hair Strands"

[spoiler="Example"]

When you know where your hair parts and where that center spot is, you're able to have a better depiction of the hair strands and the direction they're going. Taki’s hair sprite depicts clear direction of where the hair strands are and where they separate.

"Example"

[/spoiler]

"Revision 3 - Maplestory Style"

When you shaded your hair, you did a form of pillow shading, having dark colors on the outside, light colors on the inside. When you do this, you don't define a light source. Maplestory's light source is the top left, so lighter colors should be at the top left of the whatever item you are shading.
[spoiler="Example"]

Avoid having jaggies. Jaggies are unintentional corners that appear in pixel art. It makes sprites look unnatural. You are looking for more smooth outlines.

"Example"

Anti aliasing is the process of using a color in between to fill some of those pixels to create the illusion of a softer transition.

"Example"

Touching a lighter color and a darker color is super okay. The purpose of this is to create depth in whatever you are spriting. The example I have shows the different parts of hair as well as what's behind and what's in front. This is helpful for defining hair strands. I also used this for the hair buns.

"Example"

[/spoiler]

Custom Poses

I want to make custom poses. How do I start?
[LIST]
Look up references of poses you want to make. It's not easy drawing with just ideas off the top of your head if you're a beginner.
It is helpful for some to create stick figure poses then creating the limbs.
"Basic Tutorial"

1. Make a rough sketch of the pose you want. Use multiple colors to distinguish limbs (very helpful).
2. Clean sketch of any jagged lines and adjust any uneven body proportions.
3. Add base color for skin, hair, face, clothes, etc.
4. Begin shading.
5. Add details.
6. Clean up sprite.
*Adjustments and revisions will always be made throughout the time you work on your sprite. Take this tutorial with a grain of salt.
[spoiler="Example"]
[/spoiler]

[/LIST]
[/spoiler]

"V. Future Topics"

Palettes: Hue, Hue Shifting, Saturation, Luminescence, Color Count
Human Anatomy & Proportions
Textures

Additional Pixel Art Resources
◘ https://blog.studiominiboss.com/pixelart
◘ https://gumroad.com/l/pixel-logic

Pixels 101

Reply to Thread