About backgrounds in LucasArts adventure games

Started by javixblack, Tue 10/04/2018 04:01:03

Previous topic - Next topic

javixblack

Hello, AGS community! it is my first post here.

I'm sorry if my english is very bad, but I'll try to explain myself the best that I can:

I searched in this forum and I don't find any usefull about the hand-drawn backgrounds of LucasArts adventures. My question is the next: how was the process to digitize this draws? I mean, I want to do something similary but I'm not pretty sure how do that. My theory is the next: they drawn in paper with a unknow size for me, paint it in watercolor and then scan it. Later, they resize the image to the tipical resolution of their adventures (320x200) and the draw look pixeled as usual in their adventures.

After this, I will procede to tell you my situation: my scanner is for A4 format. If I draw a background with A4 dimensions, then scan the paper and resize to 320x200, my handmade draw will look like the LucasArts backgrounds?


I hope you can understand my doubt. I'll waiting for your answers!!!! Thanks you so much!

Khris

#1
Near the top of the second page of the Critics lounge: Vintage Game Art Style How???

Snarky

There's not one answer:
-Backgrounds in earlier games were mostly drawn directly in the computer (though sketched out on paper first), mainly in the classic drawing app DPaint. This includes Maniac Mansion, Zack McCracken, The Last Crusade, Loom, Secret of Monkey Island, and Fate of Atlantis (though Fate also has some scanned elements)
-Later games often scanned in drawings made in a variety of mediums. This includes Monkey Island 2, Day of the Tentacle, and of course Curse of Monkey Island (not sure about Sam & Max, but I would imagine it was made the same way as DOTT since it has a very similar look), and you can find samples of the original art online.
-From The Dig on, the graphics often also included some 3D rendering. Grim Fandango uses mostly 3D-rendered backgrounds.

cat

Quote from: Snarky on Tue 10/04/2018 12:26:47
-Later games often scanned in drawings made in a variety of mediums. This includes Monkey Island 2, Day of the Tentacle, and of course Curse of Monkey Island (not sure about Sam & Max, but I would imagine it was made the same way as DOTT since it has a very similar look), and you can find samples of the original art online.
Oh really? I knew about MI2 being scanned but not DOTT. The style is completely different, I'd be interested in seeing the original art. Do you have a link?

Snarky

Check out this article. There's an example of Peter Chan's marker-drawn background on page 1, and they talk about the process of scanning and cleaning up the backgrounds on page 3.

And this page has a bunch of them.

javixblack

Very impressive!!
So, I probably could something like that in my home. The question is: the A4 format will be enough to get the necessary definition for this?

Snarky

1. Just try it, why don't you?
2. A4 is 297x210 mm, so each pixel will be slightly less than 1 mm square on the paper. You tell me whether that's too small for your drawing style.
3. You can just try it.
4. Yes, it should sufficient, depending on your drawing technique and style.
5. Have you ever drawn on A4 before? Take your drawing, scan it, scale it down to 320x200 and see how it looks. (Have you never drawn on A4? Maybe start practicing...)
6. If it's not sufficient, you can simply draw on A3, scan it in two sections and stitch it together in Photoshop.
7. I forget what I was gonna say... oh yeah: Just try it!

Anyway, the paper size is not going to matter that much to the result. What's going to matter is your art ability.

javixblack

Perfect! Sorry for the inconvenience, I'm insecure. I will try it to see how it looks. Thanks for the answer, dude :)

cat

Quote from: Snarky on Tue 10/04/2018 18:44:53
Check out this article. There's an example of Peter Chan's marker-drawn background on page 1, and they talk about the process of scanning and cleaning up the backgrounds on page 3.

And this page has a bunch of them.
Very interesting, thanks for sharing!

Monsieur OUXX

#9
Consider this an extra article, that is not better or worse than the other articles provided:

