Adventure Game Studio

Creative Production => Critics' Lounge => Topic started by: Andail on Sun 31/01/2010 21:26:38

Title: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Andail on Sun 31/01/2010 21:26:38
Allright, I've been hung-over and ridiculously productive this weekend. Here's the first chapter of my guide, comprising 5 backgrounds sent to me by generous AGSers.

Please note that this is not primarily a technical tutorial, it's based on very general art principles applied on various backgrounds.

www.esseb.com/andail/backgroundguide.doc

Have fun!

PS
Will make it an html page soon enough
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Ookki on Sun 31/01/2010 21:57:29
Nice one! Thank you. I'll be waiting for more of these and hopefully one day I'll see the compositions and lightings with the same eyes as you guys do.
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Sythe on Sun 31/01/2010 22:58:41
Quote from: Andail on Sun 31/01/2010 21:26:38
Allright, I've been hung-over and ridiculously productive this weekend. Here's the first chapter of my guide, comprising 5 backgrounds sent to me by generous AGSers.

Please note that this is not primarily a technical tutorial, it's based on very general art principles applied on various backgrounds.

Hi Andail,

Any techniques you'd recommend for converting a photographic background to cartoon?
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Jim Reed on Mon 01/02/2010 00:12:37
Well, not to barge in on Andail's turf, but I'd firstly reduce colours to only 8 or something as low as you can manage (Gimp can do that, just don't use dihtering while doing it), to get cartoony looking surfaces. Then you trace it (if needed), and add some colours by hand back on. If you don't understand my mutterings, I'll gladly provide an example.
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: nihilyst on Mon 01/02/2010 00:30:12
Great stuff, Andail. Very useful indeed. Keep em coming! :D
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Sythe on Mon 01/02/2010 00:31:26
Quote from: Jim Reed on Mon 01/02/2010 00:12:37
Well, not to barge in on Andail's turf, but I'd firstly reduce colours to only 8 or something as low as you can manage (Gimp can do that, just don't use dihtering while doing it), to get cartoony looking surfaces. Then you trace it (if needed), and add some colours by hand back on. If you don't understand my mutterings, I'll gladly provide an example.

Hi Jim,

This is along the lines of what I've been trying to do. But it doesn't look particularly convincing. If I take out too many colours then the surfaces blur together which just looks washed out.

http://img205.imageshack.us/img205/2980/bedroomshot.png

I'm guessing that the only decent way to give it a lucas arts feel is to redraw from scratch via pixelart techniques; But I may be wrong...

Also, a short aside: I wanted my game viewport in 16:10. Is this actually possible at high resolutions? Say: 1400x900

Thanks,
Sythe
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Jim Reed on Mon 01/02/2010 03:00:38
I think your image has too much white, so objects don't have easily visible outlines.

Anyway, here's an example of what I'm trying to tell you:

http://i46.tinypic.com/2epol0p.png

The first one is the original image.
The second one is the image reduced to only 8 colours in GIMP.
On the third you can see how I traced the table, and cleaned up the stray pixels.

Yes, it's still a lot of work, but Gimp gives you the colours (and where to put them) and shapes, and you work from there. Some drawing practice is desirable also. =)
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Sythe on Mon 01/02/2010 06:37:41
Quote from: Jim Reed on Mon 01/02/2010 03:00:38
I think your image has too much white, so objects don't have easily visible outlines.

Anyway, here's an example of what I'm trying to tell you:

http://i46.tinypic.com/2epol0p.png

The first one is the original image.
The second one is the image reduced to only 8 colours in GIMP.
On the third you can see how I traced the table, and cleaned up the stray pixels.

Yes, it's still a lot of work, but Gimp gives you the colours (and where to put them) and shapes, and you work from there. Some drawing practice is desirable also. =)


Hi Jim,

Thanks for your advice. I took a shot at the limited pallet redraw:
http://img99.imageshack.us/img99/1605/bedroomnew.png

The result looks ok, I think. But it still seems a little plain...
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Jim Reed on Mon 01/02/2010 12:46:29
I strongly suggest to ditch the gradient, and do it all by hand. Didn't you read what Andail said about gradients up above (his tutorial)? Also, it looks plain because you need to add random clutter around, eg. books, shelves, pictures on the wall etc.

We're hijacking this thread. I'll try to post something in your thread about this BG ( I think you did start one?) by tomorrow.
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Sythe on Mon 01/02/2010 14:58:34
Quote from: Jim Reed on Mon 01/02/2010 12:46:29
I strongly suggest to ditch the gradient, and do it all by hand. Didn't you read what Andail said about gradients up above (his tutorial)? Also, it looks plain because you need to add random clutter around, eg. books, shelves, pictures on the wall etc.

We're hijacking this thread. I'll try to post something in your thread about this BG ( I think you did start one?) by tomorrow.


It's fine. My time investment in backgrounds is already over-budget. But thanks for your help.

Incidentally I did read the guide a couple of times. I have tried some of the techniques in there before, and I don't find them to be as applicable to high resolution backgrounds.
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: miguel on Mon 01/02/2010 15:48:23
Thanks for the tutorial, Andail.
Coincidence or not, it was exactly what I needed.

Great work!
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Shane 'ProgZmax' Stevens on Mon 01/02/2010 17:43:20
I've added this to the tutorial list.
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Jakerpot on Tue 02/02/2010 18:28:10
I loved what you've done in my bg bro!  :D

What chapter 2 will talk about?
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: vertigoaddict on Tue 02/02/2010 18:42:22
Awww man I wanted to contribute, is it too late or can I still send something in?
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Andail on Tue 02/02/2010 19:44:11
Hi everyone, thanks for the thumbs up, I hope it was useful to some :)

Yeah, keep sending backgrounds, but it'll take slightly more time for next chapter.

And keep painting!
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Dualnames on Wed 03/02/2010 21:53:36
Really nice guide there. Some really valid points expressed. I'm trembling to share my background art.. ;)
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Sythe on Thu 04/02/2010 13:44:38
Quote from: Andail on Tue 02/02/2010 19:44:11
Hi everyone, thanks for the thumbs up, I hope it was useful to some :)

