sprite/background blending

[lavakiss]

This must be a common question, but does the character sprite (pixel art) look alright on a background with more of a painted look? Perhaps it's all a matter of opinion, but I get the sense from posts I've seen that some people really dislike a mismatch, or at least dislike it when sprites look especially like sprites rather than a part of the world. I don't know that I mind it so much, but am interested in thoughts. I'm aware there's no shadow beneath my guy, so that's probably one thing I could add (will have to search for how to do this).

Also up for tips and stuff. This background's unfinished, but not too far off, and I've noticed there are some rockstar artists around here, so any pointers are appreciated. The background was my first time using a tablet (my housemate's a design student and let me borrow hers), so I'm all for hearing ways to improve.


image upload software

Edit:

Sorry, here is the background and sprite in original res.


taking a screen shot



That's all for now. Tinkerty tonk,

-lavakiss

[Anian]

First of all, I hope the things that are unfinished are the things I think are unfinished.  In general everything looks nice, but background still needs finish.

Second thing would be that in some places you're very close to matching the background style with the sprite, why not just do it? Straighten up and harden the edges (do this even if you don't try to match the sprite style) and clear the surfaces a bit (so they use less colors and sharper textures).

Personally, about people minding the discrepancies in the style, in a game most people try to create art that reflects the story and atmosphere, but different styles between sprites and backgrounds just interferes with that. Also, as in your example, it looks almost like the backgrounds is in a different resolution which doesn't indicate any style choice but bad quality (as in as if you can't match it, instead of you not wanting it to match).

Big tip - in the future, please post in original resolution, not enlarged. You have the background and the sprite you can put one on the other in these occasions in some art software, but don't post in game screenshots of full screen if you want somebody to draw over your stuff.

[lavakiss]

Hey, thanks for the feedback.

I'll certainly try edges round stuff in the background.

Also, as in your example, it looks almost like the backgrounds is in a different resolution which doesn't indicate any style choice but bad quality (as in as if you can't match it, instead of you not wanting it to match).

Do you mean the background looks lower quality? Is this due to things like the folds in the curtains and the fuzziness of the globe and could this be improved by picking out these details more? Or have I misunderstood?

I suppose the thing is striking the balance between detail/refinement and speed. I've spent a little while on this background because it's my first go and I'm happy to experiment and get a feel for things, but if I'm to make lots of backgrounds I need to find a style and way of working that looks decent without requiring me to work over the whole image at pixel granularity (I suppose everybody has this problem...). Maybe the way to go is redrawing the character on the tablet... but I suspect he'll look too blurry.

clear the surfaces a bit (so they use less colors and sharper textures)

