BG - Backs

[Snarky]

I'm working on a background. It's still in an early stage, but I'm not feeling too happy with it:



It's meant to be the back of a fairly fancy boarding school, up against a river. There's an exit on the left, and you can go into the alley, at which point it would zoom in slightly and the foreground and wall would fade out, like so (roughly):



There'll be some more stuff in the alley, things that are important to the game. For gameplay/story reasons it's also important that there is a wall shielding it, so people can't see straight away what's there. Apart from that, the river and tree have a function in the game, but you don't need to and can't walk there.

Anyway, I don't think the composition works that well, or the colors, or... any part of it, really; and I was hoping someone could point me in the right direction.

[Shane 'ProgZmax' Stevens]

As a background, it may be made 'functional' but it's really not all that interesting to look at.  My advice would be to move back a bit, and draw this section as part of a larger area that you could add more interesting things to.  For instance, you could expand this section by the alley to having a park for the children by the river, with a couple of cobbled mini-bridges and some swings and such to keep the viewer interested.  Another thing I would focus on is either using a different brush or simply hand-painting those trees (especially the left-most one) as it just looks mass produced and not very tree-like.  As far as the color ranges go, the willow on the right (is that a willow?) has a pretty good color range, though I think you should push the contrast towards brown-yellow in the shadows.  The left tree is simply unnaturally green, so my advice is to look to google for some trees of the type you're trying to produce (several, don't just look at one) and that will give you a good cross-section of colors to experiment with.  For the boarding school, you might try being less conventional with the design and sacrifice raw reality for something more visually appealing (maybe a more gothic design?).  These are just thoughts for livening up the image, though the most important fix in my opinion would be to start by ZOOMING OUT a bit, it's all too confined and uninteresting.  Give us more to look at and work with visually, and you could always do a closeup (which you already planned) of the alley when they walk behind.  Finally, decide on where you want the player's attention to focus.  Right now my eyes are constantly drawn to the tree smack in the middle of the screen, which is something you should avoid unless that tree is intensely interesting and important.  You can avoid misleading the viewer's eye by offsetting objects like trees so they balance out something else in the background (like a swingset on the left, etc).

[InCreator]

You're mixing absolutely incompatible things here.
Unnaturally straight tree & boring, uniform geometry vs. handpaint'ish blurry coloring. Reminds me very much early Ben Jordan games which did same mistake.
I suggest to pick a path and stay on it. If you want artsy, hand-painted look, disregard straight lines and go crazy. If otherwise, lose the blur and be precise in coloring and shading too. That means drawing every stone in cobblestone road and every grass patch, instead of just dropping blurry patches of color.

I personally thing that clean, uniform style would work better with character. In which case, you don't need so much different shades of color on everything aswell.

Also, greens don't mix well, but I quite like the tones on wall and red brick.

[Snarky]

Here's as far as I got yesterday before succumbing to frustration. Changed the color and position of the left tree, and made it look less washed out overall:

You're mixing absolutely incompatible things here.
Unnaturally straight tree & boring, uniform geometry vs. handpaint'ish blurry coloring.

Yeah, but that's really the only way I can work. I only get a feel for objects by laying down brush strokes one by one, and if I don't use formal construction then the perspective is always a bit off. Keep in mind that it's still in early stages, too. The tree will get more work, and the brushwork will be sharpened and more detailed.

As a background, it may be made 'functional' but it's really not all that interesting to look at.  My advice would be to move back a bit, and draw this section as part of a larger area that you could add more interesting things to.  For instance, you could expand this section by the alley to having a park for the children by the river, with a couple of cobbled mini-bridges and some swings and such to keep the viewer interested.

Yes, I agree the background looks boring, and the more I look at it the more I think it's not even all that functional (as a BG) either. I did try zooming out a bit, but I'm starting to think that this should in fact simply be two separate screens. That way I can get the necessary closeup of the alley, while showing a more interesting view of the back garden and river instead of filling most of the screen with walls.

[Anian]

Yeah, this may be faster, but I'd ditch the "I can use PS brushes" look and go pixelish. As in more cartoony to match the style of the sprite.

[Snarky]

I see what you're getting at, but I think Photoshop-painted backgrounds with pixel-art characters can look alright. This one just isn't coming together at the moment, and I'd like to nail down the composition before getting too caught up in the surface detail.

To that end, what about this sketch? More interesting?



(I'll nudge the building, that big brown boxy thing on the right,  a bit to the left so the corners where the character will appear and disappear aren't hidden behind the foreground tree.)

[InCreator]

If you want to mix both styles -- soft brushes in pixellish universe -- I suggest... my own
http://www.indrek.org/pass/

[Snarky]

If you are offering to do the graphics for my game, I accept. 

[InCreator]

Haha, no. I'm too tied up with Blackwell Deception.
But you can click links in my sig and learn yourself.

[cat]

I see what you're getting at, but I think Photoshop-painted backgrounds with pixel-art characters can look alright.

Yes, they can work, but hardly with those PS-pattern brushes. Try to colour the new sketch you made just with simple circular brushes, it will look much nicer.

[Snarky]

Thanks. I don't want to get too caught up in worrying about brushes and stuff like that while I think there are still more fundamental issues in the composition.

Here's another version, essentially the reverse view of the previous one.



InC, I didn't know you were doing the Blackwell Deception backgrounds. That's great! I like your style, but I don't think your process is for me. Getting 3D rendering involved just seems like making more problems for myself.

[cat]

I like the general composition of your last pic, but is the walkable area really only the small area on the left?

[Mad]

I think cat's question is very important and leads to the further question of what purpose this BG will serve in the game. Guessing from your first background, there'll be some back door the charatcter can interact with... All your other scetches have far more pleasing compositions, but if the building and that door are of any importants, they won't do the job.

My advice would be to move back a bit, and draw this section as part of a larger area that you could add more interesting things to.  For instance, you could expand this section by the alley to having a park for the children by the river, with a couple of cobbled mini-bridges and some swings and such to keep the viewer interested. 

This is very good advise, I think, but if that fenced court is a key plot point in the game, the focus should still be on that.

I guess I'm saying, that you should tell us, what will be important in this BG, what walkable areas are required, and with which elements the player will be able to interact. Maybe draw a layout of the area from the top, with all the important things mapped out. That way we can make a better judgement of your scetches and it might help yourself to realize a new view point for the BG.

[Snarky]

OK, I'm glad the compositions are looking better, at least.

Yes, in this version the walkable area is just the bit on the left. And yes, that is a concern.

I decided to split the background into two separate screens instead of using that kind of tacky zooming/transparent wall thing I originally proposed, so a lot of what was important in the first version will not be in this screen. Essentially there are now three main elements of this room: 1) The entrance to the alley behind the school. 2) The river. 3) The boughs of the tree.

