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!
Near the top of the second page of the Critics lounge: Vintage Game Art Style How??? (http://www.adventuregamestudio.co.uk/forums/index.php?topic=55434.0)
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.
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?
Check out this article (https://www.usgamer.net/articles/behind-the-art-of-day-of-the-tentacle). 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 (https://adventuregamesbackgrounds.blogspot.no/2017/06/day-of-tentacle-concepts.html) has a bunch of them.
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?
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.
Perfect! Sorry for the inconvenience, I'm insecure. I will try it to see how it looks. Thanks for the answer, dude :)
Quote from: Snarky on Tue 10/04/2018 18:44:53
Check out this article (https://www.usgamer.net/articles/behind-the-art-of-day-of-the-tentacle). 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 (https://adventuregamesbackgrounds.blogspot.no/2017/06/day-of-tentacle-concepts.html) has a bunch of them.
Very interesting, thanks for sharing!
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 ;)
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.
Thats sound not easy to do, but I will try. Thanks a lot for the advices!!! :)
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...
I just came across this tool here which may be useful.
Pixelator (https://www.reddit.com/r/gamedev/comments/7ylvt9/pixelator_a_gamedev_tool_i_wrote_to_convert_any/)
I've only used it a tiny bit but the colour reduction seems pretty good.
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.
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?
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.
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.
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.)
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.
You could also try IrfanView's color reduction.
Quote from: Snarky on Thu 19/04/2018 18:07:06
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.
I have to correct myself here. There is one undefined aspect of nearest-neighbor that different apps might implement differently: What to do if a pixel in the scaled image falls in the
exact middle between two (or four) pixels in the original image. This gives you the option between all the various rounding methods (up, down, random, bankers...), or of taking the average of the adjacent pixels; and all these variations could give a noticeably different look to the output under suitable conditions.
(Nearest neighbour should never take an average. That would defeat the purpose - which is generally to not introduce new colors or blur the image in any way.)
It could make sense for upscaling, e.g. if you want to scale up an image to 6.5x.
Which is not to say that it's a good choice for a standard implementation of the algorithm, just mathematically valid in principle.
Quote from: Snarky on Thu 19/04/2018 18:07:06
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.
Agree on all accounts.
Unintentional, unordered dithering of any sorts looks awful on modern LCD screens. The same goes for rogue (magenta, green, especially white) pixels. It's the fact we were looking at crappy old CRTs and that we knew no better that made it so awesome. The cheaper the monitor was, the better pixel shader it had. :tongue: In those circumstance, there was no dithering, there was just a smooth gradient between colors and rogue pixels were erm...
artistic accents. It all looked good then, that's the reason they left it in, in the first place.
There are quite a few areas where these MI2 backgrounds were retouched by hand, to add more detail to edges and stuff like that.
In this day and age I see little to no reason to downscale traditional art. Either go hi-res or do it digitally, either as pixel art or digital painting.
But if I had to take the downscaling route because, let's say, it makes character animation less demanding, and that's the biggest
pro I can think of - I would take some extra time to separate the original scan into layers and then downscale, color correct and index each layer separately. Just imagine, in 1991 you probably had to have a Graphic Workstation (anybody remember those?) to do stuff like that. Nowadays any netbook with GIMP installed can do the trick.
In any case, IMO, Monkey 2 had the worst
fitting backgrounds of all Lucasarts games. Not that they're artistically bad (they're great!), it's just like the art direction was slightly lost, trying too hard to be Sierra-like. While in fact it was Sierra and their blurry, muddy VGA backgrounds who were wrong all along (hindsight 20-20). DOTT and Sam&Max proved that, and then some.
Quote from: Snarky on Thu 19/04/2018 18:07:06
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.
Well there was more than one option for Photoshop (and GIMP). Most notably to take off the dithering. Photoshop also had an option to use a patterned dithering, which made the whole image look like a checkerboard. I just put up the ones that I thought looked the best.
But from your response, I'm starting to think that maybe I should put up the others.
Quote from: cat on Thu 19/04/2018 19:48:05
You could also try IrfanView's color reduction.
And try out IrfanView's colour reduction while I'm at it. Which is yet another art program I already have on my computer. (laugh)
EDIT:
Here are the other settings for colour reduction.
Spoiler
Photoshop without dithering
[imgzoom]https://orig00.deviantart.net/97e6/f/2018/110/0/9/photoshop_none_by_danvzare-dc9c2yz.png[/imgzoom]
Photoshop with diffusion dithering (the one I used in my previous post).
[imgzoom]https://orig00.deviantart.net/c3a1/f/2018/108/5/3/photoshop_by_danvzare-dc95x2h.png[/imgzoom]
Photoshop with pattern dithering.
[imgzoom]https://orig00.deviantart.net/2c74/f/2018/110/5/c/photoshop_pattern_by_danvzare-dc9c2zi.png[/imgzoom]
Gimp without dithering.
[imgzoom]https://orig00.deviantart.net/4e91/f/2018/110/8/6/gimp_none_by_danvzare-dc9c306.png[/imgzoom]
Gimp with Floyd Steinberg (Normal) dithering.
[imgzoom]https://orig00.deviantart.net/86c0/f/2018/110/4/9/gimp_floyd_steinberg_normal_by_danvzare-dc9c30n.png[/imgzoom]
Gimp with Floyd Steinberg (reduced color bleeding) dithering (the one I used in my previous post).
[imgzoom]https://orig00.deviantart.net/9bbe/f/2018/108/d/8/gimp_by_danvzare-dc95x2w.png[/imgzoom]
Gimp with positioned dithering.
[imgzoom]https://orig00.deviantart.net/ed15/f/2018/110/1/d/gimp_positioned_by_danvzare-dc9c314.png[/imgzoom]
Pixelator (the one I used in my previous post)
[imgzoom]https://orig00.deviantart.net/288d/f/2018/108/4/f/pixelator_by_danvzare-dc95x46.png[/imgzoom]
IrfanView without dithering.
[imgzoom]https://orig00.deviantart.net/27db/f/2018/110/b/c/irfanview_without_dithering_by_danvzare-dc9c31p.png[/imgzoom]
IrfanView with dithering.
[imgzoom]https://orig00.deviantart.net/8249/f/2018/110/6/e/irfanview_with_dithering_by_danvzare-dc9c329.png[/imgzoom]
Having looked at all of these, I am absolutely gobsmacked at how good IrfanView looks. I actually had to double check to see if it was indeed 128 colours (it is).
That being said, I think Gimp with positioned dithering has a certain type of charm to it.
Sorry for bump this but I was interested in try to get the similar as possible to the in-game image, so I take the paint original one and made a little proccess to it.
Of course the original game have alot of post-production and retouch changing and adding pixels. I didn't do that because it will take a lot of time (I did this just for fun very fast in my free time)
The Process:
Spoiler
The proccess (I made it in photoshop) (http://i.imgur.com/aIS43pG.jpg)
The Original and the one I edited:
Spoiler
(http://i.imgur.com/W9fny0F.jpg)
I need to check again if it was indeed to 128 colours, because I added some adjusts and things after I indeed it and I didn't check it again.
Quote from: Snarky on Thu 19/04/2018 18:07:06
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.
You guys should REALLY try the PS plugins I keep mentionning : XiMagic Denoiser and XiMagic Quantizer. They are a-ma-zing.
Quote from: imsomnia212 on Tue 21/08/2018 10:24:47
The Original and the one I edited:
Spoiler
(http://i.imgur.com/W9fny0F.jpg)
I need to check again if it was indeed to 128 colours, because I added some adjusts and things after I indeed it and I didn't check it again.
So you started from the hi-res MI2 background and downscaled it?
It's hard to compare them as you've pasted both "before" (hi-res) and "after" (low-res) at the same resolution. And it's too small to see if the noise reduction or color reduction were positive.
...Or did I misunderstand what you posted and are you asking if your downscaling produced better results than Lucasarts' downscaling? Are the two images that you posted side to side the result of Lucasarts' downscaling (as seen in MI2) and your own downscaling from the hi-res image?
The issue is that you posted a JPEG image instead of a PNG image si you ruined all your pixel work.
Quote from: Monsieur OUXX on Tue 21/08/2018 11:29:43
So you started from the hi-res MI2 background and downscaled it?
It's hard to compare them as you've pasted both "before" (hi-res) and "after" (low-res) at the same resolution. And it's too small to see if the noise reduction or color reduction were positive.
...Or did I misunderstand what you posted and are you asking if your downscaling produced better results than Lucasarts' downscaling? Are the two images that you posted side to side the result of Lucasarts' downscaling (as seen in MI2) and your own downscaling from the hi-res image?
The issue is that you posted a JPEG image instead of a PNG image si you ruined all your pixel work.
I did the same as danvzare, but trying to get the similar as mi-2 process, thinking on maybe how they will make it with today technologies, more faster than those days.
The side to side (original and final) are the lucasart and the hi-red downscaling and after color and adjusts changes and 128 indeed (but I didn't check it again that's why I said that but I sure that is)
I did the images in png but when I upload to imgur they change to jpeg, I don't know how to mantain the same format when you use imgur.
Sorry for the necro-post, but I've come across this thread a couple of times while researching the DOTT backgrounds and have a few things to add!
I think I've been able to identify a rough scale for Peter Chan's original artwork, at least for DOTT. I based the calculation on things like the thickness of the scotch tape used to mount some of the artwork, and a post-it used for a correction on one of the pieces. Because the artwork in the DOTT special edition gallery seems to have been photographed rather than scanned, the calculation is approximate due to unknown perpective differences, furled paper, etc.
I believe the original size of the drawings to be 10" x 7.5" (for a single screen). Of this, the bottom 2 1/8" is masked off for backgrounds intended to be used with the interface visible (i.e. not cutscenes). For screens which scroll horizontally, extra pages are taped together to get the desired width. When using this scale, scanning at 96dpi produces an image exactly 3x the final resolution horizontally. It doesn't work out quite as neatly for the vertical resolution due to the non-square pixels in 320x200.
From the various pieces it looks like the overall process for a background (in DOTT) was as follows:
- Produce a line-art outline sketch
- Photocopy the above and use the copy to produce a fully pencil-shaded sketch for tone and lighting.
- Produce a full-colour marker illustration of the scene, possibly using a lightbox, with a copy of the line art underneath as a template, and using the pencil-toned version as reference.
- Make a few final adjustments to highlights/edges with gouache. (Note: In MI2, this stage was far more involved, and a lot of extra detail was added. In DOTT, it's mainly corrections and dealing with marker bleed)
- Mount the artwork onto animation paper and scan
- Scale down the digital artwork and retouch to flatten areas of solid colour/smooth out gradients and make final adjustments to geometry/signage.