Adventure Game Studio

HOW TO MAKE BADASS AWESOME BACKGROUNDS FOR YOUR AGS GAME

Step 1: Perspective

The first thing you need to learn about drawing backgrounds is perspective, and then equally how to “break” perspective. As an artist it is our duty to defy the laws of tradition. Perspective is a bad habit and anyone who tells you otherwise probably beats their wife.

Let’s look at the structure of the piece I am putting together for this tutorial.

(http://img697.imageshack.us/img697/6395/bg01.png)

I appreciate at the moment it doesn’t look like much, but choosing to disregard any noticeable sense of perspective actually frees us from certain rules and adds a level of artistic depth to our piece that I will at the moment refer to as “quirk.” If you are following along at home, take this time to build your own room structure, don’t worry if it looks a bit messy right now, remember that’s just quirk and if anybody mentions it, just put it down to artistic license.

Here’s a few things to take into account when creating your room.

• Don’t worry about sizing the door, your player character can be scaled down to fit.
  
  Okay, done? On to the next bit.
  
  Step 2: Colouring
  
  Before we enter into the realm of colouring, let me just shoot down a little myth (or should I say downright lie) that seems to be floating around at the moment about limiting your colour palette. Don’t. There is an abundance of colours for a reason. You don’t walk into a room in real life and find yourself inside a five colour existence, it’s just not realistic. So keep that in mind when choosing your colours.
  
  The first thing I do is work on the background, which is of course sky. It doesn’t matter where you are the sky is always going to be the background of everything, even if you can’t see it behind walls. Just because the player character can’t see it, does that mean we should restrict the player themselves from being able to see it? No. After all, behind the earth is sky, so at all times sky should be visible. So grab a nice BLUE colour from your palette and use the fill tool to make the background.
  
  (http://img24.imageshack.us/img24/940/bg02z.png)
  
  Done that? Great.
  
  Now it’s still looking a bit bland at the moment so this is where gradients come in.  Grab your gradient tool and choose a darker blue colour. Some people will tell you that the sky is always darker closer to the horizon. This is not true. Anybody who knows anything about science will understand that the EARTH MOVES. If the earth moves then it can’t always be looking at the same part of the sky can it? With this in mind, go ahead and draw your gradient anywhere, we can fix this up with some visual trickery later to deceive our audience.
  
  (http://img171.imageshack.us/img171/8778/bg03.png)
  
  That looks much better.
  
  Now to finish up on the sky we’re going to add some clouds. Just grab that paintbrush tool and draw in some white patches around there, don’t forget to gradient them as well.
  
  (http://img694.imageshack.us/img694/3562/bg04.png)
  
  Looking good.
  
  Alright we’re finished with the sky now so let’s get to work on the inside of our room. I don’t need to tell you what colour things are because it really doesn’t matter so go ahead and use your fill tool to sort it out. Just remember though, due to lighting, walls are NEVER the same colour. (also this makes your room nicer to look at.)
  
  (http://img705.imageshack.us/img705/4392/bg05.png)
  
  Step 3: Objects
  
  Our room is looking a little bit empty, so let’s go ahead and fill it up with some objects. Boxes are always good because they are easy to draw, but you could also use any other arbitrary object like a bed or some pipes or something. It doesn’t matter if it has any relevance or if the player actually interacts with it at all, as long as you fill up that empty space. Also you can add hotspots to them later which just say random things like if the player was interacting with a bed you could have him say “It’s not bed time.” Or if it’s a clock it could say “Party time!” Not only does this serve to add interaction to your arbitrary objects but also wastes the players time and makes your game seem significantly longer overall. Two birds!
  
  (http://img97.imageshack.us/img97/2658/bg06.png)
  
  As you can see here I’ve added some objects and coloured them too. There are some boxes, a bed, a clock and a picture of Mickey Rooney being eaten by a shark. Not only is this comedic but I have really minimised the empty space of the room.
  
  Step 4: Texturing
  
  Now that my room is structurally complete and chock full of objects, let’s go ahead and texture them. This will definitely give them a little bit more life. I am using Photoshop to do this, with comes packed with all sorts of effects and gizmos I can use to texture my surfaces, but if you’re using paint or any other program you can just click lots of dots over surfaces to give them texture, although you are also a lesser human being for not being cool enough to use Photoshop like me. Here’s what my room looks like complete with texturing.
  
  (http://img708.imageshack.us/img708/5017/bg07.png)
  
  It’s probably best practice to texture every single surface. You can shake it up and add gradients to some of them if you want to be a little more subtle.
  
  Step 5: Lightning
  
  We use lightning to brighten up our rooms, otherwise we would be completely in the dark all the time. I know this isn’t exactly realistic but that’s why they’re called “adventure” games. If you can’t put lightning in your game then where’s your sense of adventure? You are probably a nun, go back to boring land.
  
  (http://img689.imageshack.us/img689/2517/bg08.png)
  
  I’ve drawn in the lightning, (don't forget to texture!) now we have to show the effect. This is really simple to produce. Everything that the lightning can see, needs to be brighter. We do this by painting some transparent white over it. Make a new layer and set the transparency of the layer to around 70% so you can see it, but still see what’s below it. Take your paintbrush tool and set colour to white and get to work painting. Don’t worry if you go over lines because it’s transparent so nobody will really notice.
  
  (http://img691.imageshack.us/img691/2482/bg09.png)
  
  Step 6: Shading
  
  Everything creates a shadow. This is physics and the fact that I am having to tell you makes me a little concerned about what they are teaching you kids in school these days. We make shadows the same way we made everything brighter. A new layer, 70% transparency, but this time we are going to be painting things black, and instead of painting everything we are only going to be painting underneath objects. If you are confused about what I mean, see the following picture for reference.
  
  (http://img251.imageshack.us/img251/6054/bg10.png)
  
  As you can see, we’ve come a long way since that first structural line drawing. Our picture now has a lot of depth thanks to the lightning and shading. There’s just one last thing we need to do in order to make it perfect.
  
  Step 7: Lense flares and atmospheric effects.
  
  Lens flares make everything look good. In Photoshop if you go to your “Filters” and then “Render” there are a couple of nice atmospheric effects in there to really spruce up your image. I’m going to render some clouds to give my picture a really foggy look and then overlay some lens flares above that, why don’t you experiment and not copy everything I’ve done because that’s called plagiarism and I will take you to the cleaners if I catch you.
  
  (http://img294.imageshack.us/img294/5703/bg11.png)
  
  To conclude, everything I have just told you is the absolute truth. If you disagree with any of this then you are entitled to your own opinion, and by entitled to your own opinion I mean you are wrong and probably have an annoying habit that nobody has told you about because they are too scared to hurt your feelings.
  
  If you've been following along at home feel free to post your own backgrounds that you made using this tutorial but don't do it in this topic, I don't want you dirtying it up.
  
  If a moderator could sticky this topic, I think it's important that everybody reads this.
  
  8)

I want the drugs you're on.  :=

I can safely say that I'll never need another tutorial after this amazing and transcendent tutorial experience.

It's lacking Poser characters!!!

Your clouds look like shit.

This absolutely made my day, I'm crying from laughing so much.

Quote from: Chicky on Sat 13/02/2010 19:52:50
Your clouds look like shit.

I wish i could draw like this@@@!!!!@@!1121212!@12121@121

YOU'RE TEH AWSOME!@!@!2 YOU ROXOR AND PWNS!!!!

You know, you've inspired me to pass on my knowledge as well! We all need to do our bit to help out starting artists! So, here, without further ado, is a BG I made all by myself for a project that unfortunately never made it to the light of day.

Okay, first you need to start with the line art. At this stage there's no need to get bogged down in the details, GO WILD! Experiment! Do stuff! Think of the basic shapes you'll be having in the BG, and sketch them in.


Now that the line-art is complete, you'll want to start blocking in the colours. No need to worry about staying inside the lines at this point, you're just doing it rough. Keep in mind the general colours you will be using, and try picking wisely!


Okay, we're almost there! Now comes the final and easiest part. You just need to do a little touching up here and there, and it is ready!


Hope it was helpful!

You guys need to stop, I've literally been laughing out loud for the past half hour over this stuff and my neighbors are probably going to call the police thinking I'm some kind of maniac...

@Babar: hmm, while I have no problem with adding detail, the steps between your first and the second pic are just so confusing. I think I'll add more colours and gradient, that should help. Also, the old chinese proverb goes: "When in doubt - lens flare!"  ;D

Had a real "lol" moment, thank you car thief.

Quote from: Domithan on Sat 13/02/2010 20:40:07
You guys need to stop, I've literally been laughing out loud for the past half hour over this stuff and my neighbors are probably going to call the police thinking I'm some kind of maniac...

Plus you have laughing issues!

Man, your background is so awesome that i tought it was Full Throtle 2.

Really.

Why wasn't this done sooner? Haha!  ;D

Babar... Is that background yours??? *Teach me!!!!*  :=

What do you think I just did?! :P

Ah. So that's what I've been doing wrong ...  ;D

Quote from: Babar on Sun 14/02/2010 18:39:58
What do you think I just did?! :P

You are right sorry. *Teach me again then!*  :=

I've been laughing so hard my throat is dry.

Amazing  I love the beautiful use of lens flare  ;D   

Wow Babar, you must teach me your ways  :=

He already done that ProgZ...

*Teach us again!  :=*

Give this man a doughnut.

My backgrounds are now 10x better! All thanks to lens flare and gradient maps!

I used to put lighting but now I realize i was only spelling it wrong!! That explains all the fuss about rain/snow plugin in the forums, I've always wondered about.

Actually, the proportions are wrong...
(http://www.2dadventure.com/ags/prop.png)


Look how badass my background is using scalling. The table look awesome too.

(http://www.2dadventure.com/ags/prop2.PNG)

BAMMMM...now you got doors.  :)

And now the lensflare:

(http://www.2dadventure.com/ags/prop3.png)

I think we all learned something here!

It stil need some improvement... Let's add some texture! (no photoshop here)

Hmm, you guys have had fun while I've been away!
:P

Wow, nice bg Jakerpot!
I hope you won't mind, I did some small touch-ups based on what I've learnt from Babar's tutorial, and I got this:





I feel that my art has really improved after reading this thread, thank you so much!

Jakerpot, you fool, it's all about having as much perspective circles as you can!

(http://i49.tinypic.com/wan8qv.png)

Yor Tabl3 Sukz!!1

Yes, UR Tabl3 sukzz ass!!

Now scale it as i done.

I really don't get it. I trid to follow your instructions and got this:

(http://img52.imageshack.us/img52/7716/finalr.gif)

Then I tried multiple vanishing points, like you said, but still got this:

(http://img52.imageshack.us/img52/7716/finalr.gif)

Here's my bg after some cool lens flare effect

(http://img52.imageshack.us/img52/7716/finalr.gif)

:S

(This thread has cracked me up!)

NO NO NO!

I am FED UP with this "advice" from so called "artists" given on this site. Seriously, there are some good things about the examples above, but you're missing the MOST OBVIOUS first steps that are NECESSARY to produce any MODERN GAME that anyone who isn't a complete idiot would be interested in.

1. Resolution

Hi-def is the only way to go nowadays, everyone knows that lo-def is just for people with no talent. I recommend a resolution of 2048 x 1536 MINIMUM as you need this at least to draw anything approaching a half decent background.

2. Perspective

This is for beginners and idiots only. Did Michaelangelo cover the sistene chapel roof with lots of coloured lines before he painted all those naked people? NO HE DID NOT.

You don't need lines, just guess.

(http://img222.imageshack.us/img222/353/stupid0.png)

3. Texture

Nothing beats a good bit of photoshopping for texture and/or gradients. However, if you don't have Photoshop, just use the spray tool in paint.

(http://img231.imageshack.us/img231/584/stupidb.png)

Beautiful.

4. Characters

People always want to know which art program to use for characters. The only one worth considering in my opinion is Google image search. I mean, why bother doing one yourself when you can rip it yeah?

Here is our player character in situ.

(http://img297.imageshack.us/img297/3973/stupid2.png)

Obviously, because of our advanced hi-res awesomeness some re-scaling may be necessary. Remember, never bother drawing your sprites to scale, just rescale them by resizing the canvas or you can do it using walkable areas.

(http://img27.imageshack.us/img27/7186/stupid3.png)

See, it's come out beautifully.

The next step is to post in the critics lounge to wait for praise and adulation. If anyone tries to suggest that there is room for improvements or tries to offer any "advice" to "improve" what you have done in any way just shoot them down and ignore all of it.

JOB DONE.

8)

For those that don't have PS, i made an exclusive and awesome lens flare in paint, so you can use it in your backgrounds!

(http://www.2dadventure.com/ags/awesomelensflare.png)


And always, ALWAYS, save your background as JPEG!!!! You know you want an ultra high definition background, so don't forget that!  >:(

I tried to take all your critics into account (thanks alot for them)

(http://f.imagehost.org/0482/bestpicevar.jpg)

Anything I can still improve?

The shading. You DO NOT HAVE SHADING!

omg, now I realize how wrong I was doing everything.

But this tutorial, it helped alot!

I erased every game I wanted to release tomorrow and were working on for last 7 years and started from scratch!

See you after another 7 years!

I like this tutorial made me realize that I am actually a Dam good artist at least to people on drugs.  ;D

Babar's tutorial just was so simple. I just couldn't figure how to do the lines was just too hard.

Quote from: Buckethead on Tue 16/02/2010 09:09:14
I tried to take all your critics into account (thanks alot for them)

http://f.imagehost.org/0482/bestpicevar.jpg
Anything I can still improve?

No. That looks to be in the running for most incredible game in the universe, ever. Just finish it. Seriously.

It needs more hot chicks.

http://img.photobucket.com/albums/v472/skeith2572/BACKGROUND.png

Wow, I am now making some badass awesome backgrounds...Thanks a bunch.

You can just reach out and feel the color and the time spent on it (10 minutes).

Maybe I can finally start working on a game.  :)

These are good attempts, guys, but they fall short because you haven't practiced pixel art sufficiently. It is best to start out working in low resolutions, because the constraints force you to focus on the fundamentals that separate a good background from a great one. Let me show you:

(http://home.comcast.net/~snarkibartfast/images3/lowres.png)

Since it may be difficult to achieve a background of this quality at first, I've made an animation showing the process of creation step by step:

(http://home.comcast.net/~snarkibartfast/images3/process.gif)

1. Set your canvas to a neutral gray color. THIS IS VERY IMPORTANT! Otherwise you may misjudge all the colors because of the contrast.
2. Fill in the dominant color of your background, in this case the sky. This will determine the overall hue of your image.
3. Block out the ground. Don't worry too much about the fine detail. That comes later. For now, just focus on getting the overall form right.
4. Add objects to give your scene life. Here I've used the 2/3 rule to achieve a more dynamic composition.
5. Finally, use shadows to give the various objects in the image shape and weight. For this step, it is important to consider your lightsource. You may have to practice for a while before you achieve the results you want. Remember that the critics lounge is here for you if you need help.

I hope this has taught you something.

Snarky, It looks like you are showing off a bad game of Tetris.  :)

My BG was meant to be funny and half assed.

Quote from: Domino on Wed 17/02/2010 02:12:25
My BG was meant to be funny and half assed.

Well, then I just don't think it's appropriate for this thread, Domino.

Quote from: Snarky on Wed 17/02/2010 02:13:56

Quote from: Domino on Wed 17/02/2010 02:12:25
My BG was meant to be funny and half assed.

Well, then I just don't think it's appropriate for this thread, Domino.

Now I'm just confused.

I did a half ass job on my background, and not a Badass job.

Mr. Matti, help me.....

Quote from: Domino on Wed 17/02/2010 02:27:52
Mr. Matti, help me.....

Now I'm scared  :o

I was just about to post something and then - after refreshing the page - I saw your request for help.

Well, I was going to write something as sarcastic/ironic as Snarky, but now.. hm, let's just say: I don't know why you had to add that you did a half ass job, particularly since your BG is the best worst I've seen in this thread.

Oh well, gotta go to bed now, it's 3:34 here. Just let me add that Snarky's tutorial is brilliant. I might use it at some point.. to make a badass game.. or something.

I was hoping you would show up with the Lensflare!! That would make my background badass, that's all. :-)

This topic is full of awesome and win with a grain of epic.

I'll see if I can help you, Domino: Your problem is with the ass you used for the job. It's an easy mistake to make.

You need about twice the amount of ass you had. Also, check to verify that the ass is bad.

Hope this helps!

@Snarky I had to Improve your pixel art you need follow this tutorials rules. YOU HAVE TO ADD LENS FLARE MAN.

(http://i46.tinypic.com/vzkh3b.png)

NOW IT LOOKS AWESOME.   8)

I even think this like worth putting on the Best game ever.
But your tutorial really helped I wish I saw it when I first started.  ;D

Quote from: Domino on Wed 17/02/2010 02:45:22
I was hoping you would show up with the Lensflare!! That would make my background badass, that's all. :-)

Okay, I was a little confused. Here ya go, fella. In addition to the lensflare I added a cool mosaic filter for more awesomeness.

(http://www.2dadventure.com/ags/badass_bg.png)

You don't have to thank me, and yes, you can use that BG for your badass game.

This thread reminded me of this
(http://img.photobucket.com/albums/v681/Al_Ninio/TheTick03-p26.jpg)

(http://i49.tinypic.com/71ld38.png)
@Domino Your background has a lot of perspective issues so I decided to help and also I did a very awesome lens flare. a lot of retouch ups and so on and now it is AWSOMEST.  And added some cool clouds  ;D . OK enough of my great awesome art. You may use it but you have to give full credit to me and say I am the greatest  ;D .

Quote from: Domino on Wed 17/02/2010 01:55:43
(http://img.photobucket.com/albums/v472/skeith2572/BACKGROUND.png)

There are two main problems with this.
1. No texture.
2. FAR. TOO. BRIGHT. You're not playing hopscotch in the playground! Add shading, add shadows, make it dark!

I fixed it up a little:
(http://img715.imageshack.us/img715/2871/rhfjdjejdu.png)
No need to thank me! (But please credit if you use it in your game.)

Lens flare could get a bit tricky if you're new to photoediting. Here's a tiny cheat that'll help you around it. It's almost unnoticable, and I know they used it in Doom 3 and Elder Scroll games too among others.

(http://img4.imageshack.us/img4/3402/71ld381.png)

of course, I've put a green arrow to point at where it's done. No need to thank me.

Awesome!!!! That background that took me 10 minutes to draw is now looking BAD-ASS EXTREME DELUXE MAJOR LEAGUE AWESOME

;)

Tuomas I don't get it I have looked at your edit for 5 minutes I cant see what you did. Please tell me.

All I know is my AWESOME lens flare just disappeared. :(

You add character by pressing button Poser

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

Quote from: Mods on Wed 17/02/2010 19:01:01
You add character by pressing button Poser

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

That a shot from DolphinBuster 2, modsy? ;D

aww the poor dolphin. Animal cruelty Mods I am going to report you to the animal rights. Cause you don't have the right to put a dead dolphin on your background ;D

(http://img.photobucket.com/albums/v86/Haddas/igiveup.gif)

LOL! No giant mushroom? It's not complete.

:P

http://img.photobucket.com/albums/v472/skeith2572/funnyBG.png

This tutorial has really helped me a lot, as you can see in my almost finished product.  :)

Spoiler

I hope people realize i am just kidding around, and would never make something this horrible, just trying to be funny!! Also, I did not draw the sea life, I used stamps from Neo-Paint.

[close]

Your Friend.
Domino

It is unbelievable how Progzmax hasn't even put this in the tutorials index. All our super evil awsomest backgrounds for nothing. All our very simple basic art tutorials on how to go from pixel art to Masterpiece.
;D it is sad  :'( how other people wont even get a hell of a laugh experience on art that we all had.

Quote from: Haddas on Wed 17/02/2010 21:05:48
(http://img.photobucket.com/albums/v86/Haddas/igiveup.gif)

NO HADDAS! Not enough colours, not enough colors! Besides, where's the lens flare?!
Seriously, will you never learn?!

Quote from: Domino on Wed 17/02/2010 23:59:55

Spoiler

I hope people realize i am just kidding around, and would never make something this horrible, just trying to be funny!! Also, I did not draw the sea life, I used stamps from Neo-Paint.

[close]

Duh :P

I'm going through these steps, and while I was highly skeptical before, I'm now a believer.

I've only gotten to Step 3 so far, but when I'm feeling brave, perhaps I'll add the texturing and lightning. I do have to admit that making the bed is beyond my capabilites. I think you'd need a 4d program to do that.

(http://img94.imageshack.us/img94/7683/badart.jpg)

I decided to make your guys backgrounds better
(http://www.freeimagehosting.net/uploads/fbca8e9574.png)

(http://www.freeimagehosting.net/uploads/8ffea77ba8.png)

I basically added as many colors as possible and added the cool awesome lens flare.
Also the cool tile filters.

Don't thank me. Thank "I stole ur car" For this art tutorial.

I know that the sea-life with lens flare. Is a great logic. Cause the light reflects on the water surface of the wall.  :P

WOW!! You still need filters though Shelton. But that is on the later steps  ;D. I am enjoying destroying bad art making masterpieces.  :P

Hey, you should be ashamed of yourselves. You all saved it in a suck-ass format.
Here, I modified Shelton's background a bit to show it off:

(http://img200.imageshack.us/img200/1879/superawesomekickass.jpg)

That is amazing Ns.
OH that's another thing we using bad formats. Don't use PNG,GIF.
Got to use Jpeg. Cause it give a automatic filter gives a super awesome effect  ;D .

Image File Formats And How They Apply To You
PNG: A very poor file format. Poor compression, limited colours, usually large filesize, will mess up many images. Do not use!
GIF: Better. Perfect colours, supreme compression, and allows cool animation effects (adding a frame that contains an inverted or tinted version of the original and setting it to flick rapidly between them is a great way to show contrast!)
JPEG: An excellent format, especially for small pixel-art images! Even has a built-in anti-aliasing filter!
BMP: One of the best. Most suited to large, detailed images. Use where possible!

Quote from: Danman on Thu 18/02/2010 07:31:12
It is unbelievable how Progzmax hasn't even put this in the tutorials index. All our super evil awsomest backgrounds for nothing. All our very simple basic art tutorials on how to go from pixel art to Masterpiece.
;D it is sad  :'( how other people wont even get a hell of a laugh experience on art that we all had.

As the author of this topic I was happy to let it run and see where you guys have taken it. I'm very pleased with the result and I'm glad you had so much fun. In regards to adding it to the tutorial database, I think that might potentially be a bad idea, even in jest. Something like this, while fun at first, might possibly become a little tedious and later be filed under the 'What the hell was I thinking?' category. I feel it's better to enjoy it while it lasts and forget about it when it's gone.

Now on a more serious note: Back to you guys.

Quote from: Domino on Wed 17/02/2010 23:59:55
(http://img.photobucket.com/albums/v472/skeith2572/funnyBG.png)

If you're going to make an underwater picture, you have to use the photoshop "ocean ripple" filter.  If you don't, your picture won't be of the ocean.  People will also laugh at you and call you fat.

I fixed this for you, and added a lens flare with a smiley face.  Smiley faces help those playing your game to relate more to your backgrounds.  I hope this helps!

(http://i49.tinypic.com/2h4eqgw.jpg)

Hey you totally ruined my badass background, what gives??  ::) ::) ::)

Also I used the Neo-Paint version of Water Special Effects.

Thanks for at least trying, I'll give you that much credit.

woops, I forgot the  ;)

By the way, what happened to our Interprete-the-clouds-thread, Domino?

Here's what I see: A car, a T-Rex-bird and some wasted guy who's brain peeks out..

(http://www.2dadventure.com/ags/cloudyX.png)

(http://www.2dadventure.com/ags/cloudy.png)

Yeah, I am trying to forget that I ever posted that Cat in the Clouds Picture. That was kind of embarrassing.  :D

(Well, it was kind of funny. Remember, I had mentioned it wasn't a sober post, ha ha)

The actual meaning of the picture formats.

PNG: Poor Not Good

GIF: Great if Fat

BMP: Brilliant Mint Picture

Jpeg: Just Please Eat Game  :P ( I couldn't thing of a funny comment)

I hope this teaches you to use the correct formats  ;D

Quote from: Danman on Thu 18/02/2010 17:03:15
Jpeg: Just Please Eat Game  :P ( I couldn't thing of a funny comment)

JPEG = Just Perfectly Enough, Genius!

I'll tell you why this topic has been moved from the critics lounge - JEALOUSY!  ;D

This thread's become a fantastic resource; should definitely be stickied.

While I'm here I may as well throw in this little nugget of wisdom:

CREATING LOW-RES ART THE HI-RES WAY

In the olden days of VGA colour, pixel art was created by individually choosing a colour and meticulously placing each individual dot; it entirely up to the artists judgement how and where various colours would blend together.

Not only was this time-consuming but woefully ineffective as the fact is the human eye will never understand as much about light and colour as the high res paint programs we use today.

However, out of nostalgia, many of us seek to emulate the old low-res look. Well here's how we can use today's technology to surpass the work of our pixel-pushing forefathers...

(http://img.photobucket.com/albums/v318/EggHeadCheesyBird/tut1.jpg)

Start with a large canvas; I'd saying anything below 3000 pixels in width won't really allow the computer to get in the detail you need. Don't worry, it'll be shrunk down later.

(http://img.photobucket.com/albums/v318/EggHeadCheesyBird/tut2.jpg)

Zoomed out now? Good. We start by blocking out the rough shapes; It's OKAY TO BE MESSY.

(http://img.photobucket.com/albums/v318/EggHeadCheesyBird/tut3.jpg)

Okay, now it's time for the shading, this is the area in which we've most managed to outstrip the pixel artists of old as we can recreate realistic lighting perfectly by simply creating a new layer and painting in transparent black (the real world colour of darkness).

Now here's the REAL secret the industry don't want you to know about: It DOESN'T MATTER if you make mistakes! You heard me right; when we shrink the image down the resolution will be simply too low to accommodate our errors and they'll vanish along with all the other surplus pixels.

It's time for the resize...

(http://img.photobucket.com/albums/v318/EggHeadCheesyBird/tut4.png)

HOLY.
FUCKING.
SHIT.

And for the creme de la creme, for that properly authentic retro look; a quick conversion 8-bit colour in Adobe Photoshop:

(http://img.photobucket.com/albums/v318/EggHeadCheesyBird/tut5.gif)(http://www.oldgames.sk/images/oldgames/adventure/Kings.Quest.5/kq5-001.png)
Compare.

For additional levels of blending; simply save as a jpeg:

(http://img.photobucket.com/albums/v318/EggHeadCheesyBird/tut6.jpg)

Yep some people cant handle how good our art is and are jealous. So they move it.. Eggie  babar had covered that part of tutorials already but with much easier steps. :p

I dunno. Eddie made a valid point. While some like to start lo-res, like Babar did, some might like to for example scan in their images hand drawn, or use a tablet to colour. It's a lot easier to make hi-res because computer screens are so big nowadays. Well not big, but because of better eye surgery and good optics, the images are a lot smaller. A hi-res image is a lot easier to add some shadow to in my opinion.

Either way works, but let's face it, resizing adds a lot more detail and looks much cleaner. See for yourself:

(http://img.photobucket.com/albums/v318/EggHeadCheesyBird/tut4.png)(http://img52.imageshack.us/img52/7716/finalr.gif)

If you compare these, I think you can easily see that the right one is drawn pixel-by-pixel, and the shadows are more or less fake, which was the way back then. On the left one, well Eggie told it: the scenenry is realistic, and almost like 3D except that in this there's also depth.

I do not mean one is better than other. If you look at this self portrait of rembrandt, you'll notice, that he in fact used the pixel-by-pixel style Babar used, which was most popular back then. And by some is still considered to be the only right way to go.
(http://dr13.de/fileadmin/media/dr13/farbe/Starry_Night_Over_the_Rhone.jpg)

Did he use paint to do these backgrounds pixel by pixel. It is just so obvious. I redid babars background because it is called pixel art which means every thing has to be in BIG SQUARES. Also I added the Cool awsome jpeg Anti Analise filter.

(http://www.freeimagehosting.net/uploads/373d922bee.jpg)

Most probably MSPaint yeah, considering he was active at around 1970's when Photoshop was still in it's babyshoes and Paint was *the* photoediting program. Of course now Photoshop is used for photoediting, and Paint has developed into the brilliant sprite-maker that it is. Which pretty much explains why these BGs and portraits are so valuable... Sprite wasn't as good for pixellating back then you know. Also, I've never seen anyone use the jpeg-filter the way this guy did.

I never used to like drawing background before, but now... You have made an artist of me.

Quote from: Tuomas on Fri 19/02/2010 14:34:34(http://dr13.de/fileadmin/media/dr13/farbe/Starry_Night_Over_the_Rhone.jpg)

Man, this is an even more blatant Monkey Island ripoff than Odysseus Kent!

http://img.photobucket.com/albums/v472/skeith2572/VUE2005.png

This is a background that i worked on a couple of years ago using VUE 6. I really like it, but the only problem is rendering each scene.

It would, and could take up to hours rendering each scene depending on the amount of polygons and light sources.

I gave up on the 3D rendered backgrounds (Despite wanting to make a decent Silent Hill type game). But is this a badass background?

btw, This Thread Rules!!!  :)

edit: Now I'll just stick to stuff like this...

http://img.photobucket.com/albums/v472/skeith2572/funnybg2.png

Dear i stole your car,

I followed your tutorial exactly but I fear I am beyond hope!! :'(

(http://meleepta.x10hosting.com/fail.jpg.png)

That right there, is pure beauty my friends. Monkey, you really pulled at my heart strings with that one. Good Job!!

:'( :'(

That 3d scene is pretty cool Domino. I work on more complicated programs that I cant even figure how the hell to open.
Like Maya and 3Ds Max. But your scene is pretty cool for a couple of years ago. But we here at awesome background thread only accept Badass backgrounds like the Big whale.

So the answer to your question it is only cool. Not BADASS. sorry :D

Monkey: That Is BY FAR THE MOST BEST BACKGROUND ON THE WHOLE THREAD. Maybe a lens flare and it will the BADASSEST

http://img.photobucket.com/albums/v472/skeith2572/babar.jpg

Babar, has worked his magic once again on a bad-ass awesome background.

Cheers,
Domino

Now, more about pixel art.

I have concluded that it be impossible to get more detail than this at low resolution.

(http://img.photobucket.com/albums/v86/Haddas/art.jpg)

Now Haddas that is what I call pixel art :P . Great work