- scan at A4 with a good resolution (300dpi?)
- adjust brightness, contrast and color saturation in some images processing software (let's say its Photoshop)
- apply "sharper" filter if needed.
- reduce image to twice the size of your final resolution, using the right algorithm (for example: bicubic sharper. For example if you target 320x200, then reduce at 640x400.
- Reduce again to 320x200, but this time with an algorithm that keeps things crisp (for example: nearest neighbour
- now you're almost done but you need with two final (optional) steps : noise reduction (to keep it crisp but make it less busy by reducing rogue pixels) and color reduction (to give it an old-timey look while not making it look like a crappy gif)
- you can achieve noise reduction by using "XiMagic denoiser" (free demo plugin for Photoshop)
- you can achieve color reduction by using the "posterize" filter (not very pretty) or the free demo of the "XiMagic quantizer" Photoshop plugin.

After doing all that you should get some DoTT-grade background quality ;)
 

Danvzare

Quote from: Monsieur OUXX on Thu 12/04/2018 12:19:05
- now you're almost done but you need with two final (optional) steps : noise reduction (to keep it crisp but make it less busy by reducing rogue pixels) and color reduction (to give it an old-timey look while not making it look like a crappy gif)
- you can achieve noise reduction by using "XiMagic denoiser" (free demo plugin for Photoshop)
- you can achieve color reduction by using the "posterize" filter (not very pretty) or the free demo of the "XiMagic quantizer" Photoshop plugin.
I find the best way to handle colour reduction, is by using GIMP. That does an absolutely brilliant job at creating dithering effects, and allows you to choose the exact number of colours you want as well. Brilliant if you want to create something along the line of MI2's backgrounds. (nod)

Plus it's free, and looks incredible.

javixblack

Thats sound not easy to do, but I will try. Thanks a lot for the advices!!! :)

Monsieur OUXX

Can someone testify that Gimp color reduction is better than Photoshop color reduction?
Also, are we talking "posterize" or "switching to indexed colors mode"?

Also I'm wondering if Photoshop is using the same color reduction algorithm when switching to indexed colors as when exporting to Gif. Overtime they absorbed so many different external algorithms...
 

Trample Pie

I just came across this tool here which may be useful.

Pixelator

I've only used it a tiny bit but the colour reduction seems pretty good.

Danvzare

Quote from: Monsieur OUXX on Fri 13/04/2018 13:16:29
Can someone testify that Gimp color reduction is better than Photoshop color reduction?
Well, since no one responded to this, I've decided to take it upon myself to find out.
I've hidden it in spoiler tags, because of all of the images.
Spoiler

First I got the original scan of the Phatt Island Wharf from Monkey Island 2.
[imgzoom]https://orig00.deviantart.net/8f1e/f/2018/108/a/1/wharf_original_by_danvzare-dc95x1k.png[/imgzoom]
Here's the final version as seen in the game, for comparision.
[imgzoom]https://orig00.deviantart.net/05b1/f/2018/108/4/9/wharf_final_by_danvzare-dc95x1x.png[/imgzoom]

Next I lowered the resolution down using Nearest Neighbour.
[imgzoom]https://orig00.deviantart.net/955d/f/2018/108/b/b/nearest_neighbour_by_danvzare-dc95x25.png[/imgzoom]

And then I made the image into 128 colours, on Photoshop, Gimp 2, and Pixelator. Messing about with the settings, to try and get the best look.

Photoshop
[imgzoom]https://orig00.deviantart.net/c3a1/f/2018/108/5/3/photoshop_by_danvzare-dc95x2h.png[/imgzoom]

Gimp
[imgzoom]https://orig00.deviantart.net/9bbe/f/2018/108/d/8/gimp_by_danvzare-dc95x2w.png[/imgzoom]

Pixelator
[imgzoom]https://orig00.deviantart.net/288d/f/2018/108/4/f/pixelator_by_danvzare-dc95x46.png[/imgzoom]

I personally think Photoshop looks the nicest, and that Pixelator looks most like the one in Monkey Island 2.
[close]

Monsieur OUXX

Quote from: Danvzare on Wed 18/04/2018 17:33:45
Since no one responded to this, I've decided to take it upon myself to find out.

Amazing job!
Can you clarify which method you used to "make the image in 128 colors"? did you 1) Posterize? 2) Switch the image mode to "indexed"? 3) Save as gif and chose the number of color from the export settings?
 

Danvzare

Quote from: Monsieur OUXX on Thu 19/04/2018 10:01:55
Amazing job!
Can you clarify which method you used to "make the image in 128 colors"? did you 1) Posterize? 2) Switch the image mode to "indexed"? 3) Save as gif and chose the number of color from the export settings?
I switched the image to "Indexed". I could try the other ways if you want me to.

Andail

Cool experiment, Danvzare :)

When you lowered the res with nearest neighbour, which software did you use? This might factor in as well.

I agree that the PS version looks best - the MI2-version looks too contrasted in comparison, with too many black outlines where it's not necessary.

Danvzare

Quote from: Andail on Thu 19/04/2018 13:37:09
When you lowered the res with nearest neighbour, which software did you use? This might factor in as well.
Oops, I didn't think about that.
I used Paint.NET to lower the resolution, since it's my drawing program of choice. (Yeah, I have way too many drawing programs on this computer.)

Snarky

That really shouldn't matter, any more than it should matter what application you use to flip an image horizontally: nearest-neighbor scaling is a simple and precisely defined operation with only correct result for a given task.

Now, is it possible that two applications use (for example) different floating-point precision and therefore experience different rounding errors that give different results for a few pixels? Sure. But I don't see any way that two different apps would give systematically different results so that it affected the "look" of the scaled image in a case like this.

I also disagree pretty vehemently that Photoshop looks best. It's better than the GIMP, but it's still afflicted with dithering pretty much covering the entire image â€" and what's worse, single-pixel dithering. Pixelator has a much more pleasant look to my eyes, though it feels a tad too soft. Playing with curves and contrast to get stronger outlines like in the original screen (which I think still looks better than any of these - just check out the sky in the top right, for example â€" presumably due to manual retouching and/or palette optimization) before downscaling and color reduction would probably have helped.

PS: Quite interesting to notice how in the game version they blurred elements of the foreground digitally.

SMF spam blocked by CleanTalk