Ideally I'd like all three elements to be in the foreground, but I'm having a hard time finding a composition that will do that, particularly without bringing the river exceptionally close to the school.

Here's another attempt that kind of splits the difference between the previous versions. I think it's not quite as nice as the previous one, and I lose the closeup of the river, but without making it a scrolling room or some silliness like that I don't see a way around it if I want the walkable areas to work..



Thanks for the input so far!

[Hudders]

Draw it facing the alley.

Entrance to alley in the centre, tree to the right, river in the foreground.

[Mad]

Maybe the whole thing will work better as a scrolling background.
I made a quick scetch, how you could make that work.



This way you'd have your back entrance quite prominent when the background is scrolled to the far right, but if the character follows the path down and to the left, you'll have the river and the tree dominating in the forground.

[Shane 'ProgZmax' Stevens]

Mad's example is a good starting point.  It maps out the scene clearly and shows all of the important 'zones' (the alley entrance, the walkway around the school, the river and tree) while keeping the composition interesting.  One thing I'd recommend is opening the hedge in the distance near the front of the building with some kind of structures at least hinted at.  I don't really know the timeline or where the school is located, but if it's more or less modern I'd extend the entrance area to the left a bit with some parked cars, perhaps a flagpole.  It wouldn't hurt to add a door with an overhang to the side of the building and a bridge or two along the river (maybe one going southwest from the tree into the foreground).

[Snarky]

Yah, it's very nice, Mad. On reflection, there are some gameplay reasons why I would rather not have a scrollable BG here, so I've been working on something using roughly the composition of the last sketch I posted. Also I've been working on the new screen for the actual alley, to make sure they match. I might post those later if I run into other problems, but for now you've all been a big help.

[Mad]

Don't know if you're set in what you want to do with this, but looking at my earlier sketch, I had this idea how my layout could work without it being a scrolling background, since that is not an option.



I basically just turned the view point a bit around a made the angle a bit steeper.

Hope this is a bit more help than the last one

[Snarky]

Well, for one thing it has persuaded me that it would be useful to do a values study before starting the color filling, so that should help.

The layout seems to be moving closer to my original version, but following ProgZ's advice to pull back the camera. It is interesting to see how that would look, definitely.