Background Workshop II - Concluded

[Myinah]

Ok so this is my WIP. Just some basic line work and colour placement. If it doesnt suck I think I'm gonna try and paint over with oils. The grey people will have clothes too .



304 - I found your comments very helpful. I learned something completely new which is fantastic! I think I knew there was something wrong with that line which is why I added the fanned doormat thing to the harbour masters door. I just didnt really know what the problem was or how to fix it. Hopefully my changes have improved things. I tried to sort out the other problem areas too.



I need to start adding values but I'm really unsure how to light it so we'll have to see how it goes. I have very little experience with light and shadow.

Rough shading added and exits made clearer

[ThreeOhFour]

Loominous: Yep, I used the grid on all of them, mostly to measure distances. I don't mind so much about wonky perspective, at this point I'm really just using the grid as a visual for where everything is sitting. 90% of the time my perspective grid is at a third with the vertical placement, but I move it left to right without much thought for thirds. As for using thirds/golden ratio - it's not a strict rule, just helps me keep things balanced. I've never tried working with golden ratio, though I've wanted to for some time. Not 100% of the mechanics of using it yet, actually, although seeing Misj's (finally that apostrophe makes sense) example helped a bit.

Selmiak: I always do this at actual resolution, because this usually ends up being the basis for a scene for me, but I zoom out so it's almost like thumbnailing. I usually do it all on one layer, but I split it up to show stages in the interest of showing progress for the workshop.

My thread updated with stage 2 of my progress.

[loominous]

My thread updated with stage 2 of my progress.

Another great set of wips, quite exemplary!

I was having a bit of an issue finding stuff in the image though (the perils of the blobs), so when you were talking about the tree you were tweaking I was hopelessly scanning those thumbnails with no luck.

