Ben304 tries painting. Yet again.

[ThreeOhFour]

Thanks bog, yeah the plan is to try making a game like this .

My next experiment was to try something along the lines of what Loominous mentioned earlier, about doing the sunlight first and then laying the colours over the top. I started out doing this simple scene with just two layers:



The 'sunlight' is represented by the sky colour and that funny blackish dot in the top right is the shadow tone. I tried a bit of a lower point of view, but other than that just kept the image pretty basic.

Next I layered colours over the top, each on a seperate layer (now I think about it, it is probably better to use a single layer for this) with each layer at some level of transparency so I could see the shape of the image. When all layers are set to 100% in the alpha blend it looks, hilariously enough, like this:



I then took the layers to a colour level I was reasonably satisfied with, in this case 20%, and ended up with this:



My thoughts on this experiment:

-I didn't use a very good sunlight colour. Sunlight should be a lot brighter!
-I should probably use some adjustment layer, but I was completely lost when playing with these and all of them did strange things to the image.
-I wasn't sure if there was a specific way to choose colours to put over the top, so I just chose colours at random. Really had no idea about what luminance/saturation to go for.

[Takyon]

I think it need some finishing touches but apart from that I can't wait to play this game

[ThreeOhFour]

Time for another experiment!

I decided to have a shot at doing some anti aliasing on a character by hand and also converting the background to a lower colour count to see if there are methods I can help my character sprites fit in with the scenery.

After doing the character animation frames, I exported them all as .png images then loaded them into Photoshop and individually placed AA pixels at 65% transparency where I would normally place an intermediate colour. This is a pretty slow process, but it means the character gets anti aliasing without being distorted, and the fact that one can flip frames in AGS makes it a little quicker.

I've built another little sample game which you can get here. There is a small gui up the top with four buttons - 2 change the character between anti aliased and normal, and two change the background between high colour and low colour. Know that I haven't done the walkbehind object in low colour, so it is not 100% accurate.

As for those who just want to look at more pictures without downloading:



If you look at the edge of the character closely you can see some intermediate pixels there.

Graphics wise, I had a lot of fun drawing this particular background and am really happy with how it turned out. I tried making the shapes of things a bit more interesting, and I'm not sure why all these warped curvy lines look good to me, but I really like the effect. Also I need to practice my walkcycle animations, because he has a very strange strut.

[loominous]

I think the aa works pretty well at integrating the sprite -- at this point the dark outline is probably the bigger culprit, since the contrast is otherwise very limited.

Exaggerated version:



-

About the sunlight dealy:

The colours are indeed a bit dark for strong sunlight.

Another thing is that the saturation decreases with darker values in your version, which is why shading with black rarely works well, when it, like in a candle, should stay pretty much intact, just change hue. So the brightest parts are yellow, the less bright, orange, then red. This constant saturation is really important in getting things to look warm, just cramming on yellows will look harsh n fake.

This is where adjustment layers come in, as you're able to basically say: make all bright values in the layers below yellow, these values orange, and then just paint with whatever colour you want, and they will take care of the colour/hue/saturation.

So I start out with a black n white value pic that get coloured warm by two adjustment layers, first one that resets the colours, and makes everything orange, so that I can work with any colours below (hue/saturation adjustment layer), then one that pushes bright values towards yellow, and darks toward red (curves).





The important thing with the values is that they separate areas lit up by the sun, and those that aren't. The areas lit up by the sun will remain unaffected, but those that are in shadow will have the sky colour added to them.



Then it's a matter of applying colour, which I do with curves adjustment layers, where I push the colours towards their local colours.

The sky is basically another lightsource, so it has to be pushed quite heavily, whereas areas like grass n similar require smaller pushes, though this is all up to your taste.

As mentioned, adding the sky colour to areas in shadow from the sun will create contrast and make the sunlit areas pop out.

Here's the photoshop file, where I added a few descriptions in the folder names.

-

The above mentioned approach is bit backwards, as you start with light, when by default things are dark. You can take another route, which is a bit more logical, and more in the style I did earlier in the thread, where I added sunlight to a background. Don't recall which thread I posted these in, and I'm too lazy to rewrite the descriptions so I'll just post the images:











These images sure make the length of these posts rather impressive, so I'll stop now.

Cool background btw, and I agree about the curve lines!

[ThreeOhFour]

I thought I posted this... must be going a little crazy.

