Yo! Ok so I'm really new to this stuff, and therefore would appreciate any comments, suggestions, ideas whatever for this background. :) So far, I really like it but the colors are putting me off and so are some of the lines/detail(lack of).
Alrighty, so here's the color and the plain version as well. Both are 640x480 images.
(http://www.angelfire.com/retro/xerotech/rm1color.jpg)
(http://www.angelfire.com/retro/xerotech/rm1line.jpg)
I like your drawing style. I think you could add some shadow. That might also help to clarify the perspective which looks a little odd to me on the left. The way the lower horizontal bar on the left comes to the front further to the right looks a bit weird. I think you should see less of the underside of the first floor. The lower bar should be higher.
Different colors for the walls and the floor would also help I think.
Are the white parts on the right windows?
Cheers ;D
Why yes they are windows! :) Sorry I was going to mention that but it was REALLY late when I decided to throw the images up on the forum.
Do you notice the very lowest bar & the bar that follows it from the second floor? Well originally the room flows backward(underneath the stairs)...the bars both stop and do not flow to the left as I have it. They'd flow back into the wall, I should probably change it back.
I like the top floor and how it leads off to the left, though, because the large living room of the house will be on the screen to the left. In that room the top level will bend out and disappear in a tunneled stone hallway. Heh, but in that room the stairs are much further back....leading me to guess that my stairs are heading in the wrong direction(slightly forward instead of fading back much more). Anyway you get the idea.
Today is a new day so I'll hopefully have some fresh insight...either that or I'll end up working on something completely different. Thanks for the tips!
-Moresco
The lower octagon shaped window on the right side needs to be fixed for perspective, but other than that, you are on your way to making a really great background. Keep up the good work.
Well so far work is coming along on this background rather nicely, and I've gone away from the incorrect sketch. This is much better I think, and I've added some shades/shadow whatever it's called. At least I tried to anyhow. :)
This is still in 640x480, but due to the slowness of the program I'll be converting it to 320x240. One problem I am having is that the characters seem so small, and once they arrive on the 2nd floor, their heads get cut off! Heh. But if you make them the size of say - ROGER, then they seem like midgets in a Giant's house. At 320x240, what is the typical height of a character(compared at say 5'10). Is it better to just shrink the background and addon to it? That's a pain in the butt :(
Anyway here is the new image:
(http://www.2dadventure.com/ags/Wizard's_Staircase.jpg)
-Moresco
Can't you just use scaling in the room, and set it for when the character is too big, under 100% and when its too small above 100%.
of course, can't the scaling only go up to 200%? That might be enough, but...well, I don't know.
-DD
Well scaling would probably work, though it would seem that on the second floor the character's height would be wrong if I scaled him down. I'll have to look into scaling then. =) Thanks for the advice!
The BG is looking good, Moresco. It's pretty blurry, but I think this eery style will work well if the game is going to be scary.
Thanks Jason, I couldn't tell ya though as this is my first game etc...I wasn't going for scary, I was just going for not-so-terrible style. :) Hope it comes out good, but only time will tell.
this style would be just grrrrreat if you would make the characters just as realistic. you should make a tut.
The coloring style is looking good. Be careful about the blurriness though; it's going to be difficult to get a character that works well on top of that. If you sharpen the edges a bit it'll look even better I think!
Make a tutorial? Make a sketch, color it using actual examples of whatever it is(like I used photos of logcabin homes and mirrored the wood on the walls to get the idea), go nuts with fun tools like Smudge, Blur, Sharpen, filters, etc etc. It's all a matter of taste I think.
Even still it is blurry, and I'm not totally sure I'm the guy to fix it...I didn't even realise it was blurry till you mentioned it. :) Sooo, how do I sharpen it? Sharpen the edges? What makes a pixel sharp/blurred in the first place? Seems there should be a tutorial on that...
It's looking very good, Moresco. The only thing that I can see would cause a snafu is setting the walk-behind areas, such as the rails on the stairs and the second floor. Due to the blur, the line were the rail ends and the stairs behind begin is (pardon the pun) kind of blurry.
Heh yes I agree, it was a major pain. It's already done though, so no worries there... And I think it looks good enough, still there's that blurriness. Unfun.
Maybe you could find the edges then inline them or something...I don't know, i'm no good at art. :P
i think it's the way you paint that causes the blurriness
do you use lots of layers?
if not i suggest it, the right wall is nicely done, the boards are visible and i can see colour variation that makes me smile and enjoy it but the left side looks unfinished. the stair case looks really washy and smudged.
i think it just needs more work in it. i'd black out in flat colours parts of the scene, like the walls and the stairs and the posts on seperate layers, then start working on them with preserve transparency turned on. then you can't go out of the lines and you'll maintain your crisp edges
i tried futzing a little
(http://sylpher.com/kafka/junk/edits/staircaseedit.jpg)
all i did was the little spot at the top, changing the colours of the bannister for no real reason just to play around, i painted over the blurry edges and tried to sharpen it a little, then i just smudged your original colours and added grain to the wood with a small dodge/burn brush
(http://sylpher.com/kafka/junk/edits/staircaseedit2.jpg)
in this all i did was paint the window edges with the white colour you used to get rid of the blurriness and then with a small burn tool i made some boards
just throwing out some ideas
eric
^ Better. :)
Excellent work mate.....
the best thing to take away the bluriness is to out line in black/dark colour...set its transparency to 60/70%..and go over all you main areas such as posts and staircase....that idea of what you did on the wall is good to...
this looks good as it is ...so a little more tinkering and its gonna be tops.
good luck wiyh your game.
This background has potential, indeed. The colours are already great, the only thing it needs (IMHO) is some sharpness. Mr. C's example could be very helpful.
--Erwin
Quote from: MrColossal on Sun 07/09/2003 09:42:38
do you use lots of layers?
i'd black out in flat colours parts of the scene, like the walls and the stairs and the posts on seperate layers, then start working on them with preserve transparency turned on. then you can't go out of the lines and you'll maintain your crisp edges
eric
Hey Eric, I like what you did with those edits. Very crisp, & I really see where you're going with it, but I think you have overestimated my photoshop skills :)
Do I use layers...yes, but I'm not sure I 'get' them just yet. Maybe so you can work without having to worry about mistakes? I'm not sure.
Blackout with flat colors...on seperate layers with preserve transparency?? Please expand in as much detail as possible...I'm just not sure what you mean. Now, it's not that I have NO idea what you're talking about...but it's just that I've been working in Photoshop for maybe..what...2 weeks tops? Everything I've ever drawn has been on paper & well, this is just a bit frustrating I must say. :) Ok thanks for the help!
Layers in photoshop are like separate images. When you view them all, it shows them in the space of one image, as in piling them on top of each other, and the layers that are higher on the list take precedent in the z-index (as in, above the ones below it). You can edit individual layers, make some of them, say, 50 percent transparant, or 20, or something. Here's an example.
(http://home.comcast.net/~elhd/guybrushdoor.gif)
Hastily made, I know, but you get the point. It's just a green sliding door, but it's about 50% transparent. See?
Most of photoshop work is messing around with the tools/filters/stuff and seeing what happens. I use noise a lot for concrete, and grain for wood, and all sorts of good gimmicks. I think what they were talking about, is to use transparency in conjunction with outlining all the important lines to get rid of the blurryness effect. If you don't make the lines really opaque, you can get away with it.
-DD
Ok so I think I get the idea so far. Not sure how good at this I am, but with any luck, the overall look will improve. :)
Thanks Dinghy, for the explanation & that cool example! ^^
Now, let's see what I did was, basically outlined everything in about 7 or 8 different layers(I didn't really count). Then, I changed the opacity for all the layers & used the dodge/burn tools to change some of the coloring to make it outline better. After that, I threw in some grain filters to see what it'd look like with less smudginess to it.
This first one has no stair work done on it:
(http://www.flakquest.zapto.org/images/Pale%20Flame/LogCabin%20Edit1.gif)
Then I did the stairs and maybe a few other things, I need to clean up the stairs more, but I'm getting tired of this background to be honest so I'll start working on another one and come back to it more tomorrow.
(http://www.flakquest.zapto.org/images/Pale%20Flame/LogCabin%20Edit2.gif)
what version of photoshop are you running?
I'm running 7.0, though I have 6 around here as well someplace...
ah good i have 7 too, i'll write up a quick tutorial of what i mean and post it
edit, and here it is
http://sylpher.com/kafka/junk/edits/stairs.htm
hope it helps, if you have any other questions about this go ahead and ask
eric
[pessi will yell at me for using dodge and burn so much]
Ah. Getting tricky with it, I see...sheesh, that's insanely cool. I'll never be as good of an artist as half the peeps on this board. Oh well, I'll stick with my strange green sliding glass doors and hijacked sprites.
-DD
Hey Eric I cannot tell you how helpful your tutorial was, just reading through it. For one, I never thought to rotate my image for the purpose of making things easier on me...heh. Also, I don't have a tablet but will probably invest in one as I'm better with a pencil than a mouse. The mouse NEVER goes in the direction I tell it to. :) Grr @ mousey.
To Eric: Goes without saying now anyway ;D
hehe no worries, we're here to help eachother
also the whole using the flat colours to block out the parts of the scene should only be used if you're taking an unlayered image and layering it, there wouldn't be much need to do it if you already have layers
but i'm sure that goes without saying
eric
Heh, pretty sure I posted this, but I guess I hit preview & left it hanging...oops. Well here's what I've been working on so far:
(http://www.flakquest.zapto.org/images/Pale%20Flame/logcabin%20WIP.gif)
And more recently, you can actually start to make out the underneath of the stairs:
(http://www.flakquest.zapto.org/images/Pale%20Flame/logcabin%20WIP2.gif)
Lemme know what you think Eric, am I heading in the right direction or am I lost in the sea of smudginess?
i think the most important thing is if you like it.
the technique i showed you is quite easy no? the only things that i can comment on at the moment is [but these are things that can easily change later on] that there are more than one light source, and the original wood colour on the right, the wall, is a nice brightly lit nice day outside colour
and the new wood seems different. but like i said easily changed through photoshop.
I may revise the tutorial a little cause personally:
(http://sylpher.com/kafka/junk/edits/stairbeam.jpg)
this is the best part of the image that i came up with. cause it has more colours in it acting with eachother making the beam all sexy and nice.
which is the reason the right wall looks so good in your image, cause there are so many colours in there playing with eachother in nice ways. how did you paint that wall by the way?
eric
Scanned some pics of the walls in my room & used the droplet tool to grab the colors. Then, I smudged it in the direction it was supposed to go...mostly anyway. As you could tell from the first edit you did of the wall, it was not very defined. I really like what you did with it. :) I've never painted anything before this, just to let you know.
EDIT: Oh yah and your beam is making me seriously jealous over here! My beam is laughable, and my kid could probably do better.
well for not painting i think you're doing a good job.
as for the beams, i think it just comes from practice and restraint. as in i've fiddled with this for longer so i know easily how to get what i want. just keep at it and you'll rock it
a tablet is a good investment if you feel that it is necessary. as you said you can use a pencil easier than a mouse and i'd recommend a Wacom Graphire cause it is of a very high quality and cheap
it seems small but any bigger and you're running into the 300's of dollars and if you go with an Aiptek like i did, you get a huge drawing surface but a pretty shoddy tablet
so wacom's the way to go.
eric
FYI, pixel blurring in computer graphics is done by averaging the surrounding pixels (typically the 3x3 area around it). I don't remember well about sharpening, I think it's by averaging the surrounding pixels except the center pixel.
Well, that's interesting but I don't quite understand how exactly you average pixels. I'm sure I will just make do by learning as I go along.
It's a bit deeper explanation, in a bitmap image each pixel has a specific color, made of three values: red, green and blue, each of these values can take any number from 0 to 255 (total of colors a pixel can take = 255*255*255 = 2^32, that's why it's called 32-bit). When I say averaging, I'm saying that you take each pixel, and average the values of the three primary colors. I wish I had a site that explained this better, I'm sure there are a lot out there, but I hope it was enough educational for you :).
BTW, you don't have to know this to make your blurring better, as the computer does this automatically for you, and the blurring has to look good for you, no matter how the blurring is done ;).
Well this background is pretty much done right now, so I'm gonna move onto another one & come back to it when my skills have improved. :)
Ciro: I never thanked you for that explanation. While I already knew about the color values, the averaging of them was new information.
Eric: About the colors being different, I know the new wood is darker but you made it look so good I had to try and achieve that. ^^