Pixel art principles in High res graphics?

[Seiseki]

I'm trying to design game assets for a game with a "cartoon" theme.
Doing everything with vector shapes since I'm so bad at free hand drawing.
And I've been sorta following pixel art principles for the shading and such by keeping it simple and not using too many colors.
Because, I definitely don't want it too look shiny with gradients and such, since that looks kinda cheap.

Up until now I've just accepted the banding that occurs when you don't rely on gradients or soft brushes.
But I'm starting to think it's unacceptable, because it shouldn't really look like that.

What I'm looking for is a style, almost like this:


(Best example I could find, with the color banding clearly visible.)

But without all that banding.. How do I keep it cartoony and kinda flat?
Round shapes are the ones which are the most problematic.

[ptoing]

I think you are kinda asking to have the cake and eat it.
If you use low amounts of colours you will always have banding (in the traditional sense of the meaning).

Colour banding is all over pixelart for example, and there are ways to hide it through dither or other pattering or texture in general (shape bluffing too, as ilkke calls it).

But if you want clean shapes, no smooth gradients and still quite a few colours you will have banding one way or another.

[Seiseki]

Well, I've found using few colors and larger areas of a single shade works..
But I'm sorta leaning against using some subtle gradients or a soft brush where necessary.

I think, just like with pixelart, banding is acceptable as long as it's small.
The example I linked is from an android game, and since the screen is small and resolution high, I doubt that players notice it that much.
Not sure what's up with the banding on those helmets though, since it seems like they're still using gradients in other places.

[rikfuzz]

I like playfish's vector assets, usually a mess in-game due to the unavoidable nature of letting users piece things together, but very nice in isolation:

http://blog.petsociety.com/2011/10/20/wake-up-its-nightmare-week/
Whole blog's full of great examples.

[Facet]

Superficially I think you're just looking at a 'cel-shaded' style with only a couple (light/shade) values à la Zelda Windwaker.

More broadly, invoking curved or gradated surfaces with limited values is a definite problem for bigger pixelart and vectors. I think the issue you're describing might be that of the weighting of values ie, avoiding odd-looking evenly spaced stripes; here's a few things I'd try to be conscious of to help:

1. Avoid over modelling form in your shadows; establish the terminator then leave them alone.
2. Group buffer shades as needed to just above the boundary.
3. Try to describe the surface on the light side using reflections (highlights) rather than gradiations.
4. Reserve your darkest values for the point of contact between forms (occlusion shadows)

I haven't got Illustrator on my laptop so here's a quick painted example.



Edit: my grammar bad is

[ptoing]

Nice suggestions Facet, but the occlusion shadow stuff does not usually work that way, at least not in a lit, open air environment (not even in rooms) because you will get reflected light from the bottom so that the bit of the sphere (or whatever) closest to the ground will actually be a bit brighter than the stuff a bit further away from the ground.

Tho for a simple style like this, this can probably be neglected. BUT you could have a simple rimlight kinda thing going on to give your objects a bit more depth.

[Seiseki]

Facet, that image image really clarifies the problem and solution.
Also, cell-shading, why didn't I think of that term? xD
Suits the style much better than "cartoony"..

rikfuzz, that link is great for inspiration and references!

Thanks!

[st0ven]

i think its possible to keep your clean shapes, a flatter cartoony look AND use gradients all at the same time.... but im not quite sure i know where it is you want to go with this.

Are you feeling that gradient tools are somehow unacceptable in art in that the softness will make it look cheap? Are you simply trying to keep harder edges with your shapes and feel that gradients will somehow undermine this?

As it stands, the method you are using for shading, using many values with harder edges, is simulating a 3d rendered flat to look like 2d effect to my eye. in general it seems facets suggestions are all wise and should help alleviate some of your issues.

  ive made a small edited sample of your helmet to illustrate how i might have vectorized it. is that something you would consider cheap?

[Seiseki]

Just to clarify.
I did not draw that image, it's just an example I posted because I noticed the heavy banding.

And yeah, I think gradients can look cheap if they're too extreme. I like the softness they add if they're subtle.
Your edit is great, but I've realized that I really do need the flat style I'm using at the moment.
Cell shaded would be the best way to describe the style. I think if I started with gradients I'd run the risk of things looking too real.

Here's some stuff I'm working on at the moment.
I've noticed the more I think about how the shading looks the more it confuses me.
I thought the tire looked hella weird, looking at it now I think it's acceptable.
These textures will probably be seen at half size too.



Biggest problem for me atm is just keeping this style consistent, as you can see on these images.
Feels like the only thing making them fit together is the outline and lack of color.

[blumunkee]

Yeah, turn the saturation up on the hazard strip and the girder. But the metal shades and the outlines looks fine.

Really, those look fantastic. I think you're being too hard on yourself.