Adventure Game Studio

I know I seem to start one of these threads every 2 months. Sorry about that  :-[

I realized the other day that I had tried my hand at doing a non pixel style of background for ages and it is something that I keep wanting to learn. Seeing as I had some free time this evening, I thought I'd take another shot at it. It's about dang time, really.

(http://img216.imageshack.us/img216/9121/shackcopy.png)

Most of the elements here are inspired by Loominous' various backgrounds, but I kept the layout pretty simple for now because I didn't want to break my head trying to draw all sorts of neato stuff. I'm actually fairly happy with how both the foreground and the background turned out, but I know that there's new techniques you guys can teach me, so I eagerly await your critics! If there is a single thing I have to point out that I dislike it would be the lack of texture on the grass.

Technique wise I used 2 layers for this image, one for the sky, clouds and moon and one for the hill and shack. To do the background I used a large soft edge brush with the pressure sensitivity set to opacity and size, and to do the foreground I used a small soft edged brush with the same settings. I forgot to time myself but I'm guessing it was somewhere between 15-30 minutes (a long time, I know  :-[)

As with all the past times, your time is very much appreciated.

ok first of all 15-30 minutes isn't bad at all - especially for a nice looking basic background :)
I dislike the blury skies and moon. They should be at least a little bit sharper. The "painted" feel of your work is very nice though and reminds me of works done in "Corel Painter".

To make it look better and more detailed you just have to make brush smaller and smaller and refine everything in iterations :)

Same thing with doing grass - start with shadowy and highlited big spots on the grass and refine them until they look good (ie. like grass) :)

When you attempt to emulate another person's art, it's important not to take short cuts just to create quick look-alikes...I think here you have focused too much on style and atmosphere instead of looking at the basic craft of painting.

First of all, I think you should have a more solid idea of what you want to paint, and get some references. You need more substance in your picture before you start shading and applying lighting effects.

At this point, the scene is too dark and too uniformly blue, and the moon is too out of focus.

Thank you for the comments :).

Andail, with regards to using reference images, I hear this a lot but nobody has ever explained the proper way to use reference images. Should I just google a picture of a house and try to paint it as best I can? What's a good starting point for a reference image, what sort of things should I look for in a reference image?

Reference pics can be used in many different ways, and they are indeed a good way to learn "from the pike":

- collect photos/drawings to study them, paying attention to certain basics like perspective, lighting, angle and such, and eventually try to copy such a picture to get a feeling how to construct the image (light colours first, details last, and whatnot)

- collect photos/drawings as "reference material"- this sounds pretty obscure but is an old trick. Many a great fantasy/horror creature has its roots in an artists' collection of photos of lettuce, rust, or even exploded marshmallow.

When working with an paint program that has layers, a good trick is to get a certain photo and simply use it on a background layer to trace over.
As for "what to look for"- try to find references that have the things in them you want to achieve. In your picture there's a certain glum atmosphere and a prominent moon/cloudy sky element, so getting some landscape photos of a full moon would be a good point to start (for some reason it makes me think about the movie poster for Arachnophobia, which also had this large, centered moon).
With the proper syntax you can get almost everything out of google  ;)

All this is, of course, only a small selection of how to use references. I bet there are a thousand more.

Quote from: Ghost on Mon 06/04/2009 14:35:08
- collect photos/drawings as "reference material"- this sounds pretty obscure but is an old trick. Many a great fantasy/horror creature has its roots in an artists' collection of photos of lettuce, rust, or even exploded marshmallow.

As an student getting their Bachelors, I must say that this is super important. My harddrive recently failed and I lost most of what I had, but before that I had TONS of photos just for inspiration. I had my photos folder sorted into all sorts of topics, like cool designs or logos, textures I liked, color pallets, awesome conceptual work by other artists, and several folders for projects that I planned on working on in the future. Then when you start work on a project, you'll have a bunch of points of "reference" for what you want to do. Not something to copy from, but something to mimic.

Rust is a great example. Depending on your project, rust could look many different ways and will depend on not only the material and location of the object, but the shape and contours of the object too. So placing this texture directly on this object won't work because of the objects unique qualities. But if you notice that rust pulls up in some specific places, or tends to form in a certain way, it'll give you a better idea of how to apply it to what you're working on.

Architecture and landscapes work the same way. Don't necessarily copy directly from them, but notice attributes that you like about the reference and what makes them "work" visually. Basic structure and perspective are the most important, like Andail said, but plan you're designs around what features you think would make this work visually interesting.

As for your image, I think you're on the right track. I had a few issues with the lighting in the shadow of the building, but I had just come from outside and after looking at the image for a while it cleared up. I think the design is well done and the would work great as a background. Something about the lower left corner bothers me. Something about the hill. Cloud positioning looks good with the layout of the building so I wouldnt change that. Maybe a sign or a tree or something to fill that space?

Great background, would be nice a bit sharper but overall it's a great piece of work imo.

I suggest that you try to design the landscape and building as you would a spaceship or whatnot - forget references and just go with some shapes that look cool and exciting, and focus on getting the silhouettes interesting, as they have the greatest impact on us.

Learning from references isn't of course bad, but the main thing in my opinion is simply to learn to create interesting shapes that composed together form a pleasing whole, and which guides the viewer to the focal points of your choice. This often starts by very loose sketching, where you create flowy shapes that you then later refine into whatever you want it to be.

I personally almost always use a textured brush, which has a watercolory look to it, to get rid of plain surfaces, and also to add some details, kinda akin to the "details" you get for free in lo-res with dithering. Not sure how recent this file is, but I think it's the brush I use 99% of the time (photoshop) (http://marcus.krupa.se/AGS/l_brush.abr).

Good luck with your hi-res experiments!

Thanks for the comments all :)

I already have a few images for inspiration and such (about 500 I think) but these are all other people's illustrations, not photos. I am sad to say that I find looking at photos of houses pretty boring  ;D

A lot of the time I draw inspiration by playing other people's games and seeing the art in them - both pro and indie - so I guess you could say I look at reference material every day nearly.

Anyhow, I didn't really intend to dwell on any one painting for too long, as I really want to build up my ability to create a background in a reasonable amount of time and with consistent quality, so I moved on ;). This one is done with the 'design a spaceship' idea, where I drew silhouettes first and then detailed.

(http://img529.imageshack.us/img529/7427/scene2copy.png)

I went a little crazy with the colours, yeah ;).