Is there a good way to do this in gimp? (I'm using gimp... is that embarrassing? Should I be embarrassed?) Or is it a case of painting back over it in flatter colour?

[Anian]

The basic point of my post was it's not that you haven't finished certain parts of the drawing, it's that you need to tighten it a bit (make the details and lines more defined and precise. This will already make the sprite fit better. Achieve what you want in quality, then work on speed.

I'll certainly try edges round stuff in the background.

Just to be clear, I didn't actually mean adding outlines, but just making edges in sense that one thing starts, other begins.

Do you mean the background looks lower quality? Is this due to things like the folds in the curtains and the fuzziness of the globe and could this be improved by picking out these details more? Or have I misunderstood?

I suppose the thing is striking the balance between detail/refinement and speed. I've spent a little while on this background because it's my first go and I'm happy to experiment and get a feel for things, but if I'm to make lots of backgrounds I need to find a style and way of working that looks decent without requiring me to work over the whole image at pixel granularity (I suppose everybody has this problem...). Maybe the way to go is redrawing the character on the tablet... but I suspect he'll look too blurry.

Lower quality as in not managing to match styles, not the actual drawing.
I don't know how strong your motivation is, but speed should not be that much of a factor and yes, you'll need to find a balance, but you'll get faster with time and experience. Even in pixel art, you still can determine how detailed you want your style to be.
You should really check out some of Ben304's work here on the forum, that'll show you how to paint backgrounds but still keep the drawing tight: LINK I think that's what you're going at right now.

Is there a good way to do this in gimp? (I'm using gimp... is that embarrassing? Should I be embarrassed?) Or is it a case of painting back over it in flatter colour?

It's not about the software/automation, just drawing technique. And no, GIMP is nothing to be embarrassed about, use what you feel comfortable with.

[lavakiss]

Cheers, I think I understood you. I was really asking whether more intricately defining areas of finer detail better would help (it sounds like we're on the same page--I take it this is what you mean by tightening it). One thing that might work better for me is using the pencil tool rather than the paintbrush, since the pencil will not go over the 1px thickness unlike the paintbrush (some gimp trivia for the readers).

I respect you saying that it's about the quality rather than the speed, but I don't think I would want to spend years on a single game (unless it was shaping up to be really rad). I was reading a post-mortem of Gemini Rue by its creator (Josh Nuernburger? You know who he is anyway), and he said that (I'm paraphrasing) to produce all the backgrounds he needed to produce, he had to use a style that was less pixel-perfect than he usually used. I thought Gemini Rue looked great, and I suppose I'm looking for that sweet-spot where I can paint up a background in reasonable time, not spending too much time at the pixel level, and have it look decent, or preferably good. Maybe what is possible for a grimy, dark future noir setting is not feasible for a more colourful period setting, though. But this is why feedback is helpful.

Thanks for the link to that thread too--I've read it before, and am a fan of Ben304's stuff. I saw another thread too with Ben304 and loominous firing drawings back and forth, and some of that was stunning. One thing might be, however, that his settings (as in, the worlds his games are set in) are more stylised and colour saturated than what I'm going for, but maybe I'll give it another read.

Anyway, whoa, I've written too much. Thanks very much for taking the time to crit--it's appreciated. I will try to finish this background off and sharpen it, and will post the result.

[Snarky]

I'm not sure how quickly Anian works, but I can easily spend 20 hours or more on even a simple BG. That's no good if you want to get a game made in your spare time, so if you're the same way I think you're right that you'll have to compromise.

I personally have no problem with the way the character sprite blends or does not blend into that background. The BG does look unfinished to me, though (and not just some parts; everywhere). What were you planning to do with it? You could probably get away with this level of detail, but I feel you should really clean up the outlines so things don't blur into each other so much (for example the carpet and the floor, the window and the sky, etc.), or leave little white fringes (e.g. between ceiling and wall, chair and curtain, curtain and wall...), and to make sure things aren't transparent unless they're meant to be (e.g. the globe).

I also think the picture looks a little washed out and "water color-y," and could benefit from some stronger contrast and color, but that's a matter of taste.

But I think the style is already quite appealing and well-executed. Looking nice!

[Eric]

I think the globe isn't meant to be transparent, but that's just an unfortunate tangent where the line of the lighting effect matches the line of the windowsill.

[lavakiss]

Okay, it might be a matter of taste as to whether the sprite and the background blend okay. Thanks for the feedback Snarky. And yes, it does need cleaning up--I wasn't using separate layers at first which is partly why things are a bit messy around edges. I'll post the end result and see what people think.

[Shane 'ProgZmax' Stevens]

If you want a sprite with strong lines to work with this background my advice is to go back to your paint program, add a layer on top of the room and then draw in darkened outlines that fit with the primary color of each object, so a darkish brown for the globe, a dark green for the drapes, and so on.  Clean up the outlines so they are consistent and not too thick and you will have what you're looking for in my opinion.

[lavakiss]

This is the background finished (the only thing needing adding is the view of the grounds outside the window). The curtains are probably a bit distracting, and I agree with the comment that it's a bit washed out--it's sort of what I was going for, but maybe more contrast across the entire thing would be good. I also tried outlining stuff as suggested.

I'm not gonna work any more on this one, but suggestions for improvement are obviously welcome (so I can improve my technique and that).

[Snarky]

Suggestion: don't upload your screens in jpg format.

[Babar]

The last one he did was a png?
I don't quite mind the soft edges along with the pixelated sprites. It has the potential to be a good style.

[Snarky]

Mmmm, the picture on the forum is a JPEG, but (as I didn't notice) it links to a PNG on the hosting site:

[imgzoom]http://s17.postimg.org/9wi38ryjz/room3.png[/imgzoom]

[Armageddon]

It looks a ton better, the curtains are a little rough compared to everything else though. I think you should straighten out the rug some more and maybe shade the roof better with the curtain and such.

[Monsieur OUXX]

add a layer on top of the room and then draw in darkened outlines that fit with the primary color of each object.

Apparently you did that, and even though you didn't show the sprite in the final version, it seems to work! Congratulations.

Indeed, it's no biggy to have a very pixelly/non-shaded sprite on top of a painted background, but still, there needs to be consistency of some sort. I couldn't put my finger on it, but ProgZ did : you need a good contrast on the background.

To sum it up: the issue isn't really when the sprite isn't anti-aliased/shaded while the background is. The issue is when they look like they're drawn in two different drawing styles: if the background is not well contrasted, it looks a bit like it's water painting, while the sprite looks like it's drawn with a permanent marker. That's what didn't work in the early version.