Yeah, keep sending backgrounds, but it'll take slightly more time for next chapter.

And keep painting!

Hi Andail,

Not sure where to post this, but I thought it might be useful to someone.

(http://img211.imageshack.us/img211/7241/basedon.th.png) (http://img211.imageshack.us/i/basedon.png/)

This is a screenshot from Indy 2 and behind it is the actual setting. This makes me curious as to how many more Lucas Arts backgrounds were drawn from photographs of real places. I don't know if it'll be at all useful for your tutorials, but I find it a useful observation.
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Kweepa on Thu 04/02/2010 15:31:45
How cheap!
They traced a picture from wikipedia!
http://en.wikipedia.org/wiki/Azores
:=
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Sythe on Thu 04/02/2010 16:51:18
Quote from: SteveMcCrea on Thu 04/02/2010 15:31:45
How cheap!
They traced a picture from wikipedia!
http://en.wikipedia.org/wiki/Azores
:=

Amazing that they managed to do this 9 years before wikipedia was even founded.

I imagine their artists had access to LucasFilm's stock image library. I am curious though as to how many of their backgrounds are based on some reference photo.
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: GarageGothic on Thu 04/02/2010 16:56:01
I'm guessing an old National Geographic picture or something - OR, the people of the Azores realized how many tourists Fate of Atlantis would draw to the island and remodeled it to look like the game (you'll notice they didn't get the hills in the background entirely right).
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Kweepa on Thu 04/02/2010 23:03:23
Quote from: Sythe on Thu 04/02/2010 16:51:18
Amazing that they managed to do this 9 years before wikipedia was even founded.
I guess one smiley isn't enough for some people...
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Gilbert on Fri 05/02/2010 01:41:09
This is serious business. This shows that the game makers were much concerned about the quality of their games, so they put a lot of budget into it and built the chronojohn to acquire some still photos for reference.  :=


Well, back to topic (a bit), I see that they didn't follow the details exactly and had managed to take some liberty, most noticeably in the house placement. Of course, they didn't use this exact photo for reference, as the displayed area have been shifted a bit (I couldn't remember, did this background scroll?) and the houses may have been changed through years (but not that much I think). This is a good thing as it's not a mindless trace-over (I think it may not be traced actually and they might just use photos of real locations for reference).
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Ilyich on Fri 05/02/2010 23:19:20
Great guide, Andail! Very useful, accessible and original.

The idea of creating a tutorial based on images by other people works really well, it's like a compilation of quintessential advice from "Critics Lounge". Good luck on the second chapter!

This made me think that it would've been great to have some sort of "Best of" showcase gallery of progress made in Critics Lounge (before/after kind of thing), so it would be easier to point newcomers in the right direction.
Title: Re: Why your background is broken, a semi-comprehensive guide to background painting
Post by: Jakerpot on Sat 06/02/2010 00:39:24
AGAIN: What will the 2 chapter talk about?