Trying out a new technique

[mode7]

Hey everyone,

I was thinking about a quick way to create rather realistic looking BGs for a 640 resolution. So I came up with this technique.
Basically I just sampled gradients from a photo source put in some simple shapes and the rest is just layer effects.
I was amazed how quick and easy it is to create backgrounds this way. If there is some interest, I might do a tutorial after I finished my mags game (which has a completely different style BTW).

[Anian]

It looks nice. I think nobody would mind a youtube video tutorial or similar.

[Sughly]

That's a very attractive style indeed 

Such a clean and unique look. Will definately be interested in not only a tutorial, but an example of this in an AGS title. Nicely done!

[Chicky]

i think there's a bit more to it than some simple shapes! You obviously have a good grasp of how an image should look, nice clean style.

See how you've given the floor some depth, try adding a bit of that to the top of the cubicle walls.

[mode7]

Thanks for the positive feedback.
@Chicky
I sample the colors from photos, this really helps to create atmosphere.

Actually I have to admit I was amazed how easy this is and how good the results are. I still think this still has it's limits. I don't think it will work with complex outdoor scenes with a lot of perspective. Also of course some shapes are hard to do.
I tried to do an outdoor scene also. It was very much inspired by the movie Stalker, whose atmosphere I'd love to see in a game (And don't tell me there is already one).

Anyway before I do a tutorial or do any more of these artworks, I have to finish up my mags game. Just took a day off to do something different for a change.
If you're really curious, send me a PM and I can give you the PSD.

[cianty]

Wow! The screenies look GREAT! That is a very special and unique style. I too am very curious to see these implemented in a game. I imagine it hard to come up with characters that look equally clean...

[mode7]

Good point, though. Already thinking about which kind of characters would fit. I'm not quite sure yet.

[Snarky]

It was very much inspired by the movie Stalker, whose atmosphere I'd love to see in a game (And don't tell me there is already one).

The commercial AGS game Force Majeure II: The Zone appears to have been strongly influenced by STALKER. Sorry. No reason not to offer your own take on it, though.

[Darth Mandarb]

The style is nice but the lack of depth is a little off-putting.  The shadows are a tad inconsistent as well.

