Better tuning my background art.

[ginanubismon]

I know this may seem stupid or a rather sad rather pathetic attempt to post something every once in a blue moon to keep my account but after disappearing to work on the n00b game a little while ago after asking for C & C on the story idea I had done a lot of practicing and learning to make my first (official) game release a much better effort then needs be as I cannot sleep with a guilty conscious because a crap-game would keep me awake at night for letting it slide.

After downloading, painting over, copying and other things I had slowly learned to create, animate and make my own sprite templates for my games I thought they looked a bit off and cartoony (in a bad way) until I had found a topic here where it mentions using a darker color for an outline insted of the usual black outline which made the character have much more depth and more professional feel to it.

Feeling proud after learning this after a few hours of work (for just one character) I was wondering what else I learn to improve my background art which is seriously lacking. Here is a few samples of my work and how I made it.

Just a few notes.

I use MS paint, which is something I had began with because it is A). it is easy to use and B). Free.

I have no idea what layering, filters or anything fancy mean or how they work.

What I am looking for is basic tips to try out to see what works, like meantioned I am falling in love with the color outline work which gave me a sense of accomplishment.

The "store".



How it was made:

Using the square tool I made one half of the shelf then stacked it on top of each other then filled it in with made objects. The same thing for the counter.

The problem:

Kind of bland and kind of beats the player over the head with the obvivous items need later on, I would like to know how to add some varitity.

The Asylum cell.



How it was made:

Simple lines and box tools, including the door which I cross thrashed the window on the door.

The problem:

Again, bland and beats the player over the head of what to do.

The Asylum Hall.



How it was made:

Like the Cell I used lines and square tools, and carefully cross thrash the glass.

The problem:

It seems very dull, I wanted a desk where a guard and a nurse were stationed where the player would have to give the release papers to but I had trouble making a decent desk and created this instead. Now just a (boring) guard just stands around waiting for you to give him the papers for your pass (which might be cut and replaced with more logical stationed nurse and guard).

The "Old House".



How it was made:

Using mainly copy and past I made the woods first then created this "house" with the square tool because my freehand stinks. The roof was made by straight lines alone with the pourch, the door is copied from the asylum door.

The problem:

It is not atmospheric (not a word) enough for me as it needs to be more forboding because it leads to one of the most important story elements in the game.

The forest.



How was it made:

Starting with one leaf I copied and pasted a lot of them until I had a full tree full of them then made a bunch of trees with straight lines and then copied and pasted it again in reverse (as you can tell I am very lazy when it comes to large scenes) then used the leaves on it then a blue background made the same way which serves as the background to the background.

The problem:

It is not forboding enough, this is one of the pathes that leads into the hidden parts of the area to reveal a major story element and it looks like a bunch of popicicles sticks stuff into the ground. I had a good puzzle planned for here too.

And those are the samples I had made, what I need is not paint overs because I want to learn some basic tips to try (really try) to better myself. But if you do use a paint over please tell me how it was done so I can learn.

And I need help in learning to create better:

Furniture (I really have trouble with this).

Doors (the examples are enough to explain why).

Anything to do with the outdoors (it all looks flat to me).

Thank you for your help, I just want to make sure my game is as best as it came be for my first time.

And if I had made any mistakes I am sorry as it is almost two am and I am very tired.

[Alun]

One major problem with the Forest screen that jumps out at me is that some of the trees that should be in back are in front of the ones in front!  For example: That big tree in the center?  Look at the tree just to the left of it.  Either it's floating in midair, or it should be behind the lower tree it's in front of.  Same thing to the right of the big tree in the center, except that there you've got two trees in front of a tree lower down.  And the same thing occurs in two other places further right.

If you're going to copy and paste things like you did with the Forest scene, be more careful about the order you do it in.  Always do it from front to back (remembering that objects closer to the front have their baselines lower), or you'll end up with weird floating trees like in that picture.

[maryland]