Thanks for the tips, Loom! That really is a very nice colour scheme you've done to the house, big thanks for the .psd file as well! I really love the way the blues work in the shadows! I'll dig in there and see if I can learn some things!

For now I have tried doing the other method you mentioned, where the sunlight is done last, not first:





I tried to clean the strokes up a bit without resorting to using a soft edged brush, although I will probably have a go at cleaning things up with a softer brush as well. I am still thinking that this might be a little dark, but not really sure.

Quick character test to see if I can manage to replicate the colour scheme accurately for a game:





I am actually pretty happy with the way this one turned out, I feel she matches the landscape fairly well.

Any thoughts?

[loominous]

Think the lighting works quite well, but the low intensity and colour doesn't really suggest sunlight but rather dirt lit up by an overclouded sky.

As the only time when sunlight isn't very strong is when the sun sets, and then the hue goes towards red, the current setup is pretty confusing to the viewer, as the intensity is that of the very last stage of a setting sun, but the colour of the light as well as the angle is that of late afternoon.

This of course falls under creative decisions, so I'm not proposing that you change it to fit realism, just that if you want it sunny, then the intensity probably needs to be increased.

If you have the psd for one of the bgs, I could add an adjustment layer that punches up the sunlight.

[ThreeOhFour]

psd file of one of the backgrounds is here

I see what you're saying about the lack of intensity in the light, I guess I'll have to train myself to put stronger highlights in.

I tried looking at the psd you uploaded earlier, unfortunately I couldn't seem to view the adjustment layers. I'm curious as to whether this is because of something I have missed or whether because I am using a limited version of Photoshop, but I'd really love to be able to use curve layers, so I'm hoping it is just something I have missed.

Edit: I tried doing a quick sketch of a city style scene. A lot of things I am not happy with, really, but a start I suppose:

[Dualnames]

Ben (two posts behind): the lady you drew matches perfectly. Even better than the last attempt.

[loominous]

I tried looking at the psd you uploaded earlier, unfortunately I couldn't seem to view the adjustment layers. I'm curious as to whether this is because of something I have missed or whether because I am using a limited version of Photoshop, but I'd really love to be able to use curve layers, so I'm hoping it is just something I have missed.

Could you take a screenshot of your layer list when you open the document?

[ThreeOhFour]

Thanks, Dual

Regarding the layer list, this is what I get:



I also dug through the adjustment layer options looking for curves but could not find them in the list. Of course, I am still pretty new to Photoshop, so I might have missed something.

[loominous]

Looks like layer folders aren't supported, but the screenshot does suggest that you can access at least some adjustment layers:



In the full version, there should be a heap of adjustment layers when you press that button, but I suspect you're down to a few.

Here's the photoshop file without the folders, curious to see what you get

For reference, this is how it ought to look:

[ThreeOhFour]

It's definitely my cheapo bundled version . I get that layer list, but all the curves layers have the little pencil with a cross through it icon, and a double click on these yields a message saying "This is an adjustment layer that was created in the full version of Photoshop and cannot be edited in Photoshop Elements".

[Moresco]

