Spark's Sprites

[SparkMouse]

I've gotten feedback from a couple other forums, but I figured that if I wanted some more specific critique to help me improve on future works, I might as well check around here as well~

This'll be roughly organized from newest to oldest, and and is pretty much all custom since my edits aren't particularly interesting~

Studio Ghibli game of some sort




So this... Yeah there's a lot to be said for this one. Basically a couple friends of mine were talking about a shirt one of them had and the one wearing the shirt said it should be an actual game. The other looked at me and said "Well, I know someone who could make something like that" (since I've been working on a fangame team for a while doing coding and spriting) and I figured I might as well give it a shot.
I'm trying to keep close to the style used in Studio Ghibli's films as far as shading, detailing and colors go, and am avoiding putting too much detail into the sprites to this end. There are some areas where I feel I could use a bit more detail (or just better-looking details, like on Robot's feet), but in general I feel there's enough detail in them. I need a little help getting a better grasp on shading for this sort of stuff, and just general critique as well (especially on Porco Rosso, I'm still not really satisfied with how he came out). I'm also planning on almost completely redoing No Face once I've finished the others, since his gradual transparency didn't really work well at all the way I tried it.
This is the first time I've done every part 100% custom on a project, since I typically work with at least one frame of a base so I have a style and shape to follow.
As you can see, there are some empty slots on the Character Select, which are characters I haven't gotten around to. The ???? slot is a character I haven't decided on yet. I made a few changes to the roster on the original shirt since there were some characters I didn't feel could work well enough in an adventure/fighting game setting (Catbus especially) and there were some choices that didn't really make sense, like an Ohm instead of Nausicaa herself.
I'm gonna make new CSS art for Totoro and No Face as well. They were the first two I made, and when I started I figured I could just use the sprites for the character select spots. Then I realized Mononoke was way too small for that (and basically everyone else) and started making custom ones.


Ancient Minister (and Primids)




(The Shadow Bug tails will probably be done with in-game effects rather than sprites, so I'm leaving them out of the animations)

Just a character I'm working on spriting for something. One of his moves spawns a random Primid, and they act the same as they did in Subspace Emissary, which means a good chunk of extra work.
I'll admit the Minister is kind of an edit, as I traced his outline over the R.O.B. base I used while making him (to make sure all the proportions and dimensions were correct), however it's basically custom.
Most of the feedback I've gotten on this is to add some motion to the rest of his hat/clothing, so when I get the chance I'll be adding it.

R.O.B.
(these are just a couple of my favorite animations, he's about 95% complete though, just missing some item throw things and the Final Smash)
Fair
Taunt
Roll Dodge
Gyro (before spinning out)

While I did have a base to start on this one, pretty much all the animations are 100% custom (the idle was a slight edit from what was on the sheet, although I don't have a version that I could post).
This is also the R.O.B. which the Ancient Minister was made from.

Quote



Just a fun little project I was doing while taking a break from... R.O.B., I think. Design is based on his Cave Story 3D appearance.

Pichu
(again, about 95% complete sprites, mostly the same stuff missing as R.O.B.)
Crawl
Dizzy
Forward Tilt
Foward Air (parts 1 and 2, you cancel the spin into Iron Tail by holding down, and it skips the last hit of the spin)

The spark-mouse himself. Another one using a pre-existing base (JoshR's Pichu) with custom animations.


I'm mostly looking for help with the Ghibli sprites (and somewhat the Ancient Minister) since they're the ones I'm just getting started on, and so fixing things after getting critique will be much easier. However, feel free to comment on any of them, since none of them are 100% finished projects~

[Previous]

Just a quick coverage of a few points I noticed.



He's got no shoulder! Also, the light source doesn't seem consistent - the umbrelly is shaded with light coming from directly above, while Totoro has light coming from the top-right. Besides that, you try to smoothen your shading with a lot of banding - this, however, results in a rather blurry picture. Instead, you should anti-alias with mid-tones only in strategicsal places, not all along the way! Furthermore, the lineart is rather jaggy in several places (with 2-1-2 patterns and the like; here's an example image).

[Gors]

also, there is a lot of black outline in those sprites. While not completely wrong, I suggest you to avoid it because it can hurt readability in smaller sprites, such as Quote.

Another point is that your colors seem washed out, it doesnt really pop out. Hueshifting and a little bit of contrast would make the sprites better, and remove redundant colors from the palette.

Finally, you do have some animation knowledge, but it still looks flat and slow, as if you traced over a ref. Animating isnt just making smooth frames, its calculating each frame´s position and distortion to give it impact. See rob´s punch you did, and how quick and exaggerated it is. That also happens in cartoons, and it is a great example of representing power. Now, Pichu´s attacks dont seem that powerful becuse it spins slowly and without any charging delay; he´s just spinning. Play with the frames.

[SparkMouse]

@Previous: Is this better?

I agree the shading on the umbrella was wrong; I wasn't sure how to go about it since I haven't shaded/highlighted that kind of object before. I went through two or three other versions of it before moving on to the next character, but this one definitely looks better.
I tried adding a shoulder, although I'm not sure if it looks that good yet. I think I need to round off that general part of the arm.
I also fixed the banding pretty much everywhere, as well as some of the outlines near his left ear; apparently I had missed that bit? You'll also notice a lot of the jaggies are gone.

@Gors: I generally see colored vs black outlines as a stylistic choice. Sometimes it looks a lot better to have black outlines (and makes it simpler to keep a consistent style with a lot of different characters), and others it looks much cleaner to have colored outlines. With the Ancient Minister, R.O.B., and Pichu, the black outlines (or really really dark-colored outlines, in Pichu's case) are to keep a consistent style with all the other characters. For the Ghibli characters... well, the movies don't have colored outlines on the characters. It's always a thin, black outline. However, outlines which are not on the outermost layer (touching the background color) use a darker shade of the appropriate color rather than a black outline. Probably most noticeable on Mononoke, and I haven't quite gotten to do that with Robot yet.
As for the colors, can you give specific examples, as far as which sprites and which colors could be used? I understand what you mean, but it's kind of hard to see what you're saying on this one without some specifics.
Also, I see what you're saying on the animation part. When I return to working on Pichu to finish up his missing animations, I'll see if I can mess around with it and give some of the starting frames more power, and add a few more startup frames.

[Gaia]

Bit of advice, try to have some structure to your sprites, as right now some of them are really lacking in this department. Adventure Time's sprites might've used this creatively, but here, not so much.

Alright, let's begin with the fireball. Well, he's an intangible object, and his arms are all noodly and stuff, but then the outline comes into play. Most sprites that focus on fireballs don't feature black outlines per-say, but more of the darker shade of that particular color. In this case, This particular fireball here.

Look how it's still rounded out without the outlines? It comes back to contrast.

[SparkMouse]

@Gaia the fireball's name is Calcifer (and he's really a fire demon), and now he has a colored outline. Definitely looks better than before, thanks for the suggestion!

Also, I decided on my last character after watching The Cat Returns, and it's Baron Humbert von Gikkingen (Baron for short). This one was definitely a challenge for me and I really need help figuring out what to do with the shoes.

[Gors]

I finally could see this in a high-res screen...

my suggestion is to use a dark brown for outlines, not black. Pure black is 'too artificial' as I'd say, and since you're working with a small resolution art method, you'll notice that even if the anime's outlines are black, if you shrank it, the outline would become lighter due to computer algorithms calculating the average between the color and outline.

as for hueshifting, I'm stealing Previous' example:



hueshift consists on using the entire hue to your advantage, instead of just lowering and increasing brightness. Notice that the first Pikachu tends to red while the second is pure yellow. The hueshifted sprite looks better because in real life, neither the light or the surface that reflects it is purely white. This causes shadows to be tinted slightly. The usual is to tint the dark shades blue and lighter shades yellow, though it's not a fixed rule.

[SparkMouse]

Trying to work on a new Totoro base so he's facing the same way as everyone else.

Need some help with the shading; specifically which areas to shade, assuming the light is coming from the top right general area.
I also included colored outlines on most of the sprites in this one (not Porco Rosso and No Face, who I will rework later, the Soot Sprites, and Totoro since he's a WIP), as well as new shoes for Baron which a friend of mine helped me with.

Also, new Totoro CSS icon.
EDIT: Also new No Face.

[SparkMouse]

Welp, decided to just do it without critique.



Colored outlines and all.

Soon I'll be posting accessories for different characters, like acorns (for the Soot Sprites), Totoro's ocarina and umbrella, a clean version of Baron's cane, etc. Along with that minor sheet, I should be done with Totoro's smaller friends (since they don't seem to have official names, I'll just call them Totorochi for now).

EDIT:
Took less time than I thought, so here's Totoroko and Totorochisai.


Next will be a bunch of accessories.

[SparkMouse]

Kiki, Jiji, and various accessories.







Last public update until all characters are finished, save for possible fixes on Kiki.

[Gors]

before going any further, a lot of characters there could use a better balance. To test the character's balance, flip it horizontally: it'll reveal balance errors. Calcifer's portrait is obviously blurred, there's too many shades going on. Do it with a limited palette, or else he'll clash with the others' levels of detail. Princess Mononoke is actually a lot taller than Porco Rosso, if you aren't aware. She is in a crouched position, and if she was standing normally, she'd be taller or same height than Baron.
Kiki's portrait looks weird. Her facial features aren't evenly placed.

Maybe your problem here is not imitating Miyazaki's style. It looks like his drawings, honestly. Your problem, though, is trying to port it in a different media with the same techniques. Pixelart is a low-resolution art media, so along with colored outlines, you should use anti-alias to smooth out the lines to make it look like a real drawing. Anti-alias doesn't occur in drawings because it's a traditional, high-definition art. But when working with small pixels, you need to use additional techniques to ensure the smoothness. I'll make a sprite of Kiki to exemplify what I'm trying to say.

I know I said this kinda late but don't worry, as this can be fixed with some minor edits here and there. My sprite might not be ideal either; it's just showing how I'd make her. You can ignore it, but it'd be cool if you studied it for techniques.

[SparkMouse]

Calcifer's portrait is obviously blurred, there's too many shades going on. Do it with a limited palette, or else he'll clash with the others' levels of detail.

Calcifer's portrait was actually made in Photoshop with a very thin brush tool so that I could use some transparency in the flames (except for his facial features, which were made with the pencil tool). I do agree it doesn't really match the other characters because of this, but I'm not really sure how to make his portrait look good using pure pixel art.

Princess Mononoke is actually a lot taller than Porco Rosso, if you aren't aware. She is in a crouched position, and if she was standing normally, she'd be taller or same height than Baron.

The heights provided are the heights of the sprites themselves, not specifically the characters (and the bottom of the height reference is the plane on which people would stand, so some characters' feet or toes go slightly past it). Since Mononoke is in a crouching position, if I sprited her standing up she would indeed be about Baron's height, as you say.

Kiki's portrait looks weird. Her facial features aren't evenly placed.

Could you give some specifics? Just in case, here's the reference I used.

Maybe your problem here is not imitating Miyazaki's style. It looks like his drawings, honestly. Your problem, though, is trying to port it in a different media with the same techniques. Pixelart is a low-resolution art media, so along with colored outlines, you should use anti-alias to smooth out the lines to make it look like a real drawing. Anti-alias doesn't occur in drawings because it's a traditional, high-definition art. But when working with small pixels, you need to use additional techniques to ensure the smoothness. I'll make a sprite of Kiki to exemplify what I'm trying to say.

I'd very much appreciate an example of anti-aliasing for the outlines. I tried to anti-alias the shading on the original Totoro base, but decided not to use any anti-aliasing on the newer one because I didn't use it on the shading for the other characters either.

I know I said this kinda late but don't worry, as this can be fixed with some minor edits here and there. My sprite might not be ideal either; it's just showing how I'd make her. You can ignore it, but it'd be cool if you studied it for techniques.

Help is always appreciated. This is more a test for me than anything; challenging myself to get better at custom sprites, especially humans. I definitely don't have the hang of it yet, and with any luck I'll be much better once I get around to making these sprites into animations (could be quite a long while depending on how my current projects go).

[Gors]

I'm sorry for taking long, but I'm here with the sprite. I'll be listing general tips so read them if you are interested.



I hope my workpace is self-explanative; basically I make a copy of the sprite for every important step (sketch, outlining, fine outlining, colors, shading) so when I mess up, I have a 'backup' sprite to return on.
My first step was to set her height via heads. I chose a height similar to your sprite, and scribbled a pose for Kiki. Posing is important and if the sprite doesn't look convincing from this point already, you should redo it until it looks nice. Posing is a way of character communication so brush up on your anatomy and go for it
After the sketch, I laid out blue lines to outline the volume of her body and head. The broom is in another color because it's a different object and behind the character. This avoids confusion when cleaning up. Also Kiki is naked yet; I usually draw the characters naked first to clothe them later. This way I'm sure the clothes wrap the body perfectly, without perspective issues or other weird errors.
After a few adjusts, I made the definitive outline in black. I consider this the last step to fix the anatomy and posing. From now on, the outline won't change as much and will be ready to receive colors. The additional details such as clothing, bow and hair volume were given in those steps as well. Notice that the sprite doesn't have any jaggies, and is smoothest as possible in black and white. This easens readability and coloring.
The first colors are assigned on the areas. I chose light colors for her because it's a lighthearted sprite. Colors also evoke emotions so pay attention.
The shading was placed according to the imaginary lightsource, set on the top-right corner. The different shades were picked with a good amount of contrast and hueshift (though I'm kinda rusty at this). You'll also notice that inside outlines were done with a lighter color than the outside lines, and there is antialiasing on her face to add details that are smaller than a pixel (her nose, for example, looks like a light dot from far away, even if it's actually drawn with black.

Of course, I made this without animating in mind so you can remove or simplify those steps to your liking. My sprite isn't perfect either but I think it's worth a look. (Also it was a good spriting exercise for me ) Sprite, like any type of art, is all about practicing, and if you want to get better at it, I'll do my best at teaching stuff!

Bonus: animated gif of the steps



PS: I forgot to give her cheek blushes... oh well..Fixed.

[SparkMouse]

Alright, I think this one definitely looks better.


Top is yours, far left is my original one, the next is the new one with my palette and the far right is the new one with your palette.

And here's the progress image:

I used the same head with some minor changes on the shades used for certain facial features, which is why the skeleton and outlines are headless for almost the whole thing.
I changed the angle of the broom half-way through because it was turning out to be really awkward (1:1 slope all the way up) when I made it thicker to fit the outlines in. The newer one also fit over her shoulder better.

Definitely made it a lot easier. Thanks for the help!

Oh yeah, and I also reworked No Face in Photoshop to get a better gradual transparency effect.

Might still need more tweaking but it's a step in the right direction, I think.

EDIT: Fixed Kiki's face a bit on her CSS icon as well.

[GFA]

I'd say No Face looks quite a bit better in the whole contrast department and the same goes for Kiki's balance issues. Her CSS sprite is still a tad wonky though. Her cheek buldges a little too much. Here's a little list of somethings I think might help:

1: Smooth her chin.
2: Center her mouth.
3: Lower her nose.

I also think you should center No Face's CSS sprite a little more. It would give it a more uniform feel in comparison to the rest.