I do have one concern though when it comes to playability, since, as I interpreted the script, you're supposed to be able to reach: the south exit, the tree, the dock on the left, and the harbor master's office, and with the scale of the south exit (which is quite big), there would be quite some scaling if one is supposed to reach the door of the office (which I'm guessing is the closest building on the right).


Cassiebsg:

Anyway, here for you to rip apart:

Cool to have a 3D piece involved. As you said, the camera is quite high, but in 3d that'll be an easy fix.

Even if you're doing it in 3d though, it might be good to take Ben's route, with laying down some values, to see how the silhouette's are gonna turn out before going into details like that ornamentation on the door for instance, and try to nail the layout and composition and as much as possible before going into 3d. So much at this stage is just about combining differently shaped blobs with other blobs to make something visually interesting, and without values you can't really tell. Anyway, perhaps you were heading into values next, making the above moot.

I realize the above was a quick sketch, but it's worth having some of the following design considerations in mind when working with the rough sketches, since at this point it's very easy to adjust everything:

[Myinah]

Great stuff so far. Just updated my op with my work.

[ThreeOhFour]

Thanks loominous, I definitely need to think about the scaling there, I hadn't thought about that. I'll also make a little note of where everything is on my next set of thumbnails to make the blobs easier to read.

I like your design, Myinah, it's varied and practical at the same time. It's a little hard to see the "big shapes" without the values, as loom says, but I noticed a few little things that caught my eye:



The light strip in the middle is a section of the background that makes, in negative and positive space, a straight, almost rectangular line of similarly sized shapes and gaps which makes it a little hard to trick the eye into seeing depth here. Some stuff you could try to fix this is to alter the sizes a bit, to move things off the line (shifting the door more to the right, move the guy mending the cloth to the left to break the line, etc.)

Another thing I noticed is a lot of tangents or near tangents in your pic, which is where two edges/shapes converge in a way that means they're touching rather than being apart or overlapping, and it's hard to see the depth as a result. This is my favourite set of tangent examples, really explains the issue clearly. I've circled a few in your image to point them out, but there's even more hiding in there - take the bottom of the hat of the person sitting at the table and how it follows the same line as the bottom of the building, and the vendor behind that whose cap almost follows the exact lines of the window frame behind. It gets pretty difficult to avoid when you have as many features in a scene as you do here, but the more you can avoid it, the better the feeling of depth will be, and the clearer your image will read.

EDIT: Updated original post with my next step in progress, trying to take into account the issues loominous mentioned.

[Misj']

I've updated my original post with a first rough and some insights into it.



It's time to start experimenting a bit...

[ThreeOhFour]

Interesting start, Misj'!

One thing that always frustrates me with scrolling scenes (and why I avoided doing one for this, despite it being, as you say, a crowded and busy scene that's tricky to fit into a single width shot) is that it's really hard to plan a composition out effectively for when it's in-game because the player can move the frame as they please. I realize that for an example like this it's not quite so much of an issue, but considering that I'm used to my stuff being placed into a game, I always find it more difficult to balance stuff out with this in mind.

One thing I sometimes try is having a scene split up into 2 or 3 separate compositions - I actually physically cover one half/fragment of the scene with a block of solid colour and focus on one "game resolution" sized chunk at a time, which helps, but seeing as you can't control where the player is going to be at any time (and where reviewers are going to be when they take screenshots ) unless the pan is a fixed one in an establishing shot, I never really feel like I have control.

Does anybody have any thoughts on this? I know there are some games with great scrolling backgrounds (The Dark Eye: Chains of Satinav, Full Throttle, etc), I'm wondering if there's any techniques that can help out here?

[loominous]

I've updated my original post with a first rough and some insights into it.

I really like the content of the image (and you clearly put a lot of thought behind these things which is very impressive), but I think there's issues on the "blob" level. This should preferably be taken care of before any of the details are added, the quick kind of experimenting Ben is doing, since I'd hate to redraw all that stuff you've put into the image already, but you can always push things with some lighting:



Btw: The bright blob on the left in the above isn't ideal position wise, since it draws us out of the image, (and too bright if you look at the rest of the sky), but just there to serve as a point about extracting interesting shapes that breaks up the image.

Does anybody have any thoughts on this? I know there are some games with great scrolling backgrounds (The Dark Eye: Chains of Satinav, Full Throttle, etc), I'm wondering if there's any techniques that can help out here?

I can't stand not knowing the framing of an image, so I avoid them, so I'd be very interested in any insights myself.

[Misj']

One thing that always frustrates me with scrolling scenes (and why I avoided doing one for this, despite it being, as you say, a crowded and busy scene that's tricky to fit into a single width shot) is that it's really hard to plan a composition out effectively for when it's in-game because the player can move the frame as they please.

I know where you're coming from, and to be honest I usually only rely on scrolling backgrounds as a last resort (which is basically never). I often don't even really like them in games...which is odd, because you would say that in an interactive story an interactive camera-position makes a lot of sense (though as you said, there are some excellent examples).

I do, however, have some thoughts on the subject of course. And the most important thing is not to rely on a predefined structure and much more on (a well trained) intuition. Of course when the character is at a key position the composition should be strong, because you know beforehand that the player is going to see this particular shot.

By the way, the same problems you mention for scrolling backgrounds also apply to working for different screen-ratios (especially if you solve that by scrolling rather than black borders).

[Misj']

I really like the content of the image (and you clearly put a lot of thought behind these things which is very impressive), but I think there's issues on the "blob" level. This should preferably be taken care of before any of the details are added, the quick kind of experimenting Ben is doing, since I'd hate to redraw all that stuff you've put into the image already, but you can always push things with some lighting:

Cheers Loominous. The ground was something that I was very unhappy with (since it's basically a single solid boring color), and adding details (like litter) wasn't going to help that. This certainly helps me solve one of the main weaknesses I felt the image had, so I'll probably continue with this layout (and tweak it in some places).

There is probably going to be a glass-tube or something attached to the arches (mostly to add some science-fiction elements, but also so the side of the ship will not clutter the left exit). That could account for a brighter blob there (though not as bright as your example).

[cat]

Initial thumbnails


I really had trouble putting all the required stuff in the picture and especially the bottom exit limited the options. I'm still not satisfied with what I have, it looks rather stiff...

Update 8.6.2015 First Draft


Following ThreeOhFour's advice (thanks for that!) I increased the space around the house. Once I had the house done with perspective, it felt rather unbalanced to the right. So I made the ship on the left bigger and removed the tower - maybe it is too big now, I have to do some research on Hanseatic ships
Also the upper left part feels a bit empty, but I don't know if this is a problem.

Update 11.6.2015 Basic shading

I tried various versions of different background houses, the cliff, even adding a channel or city gate. However, they did not really fit the setting. The picture above is the one I liked most, with the tower added back again and variations in the building heights. I also decided on the basic light direction.

Update 13.6.2015 New lighting approach


Update 15.6.2015 Another point of view

[Ykni]

I'm a bit overwhelmed by the quality of the 'rough' sketches that you guys make. But here is my own attempt. I'm very much struggling with creating enough room to place the stalls on the market square. I was thinking about using the big white space overhead to add some branches with the hallucinogenic fruit. Probably going to make the coastline curving to the left so that the ships will not be so neatly aligned.



After reading the other info in this thread I think the first sketch probably has serious scaling issues. So here is a second attempt, the amount of items that has to be in there is giving me a serious headache. That's why I tried to find a way to make the most of all the space that I have. I think the ships could be airships as well, so that's what I tried in this quick sketch. I  noticed that I changed the perspective on this one as well, I'll probably have to lower it to make it more at eye level of the player.
This is the way I usually work, just a quick sketch to make out where thing go and then I start painting. Usually I don't make a study of values or composition (other then the sketch). I tried the golden mean, but I don't really understand how that works yet.

[Misj']

Ok so this is my WIP. Just some basic line work and colour placement.

The two things that bother me most (apart from the tangent lines mentioned by Ben) are a. the image looks quite flat. This can be easily solved by adding shades. And b. the exits. The exit on the bottom is obscured by a framing element (the arch) and the exit on the left is obscured either by the box (if the exit is on the bottom of the screen) or by the narrowness of the walkable area between the tent and the stand in the top-left (I'm not sure which of the two is intended to be your exit.

I would also look into the curvature of the wall on the left. It feels illogical to me that anyone would build it like this, because it would - in reality - make the walking-area at the bottom smaller (two opposite arches) for no particular reason (not that backgrounds have to be entirely logical...or city-planning for that matter).

[selmiak]

Do we have some blender experts here?
I wanted to sketch my harbor in blender to save time but now blender cuts off stuff in the render, that will take me even longer to find our why that happens and what to do.
just compare the normal edit view with the render/cameraview. I already built more that it shows. Why? Oh why? Do I really have to draw perspective lines now???

So this then is my first WIP post


after starting to get the hang of blender and it's quirky quirks lets model some more:


adding some more distant details. This is where the big deliveries arrive.





Some more stuff happening in the foreground. The harbour master has his office on the upper level. He is a beardy old man and always swears. And he is fat and swears loudest when he has to climb up to his master viewing spot and in case of an emergency (or when he is feeling moody) ring the alarm or give other signals.


I added some boats and some colorful lamps and some houses up the hill. I really have to stop adding stuff or I will never finish painting this.
If noone sees some glaring composition error I'll render out some sperate layers to make it easier in PS, probably the balcony front layer, the shops, the big buildings, the ships, the houses on the hill and all water reflections on seperate layer and see what comes out of this

render time at this resolution (click for full size) 47mins

[Cassiebsg]

Thanks for the feedback loominous!

You know, I hate boxes... yet, I seem to always end up in them, as soon as "buildings" come into the picture. As for the "stalls"... well, that's what comes to mind. A rectangular shape with stuff to be sold on them, and eventually a roof to shade from the sun and rain. Is "stalls" to be taken literally, or figuratively? Cause I probably would rather have sellers sitting or standing by their stuff on the floor, and eventually one of two stalls...

I never tried painting "blobs" and shades before. Normally I just draw the lines and then shade (and most of the time it's a real location I'm drawings, so the shades and contrasts are already there.) And I started thinking "shades and blobs" but still ended up with lines.

I'll see if I can produce some blobs and shades, that I'm happy with... I'll be baaaaack...

EDIT:
@selmiak: I know there's a clipping setting for the camera. I often also have problems with it. Let me open and see if I can find it. BRB

EDIT2: Select your camera, click on the camera icon on the right to select it's pane, open "Lens". There's one called "Clipping" there. Try and increase the END value.

[Lasca]

Wow! What great sketches!
I've been hoping for another bg workshop and I really want to get in on this, but I have so little time! but I'm going to try, and we'll see if I can keep up.

So, my first visualisation of this was some kind of MI-dock style, but that felt very boring, so inspired by Misj way of working I decided to make up the game before working on the bg. I felt like taking it somewhere more serious and political, and my first idea was doing something on the African immigration on the Mediterranean. But when touching something so sensitive and very contemporary I feel like you have to be VERY respectful and have a lot of meat on your bones, and I don't feel competent enough to dive into that. So, second idea, in short, similar but different:
1941, baltic country recently occupied by germany. Pavel, 13 years old, needs to get his best friend Sonya, who is jewish, out of the country and over the sea, to the neutral country sweden.
I'm not quite sure of the visual tone I'm going to go for, and I don't have a real bg creation routine, so I'm going to pick up what I get from the rest of you and try not to derail to much from the original script.
Anyway, here's some REALLY rough thumbnails. Mostly just for working out the composition and very rough values. I want to have lightest part of the picture in the left part of the picture, representing the goal of the game, and heavier and darker in the right. Anyway, feel free to rip it apart!

(sorry fot the bad quality)
So I started with these:

and moved into this:



I think I will probably put more of an angle on the house. And make some more space. Anyway, everything still very rough. And I'm not sure on what ratio I'll end up with. Well...

UPDATE 8/6
So, spent an hour tonight refining the sketch on the computer and working out some values. I'm slow and have little time, so I didn't really have time for lots of different variations. So, if anyone has any brilliant suggestions of changes in lighting let me know! Also, I want to make the house more interesting shapewise, but I'll save that for when I go into more details. So far, just learning from the rest of you and trying out stuff you're talking about has helped A LOT! And oh, I settled for 640x480. I did want to do it widescreen, but I also wanted it ags compatible without scrolling. So.
I'm not sure exactly what everything is, but I've added an explanation image. Also, I'm crappy with clouds, and wasn't sure if I should frame the bg more in the foreground, so did a version with more of that. Anyways, here we go:







UPDATE 11

Progress is slow but... progressing. I'm unsure about the shape of the boat and how to sculpt it. Am currently working without line art, which is new for me. The "blob" in the background will perhaps turn out to be a cathedral. We'll see. Like others, I'm also uncertain about the southern exit. Also realised that the background doesn't really breath "adventure" I'm not sure how to implement that and still keep my story. If it's destroys the purpose of the workshop to go against the original script. Well, well. 



UPDATE 15/6

Did some more work, mostly inspired by your critique and suggestion. Will make the house look more battered and add more interesting, eastern European shapes to it Will put npc soldiers by the boat. Made a version where I've turned the boat. Would be happy to receive opinions on this!
Decided to make the bg shape into a destroyed church. Will however need to shape it a little clearer i think

[selmiak]

EDIT2: Select your camera, click on the camera icon on the right to select it's pane, open "Lens". There's one called "Clipping" there. Try and increase the END value.

Thanks a lot! That worked. Why is there no unlimited setting?
Panoramic view is cool, but not that useful.
I'm just learning blender and though what could be better than learning even more while doing sketches for a workshop. And there is the first lesson already.
I'll have to play around with some cool DOF effects soon, but this is not helpful for sketches.

[Dropped Monocle Games]

having a really hard time with this
not happy with this but here is what I have so far

[selmiak]

Some more WIP.


added to my first post

[loominous]

Started my first sketch this morning: