WIP: Pixel art attempt...

[monkey0506]

There's a long-standing running joke of sorts with a friend of mine and the gifts I give him for his birthday directly involving Kingdom Hearts 2. So I was thinking that maybe it's high-time I actually got around to making a game with this program already.

My biggest hindrance has always been graphics, but I thought I'd bite the bullet and give it another shot. They don't have to be particularly great as much of the game is going to be in parody of the official title.

Updated version


2x

Original

I'm not trying to work within any specific palette, but I don't want the number of colors to get completely out of hand. I don't really know what I'm doing here, especially as far as shading, so this is what I've got. I also cheated somewhat because I had no idea where to start, so I scaled the image down and did a paint-over. Here's the source image:

http://i.neoseeker.com/ca/kingdom_hearts2_conceptart_1KxWO.png

His arms, legs, and hands I did over completely, as well as the coloring on his hair.

Any suggestions would be appreciated.

[Khris]

2.5...?

There were a few very similar colors, and the posture of the concept art is intended to show the clothing and thus not really usable directly.

Altered a few things, mostly colors:




x2

[monkey0506]

Alright Khris I don't know how you did that...so that's a very nice, completely useless repaint/paintover. I appreciate the effort, but it doesn't do much to help me. I'd actually been looking at it and changed the saturation of some of the colors.



2x


And yes, 2.5. It's half-way between 2 and 3.

Edit: I've modified his pants somewhat. And fine, 2.0 it is then. :

[ThreeOhFour]

Please don't use 2.5x zoom - it makes the image have differently sized pixels in some browsers (like mine ) and looks really odd/bad.

With regards to figuring out what KhrisMUC did with his edit, go into you image editing program and select the colours in his edit then see where they are on the colour picker chart. This gives you a good idea of what sort of hue/saturation/luminence you should use to achieve a similar effect to what he did. It's basic research, but you'll start to see patterns each time you look at images and you'll learn popular techniques this way.

[Khris]

It took me some time to realize that you're asking for a list of specific changes. (At least that's what I think you do.)

At first I did the basic stuff: increase contrast, add shading to bring out the volumes (made pant legs rest on shoes, made arms bulge sleeves, turned legs into cylinders).

The next thing is proper use of the limited pixels: You've put pixels on the sides of the black vertical stripe on his torso, I've removed them. Putting them there makes the stripe twice as wide, not drawing them is much closer to the original. The key to low-res art is to know which details can be sacrificed (and which ones can't).

There's no technical reason to keep the color count low, but an artistic one: it unifies the sprite. By using the beige-gray for shaded areas of the lower pants and exposed areas of the thigh area, it feels like one piece.
And by reusing the jacket's prominent color for the pants' prominent areas, I've tied the torso to the legs, keeping the hero's color scheme easy and distinct.

I'm not too happy about my edit's head, others are way better at drawing faces and hair inside 10x10 pixels.
But again, increased contrast and volume.

[monkey0506]

I was asking specifically what can I do to improve...it is the C+C forum.

I've modified the contrast of some of the colors, cutting it down to 16 colors. I modified the pants to make the transition from the black portion to the khaki portion...uh...hopefully better. I'd been fully informed it looked rather like he was wearing underwear on the outside of his pants.

I also modified the pants legs to sit on top of the shoes a bit better. I actually looked back at the first post, and I'm much happier with this now.





As I said it doesn't have to be perfect, but I would like to be able to improve while doing this...

As much as I appreciate the effort taken, I would probably benefit more from direct critiquing than paint-overs. In the end this is really about what I'm capable of creating. If you simply show me but I don't understand the technique and methodology used, it doesn't really help me become better.

[Sylvr]

I think I changed my mind, it might still look like underwear. I know, it's terribly indecisive of me. I'll have another look at it after I sleep, haha.

[Khris]

Well, it's not like I've produced a painting using some obscure, advanced photoshop tricks or something.
I've merely changed a few colors and drawn a few pixels.

[monkey0506]

Yes, and again I definitely do appreciate the effort you've put forth and the interest you've taken in the matter. It's simply that you "altered a few things" without really telling me what I needed to do to improve. In spite of that though it did at least put me thinking along...well, hopefully the right tracks (no one has apparently confirmed or denied that I've managed to make it better).

In any case, I'm happy enough with the changes that have been made that I think I'm going to try and take a crack at animating this guy.

[Buckethead]

maybe give the skin and trousers more contrast. For the rest I think you have a nice solid style that isnt too diffecult to produce.... so make a game already! 

[monkey0506]

"More contrast, more contrast, more contrast"...Okay I'm guessing you want more contrast?





I've taken a page from Khris's edit again and made the pants the same color as the jacket. It's a bit deviated from the original source, but like Khris said, sometimes these sacrifices have to be made.

This allowed me to do some more shading without having to any more colors, so it's still at 16 colors. I've also raised the contrast of the colors, so hopefully they should be good now.

Unless anyone has any major issues that need correcting with this sprite, my next update will be a walkcycle...hopefully!

[Khris]

What you did when shading the pants is called banding and is to be avoided like the plague. It's the smelly, deformed cousin of pillow-shading.
Right now you have completely flat legs with banding on them.

The arms are completely flat (not shaded at all).

The lighter parts of the pants look more like very high boots.

If you want to learn something here, don't jump to making the walk-cycle, the sprite is far from finished.

[monkey0506]

Khris I'm not really sure what you're saying I need to do here.

Looking at your version I see both pillow shading and banding. The arms do have shading but it's limited because the arms are small and I don't know exactly what I'm doing...and it's only about 3-4 pixels different than the "shading" on the arms in your sprite. I have no idea how the pants suddenly look like boots. They in no way to my eyes look like boots, even if I try to think of them as such.