The pipes in the top image appear, because of the shadows, to be sitting well away from the wall (could be intentional) but the door handle (directly under the light source) doesn't appear to have a shadow at all?  Also, the top of the door frame should not be casting a shadow over the door based on the light's position (unless there's another light-source not visible in the picture of course).

The bottom image (bathroom) the stalls appear to be empty as nothing is in the floor reflections visible under the doors as well as the stalls themselves are not reflecting in the floor tiles.  The door/mirror thing (on the right not sure what it was supposed to be) also is casting no reflection and the shadows feel wrong like it's sitting well away from the wall as well.

Last thing is the blood ... it looks more like a gel/blob type substance (because of the shadows again).  The shadows give it height (to my eyes) and (in front of the door/mirror thing) elevation as the blood appears to be floating over the floor.

I know I'm being pretty nit-picky here but you've got a good grasp on the "texture" of the scene ... I think with just a tad more attention to detail these could be really interesting!

[Ryan Timothy B]

A couple things that bothered me in this image have mostly been corrected in my edit:

I'm not saying this edit is better than the original, I'm just showing my issues

Darth has voiced most, if not all, of the issues with this background that I agree with. The pipe, top of the door frame, the lighting, door handle.

Also yes, the blood looks more like a bubbled layer of gel because of the shadows.

Also... One thing that really bothered me was how the door was darker at the top and bottom. It looked like a slightly wavy S shaped door instead of something that should be flat.

[InCreator]

* Toilet scene feels very artificial, mostly because lack of shadows under stalls. Also, it's full of raspberry jam... Dried blood is much, much darker. Also, no bevel & emboss filter is needed here!
* Photoshop grass brush on last one is a total no-no. It feels worse than lens flare filter felt in 2002...
* edge brightening (or displacement map?!) on RyanTimothy's edit made broken areas of wall ALOT better. Find out what he did

Otherwise, I like!
Also, it would be cool to see sci-fi environment using your technique, like spaceship interior or something similar. I guess it could simply feel like a mix of movie "Moon" and game Mirror's Edge

[Chicky]

Not much wrong with the grass, it has a nice depth to it. Nothing wrong with using the grass brush for its intended purpose.

The walls behind are a little confusing.

[Ryan Timothy B]

* edge brightening (or displacement map?!) on RyanTimothy's edit made broken areas of wall ALOT better. Find out what he did

Basically what I did Mode7, was that I added a faint edge lighting to the broken edges of what I'm assuming is peeling paint or possibly even wallpaper. But only on the edges that should catch and bounce light. If it is actually peeling paint, we'll assume it's water/moisture damage and the edges are curled up a little.

I also added a darker line of shadow on the edges that should cast a shadow.


I basically use the pencil tool in Photoshop with an opacity of approximately 10% and a pixel size of 1 and I just draw over and over on the edges with either a darker or lighter color. The pencil tool, I find gives me more control over which edge I want sharp and which edge I want to have that blurry anti aliased feel.  Also, it just happens to be the tool I like to use to make cracks in walls and such -- I use it a lot, but mostly for edges or fine detail.

Oh and I forgot to mention. His style actually reminds me of your backgrounds, InC. Especially his lighting overlay.
I definitely do like it. Clean and simple to do, yet very effective.

[mode7]

Thanks Ryan Timothy for the edit and everybody else for the hints.

The edges edit and the extended shading do improve it!
As for the blood of course you're right and the shadow accuracy in this pictures, well there is not really much.

As for the lack of depth. That's a good point. I think that still could be fixed. If this is going to be in a game, I would go for parallax anyway. So additional layer would be added.

Please keep in mind that the first two screens took about an hour and the last one about two.
So I already knew I was taking trade offs in quality. Especially the details.
Actually this was all about speed. Some of the things I learned while I was working with ags, is the less time I spent on graphics and animation the more time I have to actually make the game. Backgrounds would usually take me about a day (5h+), without the objects. This could speed up the process while maintaining an acceptable visual quality.
I came to realize, making games means making compromises. And this is my approach here.

Ah and about the grass brush...hm haven't seen it used that often. Well but I'll try to make some custom ones., which might look nicer.

[Shane 'ProgZmax' Stevens]

I think that if the method is fairly easy for you to work with then stick to it.  The results seem quite respectable aside from a few shading issues you can always go back and correct since you're using layers.  With the blood, as it dries it should shift towards a darker, rust brown look while the brighter bits should be more red.  Right now it almost looks like pieces of flesh rather than blood, or bubblegum .

With the outside area, I like the foreground area but the back wall really confuses me.  I'm still not sure what I'm looking at; a mud wall with indentations, columns?

One other thing you definitely want to do is go back and liven these backgrounds up with THINGS.  Add various items that make sense in the areas to give the player something to examine and interact with; a wastepaper basket in the toilet, a sink and mirror; boxes in the hallway or furniture covered in sheets and cobwebs; an old rusty lawnmower in the outside area, broken yard equipment or old boxes.   The goal isn't to make a hidden object game buried in items, but you definitely want to enrich your scenes with a sense of life.  Players walking through loads of empty rooms will soon become bored and go do something else, so bear in mind your backgrounds play a role in grabbing the player's attention and drawing it to things (even things that might be useless like a huge crack with eyes looking out).

[Sughly]

Just as a quick response (and I'm sorry if someone already touched on this - I did breeze through a lot of the comments for the time being) that in relation to adding character to the game, it seems to me that this style is quite suited to first person. I'm not sure how you feel about approaching it that way, and of course it would look just as great with characters that sit well in the environment. Just saying... initial impression for me was first person...

[mode7]

@ProgZmax
Right. These are no game backgrounds. Not yet so the really interesting stuff is still missing

@Sughly
Interesting. Have never thought of that. Actually If i was going to make a 1st person game I'd definitely render it.
For these BGs I'd rather go for a "sidescrolling adventure" (this is also why there is so little depth).

[Gilbert]

Actually I found these backgrounds a bit flat (I think some people have already pointed this out) for 1st person, but even that it would still work as they look quite nice with a style.

Personally I think they also fit in with a horizontally side-scrolling (or not scrolling, such as Out of This World and Flash Back, if you know what I mean) game.

[Sughly]

Actually If i was going to make a 1st person game I'd definitely render it.
For these BGs I'd rather go for a "sidescrolling adventure" (this is also why there is so little depth).

I see, I see... yeah that would most definately work. Would work very nicely indeed...

I think I generally concur with most people. One thing I don't think was mentioned that caught me off was the puddle of muddy water in the outdoor scene - it could just be a personal preference thing, but that didn't seem to fit in with the style to me, looks a lot rougher and kind of layered over the top. But I am nitpicking! I think ProgZmax is right - it's really unique and if you can work on it comfortably and quickly then stick with it!

Look forward to seeing more on this...

[mode7]

Ok one last..



When I compare this with the bathroom one I can really see some developement. I started mixing image sources with gradients and the results are quite neat. So I think this is the closest you can get to realistic with this technique.

Grass still gives me problems even though it got better.
The boat still doesn't look good. But at this time I was to lazy to do one myself so...whatever.

Time is 4h+ so this is on the edge for me. But a lot of things in this BG are reusable and I was experimenting along the way.