Why your background is broken, a semi-comprehensive guide to background painting

[Andail]

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

[Ookki]

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.

[Sythe]

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?

[Jim Reed]

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.

[nihilyst]

Great stuff, Andail. Very useful indeed. Keep em coming!

[Sythe]

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

[Jim Reed]

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

[Sythe]

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

[Jim Reed]

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.

[Sythe]

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.

[miguel]

Thanks for the tutorial, Andail.
Coincidence or not, it was exactly what I needed.

Great work!

[Shane 'ProgZmax' Stevens]

I've added this to the tutorial list.

[Jakerpot]

I loved what you've done in my bg bro! 

What chapter 2 will talk about?

[vertigoaddict]

Awww man I wanted to contribute, is it too late or can I still send something in?

[Andail]

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!

[Dualnames]

Really nice guide there. Some really valid points expressed. I'm trembling to share my background art..

[Sythe]

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.



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.

[Kweepa]

How cheap!
They traced a picture from wikipedia!
http://en.wikipedia.org/wiki/Azores

[Sythe]

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.

[GarageGothic]

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