Ben304 tries painting. Yet again.

[Layabout]

Wow, this stuff is great. Thanks Loominous and Misj. Someone really needs to compile all their art help posts into a single thread to make it easy to find their increadibly useful tips and tricks and tidbits. That would be awesome.

[Misj']

I really had a hard time making the rock that is supposed to be a foreground element look right - I wasn't sure whether it should be darker or lighter.

Well, this is where 'narrative' should affect your decisions more than 'realism'. To explain what I mean I borrowed a piece of line-art from Hanco Kolk's Gilles de Geus (and by borrowed I do of course mean: stole).



It's a fairly simple composition with a back-layer, a middle-layer (agent 90-60-90), and front-layer (our hero and his two companions).

Since the human eye is attracted to bright areas over dark areas you can change the story by changing the order the player 'reads' the scene:


The viewer will read this frame starting at the girl, going through the background, and is finally lead to the three men.


The viewer will read this frame starting at the background, continuing with the three men, and ending at the girl.
Story-wise this narration is least logical, because the background doesn't 'control' the story and should therefore not be the major point of focus.


The viewer will see the girl first, this leads them to the three men who see her as well. The background-layer is least important.


Here the three men are the major players: the viewer will start with them, which leads them to the girl, and finally some background.

The narration of the final two images is most interesting. And personally I would start the story with the girl...she controls the scene.

There's a lot of fun to be had here, because as you can see each of the following examples affects the story:


Making the curtain brighter than the girl directs the viewer towards the importance of this exit.
Making both Agent 90-60-90 and the curtain dark will create a more mysterious atmosphere where she looms in the darkness.

Another thing that is important to realize is that cool colours are pushed to the background while warm colours are pulled forward. And when I say 'pushed back' or 'pulled forward' I'm mainly speaking narrative again rather than physics. In de following example the intensity of the dress and the curtain are in a similar range. But the order in which they are read is affected by their relative colours.

In the first example the (cool) girl is lost within the (hot) curtain, while in the second example the (hot) girl pops out of the (cool) curtain.

A similar trick can be used to place a little extra focus on the girl by colouring the three men in cooler colours:

By making them both bright and cool our hero and his companions do not distract from our antagonist. Still the narrative of the image has a good and logical flow.

So my final flats to tell the story would be (and they already work well, I think):


And by adding highlights and shadows the final narrative would be (the location of the main light-source was defined by the line-art as you can see by the highlights in the girl's hair):

In the first image the background around our hero is darked which makes their relative intensity brighter...as a result they start to compete with agent 90-60-90 for the viewers attention. In the second image their cool colours solve this problem. Nevertheless, both versions do tell the story.

Misj: Cool tutorial - the use of a greyscale image set to multiply is really handy, though the backside is that it kinda works against what I described above, if one strives for colours full of life, as the result is close to that of shading with black.

Yeah, in reality I hardly ever use shades of grey for my shadows but rather the original colour (or a slightly darker version). This is also when setting the layer to multiply starts to get more interesting...of course this is still largely affected by comic-book shading techniques like simple cell-shading.

The images below show the same piece with the multiply-shadow-layer in greyscale (left) and grey shadows with white light in stead of yellow (right):

As Loominous described in his previous post, using 'black' shadows creates a less vivid/warm/alive look (particularly obvious at her legs). The same is true when using 'sterile' white light.

Wow, this stuff is great. Thanks Loominous and Misj. Someone really needs to compile all their art help posts into a single thread to make it easy to find their increadibly useful tips and tricks and tidbits. That would be awesome.

Thanks...and I must admit that I quite regularly look up some of Loominous' earlier posts...

Misj'

Ps. In the end the composition (and colouring) of a background is affected by a number of things: the realism, the form, the 'interesting', and the narrative (in an adventure-game there's of course also 'the path' which defines walking-areas, walk-behinds, etc). When combined well, these create a clear, readable, and interesting environment that absorb the player/viewer.

[ThreeOhFour]

Wow, there's a lot of information since I last posted here! Thanks Loominous, that's something I've never considered before - I often shift the hues when I do pixels but have only done it a little bit here. I really like the bright effect that gives the ball.

I'll have a go at making some shadow regions and see what I come up with .

Misj', that's very interesting, thanks . I guess the same sort of affect can be achieved with saturation levels as well, right?

It's interesting that a lot of drawing the scene is making it stylish and functional as well as just trying to make a picture look real. Still lots for me to learn, but I've got time .

Layabout: Yeah, definitely. I remember Nikolas did something similar a while ago (it is stickied in this forum).

As for my own stuff, the main thing I want to show now is what I've been dreading a little - drawing an indoor scene.

I have to admit that I really have no love of drawing indoor scenes, I find them a lot harder than outdoor scenes, but it's definitely something I intend to improve at. This actually came out better than I expected, which, considering the state it is in, shows I didn't expect too much...



This is an indoor scene intended for the last 'egg house' I posted. I used the colours that I had used in that scene to keep it all feeling like a part of the same thing, however obviously there is a lot less brightness and saturation. I tried 'filling up' most of the image space instead of doing a circle in the middle like I usually do, so hopefully that sort of works, and I realise I did a pretty high POV, but it felt right at the time.

The funny thing in the bottom left hand corner is supposed to be a staircase that leads to the second storey.

Any tips?

[Kangourou pas sympa]

Hi,
I have no tip for you, just a piece of advice,
I don't know what program you use, but look at your histogram (ctrl+l in photoshop), in the last picture you had posted you had no dark tone, so it's a little dull.
I did a try:

I don't know if you prefer this one ?

[LeafThief]

I think there might be issues with the sizes in your scene. Maybe it'd help if you worked with the actual size of your character to make sure that everything is the size it should be (unless it already is if you're heading for a very stylized ... erm ... style).

Anyway, I took your scene and 'painted' some rather rough sizes in.



and a quick paintover with some text in it

[Nikolas]

Juts to let you know that this is a treasure trove of a thread. Keep it up! All of you. Misj, Loomy, electro, Kangourou, and of course Ben!

[ThreeOhFour]

Thanks Kangourou pas sympa and electro, I see now that the door is very big and that I do need to work on my highlights and shadows. I will work on it and see how I go!

Nik: !

Edit:

Here I have had a quick go

[loominous]

Funny, it kinda feels like we're back at the first posts in regards to design and composition.

Interiors are basically man made landscapes, so the same ideas apply when it comes to composition and design.

The current composition is basically symmetrical, the horizon line very low with large dull walls taking up most space, the design of most of the things is uninteresting, there are no layers/overlapping elements, and the focal point is a fairly uninteresting window with nothing important around it.

So basically I'd try out everything that makes your exteriors exciting and apply it here. Go wild with the shapes (goes for all objects - try to get contrasting shapes next to another for extra effect), get a nice angle, make the composition assymetrical, get a few depth layers in there, and get the focal point at a nice interesting spot.

I struggle with interiors myself and find them more constraining and less fun than exteriors, but I think that's much due to the boxy/cliche kind of thinking that's so easy to fall into when dealing with man made objects, and as soon as you break free from it, things start to get fun.

[ThreeOhFour]

Yeah, I sorta had it in my head that I was starting again, because I guess indoor backgrounds seem so different. I've tried again here, with hopefully more depth, a better angle and some interesting (and unorthodox) shapes for things... I'm not really sure how to establish a focal point, although I guess I could try doing a take of the room at a different angle to see if it takes the focus away from that window.

I've included an upscaled character sprite for reference - obviously I wouldn't let him walk too far forward because I really want to avoid scaling sprites.



Also, the steps were more space filler than necessary, so they're invisible here.

[Moresco]

Dude....niiiice.  =D I likes that one a lot.  Except the character feels really out of place to me on that one man.  =/  I dunno why.

[Trent R]

The character's very short, I think that's why. It's hard to tell what sized-person this house is for, but I do like it a lot and I like the odd shapes.
Also, the ladder on the right is messing with me a bit though, perhaps because I'm expecting a corner to exist to the left of it and the bunk. The could be more blue window light being thrown onto the bunk too.

Loving them all Ben!

~Trent

[ThreeOhFour]

Yeah, those foreground objects look pretty enormous when I put everything into the game.

Guess I'll have to make them smaller.

[Hudders]

Would the window look like that on an egg-house?

If the wall is curved, you could cut out a flat circular window but the wall itself would still be curved: even where the window is... I'm not explaining it very well. Suffice to say that the window doesn't seem to be following the curve of the wall.

Also: No matter how stylish that curved ladder is for climbing up to bed, it will fall over as soon as you step on it if it's not attached to wall. 

Really like the composition though. Keep up the good work.

[markbilly]

This is a really crude edit, as I don't paint... But I think you can do a lot in terms of character size with just lifting the foreground up. You maybe need to make the bottom half of the foreground layer fuller, too...

Actually, does that bugger with the perspective/vanishing point?

Sorry, I didn't help with that edit...

[loominous]

Think the last one looks better, though I feel you went a bit overboard with the depth thing (though always good to try out the extremes to find a happy middle).

Here's a quick layout idea just to illustrate a few points:



Should first off point out that there are many perspective and scaling issues in the edit above. I tend to ignore these until I start to refine things, as I want to maintain a flow/looseness, and worrying about whether things are in perspective etc is quite a shackle.

Focal point: Having a high window being the focal point is tricky, but luckily it can provide some light that can place another focal point elsewhere. So I added some light falling onto the floor, pulling the attention to somewhere around the golden ratio, where the table details will hold the viewer for a sec, and then lead the rest of the area, and most likely lastly lead to the door part, where I added a few details as a small treat.

Horizon: I placed the horizon line (which you can see faintly) quite low - atm it's at the character's eye level - which gives you less of a detached surveillance camera feel and more of a "being there" feel.

Depth: I limited the depth quite much as you didn't want any scaling, but there are still things overlapping. We get a bit of zig zagginess with the oven thingy closest on our left, then the table on our right, and the next being the character in the center, and then back to the wall/window.

Composition: The round nature of the house makes an asymmetrical composition trickier, so in this case I offset it mostly by having the window light onto center/right side
creating a bit of unbalance.

Design: The main thing imo is getting rid of large dull surfaces, so I eliminated most of this by placing the different areas quite close together, and by filling out empty spaces with smaller details. Didn't really spend any time on the design of things, but sketching quickly/loosely will often give you these curvy lines that can break up much of the boxiness, and which you can then build upon or keep.

Values: I think some lighter values will help keep it friendly, so unless the house is supposed to be spooky, I'd try to light it up more, to fit your friendly style.

[Ghost]

I demand this thread stickie'd!

[Trent R]

I was think along the lines of, InstaGame ver.304.

~Trent

[ThreeOhFour]

That layout you've done is excellent! I had a go at copying it (normally I wouldn't copy things, but I really don't have any better ideas) with a few little changes... this is just a sketch of course:



Couple of things:

I really had a hard time convincing myself it is ok to let things overlap, so perhaps my head is stuck in some stupid place where everything must be 100% visible. The stove should probably be pushed out a bit more but I'll need to convince myself properly first.

Same for the low vanishing point, even though I really like the way it looks.

Any thoughts before I have a go at painting it up?

[loominous]

I really had a hard time convincing myself it is ok to let things overlap, so perhaps my head is stuck in some stupid place where everything must be 100% visible.

As long as the important stuff is readable, I don't see any real reason for not overlapping, unless it's a style choice.

In my version I had some unhappy tangents, such as the chair n center ladder, and those things can arise when you overlap, but can be fixed.

Same for the low vanishing point, even though I really like the way it looks.

While a low vanishing point will demand more scaling when the character moves closer and away from us compared to an overhead angle, the gain is that you show less ground (due to the perspective), so you can limit the walkable area quite heavily. Many of your exterior backgrounds have had very low angles, some even a frog perspective, and it doesn't seem to have caused any actual problems.

-

Regarding values:

I don't know how much light you're planning to add to the background, but I'd suggest that you'd work out the main lighting first - as if the house was empty - then darken/lighten areas to distiguish objects. This way you'll be able to quickly lay down the main light, get the overall lighting set, and then start with the "details" such as the table n shelves.

Glad you liked the layout!

[Laserschwert]

I am by no means an artist, but I've played my fair share of adventure games and I've made certain observations I'd like to share, although I know that the discussion is mostly about design-rules right now (or better put: not going on AT ALL right now).

Anyway, I feel that your character style and your background style do not fit together that well right now, which is mainly due to the different resolutions. Still, even when scaled down, the background look somewhat smoother than the characters. I've tried to mock-up something that might work, which I've based on the style of the "Monkey Island 2"-backgrounds. They were hand-painted as well, but they were sharpened up a bit to match the pixelated design of the sprites:





To me this looks a bit more consistent... but as this is my first post, I don't expect you to care