Adventure Game Studio

Creative Production => Critics' Lounge => Topic started by: on Fri 03/10/2003 10:00:12

Title: A Question about creating Sierra Style Backgrounds
Post by: on Fri 03/10/2003 10:00:12
Hello to everyone and thanks to you all for taking the time to read my post hopefully someone,somewhere can give me some viable information that I have been needing the last few weeks that I  have searched far and low for the information but it doesnt seem really out their in the general mass so I am hoping someone on this forum can shed some light on the problem that I am having


I recently downloaded the newest version of AGS that is for Windows{The old Dos version was a nice program but its format was to hard for a beginner to understand off the bat even though I was impressed by the time and effort put into it}.The newest version I would say is a work of art and has been very enjoyable and user friendly and helped me learn the foundations of game programming very well so I wanted to get that out of the way

Well to get back on topic,I have a problem in the background department in a Space Quest game I am trying to put together,I have the sprites I wanted together finally but the problem is I have tried desperately to find tutorials on drawing Sierra style backgrounds and all I could find was this sorry excuse
which doesnt go into detail really at all whatsoever

http://www.nancycarterdesign.com/bryce/tutorial


I have Photoshop and I can make banners and so forth and I am starting to understand alot of the concepts I didnt understand orginally tinkering with the program,such as layering,etc. but I still am not grasping the concept of how to make quality backgrounds{I liked the remake of KQ1 that Tierra did and their style of drawing but a few steps down
from that quality would satisfy me completely and I dont expect to learn overnight,I just want some exercise drawings that some of the artist posters who post on this board would suggest to improve my drawing skills.

If anyone has a certain technique that they could show me or some drawing to play around or even a "good"tutorial to show me to learn the process of drawing 256 color sierra style backgrounds I would be forever in your debt for your time and help.Please keep in mind I want to learn how to draw with Photoshop and I dont have the resources to sketch by hand and scan them onto the computer and I am not a very good artist to begin with  but you get the point  :)

Thanks
ReaXan

reaxan@yahoo.com
Title: Re:A Question about creating Sierra Style Backgrounds
Post by: Miez on Fri 03/10/2003 10:32:31
Check out the sticky tutorials thread: http://www.agsforums.com/yabb/index.php?board=4;action=display;threadid=600 - there's bound to be something in there that'll help you along. :)
Title: Re:A Question about creating Sierra Style Backgrounds
Post by: Layabout on Sat 04/10/2003 05:31:44
Try checking on the Tierra Entertainment forums. They might have something useful there. I'd give the url but i cant remember it...
Title: Re:A Question about creating Sierra Style Backgrounds
Post by: taryuu on Sat 04/10/2003 07:32:51
sierra style backgrounds is kinda vauge.  

for eample, there is a great deal of difference between the backgrounds of LSL and KQ.  can you be more speciific in what kind of effect you're trying to acheive?
Title: Re:A Question about creating Sierra Style Backgrounds
Post by: on Sat 04/10/2003 10:29:16

Well thank you guys for yalls input so far and I did check the
tuts and though I didnt find anything I was needing I found delux paint 4 which is good for sketching{even though I am not very good at it right now} and MYIE2 which is a good internet browser I am using now LOL

and for "taryuu" I am trying to create the style of Space Quest 1 VGA and Space Quest 4 but Leisure Suit Larry VGA and Kings Quest VGA are backgrounds I like as well


Here is an example of how bad a background artist I am but I want to improve,this is trying to study methods for weeks