Again, not sure how long this took me. I did a version earlier, but didn't have the sky as a seperate layer, and I wanted to add clouds and mountains in with the ease that layers provides, so I started again. I figured the practice couldn't hurt, really.

This one probably took 30-40 minutes I guess. Again I forgot to time  :-[

loominous, thanks for the brush. I might have a play with it to see if I can lose some of the 'stroky' feel I have going on here!

Thanks again for your time so far, folks :)

Edit: Not sure whether this is worth posting, but I tried doing a scene with Loominous' brush... I seem to have had more trouble defining shapes here, but that might also be due to the difference in setting, colour and such. I timed this one and it was 26 minutes :)

(http://img16.imageshack.us/img16/8011/shackcopy2.png)

And yes, I will try drawing with normal daylight colours soon. But I find that very hard to do!

They're definately getting more interesting!

It might be worth trying to get more layers in there, not as in photoshop layers, but image elements, and position them in a zig zaggy pattern, where the eye is lead back n forth going back through the image.

Here's a crude edit of the first image:

(http://marcus.krupa.se/AGS/bc.jpg)

Old one for comparison

(http://img529.imageshack.us/img529/7427/scene2copy.png)

With more depth you start losing the nice naive feeling of the original, but if you want to take it more towards normal paintings this is probably the way to go, and you can still incorporate it in flatter stylized styles, but then limit the depth between the layers.


I also added some extra light in the centerish area, to get a focal point in the center area of the image. In this case it leads the eye to the back of the image, as the contrast is boosted in the center mountain area, which is kinda crap, as there's not much there to look at, but it was more done to make a point and make the values more dynamic.


About brushes: I think the most important thing is consistency. In the first image in the thread, you had the soft brush vs hard, and in the last one you have these sharp edges vs the brushy textury.

There's of course nothing wrong with using different brushes in a piece, but keeping the silhouette edges consistent helps make it feel like one piece instead of a collage. If you're using a textured brush, you will always have some jitter in the edges, even if you're doing something smooth like a ball (unless you reduce the size of the brush to a single pixel), and while having this jitter may seem unmotivated, it will look natural in a pic where everything has these edges.

Oh, and using a textured brush takes a bit of practice -- it's easy to get the impression that you can let the brush do all the work and get discouraged when things don't immediately look good -- but it mostly helps you in breaking up clean edges and surfaces, so you'll still have to create the actual texture of the surfaces yourself.

So I started playing with Hue/Sat in Photoshop on your picture, and then switched over to Channel manipulation.

By subtracting the blue channel entirely:
(http://dl.getdropbox.com/u/837372/shackcopy2-RG%20channel.png)


Awesome. And now my wallpaper too. :)
~Trent

Loominous: I've been quite unsatisfied with the flat feel of my background lately, and I really, really love that zig zag composition idea! Thanks!!! I probably haven't done the ultimate example here, but I had a shot:

(http://img227.imageshack.us/img227/6182/scene3copy.png)

I've stuck with the standard brush for now so that I can get a feel for creating depth and such... I'm pretty pleased with most of this image considering it was, again, a speedpainting. I have to say it's a really good feeling sitting down to make and image and knowing how I'm going to compose everything, so thanks! It has certainly made doing this more fun! Also, I tried using all one type of brush here (except for the 'sun') so the clouds are drawn with a hard brush as well, which I hope turned out okay.

Trent: Hah, your colour scheme is crazier than mine ;)! I never thought one of my scribbles would be wallpaper material  8)

That last one really is very good, sir! Just missing the jellyfish next to the lamp  :=

Looking nice!

One thing you could try out is to offset the composition to one side. Right now they're quite symmetrical in that everything sort of balances in the center.

Assymmetry is a nice tool to create additional interest, and an compositional offset like this is a nice foundation for a more dynamic pic.

Another thing that you could try is to place the most interesting elements at the focal point. In the latest one you have a few cool rocks at the focal point (the lower center bright spot), but the most interesting spots are probably the lamp n the tunnel, so I'd try getting the focus around areas like that.

With a composition like the current one, you sort of even out the interest, sort of saying: "look here, here, n here, these parts are equally important/cool", which is fair, but it usually pays off to focus on a particular element and build the whole thing around it, which usually leads to a more "powerful" image.

Anyway, it's looking much more "painterly", so I guess you're on the right track!

Hah, well spotted Ghost, and I didn't even notice until 5 minutes after I'd drawn it ;).

I like the idea of trying an asymetrical composition, Loom, and tried this:

(http://img11.imageshack.us/img11/6306/scene4copy.png)

But I get the feeling that even though I've offset what I thought was the 'main focus' (the water tank) everything still leads back to the centre. I might have another shot at asymetrical composition, because to me this all feels very evened out still. Thanks for the tip, anyhow!

I like that one a lot. I think maybe the sun could be more prominent and the clouds less so though, might help I'm not sure.

Think it's progressing great!

One reason why the tank doesn't get much focus is that we're attracted to detailed areas, so the rather plain silhouette of the tank won't pull much attention, or it might, but we'll leave it immediately to explore more exciting areas.

Another thing is framing of elements. As opposed to the tank, the farm is nicely framed by the landscape, clouds and tank, which form a rectangle of sorts around it.

So by contrast, the farm is nicely framed, has interesting details, and with the bright background spot placed right behind, has enough contrast to pull most attention and keep the viewer there.


One thing I'm noticing is that the horizon line is really low in all pics, and since the skies so far haven't been terribly exciting, it might be good idea to reframe the pics to show more ground and less sky, or possibly go with a more widescreeny format, where you'd simply crop out the upper regions.


But I think the last one looks really great, particularly considering the pretty rough state it's in! (when going with painterly approaches, the image often looks quite crap before refinement is begun, which can be discouraging, but something you just have to ignore)

Thanks for the tips! I can really see how the farm is 'bordered in', that's really interesting. Also, it makes perfect sense that the more detailed structure holds the attention for longer. Here I have tried to take the focus of the image away from the centre, and gone with a completely asymetrical approach:

(http://img6.imageshack.us/img6/1608/scene5copy.png)

My intended focal point here is the windmill, with the tree being a secondary one. It's pretty rough, but it still took me 35 minutes.

I didn't really spend ages on colouring here, and I think it's probably a step backwards palette wise, but I think the whole composition is probably nicer. I tried to raise the foreground as well, seeing as they've all been pretty low as you mentioned.

I almost added a foreground element, but I was worried about over emphasising the left hand side so I just left it as it was. I also tried drawing mountain ranges in the background instead of just rock formations (because one must experiment, right?) and turns out I failed pretty miserably  ;D.

Edit:

Tried doing another image with an offset focal point, this time to the other end of the screen:

(http://img27.imageshack.us/img27/4540/scene6copy.png)

Hopefully this palette is a bit more effective than the one on the windmill (I messed that one up from the very start by not using a dark enough purple, I think). Although now I've possibly gone a bit too dark. Sigh.

If you make a game like this I'll make a game about your life...I swear!! ;)

Bahaha nobody wants to play a game with that many awkward moments ;)

But, yeah, the whole point of this whole excercise is to improve to the point where I can do this style of background for games. Because I'm really sick of my pixel backgrounds.

So.

I did this one here with the intention of seeing how well one of my sprites would fit in with it. The original picture is here:

(http://img16.imageshack.us/img16/221/scene7copy.png)

I then got a sprite which I had drawn earlier, resized the background from 640x480 to 320x240 and then I pasted the sprite over the top:

(http://img185.imageshack.us/img185/1598/head.png)

I feel it matches in fairly well, but am also interested to hear what you guys think. Probably one of the main things would be that I need to do more refining to the background first, I guess.

If I did a game like this I'd still be able animate the characters pretty quickly but have (hopefully) nicer looking backgrounds... however I am aware that people get a bit wary when two different methods of illustration are used in a single game.

I think the low saturation of the sprite makes it really pop out, especially with the outline, and while I think this is a good thing, I am aware that it might not be. So... any thoughts?

Also, any tips on the background as well, of course. I tried to incorporate the things I have learnt from the earlier images into this one, of course :).

Quote from: Ben304 on Wed 08/04/2009 08:46:04
Bahaha nobody wants to play a game with that many awkward moments ;)

But, yeah, the whole point of this whole excercise is to improve to the point where I can do this style of background for games. Because I'm really sick of my pixel backgrounds.

So.

I did this one here with the intention of seeing how well one of my sprites would fit in with it. The original picture is here:

I then got a sprite which I had drawn earlier, resized the background from 640x480 to 320x240 and then I pasted the sprite over the top:

I feel it matches in fairly well, but am also interested to hear what you guys think. Probably one of the main things would be that I need to do more refining to the background first, I guess.

If I did a game like this I'd still be able animate the characters pretty quickly but have (hopefully) nicer looking backgrounds... however I am aware that people get a bit wary when two different methods of illustration are used in a single game.

I think the low saturation of the sprite makes it really pop out, especially with the outline, and while I think this is a good thing, I am aware that it might not be. So... any thoughts?

Also, any tips on the background as well, of course. I tried to incorporate the things I have learnt from the earlier images into this one, of course :).

I think the sprite matches perfectly. I always loved weird looking atmospheric bg's and if there was a game containg my idea on that kind of art, I'd play it for eternity.. If you can tint the character sprite using ags it would be perfect.

Quote
however I am aware that people get a bit wary when two different methods of illustration are used in a single game.

If you're background are getting crisp enough, I don't see a problem. However I don't care much about visible brush strokes in fullscreen ;)

Quote from: Ben304 on Wed 08/04/2009 08:46:04

I feel it matches in fairly well, but am also interested to hear what you guys think. Probably one of the main things would be that I need to do more refining to the background first, I guess.

If I did a game like this I'd still be able animate the characters pretty quickly but have (hopefully) nicer looking backgrounds... however I am aware that people get a bit wary when two different methods of illustration are used in a single game.

I think the background part of the image looks good, but the walkable part is too fuzzy in the reduced version. I'd say you should either retouch the walkable parts at pixel level after reducing or use finer brushes or something in the first place.

Anyway, you did some pretty good looking hi res sprites some time ago, i think they were vectors. Would they be a lot more time consuming to animate?

Quote from: Ben304 on Wed 08/04/2009 08:46:04

I then got a sprite which I had drawn earlier, resized the background from 640x480 to 320x240 and then I pasted the sprite over the top:

(http://img185.imageshack.us/img185/1598/head.png)

Also, any tips on the background as well, of course. I tried to incorporate the things I have learnt from the earlier images into this one, of course :).

I really like what you're doing here, Ben.  Ever since that last concept painting you were working on, I've been wanting to see what you'd come up with next.   I like the color perspective of the background a lot, pretty sweet.

perhaps this will prove helpfull:

http://www.carloscabrera.com.ar/tutorial.html

I think your pictures could benefit from some texturing. You've layed out the big shapes quite well, now it's time for some detailing. I'm not really a fan of these highly surated colours you use but I guess it's the style you chose to with.

Thanks all for the comments :)

As for animating vectors... it's really something I am not comfortable at doing at the moment, nor do I have the software to do it, sadly. Drawing with vectors takes me way too long to consider feasible for making game resources for, and the last time I animated with vectors was in high school! Maybe something to keep in mind for the future, but for now pixels are what I love doing and am comfortable with!

As for refining and adding in more detail (like textures), yep, I definitely plan on learning these things in the future. But for now I am trying to focus on forming shapes in a pleasing manner (I'm only just really now starting to get comfortable with the landscape, my big worry is doing buildings (especially interiors!), so I would rather learn to do a wider range of shapes in a consistent style before I get too focused on the details, because I still have tons to learn here! But thanks for the ideas and the tutorials, I am sure they'll come in handy in the future!

As for now, it's still working with shapes, and I have done my first really serious go at drawing a house, which I think is still pretty bland in shape, but am fairly pleased with when looking at the shading and lighting:

(http://img222.imageshack.us/img222/5503/scene8copy.png)

As far as shape goes, it still feels pretty boring, so I guess I'll try drawing my silhouette a bit crazier next ;).

The pic in the first post is still my fav.

Could someone point me in the right direction to a tutorial for making these kind of backgrounds? (photoshop novice)

If you want to make your pixel art fit better try reducing the color count to around 128 and apply one of the dithering presets at about 70%.  Depending on the amount of colors in the original this will make painted backgrounds look more 'low-res authentic' like old Lucasarts backgrounds.  I really like the background with the easter island head!

I find it a bit weird the color pallets but they combine well
IMHO You could use some darker tones (and lights for highlights), like the ones you used in some bgs with the foreground, to give more contrast
Very pretty looking backgrounds
o/

J-Man, sorry but I don't know of any actual tutorials on tablet painting :(.

Interesting idea ProgZ - I just had a look in Photoshop to try it but I have a cheap, watered down version (it came with the tablet) and it seems to be missing a lot of features, including this one :(. I'm not sure if going for a 'dithered' look is what I want, but it'd be fun to play around with, of course :). I'm willing to try a range of things to see what happens :D

As for doing contrast, yep, that's next :)

Anyway, last night I thought it might be time to start trying to add some 'own colour' to the objects - so far I have been basically doing highlights to give colour, which is fine for night and dawn/dusk scenes but not for daylight scenes.

And I pretty much failed  :P:

(http://img6.imageshack.us/img6/1549/scene9copy.png)

I guess my next step here is to find some daylight scenes that I like and figure out how the colour schemes work. Should be an interesting challenge!

I think the highlights in that are fine.  The problem I see is that there's just so much green, and it's a bit bland.  Hang on though...what do you mean by "own colour"? Is there some kind of rule in this style where you have to color everything in the same hue range?  I'm not sure what I'm trying to ask here, sorry.  I guess I'm just wondering why you chose to make the hut green/bluish green.  It mends too well with the grass and the middleground colors, for my taste.  *scratches head*

But I do like it. =D

I didn't really explain it very well. I guess I didn't expect anyone to actually read it  :=

What I meant by objects having their 'own colour' is that instead of taking their hue for the lights and atmospheric lights, I would paint them with their natural hue. So rocks would be brown, instead of pink/blue/green.

I don't know why I made the house such a bland colour scheme. Probably because I was too lazy to mix new colours, so I took rock and grass colours  ;D

Anway, in order to get some practice doing normal daylight colour schemes, I took 4 photos from a google search and tried to paint rough versions of them. I wasn't really trying to make look alikes of the photos, I am really just interested at the moment in getting some idea of what colours look like in sunlight:

(http://img2.imageshack.us/img2/6295/coloursketchescopy.th.jpg) (http://img2.imageshack.us/my.php?image=coloursketchescopy.jpg)
(it's pretty big so I saved as a jpg instead of .png and thumbnail linked it)

For the most part I used a small brush, was at 100% zoom and kept my focus on just getting the general shape with the colours, instead of create an accurate painting.

I guess this shows that I still have a fair bit to learn. The rainforest and mountain are my least favourites, I think the two grassy hills are a bit better but show room for improvement as well. I guess if I do some regular practice at this sort of thing I'll get better :).

Well man, I'm going to have to surprise you and say that this is just about how every single amazing concept painting starts...looking like those roughed out colors and shapes.  Personally, I think that's probably a very good exercise, and I liked all of them except the snow one - and only because when I look at it, I see this adorable face. I don't know why...

=p  Yeah, regular practice for you and me both.  I'm getting a tablet (well, if I can dig it out of the bottomless dresser) soon from a friend, as she doesn't need her old one....so I'm excited to start getting away from the mouse for a change.  I really want to take a break from music and finish my game, and really invest a lot of years learning to do digital concept paintings...mostly because I spend so much time staring at them.  I know a lot, but I need to apply what I know more often.  So I always enjoy watching your progress, it's inspiring dude.  Keep at it.

'Local colours' is a term often used for the colours objects have when reflecting neutral light (not tinted), and they sure can be tricky to work with without getting a bland impression. In environments they don't actually exist, as as soon as you place objects in an environment, theyt start reflecting everything else, like a muddy mirrors, and thus the local colours get distorted.

It's funny how you're coming from this direction though, as most start out working solely with local colours, then progress to "enviromental colours" (just a term I made up), which is pretty much what you're using, though in a rather extreme way.

They way I approach local colours is kind of backwards, where I start out without them, having everything reflect the sunlight without absorbing any colours (giving everything the same colour as the sunlight), and then basically tint stuff with adjustment layers.

I find this a quick way of working and gives full control of all individual colours at any time, which makes it fantastic for experimentation. It can give a fake/dead look if you're not careful though, so it's hardly fool proof.

-

When going with more local colours, you'll probably want to introduce a direct lightsource, or you're it's likely that you'll end up with a rather unexciting image.

Crude edit:
(http://marcus.krupa.se/AGS/bo.gif)

Here I simply added some warm sunlight coming in from the back right, which contrasts against the ambient cools from the sky.

Apart from making providing more dynamic values and colours, this kind of light allows you to place things in focus, and create additional interesting shapes (light shapes). When people introduce this kind of light, they're often very careful with the placement, wanting everything to be very realistic when it comes to shadows and whatnot, but this is really just another tool which you can play around with in whatever way you like, so while I recommend trying to make it seem fairly logical and consistent, as light is the method we use to make sense of object's volumes, you can still mould it heavily to fit your design ideas, and as long as it looks good, people won't care.

-

Regard composition: I think the last two are a bit of a step back, in that you're sort of back to a flat two layer look, and without any real zig zaggy path for the eye to take.

One thing to try out is to lower the horizon a bit, and by that I don't mean placing the horizon lower in the image, like those early pics, but placing the viewpoint lower, as if we were looking at it through a grown man's eyes. High viewpoints tends to detach us from scenes, but they're practical for large areas. You find out the viewpoint's vertical position by looking where the horizon line crosses objects:

(http://marcus.krupa.se/AGS/viewpoint_height.jpg)

In the left one, the horizon line crosses house middle section, which is pretty high up, and in the right one at the man's chest, which is pretty low.

-

Regarding the pixel char: I think it fits ok, perhaps some anti aliasing on the outer edge:

(http://marcus.krupa.se/AGS/bpc_a.jpg)

and you could also add some dithering as Prog suggested (though here crudely done, so it's not really representative):

(http://marcus.krupa.se/AGS/bac_b.gif)

You can do dithering in Save for Web and Devices, in the File menu (below the regular Save, Save as), provided that your photoshop version supports it:

(http://marcus.krupa.se/AGS/bac_s.png)

Select gif (or png), then reduce the colour amount, and it'll apply default dithering, which you can modify the style and pattern of, and also edit the palette directly. Think it allows you pretty good control of things, but I haven't really used it much so I can't really say.

-

Got pretty lengthy, so I'll stop now.

Edit: improved one of many crappy sentences.

For dithering, there's always DepthDither, which is free.

So if your crippled Photoshop can handle plugins, this might be an option.

(http://www.2dadventure.com/ags/depthdither.PNG)

Get it here:
http://depthdither.graphest.com/

TheRedPress: Good luck with getting the tablet stuff started man! I wish I had been a bit more motivated to learn how to use mine but I'm trying to learn now. I enjoy concept art too, so I look forward to seeing your stuff :)

Loominous: Wow, very helpful post, thanks!

Yep, I do seem to be doing this backwards, but I really cannot stand illustrating with plain colours. Hopefully as long as I get all the steps in eventually it won't matter which direction I do them in :).

Interesting approach to tinting, I'm completely ignorant of how to use adjustment layers properly (or at all really) but I've noticed your stuff really does have a very "sunlit" feel to it, which is very nice! Perhaps once I've worked out the whole painting thing a bit more I might try to learn a bit about adjustment layers!


I really like the way the sunlight looks on that image, that's a very eye catching effect, very warm! I'm definitely going to try doing something like this!


With regards to the composition, I totally agree that it took a step backwards for a while there. I was focusing on the shape of the buildings more than the background, which is quite silly of me. I see what you're saying about a high viewpoint, I'll definitely try to lower it a bit and sow what I come up with.


Regarding anti aliasing the character sprite, I have been thinking for a while of trying some hand done anti aliasing, so I'll give it a shot and see if I can achieve something workable here. I should be able to manually set a couple of alpha layers and do it like that, I hope.

Thanks for pointing out the dithering tool, I never thought to look in there  :-[

Dirk: Haha, thanks, I don't know if my version can support plugins... I guess anything is worth a try. I'll keep it in mind for if I decide to do dithering :)


As for what I have been focusing on:

I thought a good thing to try would be an extended version of my 'sprite over background' experiment. What I'm concious of is that I need to be able to produce images that all look part of the same world, so I need to make sure my backgrounds all match each other to some extent. What I've done is create a 3 room example game, with no puzzles but just trying to make sure that I can effectively reproduce a background style multiple times for a game.

If you're interested in seeing how I went, the download is here (http://www.box.net/shared/n5a4zv39xt) (please forgive the lack of a few key animations and the slow walk speed).

I tried to make the scenes with a little bit of variety as to composition and subject matter, and I also tried a walkbehind object with an alpha layer (which turned out reasonably well).

If you can't be bothered downloading but would still like to see a screenshot, here is one:

(http://img186.imageshack.us/img186/905/screenshotymt.png)

I'm fairly concious that some parts of the backgrounds could stand cleaning up... also that there is not much in the way of interactivity potential there. I'm not really sure whether the best solution here would be to paint the interactive things or pixel them, as I'd probably have a fairly hard time animating something that is painted.

I am also thinking that it might be a better idea do draw a brighter character so as to help it 'pop out' from the backdrop.

Your thoughts would be appreciated.

I've got a ton of things I want to try now, so it's full steam ahead!

Wow, Ben304, if you release this, I'm going to have to make a game based on you..

Last one looks great!

Think the composition/focal point/framing works, the colours are really cool, and the design of everything is really nice.

Looking at the other backgrounds in the game, the last one (featured below) has one strength that I haven't mentioned yet, and has to do with "arrows".

"Arrows" marked with #1:
(http://marcus.krupa.se/AGS/b_a_t.jpg)

So basically these are objects pointing towards the/a focal point. We follow objects with our eyes, and in the best cases, the "arrows" leads the eye towards the/a focal point or another point leading to the/a focal point. The other backgrounds in the game lacked these, which makes them a bit more "scattered".

The area marked with #2 is an unfortunate tangent, which makes the objects merge which confuses the viewer. When I first looked at the image, I didn't actually catch that the right rock wasn't part of the left rock area due to this.

Looking forward to your progress!

Actually, I read your post before doing that background, whereas the other two I had done before hand and thought to myself "I'd better do good composition here, because the other two suck".

I am vaguely aware of the arrow like effect, and tried to do this here, I'm pretty pleased that it actually worked out! I tried doing it before in the stone head background, but didn't think anyone picked up on it (maybe it wasn't so effective?)

I've been told off for doing tangents like in spot #2 before, and didn't notice this until you pointed it out. I'll try and make sure I keep these sorts of things out of the image from now on!

Thanks for the tips as usual!

Ben that looks great! Your pixel character works pretty good now with the painted backgrounds, probably also because they share more colors than the one with the statue head. Hope you make your next game like this

Thanks bog, yeah the plan is to try making a game like this :).

My next experiment was to try something along the lines of what Loominous mentioned earlier, about doing the sunlight first and then laying the colours over the top. I started out doing this simple scene with just two layers:

(http://img243.imageshack.us/img243/6082/scene13copy.png)

The 'sunlight' is represented by the sky colour and that funny blackish dot in the top right is the shadow tone. I tried a bit of a lower point of view, but other than that just kept the image pretty basic.

Next I layered colours over the top, each on a seperate layer (now I think about it, it is probably better to use a single layer for this) with each layer at some level of transparency so I could see the shape of the image. When all layers are set to 100% in the alpha blend it looks, hilariously enough, like this:

(http://img27.imageshack.us/img27/4425/scene13bcopy.png)

I then took the layers to a colour level I was reasonably satisfied with, in this case 20%, and ended up with this:

(http://img243.imageshack.us/img243/1696/scene13acopy.png)

My thoughts on this experiment:

-I didn't use a very good sunlight colour. Sunlight should be a lot brighter!
-I should probably use some adjustment layer, but I was completely lost when playing with these and all of them did strange things to the image.
-I wasn't sure if there was a specific way to choose colours to put over the top, so I just chose colours at random. Really had no idea about what luminance/saturation to go for.

I think it need some finishing touches but apart from that I can't wait to play this game :D

Time for another experiment!

I decided to have a shot at doing some anti aliasing on a character by hand and also converting the background to a lower colour count to see if there are methods I can help my character sprites fit in with the scenery.

After doing the character animation frames, I exported them all as .png images then loaded them into Photoshop and individually placed AA pixels at 65% transparency where I would normally place an intermediate colour. This is a pretty slow process, but it means the character gets anti aliasing without being distorted, and the fact that one can flip frames in AGS makes it a little quicker.

I've built another little sample game which you can get here (http://www.box.net/shared/1r0lcn3noc). There is a small gui up the top with four buttons - 2 change the character between anti aliased and normal, and two change the background between high colour and low colour. Know that I haven't done the walkbehind object in low colour, so it is not 100% accurate.

As for those who just want to look at more pictures without downloading:

(http://img155.imageshack.us/img155/9843/aatest.png)

If you look at the edge of the character closely you can see some intermediate pixels there.

Graphics wise, I had a lot of fun drawing this particular background and am really happy with how it turned out. I tried making the shapes of things a bit more interesting, and I'm not sure why all these warped curvy lines look good to me, but I really like the effect. Also I need to practice my walkcycle animations, because he has a very strange strut.

I think the aa works pretty well at integrating the sprite -- at this point the dark outline is probably the bigger culprit, since the contrast is otherwise very limited.

Exaggerated version:

(http://marcus.krupa.se/AGS/b_aa_o.jpg)

-

About the sunlight dealy:

The colours are indeed a bit dark for strong sunlight.

Another thing is that the saturation decreases with darker values in your version, which is why shading with black rarely works well, when it, like in a candle, should stay pretty much intact, just change hue. So the brightest parts are yellow, the less bright, orange, then red. This constant saturation is really important in getting things to look warm, just cramming on yellows will look harsh n fake.

This is where adjustment layers come in, as you're able to basically say: make all bright values in the layers below yellow, these values orange, and then just paint with whatever colour you want, and they will take care of the colour/hue/saturation.

So I start out with a black n white value pic that get coloured warm by two adjustment layers, first one that resets the colours, and makes everything orange, so that I can work with any colours below (hue/saturation adjustment layer), then one that pushes bright values towards yellow, and darks toward red (curves).

(http://marcus.krupa.se/AGS/b_s_v.jpg)

(http://marcus.krupa.se/AGS/b_s_ss.jpg)

The important thing with the values is that they separate areas lit up by the sun, and those that aren't. The areas lit up by the sun will remain unaffected, but those that are in shadow will have the sky colour added to them.

(http://marcus.krupa.se/AGS/b_s.jpg)

Then it's a matter of applying colour, which I do with curves adjustment layers, where I push the colours towards their local colours.

The sky is basically another lightsource, so it has to be pushed quite heavily, whereas areas like grass n similar require smaller pushes, though this is all up to your taste.

As mentioned, adding the sky colour to areas in shadow from the sun will create contrast and make the sunlit areas pop out.

Here's the photoshop file, where I added a few descriptions in the folder names. (http://marcus.krupa.se/AGS/b_s.psd)

-

The above mentioned approach is bit backwards, as you start with light, when by default things are dark. You can take another route, which is a bit more logical, and more in the style I did earlier in the thread, where I added sunlight to a background. Don't recall which thread I posted these in, and I'm too lazy to rewrite the descriptions so I'll just post the images:

(http://marcus.krupa.se/AGS/col_light_tut_p0,5.jpg)
(http://marcus.krupa.se/AGS/col_light_tut_p1.jpg)
(http://marcus.krupa.se/AGS/col_light_tut_p1,5.jpg)
(http://marcus.krupa.se/AGS/col_light_tut_p1,7.jpg)
(http://marcus.krupa.se/AGS/col_light_tut_p2.jpg)
(http://marcus.krupa.se/AGS/col_light_tut_p3.jpg)
(http://marcus.krupa.se/AGS/col_light_tut_p4.jpg)
(http://marcus.krupa.se/AGS/col_light_tut_p5.jpg)
(http://marcus.krupa.se/AGS/col_light_tut_p6.jpg)

These images sure make the length of these posts rather impressive, so I'll stop now.

Cool background btw, and I agree about the curve lines!

I thought I posted this... must be going a little crazy.

Thanks for the tips, Loom! That really is a very nice colour scheme you've done to the house, big thanks for the .psd file as well! I really love the way the blues work in the shadows! I'll dig in there and see if I can learn some things!

For now I have tried doing the other method you mentioned, where the sunlight is done last, not first:

(http://www.2dadventure.com/ags/Scene15a_copy.png)

(http://www.2dadventure.com/ags/Scene16_copy.png)

I tried to clean the strokes up a bit without resorting to using a soft edged brush, although I will probably have a go at cleaning things up with a softer brush as well. I am still thinking that this might be a little dark, but not really sure.

Quick character test to see if I can manage to replicate the colour scheme accurately for a game:

(http://www.2dadventure.com/ags/Mockup.PNG)

(http://www.2dadventure.com/ags/Mockup2.PNG)

I am actually pretty happy with the way this one turned out, I feel she matches the landscape fairly well.

Any thoughts?

Think the lighting works quite well, but the low intensity and colour doesn't really suggest sunlight but rather dirt lit up by an overclouded sky.

As the only time when sunlight isn't very strong is when the sun sets, and then the hue goes towards red, the current setup is pretty confusing to the viewer, as the intensity is that of the very last stage of a setting sun, but the colour of the light as well as the angle is that of late afternoon.

This of course falls under creative decisions, so I'm not proposing that you change it to fit realism, just that if you want it sunny, then the intensity probably needs to be increased.

If you have the psd for one of the bgs, I could add an adjustment layer that punches up the sunlight.

psd file of one of the backgrounds is here (http://www.box.net/shared/myn62q3ikr)

I see what you're saying about the lack of intensity in the light, I guess I'll have to train myself to put stronger highlights in.

I tried looking at the psd you uploaded earlier, unfortunately I couldn't seem to view the adjustment layers. I'm curious as to whether this is because of something I have missed or whether because I am using a limited version of Photoshop, but I'd really love to be able to use curve layers, so I'm hoping it is just something I have missed.

Edit: I tried doing a quick sketch of a city style scene. A lot of things I am not happy with, really, but a start I suppose:

(http://img13.imageshack.us/img13/4687/scene17ccopy.png)

Ben (two posts behind): the lady you drew matches perfectly. Even better than the last attempt.

Quote from: Ben304 on Sat 11/04/2009 10:39:54
I tried looking at the psd you uploaded earlier, unfortunately I couldn't seem to view the adjustment layers. I'm curious as to whether this is because of something I have missed or whether because I am using a limited version of Photoshop, but I'd really love to be able to use curve layers, so I'm hoping it is just something I have missed.

Could you take a screenshot of your layer list when you open the document?

Thanks, Dual :)

Regarding the layer list, this is what I get:

(http://img404.imageshack.us/img404/6218/layers.png)

I also dug through the adjustment layer options looking for curves but could not find them in the list. Of course, I am still pretty new to Photoshop, so I might have missed something.

Looks like layer folders aren't supported, but the screenshot does suggest that you can access at least some adjustment layers:

(http://marcus.krupa.se/AGS/b_adj.jpg)

In the full version, there should be a heap of adjustment layers when you press that button, but I suspect you're down to a few.

Here's the photoshop file without the folders, curious to see what you get (http://marcus.krupa.se/AGS/b_s_v2.psd)

For reference, this is how it ought to look:

(http://marcus.krupa.se/AGS/b_adj_r.jpg)

It's definitely my cheapo bundled version :(. I get that layer list, but all the curves layers have the little pencil with a cross through it icon, and a double click on these yields a message saying "This is an adjustment layer that was created in the full version of Photoshop and cannot be edited in Photoshop Elements".

ohhhhhh, photoshop elements =[  That's a bummer man, I did some fun stuff with your project just with adjustment layers.  Can you still use curves without an adjustment layer though?  On mine it's under the menu Images->Adjustments->and then there's a list of all kinds of adjustments.  They give a preview option of course, and you can go back in history but otherwise they're permanent adjustments.

Doesn't seem to be available on my version, sadly.

Perhaps I should think about buying a full version of photoshop...

I have the latest verison cs4 extended you should get that man it's very good.

Why not try some free CS-brother? :) Not GIMP though. As far as I know it doesn't have adjustment layers. :( Try searching a little bit. I am sure there is some free (even opensource) program that'll satisfy your needs (always try the free first and then go for the not free ;)). Besides don't forget that pretty much can be done with very simple programs. All these tools and stuff are to make your life easier but - hey! - life's hard   :=

Hay Ben,

I like where you're going with this style.

I decided to share my take on one of your drawings (there's only so many Loominous-edits a man can take ;) )...composition-wise it's not your the best image in this series, and it could really use some framing of the structure of interest, but I wanted to show a different take on colours. By background - drawing-wise - are European comics like Franquin, Uderzo, and Kolk, and this largely reflects the way I handle a drawing.

Since I'm used to working with line-art, I took the liberty of creating redrawing the image with a pencil. I didn't spend any time on line-strength (adding more dynamics by variability in line-thickness), nor did I ink the piece (due to which the original shines through slightly):
(http://www.2dadventure.com/ags/BenHouse_MisjC.png)

While I use adjustment-layers quite a lot (particularly when I edit photographs), I decided not to use them here. Instead I created four layers:
1. Line-art (set to multiply)
2. Shadows (set to multiply)
3. Highlights (set to screen)
4. Flats (set to normal)

The (extremely boring) flats were as followed:
(http://www.2dadventure.com/ags/BenHouse_MisjE.png)

And below is a merge of the different highlight and shadow layers that I used:
(http://www.2dadventure.com/ags/BenHouse_MisjB.png)

The reason for using the a 'screen' layer for the highlights is that I can pick a colour for the light I'm working on (setting the brush to a low opacity (5%, 15%, or 25% depending on the light I'm working on)) is, that it's a simple way to have the colour of the light affect the underlying structure: the more the paint in this layer the more light hits the structure. This works also great with gradients: black indicates that no light is reflected, white indicates that white light is reflected (using red instead of white reflects red light, etc). I used the same approach to show a glow from the window in the final image by setting a layer to screen and creating a simple radial gradient from the colour to black (the layer is on top of the line-art to ensure that the line-art itself is also affected by the glow).

To add some depth I made some of the line-art darker (near the fence) or lighter (towards the back), and added a colour-layer to make it a little less saturated and a little more yellowish; resulting in the final image:
(http://www.2dadventure.com/ags/BenHouse_MisjA.png)

Of course when the line-art is removed the image still works (with the exceptions of the lack of roped holding the tire hanging from the tree)...and some might even say that removing the lines enhances the image (the yellow circle was my light-colour, I added it to a separate layer as a reference):
(http://www.2dadventure.com/ags/BenHouse_MisjD.png)

As you can see it's nowhere near as dreamy as Loominous' work, though...

Misj'

Ps. While done in Photoshop CS3, it should all work in Photoshop Elements as well.
Pps. Normally I would have combined Adobe Photoshop and Corel Painter; and compatibility between these programs is why I tend not to use the adjustment layers for colouring.
Ppps. Yes, Loominous, I did use your brush for this piece. ;)

Ben304, I think that something paler for a sky will be better. It hurts the eye omho. I couldn't stare at your background for too long. And it distracts my attention.

I used to use the gimp, which has some adjustment layers (obviously not as advanced as in photoshop)... but as soon as I switched to Photoshop I noticed my brush strokes were instantly smoother, and I'm very reluctant to stop using Photoshop. I will see what I can find, but if I can find an affordable copy of Photoshop I'll probably grab it.

Misj':

Big thanks for the paintover, you've really got a much cleaner style than my sloppy work :D! I really like the character you gave the shapes with your pencil lines. I agree that it's not the greatest composition wise, it's something I'm still learning the basics of I guess.

Is there any particular reasons you use the multiply layers? I've never really heard why these are used or what they do, so I am interested to see that you chose those for your line work and shadow layers. Thanks for the info on the screen layer as well, I've never used one of those before, so I guess it is something to experiment with!

I have done a bit of playing around with Corel Painter but it seems a little harder to work with - I guess it's probably better for people who are actually good at painting with a brush, which I am not :). It is still pretty fun to play around in but!

As for my own practice, I have gone back to speed painting in order to try and train myself to use better daylight colours in my images:

(http://img8.imageshack.us/img8/6275/scene18copy.png)

Pretty rough, I know, and 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. Quite satisfied with this as a speedpainting, but am still certain there are probably tons of things I have done wrong :).

As for using paler colours - I like bright colours ;D.

Edit: And another speed painting, with a similar purpose (to try and paint a scene with noon style lighting)

(http://img18.imageshack.us/img18/7189/scene20copy.png)

Great design in the last two!

One thing you could try out is to avoid shading with black, or any other unsaturated colour, as you'll lose any intensity of the light, and also get dull shadow sides. Basically you get a "dead" look.

(http://marcus.krupa.se/AGS/colour_temperature_a001.jpg)

So basically it's about maintaining saturation, and shifting the hue as areas get darker, which shading with black or similar won't produce, and you instead end up with lifeless, pale colours.

This works in muted palettes as well, where you can still inject life into the colours, without going saturated.

-

Another thing to try out with direct sunlight is creating shadow regions, to avoid these large uniform lit areas. A common thing is to place foreground elements in shadow, to at the same time boost the sense of depth, and you can also "mask out" light with shadows, to get rid of these large plain surfaces, and add some interesting light shapes.

-

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.

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.

Quote from: Ben304 on Mon 13/04/2009 03:43:39I 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 (http://www.hancokolk.nl/?p=home)'s Gilles de Geus (http://www.mannetje-en-mannetje.nl/Gilles%20de%20Geus%20homepage.html) (and by borrowed I do of course mean: stole).

(http://www.2dadventure.com/ags/Gilles-LineArt.png)

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:

(http://www.2dadventure.com/ags/Gilles-MidBackFront.png)
The viewer will read this frame starting at the girl, going through the background, and is finally lead to the three men.

(http://www.2dadventure.com/ags/Gilles-BackFontMid.png)
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.

(http://www.2dadventure.com/ags/Gilles-MidFrontBack.png)
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.

(http://www.2dadventure.com/ags/Gilles-FrontMidBack.png)
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:
(http://www.2dadventure.com/ags/Gilles-ContrastFocusOnGirl.png)
(http://www.2dadventure.com/ags/Gilles-ContrastBrightandDark.png) (http://www.2dadventure.com/ags/Gilles-ContrastShadows.png)
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.
(http://www.2dadventure.com/ags/Gilles-ColdOverWarm.png) (http://www.2dadventure.com/ags/Gilles-WarmOverCold.png)
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:
(http://www.2dadventure.com/ags/Gilles-WarmFaces.png) (http://www.2dadventure.com/ags/Gilles-ColdFaces.png)
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):
(http://www.2dadventure.com/ags/Gilles-Colours-Flats.png)

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):
(http://www.2dadventure.com/ags/Gilles-Colours-FinalB.png) (http://www.2dadventure.com/ags/Gilles-Colours-FinalA.png)
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.

Quote from: loominous on Mon 13/04/2009 11:04:08Misj: 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):
(http://www.2dadventure.com/ags/Gilles-BlackShadows.png) (http://www.2dadventure.com/ags/Gilles-WhiteLight.png)
As Loominous described in his previous post (http://www.adventuregamestudio.co.uk/yabb/index.php?topic=37391.40), using 'black' shadows creates a less vivid/warm/alive look (particularly obvious at her legs). The same is true when using 'sterile' white light.

Quote from: Layabout on Mon 13/04/2009 13:42:29
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.

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 :D. 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...

(http://img243.imageshack.us/img243/1271/scene22copy.png)

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?

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:
(http://nsa06.casimages.com/img/2009/04/14/090414024053233557.jpg)
I don't know if you prefer this one ?

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.

(http://img25.imageshack.us/img25/6691/sizes.png)

and a quick paintover with some text in it


(http://img105.imageshack.us/img105/8924/furhter.png)

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! :D

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: :D!

Edit:

Here I have had a quick go :)

(http://img4.imageshack.us/img4/1271/scene22copy.png)

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.

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.

(http://img2.imageshack.us/img2/8870/scene22bcopy.png)

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

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.

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

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

Guess I'll have to make them smaller.

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.  ;D

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

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...

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:

(http://marcus.krupa.se/AGS/b_rh.jpg)

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.

I demand this thread stickie'd!

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

~Trent

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:

(http://www.2dadventure.com/ags/Scene22c_copy.png)

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?

Quote from: Ben304 on Sat 18/04/2009 04:03:53
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.

QuoteSame 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!

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:

(http://img11.imageshack.us/img11/8271/63000800.png)

(http://img8.imageshack.us/img8/6130/30119120.png)

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

Quote from: Laserschwert on Wed 27/05/2009 14:44:18
Anyway, I feel that your character style and your background style do not fit together that well I right now, which is mainly due to the different resolutions. Still, even when scaled down, the background look somewhat smoother than the characters.

What different resolutions? The only difference is the smoothenes (aka anti-aliasing). I think both styles are great, the smoother as well as the more pixelated / sharpened one.

Quote from: Mr Matti on Wed 27/05/2009 15:49:34
What different resolutions? The only difference is the smoothenes (aka anti-aliasing). I think both styles are great, the smoother as well as the more pixelated / sharpened one.

Uhm... his backgrounds are at 640x480, while his sprites are at 320x240 (at least pixel-wise)... I'd say that's two different resolutions ;) (EDIT: I see that there are a few images in this thread where both sprite and background are at 320x240... the ones I referred to didn't... so, misunderstanding I guess :D)

I didn't say that I don't like his styles, but simply praising his work isn't very constructive, right?

I just think he could make sprites and backgrounds a little more consistent in style.

Quote from: Laserschwert on Wed 27/05/2009 14:44:18Anyway, I feel that your character style and your background style do not fit together that well right now ... I've tried to mock-up something that might work ... They were hand-painted as well, but they were sharpened up a bit to match the pixelated design of the sprites

I must say that the mesh of different styles (pixel vs painted) didn't really bother me. However...when I look at Laserschwert's examples I do agree that a sharpened version of the background has a certain appeal and might work very well with the character-style. It is of course a 'taste' decision...

Ps. Welcome Laserschwert...

@Laserschwert
I really like how you sharpened the images. Care to share the workflow? Did you just add a unsharp mask or do something completely different and clever? There isn't much halos near the edges so its not just sharpen filter?

Quote from: zabnat on Wed 27/05/2009 22:38:05
There isn't much halos near the edges so its not just sharpen filter?

It IS just a the normal sharpen filter applied after downscaling to 320x240... no magic here.  ;)

I LOVE your choice of colors...you have real talent my friend!

Quote from: Laserschwert on Thu 28/05/2009 01:19:35

Quote from: zabnat on Wed 27/05/2009 22:38:05
There isn't much halos near the edges so its not just sharpen filter?

It IS just a the normal sharpen filter applied after downscaling to 320x240... no magic here.  ;)

Damn. Why do I always get those stupid halos around all the lines. :(

Laserschwert filtering DID leave a slight halo (you can see it easily in the forground rocks of the lower picture), but I agree, it does make the sprite mesh in better.

Hi all, i'm new here.

This is a very good post! i've learnt a lot of things about drawing and painting.
Ben, how's going your painting? Any news or improvement?

Hey Johnny, and welcome :)

At the moment I am working on a very small game project with what I've learned here, but plan to come back and do some more learning once that has been released.

Cheers