www.2dadventure.com/ags/Hekshus1_copy.gif (http://www.2dadventure.com/ags/Hekshus1_copy.gif)
Please note that this GIF is 256 colours, whereas the original image is 32-bit.
This is from my game in production (working title Witch Quest). All in all I'm pretty satisfied with it, but there are bound to
be things wrong with it that I have not seen. Please let me know what you think before I start animating stuff.
EDIT: see www.wqpd.blogspot.com for more details and info.
I luv it, but there's somethin' about the char... It just doesn't reach out and connect with me. But maybe once I see the animation, it'll hold more charm. BUT OMG THE BACKGROUND! I love the style, it's awesome! Relli. CHAR 5/10 Stars [*****'''''] BG 8/10 Stars [********'']
I agree with ShonenAiGuy: that backgound is really neat. But compared to that, your character doesn't necessarily fit in with the rest of it. She just doesn't seem part of it, like she was added in from some other game. You want critique, you got it.
Sorry to doubt, but is background also made by you?
Considering style/quality of GUI buttons and character, I don't really buy this.
Anyway, with this background, both character and buttons look out of the place. Why not save background in its whole 32-bit palette (PNG format) and try posting again?
Also, note the "How do I post images, smileys and formatting?" (http://www.adventuregamestudio.co.uk/yabb/Themes/default/help/posting.english.html#bbcref) link on screen where you can make a post for AGS Forums. Click and learn how to make your image show up here using [ img ] tags. It would generate alot more C&C for your work.
InCreator means like this: [img]http://www.2dadventure.com/ags/Hekshus1_copy.gif[/img] This will create a image inside your post! ;D
(http://www.2dadventure.com/ags/Hekshus1_copy.gif)
Yeah the background is cool but the character looks very out of place.
It's very cute, but please clean it up! It would look awesome if you applied a more computer-like line-art and colouring, instead of the crayon-esque technique you have going now.
Also, you need to crank down that saturation a notch or two, and try to use some sort of uniform lighting/shading. Right now everything is very brightly lit and way too colourful.
My girlf said the character seemed out of place too, but I did not see it. Apparently, she was right. Any tips about how to make her blend in more?
The reason there's such a discrepancy between the bg and the sprites is that the background was drawn with pencil, scanned and coloured in photoshop. It is a layer set to about 15% transparency above the colours. It's an attempt to emulate the MI3 style of background.
The character sprite and GUI were made as pixel art, from scratch in Photoshop. I've considered pasting bits of the pencil-layer onto the sprites, with the same transparency setting.
The "how to..." is actually a bit misleading, since it refers to [ url ] headers and not [ img ]. I'll use those from now on. What's a good format for posting 800 x 600 32-bit colour images here? EDIT: PNG, apparently.
This witch is supposed to be a bland, plain and diminutive, but also sarcastic and likeable early-teens witch-in-training. The Hexams are coming up. Problem is, she havent studied and she doesn't really have a knack for magic. Result: puzzle-solving to get round spell-casting related problems. Her teacher is supposed to be a beautiful and powerful witch - for the sake of contrast and potential conflict. A drawing of her is coming up, once I get it coloured.
Actually, I could try drawing the GUI and the witch on paper too. Why not?
Quote from: S on Tue 15/04/2008 14:45:02
Actually, I could try drawing the GUI and the witch on paper too. Why not?
I was about to suggest that you draw it all. It'll all blend in together.
Yes, please draw the char! Also, I don't agree with Andail , I like the coloring the way it is. The vivid colors, lend to the cartoony setting. Recoloring, and Desaturing, if done, must be done very carefully. Too much desaturation will take all the great flavor outta that drawing. :) but this is just me, the final determination will have to be done by you.
Hey 'S', I just read through your post and have noticed you could be doing this technique a little better.
Quote from: S on Tue 15/04/2008 14:42:19the background was drawn with pencil, scanned and coloured in photoshop. It is a layer set to about 15% transparency above the colours.
You shouldn't 'just only' set the opacity of the sketch layer.
I took your sketch and put some color under it.
A: This is your sketch ONLY set to 15% opacity (http://www.bryvis.com/images/other/agsf/bg_normal15p.png)
B: This is your sketch with
Multiply and set to 15% (http://www.bryvis.com/images/other/agsf/bg_multiply15p.png)
As you can tell the colors on A are lighter than B. B remain the colors that they are supposed to be, as A fades. (normally I wouldn't set the
Multiplied layer to 15%, because you can't see the sketch anymore. I only did that so you could see the difference in the colors)
I could be completely wrong and you may be doing this right. If I am wrong, shoot me. :P
-------------------------------------------------------------------------------------------------------
You know most of these steps, you're just missing the
Multiply step.
But for those of you who don't know this technique of how to sketch and color on photoshop it's quite simple.
-------------------------------------------------------------------------------------------------------
You scan the sketched image.
You place the sketched (http://www.bryvis.com/images/other/agsf/witch_bg_sketch.png) image on a layer.
- With the sketched layer selected, go to the Layers window.
- There is a drop-down list. In that list you'll see
Multiply, select that.
Create a blank layer Under the sketch layer.
On the blank layer you draw the colors (with the Pencil tool; not the Brush).
You only have to follow the edge of shapes with the Pencil tool, then Fill the inside area with that color.
There you go! You have a basic colored sketch.
Multiply lets the dark colors of the sketched layer stay, while the colors on lower layers bleed through the white (of the paper).
Also if you don't like the sketch being as prominent, you can lower the opacity anytime even though it's set as Multiply.
Then if you want to add detail to the colors you use the Magic Wand tool on the colored area you want to add detail (this way you don't have to worry about crossing over the lines. Lets say you're adding a nice shine/shadow to that Stove, you don't have to worry about the Brush tool or whatever drawing over the back wall).
Create a new layer before adding detail (or what I do, is add a new layer for each object/area shading/lighting).
^ This layer must either be on top the colored layer, or on top the sketched layer. Depending on what you're doing.
You pretty much just play with the opacity levels of the Brush tool to get nice effects.
Some helpful links (in case I am as confusing as hell):
how to color a pencil sketch (http://www.nethersphere.com/howto_colorsketch.html)
how to color a photoshop sketch (http://www.digitalartsonline.co.uk/features/index.cfm?FeatureID=1625)
Hey, thanks a lot for the multiply and especially the magic wand tips. I only ever use that for copy/paste stuff, I did not know it could be used in that way, but I will now.
I wrote a small tutorial on a different way (in addition to the multiply method) to preserve lineart if you're interested :): http://www.cgempire.com/forum/2d-tutorials-63/tutorial-photoshop-preserving-lineart-painting-1687.html
This looks nice and appealing, and I like how colourful it is :) However, I agree that desaturating some areas will help create depth. For example, in that shadowed alcove above the window on the left, the brightness/saturation of the picture doesn't match the dim lighting.
Sorry, this is a very sloppy edit. I'm trying to give an impression of more clear identification of light sources and how they color their environment. So there's fire=warm, daylight=bluish here. This calms down the image, and creates a more uniform atmosphere.
(http://img391.imageshack.us/img391/104/hexhusqy8.png)
This might call for a rearrangement of some objects, depending of how important they are for the game. I also think the sprite fared better, with the little desat and tint.
Your drawing skills are very good!
Nice edit Neil!
It's almost too dark and colorless, but it does give a better atmosphere.
Quote from: Neil Dnuma on Wed 16/04/2008 19:13:50
Your drawing skills are very good!
Your shading skills are very good! This is too dark for my tastes (EDIT: No, I've changed my mind. Now I really like it), and I had imagined the bg with somewhat 'flatter' lighting/shading. However, this has helped me to see where some shadows should be. Thanks.
I've started recolouring from scratch now, but am a bit preoccupied nowadays, so progress is slow.
Today, I am going to use the scanner at work to scan a couple of new scetches, including a new protagonist sprite. I thought I'd make her 100% scale a bit bigger, so she'll be more flexible.
EDIT: I'm guessing at how you did this: Did you put a dark translucent square atop the image, and then puched holes in it for lighting (with layers, of course)? I've done the opposite: I've been keeping everything light, then I've added the shadows - which makes perfect sense when you're used to drawing on paper. Your way makes a whole lot more sense, especially on an indoor scene.
Quote from: S on Thu 17/04/2008 09:44:07
EDIT: I'm guessing at how you did this: Did you put a dark translucent square atop the image, and then puched holes in it for lighting (with layers, of course)? I've done the opposite: I've been keeping everything light, then I've added the shadows - which makes perfect sense when you're used to drawing on paper. Your way makes a whole lot more sense, especially on an indoor scene.
Yeah that's pretty much what I did. I also tried toning the two rooms differently. Pure black/greyscale for shadows is not preferrable though, it feels better to keep them in the tone of the room ambience. Actually I'm not so sure about the punching method, but it was quick with this room, which I felt would naturally look much darker. If you want the scene much brighter and cozy (might fit the tone of the story better), I suggest lighting the candles in the roof, or adding other lightsources.
Yeah, candles are cozy. However, I have so far been unable to replicate what you did. Any tech tips?
Bumping, due to frustration.
Hello again, we don't want frustration!
Are you using photoshop? I think loominous described a very good method in this thread (http://www.adventuregamestudio.co.uk/yabb/index.php?topic=31787.0).
What I did with this one was splitting the image up, with the other room at a second layer. I placed an adjustment layer abouve this, with curves (i think it was), pushing it into a warmer area. Then I did the opposite with the front room. Then a 75% black over everyting, for shadows. Punching holes, and adding black accordingly, with a soft black brush or eraser. Then a unifying curve-adjustment layer at the top, mainly because I don't like pure black/greyscale shadows, and wanted so soften that effect. This method was to be quickly done, and is a bit messy.
Thanks. I'll try to follow that guide. Currently recolouring the image from scratch. When it's been recoloured I'll post a mockup featuring the new sprite. Then I'll post another one when (if) I can get the shading right.
(http://www.2dadventure.com/ags/NuWitchHouse1_copy.png)
This one got sort of dark, but I like it. I think I'll have to make it lighter if it is to be usable. Or maybe not.
What do you guys think?
Oooh, now we're talking!
Much better uniform colour scheme, much more consistent, realistic shading, much more attention to mood and atmosphere.
You can still work on the chandelier though, and instead of the black border to the left I think you should paint the doorframe properly, albeit with very dark and subtle colours. When using black foreground frames like that, it's usually best to apply them fairly symmetrically around the image, and not only to one side.
All in all, you're on your way to creating a beautiful background.
Though the original seemed like a happy cartoony game, and the new one is completely different in the way it looks dark and sad or so. If that's what you're after, then ok, but I wouldn't mind playing the first one with the children's book kind of colours.
What I'm aiming for is the "fairy tale for adults" type of atmosphere. I think this is on its way there.
Andail: point taken about the doorway, although it is going to take some work becasue I'll have to rely on my Photoshop skills (bad) rather than my paper and pencil skills (slightly better).
The new one is way too dark, imo. I can hardly make out anything, and if I hadn't seen the previous screens I wouldn't be able to make any sense of it. Something in between Neil Dnumas edit and your latest version would be better. Keep it up though, it's a nice style.
How now, brown cow?
(http://www.2dadventure.com/ags/NuWitchHouse3.png)
A little bit lighter, removed black area, fixed some tiny mistakes here and there, included new sprite. She looks a bit too displeased with everything now, but fits much better into the background.
I won't touch the chandelier, though. If I were to do anything with it, I'd actually make it even more blurry and indistinct. Or remove it altogether (it IS a bit big for this hut).
Hm, yeah, I looked at it on a different monitor now, and realised my own monitor is set very bright, so cranking up the brightness a bit might be a good idea.
Start out in the light sources; increase the intensity there and work your way around the surfaces hit by the light, make them reflect the light and add nice hues depending on what kind of light they're hit by.
Yes - this is way too dark on my office laptop. Looks brilliant on my computer at home, but sucks on a laptop. However, Andail, I've already done what you suggested: there's blueish light illuminating stuff close to the windows and a yellowish-orange light close to the fire. I'll just cranck up the overall brightness and see how it fares. I already did it a little bit on the newest version, but I think I can make it even brighter.
When I get back from work.
Wow nice work.
(http://www.bryvis.com/images/other/agsf/witch_bg_ovsn.png)
You said you're going for the Monkey Island 3 look, and I think you're getting much closer. Other than it being HORRIBLY dark, your style of coloring has improved greatly.
Like how you have a two color highlight on the bricks of the furnace behind the cauldron. And I love the chest and glass pot on the shelf now. Looks like you've also gone over some of your lines with the photoshop brush. I like this style a LOT more than your previous version. I'd play the game just for the graphics alone.
They both have their own styles, but the newest is much easier on the eyes. All those items on the shelf just stick out now, it's great. Before they just looked like they were glued to the background. Now I just want to roll my mouse over each item to do all the interactions possible.
Going off the last screen that you posted:
I like how you kept it "cartoon-esque" even though you're going with a darker tone. That style and tone aren't used together very often, as far as I'm aware. Most people go for a more realistic look, which works because the real world is a much darker place than your cartoon. Darker not referring to brightness, there.
Following with that style, things are shaded simply and not too much detail is put into objects. That is a good thing, for this look at least. The only real issues I have are:
The small chest in the top right. When I examine the scene, my eye keeps getting drawn to it because it's brighter than everything else around it. In most games, not a big deal, people are more interested in their character and their actions. In detail games like this, people are going to want to notice.
What time is it supposed to be? Everything in this house is very dark, but if you look out the windows it looks like high noon. Even if the moon is bright, it's not going to be THAT bright. If it actually IS day time. you can brighten up the room, while keeping it dark by only lighting in proximity to environmental lights and where they fall, ie. the fire, candles, moon light, maybe a skylight above?
Can't really tell what the cauldron is, had to reference the original picture.
There's no light emanating from the furnace.
There is the "Alchemy Room" there's the "Fireplace Room" there's the "Chest Ledge" and then there's this ladder that goes upstairs to an unseen room of magic blue gray. I understand that you want it to be visible to the player, if you don't expect them to go up there, you wouldn't have put it there. You don't have to just let it stay one color like that! In the original, there was some shading. In the dark version sans sprite, there is still some lines there that break up the space, but it looks like a face a little bit. The player knows that there's a second ladder, it's got to go somewhere. Probably the easiest thing to do would be to add a small light source close by, maybe a tall candelabra? I dunno, but it's just like that small chest. It draws my eye, then I frown and think that it looks a bit out of place. Maybe have a light source upstairs, I mean, when you go up there it isn't going to be dark is it?
The rainbow rug leading from the Fireplace Room to the Alchemy Room looks too realistic for this setting in my opinion.
Last one, on the sprite. Are her arms folded across her tummy? Are they at her side? She's wearing a cloak/blanket so her arms are covered up, and it looks like she's clutching it shut, but I can't tell that she has arms, there's no flow to the cloth.
Other than those small things, I really dig the look of this! It's got a real good feel to it. I'm looking forward to the finished product. Keep us updated.
I actually really like the dark one..
alot!
Yes it would be hard to point out items ect...but It looks like a middle-of-the-night look.
First off: I need to make the room brighter, give it more ambient light, because this is supposed to be in the middle of the day.
Q: thank you for your kind words, but I do think this kind of thing is quite common, like in the MI series, for instance. About your issues:
- maybe there is "something" about that chest...
-it is, as I said, supposed to be day-time, so I'll brighten everything up.
-the cauldron will be more obviously a cauldron when brighter. I hope.
-There is some light emanating from the furnace. Could be more, perhaps. Also, the stove in the oter room.
-The room at the end of ladders will definitely be visitable (a sketch of it exists and is being coloured), it will be fairly bright (a tower room with big windows) and needs some work to look ok seen from this room. I was aware of that, though, but I posted a bit too hastily.
-The rug stays!
-I'm not actually sure where her arms are. The point is that everything btw her neck and her feet is supposed to be a little nondescript, fitting her unassuming (albeit acerbic) personality. I'm not sure I've pulled it off though. I think I'll start from scratch on her again. Now she's called Clara, btw.
Ryan Timothy: Thanks a lot! I think object and hotspot interaction is important for the feel and immersion of the game, so almost everything you see in this room is interactable in some way. Most of it is look-at-able at the very least.
I just thought to post this as I was just trying some stuff. Main differences are the brightness (so that you can see something ;)) and color separation between the two rooms. Added some glow from the windows. Hope this sparks ideas or helps in some way. Nice work S!
(http://www.2dadventure.com/ags/PPcauldron.png)
Quote from: S on Sat 26/04/2008 09:38:19
First off: I need to make the room brighter, give it more ambient light, because this is supposed to be in the middle of the day.
-it is, as I said, supposed to be day-time, so I'll brighten everything up.
-the cauldron will be more obviously a cauldron when brighter. I hope.
Now I'm not sure if PPs edit is quite what you're looking for, but the brightness is really great. It's a healthy medium between the almost "Night Scape" of the most recent screen and the "Living on Mercury" lightness of the original. Things look a LITTLE dull, not very much at all, but you can tell how they're washed out. This is probably because he/she lightened the screen shot up instead of lightening the actual work itself, therefore, your eults will probably be a little warmer. I think Pixel is really close to nailing it. There's gorgeous light rays coming from the windows. Closer to the screen chandelier is blurry, as is the wall on the left; this gives it a real sense of depth and focus. And of course, the original brilliant background is in tact and gorgeous.
Quote- maybe there is "something" about that chest...
Great... now I know how to beat the game... =P
I thought so, but I supposed I would bring it up just in case.
Quote-There is some light emanating from the furnace. Could be more, perhaps. Also, the stove in the oter room.
I'm not sure which is which, but I was refering to the thing behind her. Now that you say "stove" I think, that's more appropraite than the word I used. Now that the room is brighter though, it's not important anymore. Based on her clothing, I was thinking she was either cold because of the nights chill, or scared because she was all bundled up. When I think of someone scared I think of night; combine all of this with the low light and I assumed it was, in fact, nighttime. That's why I made the suggestion to have light coming from the stove AND also for putting in more ambient light. With a lighter tone you will not need that ambient light.
Quote-The room at the end of ladders will definitely be visitable (a sketch of it exists and is being coloured), it will be fairly bright (a tower room with big windows) and needs some work to look ok seen from this room. I was aware of that, though, but I posted a bit too hastily.
I thought as much. You can leave it as it, or maybe once you finish the other room you can look at the floor boards, or wall baseboard, werever the player will emerge and try and recreate a small chunk of it in that little slit, you can make it much brighter/darker/contrasted than the rest of this room (just like with the chest) in order to draw more attention. But seeing as how there's a ladder there, that's attention enough IMO.
Quote-The rug stays!
I don't want it to go! =D
Trust me, it's a good thing the rug is there, it more smoothly connects the two individual spaces. I really like it as well, if it's from scratch than it's excellent. I just thought it looked out of place because of how real it looked. In Pixels edit, there is an orange glow all about the room (fireplace/sun) and that washes out the vibrancy of it a little and it fits in with the scene really nicely like that. Maybe with the room lighter it's intensity won't matter as much, we'll see when you finish your re-touch.
Quote-I'm not actually sure where her arms are. The point is that everything btw her neck and her feet is supposed to be a little nondescript, fitting her unassuming (albeit acerbic) personality. I'm not sure I've pulled it off though. I think I'll start from scratch on her again. Now she's called Clara, btw.
Good name, it fits her. If you tart from scratch, the new character better be rock solid because Clara is. She feels innocent, but corruptable. Those green eyes scream for empathy, and i'm compelled to want to see her win. She feels reluctant for any adventures and being dragged into some conflict it's up to me to make sure she does O.K. I was simply thinking that animating her walking without arms would completely ruin what she's got going for her. But I have faith in you.
I really like what I see so far, and i'm getting a big old smile on my face in anticipation! MUST... HAVE.... MORE!!!
I'm exceited bro, I want to see this succeed. Good luck!
Quote from: Questionable on Sun 27/04/2008 10:14:40
I think Pixel is really close to nailing it. There's gorgeous light rays coming from the windows. Closer to the screen chandelier is blurry, as is the wall on the left; this gives it a real sense of depth and focus. And of course, the original brilliant background is in tact and gorgeous.
I like the light rays, but I really like the halo round the circular window. Slanted light rays are a very powerful way of pointing something out, adding emphasis or lending biblical connotations, so I think I'll save those for when I really need them.
About the blurry, close-to-the-screen bits: I made those that way, but the image was (apparently) so dark you could not see them. In other words: I'll make it brighter. Again.
Pixel: thanks for the edit. I like.
EDIT: Missing image. See next post.
(http://www.2dadventure.com/ags/SamGUI.png)
Latest version of the room. Light enough?
Also, the new verb coin style GUI. I have some problems with it, though not of an artistic sort. When I hover the mouse over one of the icons, they change accordingly. However, when I move the pointer to another, neutral, position, the icons won't change. They stay the way they are until I move the pointer over another icon. Annoying.
Anywho. This is not the place for that discussion, I guess.
http://www.2dadventure.com/ags/NuWitchHouse4.png (http://www.2dadventure.com/ags/NuWitchHouse4.png)
This image won't show, for some reason.
EDIT: will re-up. Sorry for the mess.
EDIT:
(http://www.2dadventure.com/ags/NuWitchHouse5.png)
(http://www.2dadventure.com/ags/WitchWindow1.png)
This is the room upstairs from the other one. It's a WIP, so any tips you might have will be received with gratitude.
I love the POV! Such a nice idea. It's unique, but not technically difficult to implement.
Yeah I also like the POV.
The woman in the foreground looks like she's got a tiny little withered hand though.
The idea was to do something original with the POV, so I thought of this. Then I remembered the house boat with captain Dread in MI2. Same thing. But by then it was already too late.
So the hand's too small, eh. Well, I think I can fix that, if you all think it is indeed too small.
What do you think about the GUI? I think there might be something the matter with the look/examine icon (ie the eye), but I can't quite put my finger on what might be wrong.
PixelPerfect: I went and made a new edit that basically rips of your edit, including the rays of light from the right-hand side window. After having seen those, the room just did look a bit lacking without them. Thanks. I've made the room even brighter now, but it still looks sh*t on some monitors. However, I want to stop at some point, before it starts looking bad on MY screen.
I'd like some suggestions about how to make bricks look good too (see the window pic), but apart from that, I think it's time I took a break from C & C, in order to produce some new stuff. I have a very good point of departure now, thanks to all of yous guys. I'll post the finished witch's house room at my production diary blog (see first post).