First try at VGA-ifying

Message

MusicallyInspired · #1 Post by **MusicallyInspired** » Fri Aug 18, 2006 3:58 am

I was a little bored today after work and after I took care of a few things I had to do I decided to try my hand at background art. Specifically VGA-ifying an old Sierra screen. I've seen a few tutorials and got a jist of the general way some of them do things so I thought I could combine the knowledge I've gained and put it to use (to some extent).

This is what came out. It's not finished yet, but it's late and I got to go to bed. The rocks are giving me the most trouble, I think. It's hard to nail. If anyone has anything to say at all please do.

Alliance · #2 Post by **Alliance** » Fri Aug 18, 2006 4:05 am

For a first try, it's not bad.
I'd suggest Fizzii's tutorials.

http://www.geocities.com/fizzii_ish/sierratutorials/

MusicallyInspired · #3 Post by **MusicallyInspired** » Fri Aug 18, 2006 4:26 am

That site was quite an interesting read until Geocities said it had temporarily exceeded it's data transfer limit! Will have to see the rest tomorrow. Thanks for the link, though! Never saw that site before..

Fizzii · #4 Post by **Fizzii** » Fri Aug 18, 2006 6:41 am

er... :o That was something still in progress from a while back and I had never actually made the link 'public'. For the most part, I don't really paint like that anymore, and there are some things that aren't correct or could be better, like colour choice. I'll have to update when it's summer holidays again, and maybe move it to a place with more bandwidth

With your background - try to avoid filters, as they often appear very repetitive, and nature isn't like that. Also, the grass is too saturated green, and the rocks are unsaturated (unsaturated implies pure grey, saturated implies all colour. Objects in real life are rarely too saturated, and never ever unsaturated or pure black). It probably takes a fair bit of practice, but to make any kind of object (including rocks) not look flat you have to think 3-dimensionally. Most objects can be broken down into spherical/cylindrical/cube (hard edged) or a combination of those, so if you study the form of those, everything will become much easier. Define where the lightsource is coming from, then from there you can work out which sides of an object would be lit, which would be in shadow, etc.

I personally use a speckled brush nowadays for painting, as it's more like a brush and easier for blending, rather than the round brushes. If you want to use the grass brush, choose two colours as the brush uses both two colours that show on the palette (which is my guess as to why you have bits of orange in the grass

). There should also be brush options in a tab to the top right (I'm assuming you use Photoshop(?)). You can make the brush jitter and all that, so that might be worth mucking around a little with for making painting easier.

I think I've rambled on a bit too much... but this site has really good stuff on colour theory: http://www.itchstudios.com/psg/art_tut.htm

JustLuke29 · #5 Post by **JustLuke29** » Fri Aug 18, 2006 9:53 am

Well, it seems extremely blurry - as if it was out of focus; too much smudge and blur, I think. Also, you need to pay attention to lighting and shadows. Good luck with it.

MusicallyInspired · #6 Post by **MusicallyInspired** » Fri Aug 18, 2006 11:36 am

Thanks for all the replies, guys.

I was going to deal with the lighting and saturation/desaturation issues once everything else was painted over first. And yes I'm using Photoshop. Thanks for that link too! I'll definitely read.

gamecreator · #7 Post by **gamecreator** » Fri Aug 18, 2006 9:54 pm

Fizzii wrote:er... :o That was something still in progress from a while back and I had never actually made the link 'public'.

Fizzii... to not make something like that public is criminal. ;) That's an awesome site. It'll definitely help me out.

Frankly though, I'm especially in awe of the beautiful backgrounds of games like Monkey Island 3 and Runaway. I don't suppose you're itching to write a tutorial on how to do that, are you?

I'd think most of the basic concepts would be the same. And while I know that they have the advantage of higher resolutions and more colors, I suspect they also do something different to get things to look the way they do.

Vroomfondel · #8 Post by **Vroomfondel** » Sat Aug 19, 2006 3:29 am

I don't know squat about VGA graphics, but I think that's pretty darn good!

MusicallyInspired · #9 Post by **MusicallyInspired** » Tue Aug 22, 2006 10:30 pm

Just a little update, this is what I got it looking like now. Still having slight problems with rocks but, I'm getting there, I think. Only about 5% to 10% of the original picture is left in now (that doesn't mean I'm anywhere near finished lol).

