(UPDATED) Background style

[Ringlord]

Hey guys.

Continuing work on my game, I've managed to get things finally going and made a background, however, it's the amount of detail that's currently putting me off from giving it my stamp of approval.



2x



And then there's also this:



2x



Any advice/comments/tips will be greatly appreciated. Thanks again. 

[Gilbert]

I'll say the background is functional at this stage, not very interesting, but functional.

Personally I like the second one more, without the scattered textures on the walls.

The problem is what kind of game and the style you are aiming at. (humourous? serious? realistic? cartoonish? oldskool?)
To make it more interesting I think people would recommend adding more stuff and details to it, but I won't suggest what to add as I'm not an expert on these kinds of things (also, I'm lazy ).

I'd however, suggest that you may do something to it to give more depth to the scene. For example, personally I think the house is good, as the two different shades of the walls define its depth, but the ground and the gate look flat.

I'll suggesting giving some depths to them by doing something like this:

If it is in a style that smooth gradient is not preferrable you may even do something like:

[Inkoddi]

Problem is, the foreground contradicts the background. It's night, is it not. You can make it seem like it is night by using rather dark unsaturated shades of blue, like this maybe:

Wooooo!

[Ringlord]

Thanks guys. I strongly agree about depth, and surprised I didn't add it to the warehouse door. As for lighting, well, the background isn't quite fully finished yet (as I'm going to add a backdoor to the side), and I was thinking to add a moon and use it a source of lighting (although if that doesn't quite work, please correct me  ) as well as a car where the player can turn on the headlights for extra light. I can add a bit more, and then re-post it for further C&C.

PS: Yeah, the genre of this game is a dark noir/mystery with some horror elements, so a serious tone is going to be utilized. I was even thinking of de-saturating the final backgrounds to give them a more grey tone.

[InCreator]

My suggestion: since your BG is still very simple and city in background can be salvaged and reused due zero perspective:

Make a new one.
With MUCH less ground area.

Why is 80% of your background simply ground?
How do you imagine using character here?
How much scaling would he need to walk there? On low res, how ugly it would look?
At so deep angle, is typical horizontal side view even believable, or would we see more of the top of the character from viewpoint like this?
Isn't ground simply boring thing to watch or draw?

Newbies always have rooms with floors wiiide and tall.
I never understood why, but I know for sure it simply isn't practical. Especially when making AGS game.

You have nice style though. Detail faking through monochromatic noise is really good idea, but noise should be faking the viewer, not stick into eyes.

So, use much less noise, only enough to make viewer think that the wall is made of many colors and not one. It makes an illusion of highly detailed wall, if used properly. The ground had just about enough noise, but only noise wouldn't be enough yet, use soft brush and darken processor to make areas of concrete lighter and darker, you could go quite random with this -- and still get excellent result.

EDIT: Also, to be less a whiner and more help, I made you a quick edit on detail(faking).
This is how I used my own suggestion in previous paragraph:


2X:


And it didn't take longer than about 15-20 minutes. If I had layers of everything here, it would been only five.

See how noise only HELPS to make soft brushes appear to be more diffused and distorted, but doesn't stick out so much, for example, on asphalt, it's hard to notice noise instantly, you have to look to see this. That's how you can use soft fuzzy brushes and still have pixellated look. Plus, it makes things appear a bit more detailed than simple soft brush could...

If you'd reveal software you used to make this, and like my version, I could give you a tip or two how to reproduce this.

Of course, Inkoddi's colored version looks much, much better. I suggest to go with his color scheme here. It's just the ground that is too plain, too large, and therefore forces you to pump out heavy amount of details... which is painful. If there was less ground, you could save up alot of hard work and have much more detail with smaller effort. Just look at your city skyline: A bunch of black rectangles, few yellow pixels and the far area looks WAY more detailed than main scene. Seeing a hint here?

Then again, this background COULD be saved by having big, uber-detailed car covering up most of the ground, a manhole where car couldn't save the boredom and some boxes or bums (or both) infront of the rightmost wall, add some graffiti where wall is still visible, also a large tag over garage door, some streetlights and parked cars behind the fence and some wires onto left wall to cover higher areas where bums or boxes wouldn't help and graffiti would be too high to be believable. This is how I would do.

EDIT2: Simple darkness filtering seems to help alot too, on limiting boring areas into less visiblity...


2X:


First, I removed a bit of reds and greens from image and darkened it to get bluish night light.

Then,
I basically covered whole image with layer of black color, reduced its opacity to 15% so it won't make everything black, but only darker, and then removed black from city skyline, and cut transparent areas into black layer in foreground area, mainly on the road where tire tracks are, and smaller "holes" near lighter areas of fence. Read more about this technique here...

It somewhat makes player look into lighter area where action is, and other boring areas are not so noticeable. Adding a bit of glow with soft brush to buildings will distract a bit too and makes detailed part of the image (skyline) more noticeable. But this BG still needs some real detail. Faking and distracting simply multiplies it.

[Ringlord]

Ooh, very nice indeed  :o, although I'm not sure how it would fit my character style. If you'd like, I could post an example up later for reference. As for programs, I do my graphics in Photoshop 7, although I have ArtGem and GraphicsGale at the ready, but I'm just more accustomed to the interface PS provides. Also, not to mention, since this being done for an intro, set "two nights ago" I had the idea of opening it with a black and white filter, so some of the detail may get lost in the process. Anyway, in answer to your questions:

Why is 80% of your background simply ground? 

Two reasons. One, I plan to add said car into the middle, which will act as an interactive object as well as perhaps a puzzle piece  so I need that space to accommodate its addition. Secondly, for the outer space, since this is an abandoned warehouse (something your edit complements quite well) as well as a crime scene and wanted to give players a sense of isolation. But judging from comments, my plan backfired.

How do you imagine using character here?

I think I answered that in the last statement, although to add, there will be a door added at the rightmost area, so it will be a scrolling background.

How much scaling would he need to walk there? On low res, how ugly it would look?

Hmm... not too sure how to answer that, but it shouldn't take much scaling. Enough to make the warehouse appear larger in nature.

At so deep angle, is typical horizontal side view even believable, or would we see more of the top of the character from viewpoint like this?

Seems alright to me. Dunno how to really answer that either.

Isn't ground simply boring thing to watch or draw?

I agree there, but here I tried to give some sense of purpose.


Other than that, thanks for complementing my style.  But I must say I'm amazed it took you only 15-20 minutes to make this one.

[InCreator]

Your problems and my point about angle start with car. To draw car here, correct angle would show very much car roof.

Warehouse angle isn't that noticeable, but when you draw the car, this is what would kick this background out of balance. Car angle would enforce alot of room perspective into this. My suggestion, try to get car's angle as straight as possible to "minimize the damage", but still believable. You cannot really show only side of a car, but before doing hard work, experiment with sketch car as much as possible to show as little of roof as possible. The point of this is to support side view of a character, let background and character sprites work and support each other!

Also, best scaling is no scaling. Always. When drawing a background, this is my first priority. Second one is when there is scaling, only down. Scaling character bigger is worse than making him smaller. Remember this too.

I used ArtGem! to do what I did, and in AG!, it really takes so little time to make adjustments like this. That's why I never moved to photoshop as my drawing skills got better.

[Ringlord]

Makes sense with car detail. Originally the scene was conceptualized with the car driving down the visible road and then arriving at the spot on the background, but judging as to how much perspective issues it would cause, as well as being a pain to animate, it's better to leave it as is and make the scene more accustomed to the static image. I'll see what I can do with the car, then report on the progress, and as for scaling, fortunately I never intended to make characters scale up  Other than that, the only thing that bugs me is this transperency technique, I'm just not entirely sure what you mean by it. Do you mean that I'm supposed to highlight certain areas in the picture, or am I missing the point here?

As far as ArtGem goes, I dunno, it does seem like a great program, and your work definitely shows its capabilities, but I guess its just being more used to the interface Photoshop utilizes makes it harder to get used to AG, but who says I can't use it for touch-ups? 

[InCreator]

Other than that, the only thing that bugs me is this transperency technique, I'm just not entirely sure what you mean by it. Do you mean that I'm supposed to highlight certain areas in the picture, or am I missing the point here?

If you clicked link I gave you, you should already know what I use if for: To easily simulate light. I'm no making anything brighter, but some areas darker.

Now, if you detail your BG, with this tech you can quickly apply darkness to areas that are not-so detailed thus bringing attention to areas that are. And, of course, make lights. I simply showed easy way to do this. Your goal is to make player believe that this is a magnificent, superdetailed background. You can either make it so (and never finish your game ) or use some simple tricks to give existing details more influence. Which I call detail faking and of which you have a little lecture now, from my combined posts.

[Ringlord]

Alright, thanks.  I'll give it a shot.

[Ringlord]

Alright, I must call myself "clueless" right now, but rather as to what steps I need to take as opposed to what I'm supposed to be doing.

I understand what you're trying to show with transparency layers and blue lighting, but the problem is that I haven't used Photoshop for other than some pixel art, an example being this background. I've also tried to accomplish this with ArtGem, but the interface just infuriated me to click the "Close" button before I can actually get accustomed to it (I'm a patient guy in real life, but technology can be a pain when it doesn't work as it should). At the same time, I hate to say it, but I found your descriptions, although clear as to what I should be doing, are simply far too vague for me in terms of the steps needed to accomplish this work

So for instance, when you say "to remove bits of red and green" are you referring to channels? Because the problem is in Photoshop, removing the channels leaves me with a black-and-white picture. If it's putting a color layer on top and removing opacity, then it's just like a blue haze looming over the background. Same goes for transparent areas, as your link talks about applying a layer over the original picture, which is fine for me, but the way you made the blotches of gray and white just throw me off.

Sorry if it sounds like I'm asking dumb questions, but like I said, I don't have photo experience, just simplistic pixel art.  Although I can learn quickly once I get a good grasp of what's expected.

EDIT: After some more tinkering around, I find can sort of get the bluish lighting if I use a layer mask set to vivid/dark light, then a couple of layers set to about 15-20% opacity, as you described, so fortunately I get that part figured out. I'm still just a little curious as to how to managed to do random shading without making it look like an image that someone has sat on for a few hours. Same goes for your transparency mask. I think I was too frustrated to have any real progress at the time of writing my previous post, but I'd still like to know more as to how you accomplished the final product. Everything now pretty much makes sense. Found all the tools needed to accomplish the tasks.

So, I've tried my best at getting a few of the things fixed, and this is what I turned up with after an hour or so actually trying to figure out some of the finer details:





The night atmosphere works, but the shading of the building and the ground, at least in my opinion, looks like a random mess which might have been a decent picture, but was sat on for a long period of time. Mainly, my question here is, what do you do when it comes to shading to make it look so professional and organized? 


(Combined posts) - ProgZ

[markbilly]

The car is good, but needs to be bigger... A lot bigger.

This would be to satisfy both scale, and the fact you hinted the car was the focus of the scene. At the moment, the garage door is the focus for me.

Yes, the shading/darkness does look a little messy, and very very dark indeed. I suggest, if you have an original of the background before shading, and of the car before shading to just start again and be more conservative with it.

Though the 'colour' you have there for night is perfect. That kind of grey-blue.