C & C for BG and sprite

[S]

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.

[None]

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 [********'']

[Klyptomaniac]

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.

[InCreator]

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?" 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.

[None]

InCreator means like this:

Code: ags

 [img]http://www.2dadventure.com/ags/Hekshus1_copy.gif[/img] 

This will create a image inside your post!

[Hudders]

Yeah the background is cool but the character looks very out of place.

[Andail]

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.

[S]

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.

[S]

Actually, I could try drawing the GUI and the witch on paper too. Why not?

[Klyptomaniac]

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.

[None]

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.

[Ryan Timothy B]

Hey 'S', I just read through your post and have noticed you could be doing this technique a little better.

the 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
B: This is your sketch with Multiply and set to 15%

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.

-------------------------------------------------------------------------------------------------------
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 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
how to color a photoshop sketch

[S]

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.

[MashPotato]

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.

[Neil Dnuma]

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.



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!

[Ryan Timothy B]

Nice edit Neil!

It's almost too dark and colorless, but it does give a better atmosphere.

[S]

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.

[Neil Dnuma]

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.

[S]

Yeah, candles are cozy. However, I have so far been unable to replicate what you did. Any tech tips?

[S]

Bumping, due to frustration.