Alliance · #10 Post by **Alliance** » Tue Aug 22, 2006 11:56 pm

Wow, you're definately improving, and fast!

Here's my edit:

What I did

-made the light source more direct
-added a little noise to the picture, for that Sierra-ish touch
-oh, yeah, and I resized it to 320x200, for that classic Sierra size.

Best of luck to you, and say hi to the wife for me.

MusicallyInspired · #11 Post by **MusicallyInspired** » Wed Aug 23, 2006 12:20 am

Nice. Except that you put shadows where the sun is supposed to shine (from top left). Excellent, though. Never thought about adding noise to the final product. Good idea.

Alliance · #12 Post by **Alliance** » Wed Aug 23, 2006 1:57 am

MusicallyInspired wrote:Except that you put shadows where the sun is supposed to shine.

Um...oops...
I mean...
there's a cloud going past the sun! Yeah! That's it! :D

Your style's really improving, though.

adeyke · #13 Post by **adeyke** » Wed Aug 23, 2006 2:11 am

I think a significant problem is the difference in detail levels. The rocks look very blurry, while the path looks very sharp. This can't be explained by them being "out of focus," so it just looks odd.

haradan · #14 Post by **haradan** » Wed Aug 23, 2006 9:38 pm

It's getting better anyway, good work! Is it really your first go at VGA? Keep it up!

MusicallyInspired · #15 Post by **MusicallyInspired** » Wed Aug 23, 2006 10:10 pm

I'm gonna get back to the rocks after I'm just doing them all quickly for now until I get everything else done. Here's some more done. I've motion blurred the pathway a bit to make it look less "noisy". That small rock that's sort of "leaning" against the mountainside I made a little more detailed than the others...although it was by accident lol. What do you think?

And yes, first try at VGA

.

MusicallyInspired · #16 Post by **MusicallyInspired** » Thu Aug 24, 2006 11:46 pm

All the rocks are done now (at least they're traced over and filled in..I'll FINISH finish them later on), and I've made that little plant coming out of the side of the mountain. I think the crack looks horrible, though. Comment away.

Blackthorne519 · #17 Post by **Blackthorne519** » Sun Aug 27, 2006 5:03 pm

Hey, nice job!

Also, keep in mind that the in game resolution is 320x200. (320x190 - 10 pixels for the info bar) So your pictures will be shrunk down after that.

I played with some filters, reduced sized, and reduced the saturation on the grass a bit.

Bt

pass · #18 Post by **pass** » Thu Aug 31, 2006 11:39 am

It looks really good, even if it wasn't a first try. I would dream to paint like that. Then I wouldn't be searching for an artist this whole time...

Try blurring the line where the road meets with the mountain, because it now looks a little... photoshop-layer-ish :rollin
Also, you can add a little more detail by adding some rubble on the road, specifically at its bottom.

Keep up the good work!

Music Head · #19 Post by **Music Head** » Thu Aug 31, 2006 11:53 am

MI that looks great ;) . I'd lose the plant coming out of the rock though, doesn't seem to match in and it'll look better without it IMO.

gamecreator · #20 Post by **gamecreator** » Thu Aug 31, 2006 2:58 pm

MusicallyInspired, nice job so far. I'd suggest applying the techniques in the "Flatten and simplify" section (middle of the page) in the link Fizzii gave at the bottom of his post, especially to the rocks, to eliminate the blurry look.

2dgamers · #21 Post by **2dgamers** » Wed Sep 13, 2006 5:59 am

Wow! That is pretty cool. I never thought about VGA-ifying an old EGA image before... I sense an inspiration to do it is filling into my brain! ;)

MusicallyInspired · #22 Post by **MusicallyInspired** » Sun Sep 17, 2006 6:10 pm

Here's the sem-final version. It has everything from the original traced over. I really am proud of my tree even if there are some minor leaf problems on the top. I'm going to change that bush into something else that makes more sense, because it's really hard to get that crack in the mountain thing down. Other problems include rocks blocking the entirety of the path (a side-effect of tracing over the old image) and the image is not really 320x190 as it's in the dimensions of the old AGI picture resources (which lives a black space at the bottom for the parser interface).

I can't seem to include image attachments in this forum and I can't upload to my server at the moment so I'm just going to link to IA's forums where I have written the exact same thing (but with pictures!)

http://www.infamous-adventures.com/foru ... ic=1425.15[/img]