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.

[Seiseki]

Thanks, these were made yesterday though

The ones I had trouble with where planets, couldn't find the one looking the worst, because I've redone them twice now.
But this is sorta how it looked, luckily the craters sorta break up the shading on this one:

Old. (no perspective on the craters)


New, although different planet with soft shadow, soft gradient.


But since the entire theme of the game has changed over night (my own decision), I'm remaking the new ones too into stuff that aren't planets..

I started to realize how wrong my planet shading approach was when I saw angry birds space. (mobile games are excellent for inspiration when it comes to vector art)

[ptoing]

I fiddled a bit with the colours here and think this look better. Pure grey on metal is super boring, esp if you have a cartoony style, imo. Throwing in some blue shades works well.

I also agree that these are pretty nice and a good start for sure.



Also, if you want this thread moved to Low Spec Art let me know.

[Seiseki]

Sure, go ahead and move it!
And yeah, for some reason I tend to forget hue shifting when not doing pixel art..

These aren't supposed to be that colorful though, that's why they're mostly gray. To sorta blend in.
Not sure about the extreme bright white on the bolts and nuts though..

[blumunkee]

Not digging the color shifts in the metal. I think in an actual game you'd have enough colorful stuff besides the metal to keep the gradients monochrome. Maybe do a very subtle blue shift towards the darkest shades. Otherwise, Ptoing's color pop edit is .

[rikfuzz]

Flat monochrome 'ramps' look quite flat and strange (comparatively), especially when it's a neutral colour.  If I glance over to the phone on my desk I can immediately see a couple of light sources once which is more yellow (fluorescent lights) and a more blue light from the window.  If I took a photo and desaturated only the phone it'd look super weird.  So anyway, yeah, just wanted to make the case for ptoing's edit.

[Seiseki]

Wow, I have a hard time thinking in 3D..
Tried to imagine how the missile would look when it rotates.. These are just 3 frames, left middle right.. (I think I can get away with 5 frames since these missiles are kinda fast..)



edit: here is an animated mine!



Also it's hard to stick to one style, I find myself wanting to add more and more detail. (I've recently realized I can add scratches to everything, so that's what I'm doing, lol)
Actually had to remove some detail from this missile since at that resolution the vectors started looking like gradients and it just looked too real.

Also, should I add rust? It takes place in space so it wouldn't be realistic..
I'm sorta expecting that I'll have and retroactively add rust to everything later, haha.. Mostly because rust is awesome and would fit the theme.

I've realized how important it is to feel attached to the artstyle for what you're drawing.
At first it was just a goofy casual theme, but then we changed direction and now it's 2D borderlands in space, sorta.
And I've spent more time working on these graphics the past few days than I have the 2 past months.

[Ai]

Also, should I add rust? It takes place in space so it wouldn't be realistic..

In space, there are other contaminants. Space dust. Meteorites. Depending on the exoticness of the locale, it mightn't be too much of a stretch to have colored contaminants worked into things -- particularly moving things..

[Seiseki]

Mockup time!
I used to have a blue background but I had to tone down it down A LOT. Now it looks pretty gray and dull, which sorta is the setting I'm going for I guess..
Any kind of depth I tried to add to the background sorta made it look really cheap. Like cartoon characters pasted onto a photograph.
So any thoughts on how to make the background layer more interesting would be more than welcome!

[Facet]

I dunno how I missed the rest of this thread; looks great

I might have thought that great hue-shifting would have been one the first carry-over principles you'd apply . Individually elements looks great; really chunky & clear (although the single cog with no depth is a bit strange in context) It has to to be said though that there isn't much colour yet in that mockup, fg or bg. You need to pimp that space .

It looks like you've started including some gradient effects/transparency and stuff too so how 'bout some proper psychedelic space stuff in the background (perhaps kept to a certain smaller chroma range) & generally going a little brighter, more eye-catching in the foreground (glowing/coloured outlines, sparkly particles?) 

[Seiseki]

Facet, thanks!

As for the background, it used to be more vivid and had more contrast, but that made it look so extremely de-attached to the rest of the elements and the style.
I think I could add a lot of colorful nebulas and such, but I'm not entirely sure how I'd keep it flat and low contrast.

Here's the evolution of the first player ship. Left to right.



After the 2nd revision I realized that I really needed clear sources of inspiration and clear functionality for the ship. (function -> form)
Because it was way too hard to just make something randomly and the results were not very impressive.

[Facet]

I mean something like this maybe (obv. photo collage); going much darker in the background with some quite abstract cooler-tinged space dust and cranking up the contrast/colour of the interactive elements for much pop .

Sweet improvements of the player-ship already, although for a small-looking ship I don't see any evidence of a cockpit; is it unmanned?

[Phlakes]

I mean something like this maybe (obv. photo collage); going much darker in the background with some quite abstract cooler-tinged space dust and cranking up the contrast/colour of the interactive elements for much pop .

I'm really getting the depth in that edit. The original feels like it could be a couple feet in front of a painting of space, this makes it feel much more open and natural.

[Seiseki]

Hm, yeah, that actually works and makes it much more interesting.
Now if only I could learn to draw abstract soft shapes like that..

As for the ship, I didn't include a cockpit because when I first tried it on the first ship it looked kinda lame.
And now I've grown attached to the all metal look. Perhaps I'll add some kind of hatch or end up having a cockpit anyways. I do have a few ideas how it could look.