Oh my, the bed in asulym has no perspective. White walls are kind of bland and the old house is all brown? Weird, perhaps you could recolour or somethingg.
I'd sugest you fix that and add some more details, such as pictures on the wall.

Edited manually, there's only so much the txt filter can handle.

[hedgefield]

I have no idea what layering, filters or anything fancy mean or how they work.
I use MS paint, which is something I had began with because it is A). it is easy to use and B). Free.

If it's free you want, you could consider Paint.NET. Paint with some neat tricks but not as complicated as 'the big guys'.

And forgive me for being nitpicky, but it's cross-hatched.

OK, on to the crits:
I think your main problem is lighting. Lighting is very important for the mood of a scene. If you draw some shadows and tone the saturation down a bit I'm sure you'll be nearer to the foreboding effect you seek after. You really should slowly aquaint yourself with things like layers and filters. They can make your life so much easier.

[DoorKnobHandle]

I would advise you to work on a completly new graphic-style. This will require you to pretty much start from scratch, but - if done correctly - you might be a happy artist in a few weeks.

For your new style, I'd suggest you to pick these rules:

> Draw in low resolution (320x200 or 320x240), it will make everything way easier. If this isn't enough, then go even lower. Choose 160x100 (or 160x120 respectively) and draw in this resolution - just remember to enlarge the background after you've drawn it up to 320x200.

> Choose a limited palette. Spend a few seconds on picking a good looking color and then use this one.

> Don't use any tools in paint other than the line (or pen), the select, the fill and possibly the erasor tool. NO airbrushing as you did in the forest, it doesn't look good and is instantly recognizable.

> Try to add very simple shading or shadows.

To help you even further, I'll show you some simple steps with a simple example background following those rules from above. Try to recreate it and change things around. I know that I am not a great artist, but I know (or atleast I think I know) that I went through something similar before, so this might just help you.

------------

MINI-TUTORIAL

So, let's try to draw something in a new style. I know what you are waiting for - the result. This is how the outcome of this tutorial will look like:



> First of all, let's think about the setting. I chose some kind of room in a space ship for now. So, welcome aboard. Also think about the dimensions - as I said, the fewer pixels you need to place, the fewer can be wrong, so let's go for something really low: 160x100. We will also leave some pixels black at the bottom of the screen, because that's where our GUI is going to be at in the game. Open Microsoft Paint (or whatever tool you use) and start a new image in our chosen size.



> As you can see, I use either x4, x6 or x8 zoom to work on pixel art. I suggest you do the same (the best value depends on your monitor size and desktop resolution). Additionally I activated the grid by pressing CTRL+R. This makes it easier to count pixels. Since this changes the colors, we will only use the grid to draw the geometry. Once we color the background, we will deactive it again.

> The nest step is to come up with a vanishing point. This simple point will help us draw perspectivelly correct (using the proper technique). You can place it wherever you want, but I'll suggest you to place it somewhere in the middle. I placed it at (80,36), which is horizontally centered. I calculated the coordinates by drawing two helping lines in red - as seen below:



> Now go ahead and erase the lines, leaving just the dot (or point) where they crossed. This is it - our vanishing point.

> Allright, now comes the first "real" step. We will draw the outline of our room. In order to do this, we choose black as color and then simply draw lines using either the line tool or the pen tool. Remember to pay attention to the perspective, otherwise your room wouldn't turn out any good. This process is hard to explain, if everything fails, then just take a look at what I drew and copy it:



> This is the outline of the basic shape of our room. The green lines show examples of how to use the vanishing point. I don't have the time to explain the concept of perspective using one vanishing point to you in detail, so please refer to other resources on the net on this topic (and I know that there are plenty). Also, note that the room is symmetrical. If you use this fact wisely, you can save yourself some time while working on those outlines using the copy, mirror and paste tool.

