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).
(http://img38.imageshack.us/img38/7470/conceptart2y.png)
(http://img213.imageshack.us/img213/8202/conceptart.png)
It looks nice. I think nobody would mind a youtube video tutorial or similar.
That's a very attractive style indeed :D
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!
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.
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).
(http://img816.imageshack.us/img816/9589/conceptart3.png)
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.
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...
Good point, though. Already thinking about which kind of characters would fit. I'm not quite sure yet.
Quote from: mode7 on Mon 20/09/2010 13:58:51
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 (http://interactingarts.org/thezone/) appears to have been strongly influenced by STALKER. Sorry. No reason not to offer your own take on it, though.
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!
A couple things that bothered me in this image have mostly been corrected in my edit:
(http://www.bryvis.com/entertainment/other/agsf/mode7bg_hallway.png)
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.
* 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
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.
Quote from: InCreator on Mon 20/09/2010 18:55:33
* 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. :P Especially his lighting overlay.
I definitely do like it. Clean and simple to do, yet very effective.
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.
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).
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...
@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).
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.
Quote from: mode7 on Tue 21/09/2010 09:37:27
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...
Ok one last..
(http://img827.imageshack.us/img827/3992/conceptart5.png)
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.
I am pretty impressed. I love the realistic look of this. 4h sounds great for this kind of image..
Nice wall textures ;) Do you have a game project or just for fun?
I have a project but something completely different. These are just for fun and practice. I've got an idea though.
Really awesome. You're right, you're making great improvements and refining the technique very well and very quickly.
Only because it's so interesting do I nitpick again :P - the water surface would curve around the boat rather than have a straight lne, makes it appear really flat. And a massive nitpick is just in the greys inside the concrete that are around the top of the doorway, all the shadow thats on them look too smooth and just don't seem to sit quite right with me. the part on the left of the building looks much much better! Honestly though, these are minor details that are only being suggested because I think it's such a great technique.
Good luck with implementing it - look forward to seeing the results!
Ok, I've experimenting with realistic trees and grass. This is what I've come up with so far. I used this BG to try out various approaches so it's kind of a mess in this picture. But I like the atmosphere.
Basically for grass and trees I use brushes which I edited in a external document (colors, patterns, blending effects) and then use the clone brush to paint them into the scene. Most of the grass in this scene is done the traditional way though. But you can see the difference e.g. under the tree in the midle or the foreground.
(http://img29.imageshack.us/img29/7025/conceptart6.png)
actually I think I might be interested to use BGs of this style in a game. But writing and puzzle design are some of my weaker sides. So if anyone is here who thinks: "This perfectly fits my game or the game I always wanted to do" feel free to contact me.
I can see some nice elements, there. It's a style I always found myself trying to master and never did on the rate I wanted.
http://i133.photobucket.com/albums/q53/JustLedZep/spacecadet2copy3.png
This is done using a very similar technique but with a twist. You're in a good way. But you must look the picture and judge for yourself. Does this look fake?
And yes it does. The grass is very nicely done in places. And I love the door on the right, but it needs more work. Its a better background than what you did on the first pictures. I'm not too judgmental, I'm just trying to point you in the right direction.
There are some elements that make it so that the background seems fake. It can never be real of course, but it can look as though.
1. Reflections on the water
2. Door on the left needs more shadow
3. Tree on the front near the left door looks wrong. If you can somehow remove it, it would fix lots of staff.
4.Did you use burn on that "chimney" or whatever that thing is (on its top), cause if you did, you shouldn't have. At least not in that amount.
5. Where the hell is the sun? I feel some consistency on the lighting would really make the picture benefit.
6. I can't decide whether the window or that thing over the window is wrong. You should remove it.
On a side note:
I KNOW HOW HARD IT IS TO MAKE SUCH BACKGROUND
What's wrong with this background? I doesn't have to be super-realistic, this still looks very nice.
Yeah.. While I do agree that it does look artificial here and there (e.g. that "chimney" doesn't look round, except where the "burn" is) it still is pretty damn awesome.
Unless meant for first-person-perspective (which I wouldn't like) I'd still have to see a character sprite to fit in it. I imagine it very difficult to achieve an adequate look for characters that suit this style. Surely it can be done, I just can't imagine it...
Anyways, I want to say that this picture really impressed me.
Quote from: Dualnames on Sat 25/09/2010 02:04:40
I can see some nice elements, there. It's a style I always found myself trying to master and never did on the rate I wanted.
http://i133.photobucket.com/albums/q53/JustLedZep/spacecadet2copy3.png
This is done using a very similar technique but with a twist. You're in a good way. But you must look the picture and judge for yourself. Does this look fake?
And yes it does. The grass is very nicely done in places. And I love the door on the right, but it needs more work. Its a better background than what you did on the first pictures. I'm not too judgmental, I'm just trying to point you in the right direction.
There are some elements that make it so that the background seems fake. It can never be real of course, but it can look as though.
1. Reflections on the water
2. Door on the left needs more shadow
3. Tree on the front near the left door looks wrong. If you can somehow remove it, it would fix lots of staff.
4.Did you use burn on that "chimney" or whatever that thing is (on its top), cause if you did, you shouldn't have. At least not in that amount.
5. Where the hell is the sun? I feel some consistency on the lighting would really make the picture benefit.
6. I can't decide whether the window or that thing over the window is wrong. You should remove it.
On a side note:
I KNOW HOW HARD IT IS TO MAKE SUCH BACKGROUND
Actually it's not that hard. It's only a question of know how and resources. The cool thing is that I could just extend my canvas and some masks and the background could go on in any direction without much editing.
Tried to fix some of the things you mentioned.
It might be a tick better but I think this BG is used up now. I don't know if PS has a layer limit but I'm going to hit it soon if I add any more stuff.
(http://img841.imageshack.us/img841/8901/conceptart6b.png)
@cianty
I'll do some sprite experiments later on
One thing you should definitely avoid doing is that drop shadow on that newly added tree on the left side. Especially with the shadow being so dense. And if you compare the tree's shadow to the doorway shadow or column it doesn't match.
Not only does it make the tree look like a cardboard cutout casting a shadow. It also makes it look like there are two identical overlapping shapes, which would never happen with leaves and branches all in different directions.
Thanks Ryan, I thought something looked weird there, but couldn't really put my finger on.
Anyway, I made a sprite test. Wasn't that easy but it could work this way. Sorry for the animation it's still not quite right but I was too tired to fix it.
(http://img651.imageshack.us/img651/7408/guyf.gif)
I'm still not sure it will work with the BGs but so far it's the best I could come up with.
It does look apropriately realistic...
Well done Mode7, you have established a very desirable look. Your sprite fits perfectly but needs a little work on the hands, the character also appears to be leaning backwards.
Yeah, people tend to lean forwards on contact with the ground, as their leg absorbs the impact.
The style of the sprite fits the BGs perfectly I think, but the walkcycle definitely needs to be polished. Like chicky said, he seems to lean backwards and he doesn't stretch his legs which looks very odd.
But you got a nice style there!
Things start to come together for me. Someone mentioned Flashback earlier. Tested it a long time ago and gave it another try. Great concept by the way. I wonder if more adventures were made this way.
I think with a little more polish in terms of handling this could really make a great Action Adventure (with two capital 'A's!!) game.
Actually my upcoming mags game already has a similar gameplay.
Well for the animation I really liked the smooth rotoscopy look of flashback or out of this world. I think I'll try to do this.
EDIT: ...and I did
(http://img20.imageshack.us/img20/3174/unbenannt1za.gif)
I'd suggest not having his hands so still and open like that....as if he got jam on his fingers, and is rushing to the bathroom before he gets anything sticky.
Everything's looking great! When do we get the tutorial?
Actuallly, I'm working at a mags game so no time until 1st of Oct.
Wait is this for a MAGS game? So you're basically getting feedback on how to improve backgrounds for your game...isn't that kind of cheating a tad?
Just a quick question: How do you handle 2 point perspective? Does it still look good?
Quote from: anian on Tue 28/09/2010 08:13:33
Wait is this for a MAGS game? So you're basically getting feedback on how to improve backgrounds for your game...isn't that kind of cheating a tad?
No:
Quote from: mode7 on Mon 20/09/2010 13:58:51
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.
Ah, okay.
I've never participated in MAGS, but it would be weird if asking for advice in the Critics Lounge were considered cheating. Sure, if someone made a paintover and he used it unaltered in the game it would be a bit dodgy, but the rules explicitly say "You may get help for the competition."
None of the art in this thread is part of a mags game. It doesn't even have the same style.
Quote from: abstauber on Tue 28/09/2010 08:23:41
Just a quick question: How do you handle 2 point perspective? Does it still look good?
Don't know actually, never tried before. As these BGs are for a sidescroller kind of game. But I think this will get hard in 2 point. When I really need perspective I'll make a 3d layer in PS.
If my game should rely heavily on perspective, probably I would make a model and render it and add grass, trees and stuff later (could also do it in Vue but I don't have the horsepower to render this kind of stuff)..
But I won't do it personally because it's an incredible amount of work.
Edit by ProgZ (post combining): Please don't double post. Edit your post to add new information unless a few days or more have passed from the initial post.
I'm personally blown away. People are saying that it doesn't look realistic... but compared to what?
Obviously it's not photo realistic but that's a largely a futile effort. It's got a unique look, that I personally think is sick as hell. I honestly wish I could make backgrounds like that.
I think that the sprite that you made, on the other hand, feels too artificial while TRYING to appear realistic. I guess that would fall into "uncanny valley" territory. Ultimately, however I think that the sprite just does not work as well as the BGs.
Thanks questionable!
Actually I've promised a tutorial, but I've been struggling to do that.
I tried to record it, but I normally try some things, I delete later whic does get confusing.
Also my PS version is german which doesn't make it easier.
So basically I'm asking you guys: Would you rather like a video tutorial which might be a little confusing and you have to listen carefully to get the English names.
Or a classic tutorial with a few images.
I think a video tutorial would be fine- I think most PS users can recognizer the symbols like second nature after just a short time of usage and with a bit of commentary it would be even better.
Unless a standard tutorial is easier- in which case- that would also probably be fine.
*cough* I'd be fine with a turorial in deutsch *cough*
I like this style. Here are some of my thoughts on why the pics are looking a bit flat. These comments are general but some are specific to the picture with the ruined building with swamp foreground.
* You are only rendering the front faces of your volumes, never their sides. Do not fear perspective!
* You've got nice ambient occlusion but never cast any harsh shadows. (or sharp highlights) Do not fear your light source!
* Your middleground and foreground have roughly the same value range. Separate them more. (add some reflections in the water from the door opening etc) Do not fear reflections!
btw, the fuse box or whatever it is has the same value as the sky and has the same shape as a window. At first glance the viewer will be much confused. Also, I recommend merging your entire file a little now and then not to get to barred in by your own framework. The more layers, the more difficult it is to try out big changes in the picture.
Keep up the good work!
Coold style reminds me a bit of the backgrounds of the riddle of master lu. :=
Quote from: theo on Thu 14/10/2010 10:23:42
I like this style. Here are some of my thoughts on why the pics are looking a bit flat. These comments are general but some are specific to the picture with the ruined building with swamp foreground.
* You are only rendering the front faces of your volumes, never their sides. Do not fear perspective!
* You've got nice ambient occlusion but never cast any harsh shadows. (or sharp highlights) Do not fear your light source!
* Your middleground and foreground have roughly the same value range. Separate them more. (add some reflections in the water from the door opening etc) Do not fear reflections!
btw, the fuse box or whatever it is has the same value as the sky and has the same shape as a window. At first glance the viewer will be much confused. Also, I recommend merging your entire file a little now and then not to get to barred in by your own framework. The more layers, the more difficult it is to try out big changes in the picture.
Keep up the good work!
Thanks for the advice! Some of the things I had already noticed but some of them I wasn't aware of at all (like the fuse box):
Perspective: Actually I tried to do more perspective, like in this newer example (which is a very rushed undetailed BG)
http://www.youtube.com/watch?v=M8IePkB9GCw
...also tried to cast some shadows in this example (Yeah I know that sun casts parallel light...well..probably I didn't when I made this BG)
I tried to speed up the working process and reduce complexity by merging everything into smart layers, which works quite well now.
Everyone: I know you're still waiting for the tutorial. I haven't forgotten you. It's just that I myself am still experimenting with this stuff.
Isn't that your old video?
It's newer than any of the other screens int this thread^^
That video greatly reminds me of BlackThorn. :)
Quote from: Buckethead on Thu 21/10/2010 16:22:48
That video greatly reminds me of BlackThorn. :)
You mean BlackThorne: http://www.youtube.com/watch?v=WafqCyIwAWw
Great game! And nice backgrounds mode7, a (video) tutorial would be superb.