Phlakes, I'm not that worried about depth though. We're gonna have 3-4 layers of junk floating around at various depths which will give you a pretty extreme sense of depth (hopefully).
But it doesn't hurt to give it even more depth through the background, although I'm not sure how much of it you'll be able to see.

[Facet]

If you spammed some textural brush (perhaps from the standard charcoal set in illustrator) low opacity & really big so that it overlapped a lot you might get a nice abstract cloud-thing.

We're gonna have 3-4 layers of junk floating around at various depths which will give you a pretty extreme sense of depth

The depth thing was a concern of mine too; better unfathomable cosmological depth than non-interactive copies of foreground stuff.

[Grimsane]

I think from a design point of view you need to keep a happy balance when you tackle the backgrounds, if you are going to use some really intense galactic backgrounds I'd advise to keep it a bit duller (darker and desaturated) than the source

examples of games using tonal and vibrancy control (darkening and desaturating, essentially dulling it into the background) they usually tend to keep one particular colour tone per background and some use screen filters to give the impression of the light from the galaxies reaching the players immediate surroundings, the first one is a graphic mod and is a tad on the intense side
this this this

and examples of games that have really intensely saturated galaxy backgrounds ( arguably not differing to far from reality)
this this this

don't know about you but I find over saturated galaxies to look kinda cheap and eye hurtingly vibrant. another thing to add is that the games I have tried that have subdued galaxies have the benefit of being in 3D and some of them do have amazing and beautiful vibrant and vivid galaxy sections but they are strategically located in directions you barely ever look during gameplay even dog fights usually get fought on a relatively strict plane, so they never get in the way of gameplay.

I think you want it to be subtle to avoid the background grabbing equal or more attention to the foreground, even facet's example kinda draws your attention a bit more than you might want, just editing Facet's here is to some degree how much I'd attempt to pacify it. because you need to keep the main focus and a consistent level of separation on your play field, and sometimes It's incredibly hard to focus on enemy ships when the background is taking up so much of your visual attention. your posted mockup was sufficient in that regard, but yeah if you wanted a more visually interesting BG that would be my advice

I like you're designs so far and that latest space ship looks pretty baddass like the space ship equivalent of a Harley Davidson, so is it going to be strictly 1 player ship? upgrading and or getting new ships is always cool  and function wise the middle ship isn't too bad, in space there is no drag so stream lining them isn't an issue

[Seiseki]

Thanks, I'm currently thinking about having backgrounds like in this game, but with black and a tiny touch of color.
Having the background quite smooth and the foreground stuff sharp and highlighted will keep things nicely separated.
The scrap floating around in the parallax are quite low contrast already and their outlines are dark gray instead of black like the foreground stuff.

Also, there will be several ships with different abilities and weapons. This is just the first one.

Something I've been playing around with today, after finding the photoshop 3D functions, is this:



Not exactly sure what it will be used for, if it will be used at all.
But it does look cool
(it's a bit off-center though, which makes me feel nauseous  )

[Grimsane]

sounds good, would like to see it in action 

it's a bit off-center though, which makes me feel nauseous

haha thought that was intentional, looks more natural in a zero G setting, it might look too artificial and dull if it was a perfectly centred rotation, it looks quite good,

well what it hints at is a crate that can be blasted into debris to dispense repair objects of some description, the equivalent to health for your ship? looking really crisp too, I think you'll have to do a few more elements in that 3D style to make it look cohesive and not stand out on its own though

can you map alpha to the cube? or use other primitives, I think if you make all the faces bar one transparent and then draw a piece of space debris on one and generate another animation or just use a plane... you might have an interesting 3D space debris that'll probably look cool as ambience if the animation is slow hope you get what I mean

[rikfuzz]

Something I've been playing around with today, after finding the photoshop 3D functions, is this:



Not exactly sure what it will be used for, if it will be used at all.
But it does look cool
(it's a bit off-center though, which makes me feel nauseous  )

There's a lot of perspective..  I'd probably tone it down if it's possible in PS, just because the game view is from quite far away, but the box is acting as if it's quite close to the viewer. 

[Seiseki]

Hm, I know very little about 3D..
How would the perspective change if it's further away? I agree it's very in-your-face, but I assumed that was because of the size.

And yes, throwing that box in there would just be out of place.
That's why I can't really find a use for it at the moment.

[rikfuzz]

Article is probably overkill, but the pictures are pretty self explanatory.  http://en.wikipedia.org/wiki/Perspective_distortion_(photography)

[Seiseki]

Thanks! That's incredibly helpful.
I managed to move the camera back quite a bit in photoshop, yay!

[Seiseki]

Ugh, haven't been much progress in a really long time..
I started working on the 2nd player ship, but it's been slow..

Today I managed to finish the kill animation that pops up above your ship, it's supposed to float upwards too, so if you get more than one kill it doesn't stack up on top.


edit: and ofcourse when I post it I notice some annoyances with the skull, the shading around the bullet hole.. gah..

edit 2:
I've been working on a level boundary marker, a space buoy of sorts.. When a player goes outside the level, he has 10 seconds or so to get back in before the ship blows up, these buoys are supposed to animate and start blinking and spinning when someone goes past them. Along with an alarm sound and a timer..

I think this thing might be a bit too large for that, especially if there are several around the level it can turn busy really quickly.
Perhaps I can re-use this for something else and make a much smaller version for the actual buoy.



The animation is just a test,.
Right now it looks really static because the spinning needs more ease in/ease out and it could use some bounce when it's extending..

Update: Red ring of death WIP! (countdown for when you move outside of the level)



The triangle is supposed to flash and there are a few things I want to improve on too.