If you could better explain yourself with a paint-over which directly addresses the issues at hand I'm not against the idea of a paint-over, but simply posting a paint-over without telling me what's wrong isn't very useful either.

I'm not trying to jump ahead here, but I'm completely failing to see where exactly these massive changes are that absolutely must be fixed since "the sprite is [so] far from [being] finished."

[Trent R]

I'm going to take a unique (and perhaps confusing) route of CC your picture.

Because I suck at paintovers, and because you are already commenting on Khris's compared to yours, I present the following.

You said that the shading of the arms between both is "only about 3-4 pixels different". That may be true of the position of each pixel, but your colors are completely different. One of the color modes in Photoshop is HSB (Hue, Saturation, Brightness). With the HSB of the 2 arm colors in Khris's paintover they are 28, 57, 97 for the light color and 27, 53, 68 for the dark. The H and S are fairly similar, whereas the Brightness is a large difference.
Your picture on the other hand, 27,41, 99 for the light and 25, 52, 97 for the dark. Sure the hue is changed and it looks darker, but on a small sprite there isn't enough contrast (gasp! It's that word again!). Now, I would suggest picking your colors this way, but it is another way to look at it.


~Trent
PS-There is nothing incorrect about the sentence "the sprite is far from finished", so why bother trying to fix what's not broken?

[Khris]

Not sure where in hell you can see pillow shading or banding on my sprite. Never mind though.

I didn't even see the 'shading' of the arms, the colors are indistinguishable even at x2. More contrast!

Boots wasn't well worded; I meant it looks like he's wearing dark pants and somebody decided to wrap his legs in blankets. Or, well, like he's wearing loose, light pants and decided to wear his dark, tight undies on top.

[monkey0506]

At 200% I can now clearly distinguish every single color in the image (when FF isn't blurring the thing).

I've tried yet again to "fix" the "underpants" issue, but ultimately if it's not possible, the game will be a parody anyway.

Again, I'm not aiming for professional grade graphics. If it takes me a month to get a single sprite done, I'll never get the game made. That's been the issue all along anyway. I'd like to know what can be done to improve, but there's got to be a point of cut-off if I'm meant to actually release anything.

I want to stress that I do appreciate greatly all the C+C and other effort put forward and I'm not trying to breed any type of animosity with what I'm saying. But what this really comes down to is my own abilities. I could spend a year refining this one sprite and still not have it "perfect." And I would never release a game. This has definitely been a great learning experience. Just looking at this latest version against the original will show that much.

I am feeling as though I've stepped on some toes here. It's not my intent. I'm simply trying to ask what I can do to improve the sprite. Again, much thanks for all the help. And if there's really major issues that desperately need attending to, I'm willing to try and fix it, but perhaps in addition to explaining what needs to be fixed, could you explain how it could be made better?

@Trent, the reason I modified the quote was to put it in my own words while still quoting Khris. I wasn't fixing it. I put "so" to convey the implication that the sprite will require years more of work to get it right. I put "being" because it was more aesthetically pleasing to me. Writers modify the actual text of quotes all the time to better fit their work.

[monkey0506]

In lieu of any responses, I've been working on a walk cycle, but I've also been going to work and doing my actual job as well...which since I'm back in class for 3 more weeks leaves me with plenty of down-time to work on things.

I have limited resources, but I do have MS Paint available, so I've worked up a different image, the keyblade! (Source)





The walk cycle will be finished once I've sorted out exactly how to do one of those...

[ThreeOhFour]

Paint is quite fine for this style of thing.

Allow me to jot down some advice, as supported by the following image:

-When drawing straight lines at low res, try to keep your pixel lines uniform. Ie, have gradients at 1 or 2 pixels long each increment, not 1,1,1,2,1,1,1,2. This makes lines look straight, otherwise they look wonky.
-When doing rounded metals or plastics (or other reflective surfaces), try putting a midtone above the highlight again. This makes it look more rounded, as highlights on a rounded surface are quite narrow.
-Use a more direct light source - it makes highlighting and shading look more effective. Add edges with shadow or highlight tones to create depth in the image.
-Try to draw on a more neutral, low saturation backdrop. Retina searing pink is great for importing into a game, but it makes your perception of the colours less accurate, meaning what looks sexy on pink looks different ingame.
-Some things look a little pillow shaded in real life, so don't be afraid to pillow shade occasionally

If you're confused (Ie, you feel I've just gone and drawn a picture and not explained why or how I got here), just let me know where I lost you and I'll be happy to point by point explain it to you

[monkey0506]

Thanks Ben. I was trying to make the blade look a bit longer in a small space and I wasn't really sure how. I'll look at trying to make the line more uniform.

When doing rounded metals or plastics (or other reflective surfaces), try putting a midtone above the highlight again. This makes it look more rounded, as highlights on a rounded surface are quite narrow.

I had no idea that this would be a good idea, but I can definitely see how that works. Thanks for the tip as well as the image which shows it off!

Add edges with shadow or highlight tones to create depth in the image.

I'm still unsure what I'm doing with shading so I tried to do that here, but I can definitely see improvements in your paintover.

Try to draw on a more neutral, low saturation backdrop. Retina searing pink is great for importing into a game, but it makes your perception of the colours less accurate, meaning what looks sexy on pink looks different ingame./quote]

I actually went for the pink because I was losing too much contrast against other colors. But I understand what you're saying. I'll try to find a more neutral color that doesn't interfere with the specific palette at hand (again, not constraining to a game-wide palette, I'm just referring to the colors used by each sprite).

I definitely appreciate your post Ben. Explaining what could be made better as well as showing me has helped my understanding a lot.