> Anyways, now has come the time to really think about your room. We only have a very simple cube-like object. In order to make it appeal interesting to the player, we need to work on some details right now. A lot of people just start by adding colors now and then go crazy adding simple details later - this is wrong! The best time to add good-looking details is now! I do this by imagining the room in my head and then think about how it could look more interesting. For this room, I decided to actually build a higher, second floor to the back, which is connected to the lower floor by two ramps. If you don't know what I mean yet, just take a look at the result or the following images:



> Again I marked some lines green to remind you of the correct usage of the vanishing point. Drawing this second block inside the first one is basically the same. You will maybe need to fiddle around with the size until it looks right (I drew the second block to high at first). It's important that you don't hesitate to delete stuff that doesn't look good and redraw it. If you can't wait to keep on going with this little tutorial and don't care that you really drew this or that thing not in the best way, then it is ultimatevily going to ruin your whole image. Trust me, I know it!

> So, let's add yet another block. I think that this technique should be self-explaining by now. Just take a close look at the presented images if you are still unsure:



> Ok, now it is time to add the ramps. We basically use the same technique as with the blocks, just that we connect the right points directly to get the shape of a ramp. Again, this is probably near-to-impossible to explain in simple words, so take a good look at the following picture:



> This is enough for the basic geomeotry. It already looks more interesting than the plain room, doesn't it?

> What I do now is to add geometric details. This doesn't mean normal details (I am not talking about posters or colored objects). I decided to draw two doors, a rail so that the space ship interior is work-safe and I rounded off the connections from the side walls to the ceiling (using the same technique I used with the ramps).



> Again, I left some green lines in there. Additionally I didn't just draw plain doors, but I added some kind of opening seam, just so they look more detailed. You could add an animation for the door opening later in your game where the two divided parts move to their side letting the player pass, which would possibly look quite cool and better than the normal door (especially in a high-tech environment).



> Now comes the second round for more geometric details. This time I added a fourth door to the right (this is important so that the space on the right actually serves a purpose - imagine if the door wouldn't be there, the player would never need to go there as long as no puzzle requires it, that's generally a bad idea), I added two small slots to the right, a circle to the right (both those are useless and meaningless details) and once again I did stuff to the ceiling. I drew this vertical window into the ceiling so that we have something of interest up there and so that we have a rough idea of a lightsource in the room. It's not really realistic that the light comes from a window if there is only deep space behind it, but that doesn't matter for now.



> That's better.

> Next I continued to color things. At the end, I wasn't satisfied with the door colors and the space-outside-the-ceiling-window colors, but I decided to change this later.




> Additionally I changed the size of the smaller door in the back, I think it looks better now and is more consistent to the style.

> Up to the next task: We colored everything, but we still have the original geometry outlines black. We need to change this to give the background more depth. Simply select a reasonably darker shade of the inside color and fill the outlines with it using the line or pen tool (this can be quite tricky, because you can't say who "owns" a certain outline if two objects share the same, just play around and experiment as much as possible in this case, until you are satisfied).



> Ok, this really improves stuff again.

> The last task: Add even more details and do whatever you wanted to do before but didn't (which is the changing the door and space colors). So, I first simply played around with the door colors until they looked a tad bit better. Then I thought about the space behind the window. I thought that it did already look good, there was just something missing. After a few seconds of thinking, it came to me: another shaded missed! So, I took the shade from the space and made it quite a lot brighter and drew over some parts. After doing that I was finally satisfied with it. Last but not least I added more lighter shades to some objects (check the door frames) and I added even more useless details using a darker shade to the back walls. This is what it looked like afterwards:



> And that's it. I hope you learned stuff, feel free to keep on asking questions if you didn't understand a part of this short tutorials, I hope I made everything clear and good luck with your game.

------------

Phew, that took me quite long to prepare, draw, write and put together all this. I feel tired now.

[Theme]

nice tutorial dkh
^^b

o/

[Mordalles]

dkh, that immediately took me back to doom 2, the start of the game. looks great!

[scourge]

Great tut!

[ginanubismon]

Thanks for the help guys, and that tut is going to be a great help.

And thanks on the word correction.