(http://www.2dadventure.com/ags/SQ1_copy.jpg)

Maybe someone could touch it up and tell me what they did so I can have a better idea,I basically sketched the iteam,meshed some colors together and smudge the heck out of them,I also used the airbrush tool somewhat

Title: Re:A Question about creating Sierra Style Backgrounds
Post by: on Sat 04/10/2003 12:45:18
Here is my most recent one,a little better than the previous I guess

(http://www.2dadventure.com/ags/goodbackground.jpg)
Title: Re:A Question about creating Sierra Style Backgrounds
Post by: on Sat 04/10/2003 15:39:01
Hey ReaXan, I have a great deal of respect for your desire to get better, so i'll try and help you.

First i'll talk about those two art pieces, they are nice but the one thing I noticed is the over-used ammount of filter-type effects on it. I've always prefered sharp drawings to blurred drawings because they seem nicer and they are definately easier to do. It's also easier to work with characters on sharp backgrounds too.

I don't think you are ready for that sort of stuff, and neither am I, so I believe that the best thing to do would be to work on some simple images and then go on to better things. That's what I did.

Example image I partly drew (Outline and objects except for the chair, stuff on desk and door was created by Brusier and the Floor perspective was designed by Wanderlady) in MSPaint and edited in photoshop:
(http://www.spike-domain.net/fcwaonline/gallery/classroom.png)
I'm too much of an ameteur when it comes to artwork, seeing as i'm probably one of the youngest on this board (I'm 13). But from those 13 years, I'll try to help you with the best of my ability.

Anyway, if you look at this room I did, you can see I used absolutely no filters, gradients or any other blending shortcut techniques. When I make a room, I draw an outline, put a red point on a new layer (for perspective, which I SOMETIMES use lol) and then add to it. If I use gradients, I'll do them by hand, that way I can make sure they look right.

The edges in my images are always a darker version of the colour they surround (e.g door frame outline is a dark grey). Lighting is also important, it adds to the atmosphere of the drawing and makes things look a bit more interesting and realistic. I usually just make a black outline of a shadow on a new layer, fill it and then adjust the transparency/opaque level.

My style of drawing isn't exactly sierra style but it should help you with some little things. I don't mean to say here that filters are terrible, but if over-used, the drawing can turn into a mess. It's always better to come up with your own style of drawing images, because it will appear as something new and not just a Sierra lookalike...

There are some pretty decent tutorials out there to help, I'd suggest to you to go check them out, theres a nice tutorial for Lucasart style drawings at Indiana Jones and the Fountain of Youth (The url to the site has escaped my mind though, sorry).

And Remember
hand-shading = looks really good.
shortcut filters = bad if not executed properly.
Title: Re:A Question about creating Sierra Style Backgrounds
Post by: WanderLady on Sat 04/10/2003 16:14:40
I'm sorry Keiko. Although you did do a lot of edits to that picture it isn't truly yours.
It's Bruised picture and original idea.
Not to take away from the work you did, but you must give credit to her as well, rather than leading someone to believe that this is solely yours.
Title: Re:A Question about creating Sierra Style Backgrounds
Post by: on Sat 04/10/2003 20:57:22
Wait...I just came back and checked this, I didn't notice which pic I used, I meant to use this one:

(http://www.spike-domain.net/fcwaonline/gallery/room-2.png)

It was a pic I was using for a classroom based on brusiers image from a while back and I must've got confused. Oh well, that one will do for the mini-tutorial and I wrote the credits part in. Where is bruiser anyway?
Title: Re:A Question about creating Sierra Style Backgrounds
Post by: Pessi on Sat 04/10/2003 22:34:16
Nice to meet you, Reaxan.

Really good points, Keiko! I'm definitely with you on the fact that fancy tools don't mean fancy image. I personally think all you basically need is brushes, like with real painting. They can be any kind, depending on preference. MSPaint
vs. Photoshop.

I think the key to the style your after is correct tools. Basically the images aren't very complex in any way. With very few strokes you can make good looking image. At first it seems harder than it actually is, which hopefully is  encouraging. Anyway, I just tried out the method I've always used when trying to mimic a style - painting over. Here it is step by step.First, naturally, observe the style. Find images of the game and perhaps save them on your harddrive. Look at them fullscreen with an image-viewing application. I actually have tens of screenshots on my HD of Monkey Island 1, 2 and 3, DOTT, Sam And Max and probably of some others as well. It's really educative.

Try to figure out how the images are made. For example the specific Sierra's style you're after probably is originally achieved by scanning oil-paintings and reducing the color amount to 256. Basically, if you want to work on the computer, just use similar kind of brushes. I think regular round, sharp and soft brushes will do the trick. However, if you'd like to add the grainy hue variation, you could use custom brushes in Painter or Photoshop, if you want. But that's not really essential, it merely makes the image a bit more full and alive.

Anyway, to start off the mimicing, get an image you like and open it in your favourite painting program. As we're merely trying to mimic the style, no trying to educate ourselves in composition or anything else, just take a portion of the image and paint over it, trying to copy it. I selected this image I found from Mobygames.com, I took it because there's the kind of an empty wall that will demonstrate the simpliness of the process well.

(http://runestone.adventuredevelopers.com/staff/Pessi/TrashCan/SierraColoringHelp/01.jpg)

I'm going to focus on the wall on the left. Select the wall with a selection tool (make sure it has anti-aliased edges) and fill it with the shadow color. You can pick the color with an eye-dropper tool. The reason why you pick the shadow color is that, in my opinion it's good to work from dark shades to lighter ones gradually. Even better, from mid values (brightness) to extreme values. Kind of adding contrast all the time until you're satisfied with it. Also, as you get more comfortable with it, you'll notice that as a color gets lighter, the color subtly changes. When you work your way up gradually, you'll be able to change the color respectively. However, that's not important right now. It's just good to try and learn the easiest techniques from the beginning.

(http://runestone.adventuredevelopers.com/staff/Pessi/TrashCan/SierraColoringHelp/02.gif)

After you've got the base color down, you can block in the main colors. Basically first the one for the lit area and then a dark one to make the upper part of the shadow a bit darker. The latter one might seem unreasoned and confusing at this point, but it's just something light does. You can leave it out, don't be put off by it. As for the color-picking, often it is recommended to pick the colors by yourself from your painting program's palette (because when you work on an image from the top of your head, you won't have direct reference), but I know from my own experience that finding the right colors in the beginning is VERY challenging. That's why you can take a shortcut and use the eye-dropper tool to pick the color and see where the color is found in the palette and try to see a relation between the colors in shadow, and the ones in light.

As for the actual drawing part, try to find a brush that lets you get off as easily as possible, still getting the desired effect. For the border of the shadow and the lit part, you want a smooth edge. It would take lots of blending if you were to use a sharp-edged brush, but you won't have to deal with that because you'll be using a soft brush. You will optimally only need one stroke for the edge. Then just fill the rest of the lit area. Also, for the dark shade in the shadow, you would just use a bigger brush and a single stroke. It's easy to get too complicated with this.

(http://runestone.adventuredevelopers.com/staff/Pessi/TrashCan/SierraColoringHelp/03.gif)

Next, we'll add the subtle lighter part of the lit area. This is because the closer the surface is to the light, the brighter it is. In this image, in my opinion, the way the light goes is not quite natural (not that I knew that well anyway) but it looks really good so it doesn't matter. You can either use once again the eye-dropper for the color (you have the same wall on the right which you can use for color-picking) and see how the Sierra's artist chose it according to original bright blue color. Or, you can just pick the blue color and make it a bit lighter with the palette options in your painting program. In Photoshop, you just double-click the foreground color that shows on the toolbar and the palette window pops up.

In the next image, there's an example of how you could move the brush around to minimize the amount of strokes. I tried to demonstrate it with the red lines. The topmost line is with the light blue, and the bottom one is using the
original blue color to cover any misstrokes. This way you don't have to be perfect first, you can just 'erase' the excessive color with the original one. If you're wondering, less strokes doesn't really mean a better result, but it
means faster workflow, which is always good for images that have lots of detail.

(http://runestone.adventuredevelopers.com/staff/Pessi/TrashCan/SierraColoringHelp/04.gif)

Next, I added the reflection-kind bright blue edge. I just removed the selection that was earlier keeping me from accidentally painting on the background. Then I picked the bright blue color and used the generic line tool
to make the lines. Simple and very accurate.

I also added the ceiling there. I just picked the dark shadow color and painted the ceiling with it. Well, actually I used the path tools to get as smooth edge as possible, but at this point, you can equally well use a sharp-edged brush for
it.

(http://runestone.adventuredevelopers.com/staff/Pessi/TrashCan/SierraColoringHelp/05.gif)

Now, we're going to work on the detail a bit - the light. Here you get to see in action what I meant by the gradual coloring. This is due to the lens effect (I think) that you seen in pictures. The center of the highlight is white, and near the edges of the highlight you see the actual color of the light, a bit exaggeratedly. You will start with coloring the actual color of the light with bright blue (see the actual colors I used in the boxes on the image). Just block in the hape of the light. Next with a bit brighter color (it's actually also a bit more cyan - details, details), paint on the shape of the light, but so that the very edges are of the previous color. See the middle of the image for this phase. Finally, you'll add the white, or nearly white, center for the light.

You'll see that in the end, the middle phase doesn't change much. However, with gradients of larger size, the effect is very noticeable. It takes time, however, to learn what kind of colors you should use for the gradations. I'm still trying to learn. Color theory is your friend on this one. As well as photo reference.

[img width=250
height=100]http://runestone.adventuredevelopers.com/staff/Pessi/TrashCan/SierraColoringHelp/06.gif[/img]

And here it is on its rightful place. I also added the edge that is between the wall and the ceiling. Again, I used the line tool but this time it was two pixels wide. I also used a Photoshop trick on coloring the red and the blue parts. This is something that is irrelevant at this point, but I drew the line on a separate layer and used the 'lock pixels' feature. It locks the pixels' transparency so that you can color it any way you want - you won't be able to cross the edges of the shape (line). But that's just something I've learned to use to speed up the process. You can use a regular small brush to paint with the red color manually on the line.

(http://runestone.adventuredevelopers.com/staff/Pessi/TrashCan/SierraColoringHelp/07.gif)

Here are the rest of the images I have. It so happened that when I was finished with my post, the board said my post was too long and that I should go back and edit it. When I hit the back button and refresh, this is the last version I get. Luckily, I saved this version on the notepad (screwed up the formatting, by the way). So, instead of typing the rest, I'll just post the images and edit later to add the comments. I hope this is of some use as it is right now. Good luck!

(http://runestone.adventuredevelopers.com/staff/Pessi/TrashCan/SierraColoringHelp/08.gif)

(http://runestone.adventuredevelopers.com/staff/Pessi/TrashCan/SierraColoringHelp/09.gif)
Title: Re:A Question about creating Sierra Style Backgrounds
Post by: on Sun 05/10/2003 15:07:32
Pessi always comes through on the tutorials! I think that's a nice piece to read. I've never actually bothered to mimic another piece of art as it never seems to come out right when I do it. Oh well, i've been playing games more than making them right now.