ohhhhhh, photoshop elements =[  That's a bummer man, I did some fun stuff with your project just with adjustment layers.  Can you still use curves without an adjustment layer though?  On mine it's under the menu Images->Adjustments->and then there's a list of all kinds of adjustments.  They give a preview option of course, and you can go back in history but otherwise they're permanent adjustments.

[ThreeOhFour]

Doesn't seem to be available on my version, sadly.

Perhaps I should think about buying a full version of photoshop...

[Takyon]

I have the latest verison cs4 extended you should get that man it's very good.

[rbaleksandar]

Why not try some free CS-brother? Not GIMP though. As far as I know it doesn't have adjustment layers. Try searching a little bit. I am sure there is some free (even opensource) program that'll satisfy your needs (always try the free first and then go for the not free ). Besides don't forget that pretty much can be done with very simple programs. All these tools and stuff are to make your life easier but - hey! - life's hard   

[Misj']

Hay Ben,

I like where you're going with this style.

I decided to share my take on one of your drawings (there's only so many Loominous-edits a man can take )...composition-wise it's not your the best image in this series, and it could really use some framing of the structure of interest, but I wanted to show a different take on colours. By background - drawing-wise - are European comics like Franquin, Uderzo, and Kolk, and this largely reflects the way I handle a drawing.

Since I'm used to working with line-art, I took the liberty of creating redrawing the image with a pencil. I didn't spend any time on line-strength (adding more dynamics by variability in line-thickness), nor did I ink the piece (due to which the original shines through slightly):


While I use adjustment-layers quite a lot (particularly when I edit photographs), I decided not to use them here. Instead I created four layers:
1. Line-art (set to multiply)
2. Shadows (set to multiply)
3. Highlights (set to screen)
4. Flats (set to normal)

The (extremely boring) flats were as followed:


And below is a merge of the different highlight and shadow layers that I used:


The reason for using the a 'screen' layer for the highlights is that I can pick a colour for the light I'm working on (setting the brush to a low opacity (5%, 15%, or 25% depending on the light I'm working on)) is, that it's a simple way to have the colour of the light affect the underlying structure: the more the paint in this layer the more light hits the structure. This works also great with gradients: black indicates that no light is reflected, white indicates that white light is reflected (using red instead of white reflects red light, etc). I used the same approach to show a glow from the window in the final image by setting a layer to screen and creating a simple radial gradient from the colour to black (the layer is on top of the line-art to ensure that the line-art itself is also affected by the glow).

To add some depth I made some of the line-art darker (near the fence) or lighter (towards the back), and added a colour-layer to make it a little less saturated and a little more yellowish; resulting in the final image:


Of course when the line-art is removed the image still works (with the exceptions of the lack of roped holding the tire hanging from the tree)...and some might even say that removing the lines enhances the image (the yellow circle was my light-colour, I added it to a separate layer as a reference):


As you can see it's nowhere near as dreamy as Loominous' work, though...

Misj'

Ps. While done in Photoshop CS3, it should all work in Photoshop Elements as well.
Pps. Normally I would have combined Adobe Photoshop and Corel Painter; and compatibility between these programs is why I tend not to use the adjustment layers for colouring.
Ppps. Yes, Loominous, I did use your brush for this piece.

[rbaleksandar]

Ben304, I think that something paler for a sky will be better. It hurts the eye omho. I couldn't stare at your background for too long. And it distracts my attention.

[ThreeOhFour]

I used to use the gimp, which has some adjustment layers (obviously not as advanced as in photoshop)... but as soon as I switched to Photoshop I noticed my brush strokes were instantly smoother, and I'm very reluctant to stop using Photoshop. I will see what I can find, but if I can find an affordable copy of Photoshop I'll probably grab it.

Misj':

Big thanks for the paintover, you've really got a much cleaner style than my sloppy work ! I really like the character you gave the shapes with your pencil lines. I agree that it's not the greatest composition wise, it's something I'm still learning the basics of I guess.

Is there any particular reasons you use the multiply layers? I've never really heard why these are used or what they do, so I am interested to see that you chose those for your line work and shadow layers. Thanks for the info on the screen layer as well, I've never used one of those before, so I guess it is something to experiment with!

I have done a bit of playing around with Corel Painter but it seems a little harder to work with - I guess it's probably better for people who are actually good at painting with a brush, which I am not . It is still pretty fun to play around in but!

As for my own practice, I have gone back to speed painting in order to try and train myself to use better daylight colours in my images:



Pretty rough, I know, and I really had a hard time making the rock that is supposed to be a foreground element look right - I wasn't sure whether it should be darker or lighter. Quite satisfied with this as a speedpainting, but am still certain there are probably tons of things I have done wrong .

As for using paler colours - I like bright colours .

Edit: And another speed painting, with a similar purpose (to try and paint a scene with noon style lighting)

[loominous]

Great design in the last two!

One thing you could try out is to avoid shading with black, or any other unsaturated colour, as you'll lose any intensity of the light, and also get dull shadow sides. Basically you get a "dead" look.



So basically it's about maintaining saturation, and shifting the hue as areas get darker, which shading with black or similar won't produce, and you instead end up with lifeless, pale colours.

This works in muted palettes as well, where you can still inject life into the colours, without going saturated.

-

Another thing to try out with direct sunlight is creating shadow regions, to avoid these large uniform lit areas. A common thing is to place foreground elements in shadow, to at the same time boost the sense of depth, and you can also "mask out" light with shadows, to get rid of these large plain surfaces, and add some interesting light shapes.

-

Misj: Cool tutorial - the use of a greyscale image set to multiply is really handy, though the backside is that it kinda works against what I described above, if one strives for colours full of life, as the result is close to that of shading with black.