AuthorTopic: Please help me understand these sprites  (Read 3390 times)

Offline wanderer123

  • 0001
  • *
  • Posts: 54
  • Karma: +0/-0
    • View Profile

Please help me understand these sprites

on: August 01, 2018, 12:11:12 am
Hey! I don't understand these sprites. Help would be really appreciated.

These sprites are the golden knights of the anime Knights of the Zodiac/Saint Seiya. See these(they're based of 3 different characters- each in their own gold armor/cloth):

From a good pixel artist:




From me:



I don't understand why mine doesn't look nearly as good as the the ones above. I don't understand especially why there are so many different pixels next to each other in the good ones above. I just can't find the pattern of those pixels. Please help me out!!

Offline MysteryMeat

  • 0100
  • ***
  • Posts: 1997
  • Karma: +1/-0
  • "The new alternative to q-tipping your cat!"
    • mysterymeat
    • spoiledmysterymeat
    • View Profile
    • My rad art blog!

Re: Please help me understand these sprites

Reply #1 on: August 01, 2018, 12:34:22 am
Neither of these really look good though, the original there is incredibly hard to read because of the overabundance of yellow and noisy design. They look like angry yellow cactuses pretty much.

You should maybe look towards simpler art to mock up first.

If you're wondering why yours doesn't look as detailed though, you don't have the same contrast going on.

You also don't have a consistent light source.
PSA: use imgur
http://pixelation.org/index.php?topic=19838.0 also go suggest on my quest, cmon
MAJOR BORK TALLY: |

Offline wanderer123

  • 0001
  • *
  • Posts: 54
  • Karma: +0/-0
    • View Profile

Re: Please help me understand these sprites

Reply #2 on: August 01, 2018, 12:36:49 am
I don't understand. I like the 2 above but not mine one below. I also don't understand why mine doesn't have so much detail going on.

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: Please help me understand these sprites

Reply #3 on: August 01, 2018, 12:44:12 am
The "good" ones:
- have more contrast, the darkest and lightest shades of each colour are more distinct than in yours
- use hue-shifting, the darker shades of each colour aren't simply darker, they're also redder/purpler
- have shading, parts of the characters that would get less light (like right under the "skirt" on the second one, and under the chins) are darker
- have consistent lighting. It's from the front, which makes it look much flatter than it otherwise could be, but it's better than nothing.
- the details aren't just random shapes, they represent real things, like shadows under pecs, armour segments, etc. Yours, on the other have has a repeating pattern that doesn't look like anything. The "good ones" also have fainter shadows that create additional smaller details that yours lacks since you're only using one shadow colour.

I recommend studying different sprites, however. These have an overload of detail, static poses, and a general lack of clarity. It's much easier to study better work, as you'll pick up fewer bad habits, and probably have an easier time seeing why the artist made the decisions they did. Learn to convey form first, then worry about detail - detail should never overwhelm the form, or you'll lose clarity.

Offline wanderer123

  • 0001
  • *
  • Posts: 54
  • Karma: +0/-0
    • View Profile

Re: Please help me understand these sprites

Reply #4 on: August 01, 2018, 12:47:28 am
So you both guys mean the good ones aren't all that great? I have hired someone to make these but I have paid him very, very little and he isn't a pro. The one below is mine of course. These are all on a human base sprite.
« Last Edit: August 01, 2018, 01:15:52 am by wanderer123 »

Offline questseeker

  • 0010
  • *
  • Posts: 112
  • Karma: +0/-0
    • View Profile

Re: Please help me understand these sprites

Reply #5 on: August 01, 2018, 07:23:04 pm
The resolution of these sprites is insanely small.
15 pixels of width could be enough for monochromatic or almost monochromatic art (e.g. Atari 2600), but not if you want outlines (see the legs and feet), shading, and realistic human figures in very complex costumes.
You need to choose between a simpler style or a larger resolution; in this case details, shading and recognizable costumes are very important, and an enlargement around 4x should provide enough pixels to do a good job.

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: Please help me understand these sprites

Reply #6 on: August 02, 2018, 12:03:31 am
I disagree with questseeker that you have to choose. It's entirely possible to have lots of interesting details at this small size, however
- you don't have room to outline everything, so utilise boundaries between colours and values to create boundaries instead of wasting space on lineart. Outline only what really needs outlines.
- don't draw every detail in full, suggest the less important details. This way you can include everything that's important without making your sprite noisy.

Questseeker is right that this size isn't good for realistic human figures, but that doesn't seem to be your goal anyway.

Offline Kiana

  • Moderator
  • 0001
  • *
  • Posts: 93
  • Karma: +0/-0
  • Artist & Game Dev
    • kianamosser
    • View Profile
    • itch.io page

Re: Please help me understand these sprites

Reply #7 on: August 02, 2018, 03:30:55 am
Some thoughts about contrast.

In the image below, I've converted the three sprites to grayscale so you can see the values more easily. Values are a big factor in determining the readability of your sprite. If your values are too close, then there isn't enough contrast to tell what's going on.



Although the values could still be managed better, the middle sprite has the most successful value structure. The highest contrast is in the eyes, so we can see them clearly despite the sprite being a bit cluttered, and there are some distinct areas of value separation. The helmet, pauldrons, and cape are lighter in value than the rest of the armor and the face, which makes it easier to tell what's going on in the sprite. We have dark, medium, and light values.

The left sprite suffers from having almost only medium values with very sparing usage of darks and lights. This causes the sprite to look flat, despite there being some attempts at shading.

The sprite on the right is even worse in terms of clear value separation, because nearly the whole sprite uses a medium (middle gray) value. Darks and lights are nearly nonexistent in this sprite.

How can we improve this?

Well, first, we need to understand what we're rendering in the first place. Start by focusing on the simple shapes/volumes of your subject, then choose a light source. Here's a visualization...



I tried to quickly sketch proportions and a pose that's very similar to yours. First, think about what shapes make up your subject. Some basic shapes you can use are circles, ovals, squares, triangles, and rectangles. You can also combine shapes or use shapes that aren't as basic, like bean shapes.

Next, represent your shapes as volumes and fit them together. Personally, I think this is the hardest part. Circles become spheres, squares become boxes, rectangles become boxes or cylinders, etc. You can also use volumes that aren't as basic, like wedges. Knowledge of your subject becomes important here. I recommend Vilppu's teachings if you want to learn about basic ways of breaking down the human form into volumes. I won't go into that here, since it's a whole topic of its own.

Once you have visualized the basic volumes, lighting becomes a question of where the light source is coming from. I chose a central top-down light here, nothing fancy. I didn't go super crazy with the shadows or anything, but there is a bit of knowledge at play here in my choices that might not be obvious from how I drew the 3D volumes. I chose to completely drop the forearms, hips, and legs in shadow in order to bring the chest and shoulders forward in space. I made sure to light the hands and tops of the feet because they're important. I added a simple cast shadow from the head onto the shoulders and where the neck would be (you chose to hide the neck in your sprite, so I left it out). I didn't put much of the "face" sphere in shadow partially because it's important and partially to bring it forward in space.

Clothing, armor, hair, etc. would follow the same thought process; just add them over top of the base forms, keeping in mind the body underneath.

Now, I did a messy 5 second pass over your sprite with a blend mode in Photoshop to sort of give you a feel for the improvement to readability. If I were to manually edit the sprite, then I could make more precise choices and fine-tune the areas more, but I just wanted to give you a brief idea of the concept.

Adding visual separation using color.

You can also create clarity just with the flat colors you decide to use, and where you put them. Here's a small example...



Now, I'm not a mind reader, I don't know exactly what you had envisioned for the design. Perhaps this is a different direction than you intended and that's fine, I'm not here to talk to you about how armor works or what designs are practical. However, all designs can benefit from considering which colors will be touching each other. We can use color theory to help choose colors that might look good together.

I darkened the pants and added sleeves. I kept them purple because it was a good choice, since it is the complimentary color to yellow (opposite on the color wheel), but the shade was too light and too saturated. If you have too many saturated colors close together, it can overwhelm the viewer. You can allow the viewer's eye to rest by introducing darker or lighter desaturated colors.

I changed the darker yellow to a slightly more orange-y gold color. Yellow and orange work well together since they are analogous colors (close on the color wheel). The new color I chose also helps tie the skin color into the rest of the palette, again, because they are analogous colors. I used the new color to visually separate the chest from the lower body, the hands from the arms, the feet from the legs, etc. I made the feet dark since I was working on a light background but if your character will be on a dark background then consider making the feet light so they stand out.

I kept the base yellow, skin color, and eye color. I added a blue gem to the forehead partially because the other designs you sent have them, and partially because it helps draw attention to the face with contrast. Blue is analogous to purple (which is the color of the pants), so it is a good choice.

I introduced a lighter and less saturated yellow to help separate the headpiece and pauldrons a bit, help give the viewer's eye a break from the saturation, and to contrast more with the medium blue.

The result is a design that feels easier on the eyes and stands out more. Of course, there are a billion ways to experiment with colors, this is just one way I came up with.

To sum things up briefly, understanding and applying the fundamentals of value, contrast, structure, and color theory to your work will take your sprites to the next level and allow you to know how you should place your pixels to achieve the result you want.
To achieve mastery is not to be able to work without thinking; rather it is to have total control of one's choices.