Ben304 tries painting. Yet again.

[Dualnames]

Bahaha nobody wants to play a game with that many awkward moments

But, yeah, the whole point of this whole excercise is to improve to the point where I can do this style of background for games. Because I'm really sick of my pixel backgrounds.

So.

I did this one here with the intention of seeing how well one of my sprites would fit in with it. The original picture is here:

I then got a sprite which I had drawn earlier, resized the background from 640x480 to 320x240 and then I pasted the sprite over the top:

I feel it matches in fairly well, but am also interested to hear what you guys think. Probably one of the main things would be that I need to do more refining to the background first, I guess.

If I did a game like this I'd still be able animate the characters pretty quickly but have (hopefully) nicer looking backgrounds... however I am aware that people get a bit wary when two different methods of illustration are used in a single game.

I think the low saturation of the sprite makes it really pop out, especially with the outline, and while I think this is a good thing, I am aware that it might not be. So... any thoughts?

Also, any tips on the background as well, of course. I tried to incorporate the things I have learnt from the earlier images into this one, of course .

I think the sprite matches perfectly. I always loved weird looking atmospheric bg's and if there was a game containg my idea on that kind of art, I'd play it for eternity.. If you can tint the character sprite using ags it would be perfect.

[abstauber]

however I am aware that people get a bit wary when two different methods of illustration are used in a single game.

If you're background are getting crisp enough, I don't see a problem. However I don't care much about visible brush strokes in fullscreen

[bog]

I feel it matches in fairly well, but am also interested to hear what you guys think. Probably one of the main things would be that I need to do more refining to the background first, I guess.

If I did a game like this I'd still be able animate the characters pretty quickly but have (hopefully) nicer looking backgrounds... however I am aware that people get a bit wary when two different methods of illustration are used in a single game.

I think the background part of the image looks good, but the walkable part is too fuzzy in the reduced version. I'd say you should either retouch the walkable parts at pixel level after reducing or use finer brushes or something in the first place.

Anyway, you did some pretty good looking hi res sprites some time ago, i think they were vectors. Would they be a lot more time consuming to animate?

[Moresco]

I then got a sprite which I had drawn earlier, resized the background from 640x480 to 320x240 and then I pasted the sprite over the top:



Also, any tips on the background as well, of course. I tried to incorporate the things I have learnt from the earlier images into this one, of course .

I really like what you're doing here, Ben.  Ever since that last concept painting you were working on, I've been wanting to see what you'd come up with next.   I like the color perspective of the background a lot, pretty sweet.

[Buckethead]

perhaps this will prove helpfull:

http://www.carloscabrera.com.ar/tutorial.html

I think your pictures could benefit from some texturing. You've layed out the big shapes quite well, now it's time for some detailing. I'm not really a fan of these highly surated colours you use but I guess it's the style you chose to with.

[ThreeOhFour]

Thanks all for the comments

As for animating vectors... it's really something I am not comfortable at doing at the moment, nor do I have the software to do it, sadly. Drawing with vectors takes me way too long to consider feasible for making game resources for, and the last time I animated with vectors was in high school! Maybe something to keep in mind for the future, but for now pixels are what I love doing and am comfortable with!

As for refining and adding in more detail (like textures), yep, I definitely plan on learning these things in the future. But for now I am trying to focus on forming shapes in a pleasing manner (I'm only just really now starting to get comfortable with the landscape, my big worry is doing buildings (especially interiors!), so I would rather learn to do a wider range of shapes in a consistent style before I get too focused on the details, because I still have tons to learn here! But thanks for the ideas and the tutorials, I am sure they'll come in handy in the future!

As for now, it's still working with shapes, and I have done my first really serious go at drawing a house, which I think is still pretty bland in shape, but am fairly pleased with when looking at the shading and lighting:



As far as shape goes, it still feels pretty boring, so I guess I'll try drawing my silhouette a bit crazier next .

[Takyon]

The pic in the first post is still my fav.

Could someone point me in the right direction to a tutorial for making these kind of backgrounds? (photoshop novice)

[Shane 'ProgZmax' Stevens]

If you want to make your pixel art fit better try reducing the color count to around 128 and apply one of the dithering presets at about 70%.  Depending on the amount of colors in the original this will make painted backgrounds look more 'low-res authentic' like old Lucasarts backgrounds.  I really like the background with the easter island head!

[Theme]

I find it a bit weird the color pallets but they combine well
IMHO You could use some darker tones (and lights for highlights), like the ones you used in some bgs with the foreground, to give more contrast
Very pretty looking backgrounds
o/

[ThreeOhFour]

J-Man, sorry but I don't know of any actual tutorials on tablet painting .

Interesting idea ProgZ - I just had a look in Photoshop to try it but I have a cheap, watered down version (it came with the tablet) and it seems to be missing a lot of features, including this one . I'm not sure if going for a 'dithered' look is what I want, but it'd be fun to play around with, of course . I'm willing to try a range of things to see what happens

As for doing contrast, yep, that's next

Anyway, last night I thought it might be time to start trying to add some 'own colour' to the objects - so far I have been basically doing highlights to give colour, which is fine for night and dawn/dusk scenes but not for daylight scenes.

And I pretty much failed  :



I guess my next step here is to find some daylight scenes that I like and figure out how the colour schemes work. Should be an interesting challenge!

[Moresco]

I think the highlights in that are fine.  The problem I see is that there's just so much green, and it's a bit bland.  Hang on though...what do you mean by "own colour"? Is there some kind of rule in this style where you have to color everything in the same hue range?  I'm not sure what I'm trying to ask here, sorry.  I guess I'm just wondering why you chose to make the hut green/bluish green.  It mends too well with the grass and the middleground colors, for my taste.  *scratches head*

But I do like it. =D

[ThreeOhFour]

I didn't really explain it very well. I guess I didn't expect anyone to actually read it 

What I meant by objects having their 'own colour' is that instead of taking their hue for the lights and atmospheric lights, I would paint them with their natural hue. So rocks would be brown, instead of pink/blue/green.

I don't know why I made the house such a bland colour scheme. Probably because I was too lazy to mix new colours, so I took rock and grass colours 

Anway, in order to get some practice doing normal daylight colour schemes, I took 4 photos from a google search and tried to paint rough versions of them. I wasn't really trying to make look alikes of the photos, I am really just interested at the moment in getting some idea of what colours look like in sunlight:


(it's pretty big so I saved as a jpg instead of .png and thumbnail linked it)

For the most part I used a small brush, was at 100% zoom and kept my focus on just getting the general shape with the colours, instead of create an accurate painting.

I guess this shows that I still have a fair bit to learn. The rainforest and mountain are my least favourites, I think the two grassy hills are a bit better but show room for improvement as well. I guess if I do some regular practice at this sort of thing I'll get better .

[Moresco]

Well man, I'm going to have to surprise you and say that this is just about how every single amazing concept painting starts...looking like those roughed out colors and shapes.  Personally, I think that's probably a very good exercise, and I liked all of them except the snow one - and only because when I look at it, I see this adorable face. I don't know why...

=p  Yeah, regular practice for you and me both.  I'm getting a tablet (well, if I can dig it out of the bottomless dresser) soon from a friend, as she doesn't need her old one....so I'm excited to start getting away from the mouse for a change.  I really want to take a break from music and finish my game, and really invest a lot of years learning to do digital concept paintings...mostly because I spend so much time staring at them.  I know a lot, but I need to apply what I know more often.  So I always enjoy watching your progress, it's inspiring dude.  Keep at it.

[loominous]

'Local colours' is a term often used for the colours objects have when reflecting neutral light (not tinted), and they sure can be tricky to work with without getting a bland impression. In environments they don't actually exist, as as soon as you place objects in an environment, theyt start reflecting everything else, like a muddy mirrors, and thus the local colours get distorted.

It's funny how you're coming from this direction though, as most start out working solely with local colours, then progress to "enviromental colours" (just a term I made up), which is pretty much what you're using, though in a rather extreme way.

They way I approach local colours is kind of backwards, where I start out without them, having everything reflect the sunlight without absorbing any colours (giving everything the same colour as the sunlight), and then basically tint stuff with adjustment layers.

I find this a quick way of working and gives full control of all individual colours at any time, which makes it fantastic for experimentation. It can give a fake/dead look if you're not careful though, so it's hardly fool proof.

-

When going with more local colours, you'll probably want to introduce a direct lightsource, or you're it's likely that you'll end up with a rather unexciting image.

Crude edit:


Here I simply added some warm sunlight coming in from the back right, which contrasts against the ambient cools from the sky.

Apart from making providing more dynamic values and colours, this kind of light allows you to place things in focus, and create additional interesting shapes (light shapes). When people introduce this kind of light, they're often very careful with the placement, wanting everything to be very realistic when it comes to shadows and whatnot, but this is really just another tool which you can play around with in whatever way you like, so while I recommend trying to make it seem fairly logical and consistent, as light is the method we use to make sense of object's volumes, you can still mould it heavily to fit your design ideas, and as long as it looks good, people won't care.

-

Regard composition: I think the last two are a bit of a step back, in that you're sort of back to a flat two layer look, and without any real zig zaggy path for the eye to take.

One thing to try out is to lower the horizon a bit, and by that I don't mean placing the horizon lower in the image, like those early pics, but placing the viewpoint lower, as if we were looking at it through a grown man's eyes. High viewpoints tends to detach us from scenes, but they're practical for large areas. You find out the viewpoint's vertical position by looking where the horizon line crosses objects:



In the left one, the horizon line crosses house middle section, which is pretty high up, and in the right one at the man's chest, which is pretty low.

-

Regarding the pixel char: I think it fits ok, perhaps some anti aliasing on the outer edge:



and you could also add some dithering as Prog suggested (though here crudely done, so it's not really representative):



You can do dithering in Save for Web and Devices, in the File menu (below the regular Save, Save as), provided that your photoshop version supports it:



Select gif (or png), then reduce the colour amount, and it'll apply default dithering, which you can modify the style and pattern of, and also edit the palette directly. Think it allows you pretty good control of things, but I haven't really used it much so I can't really say.

-

Got pretty lengthy, so I'll stop now.

Edit: improved one of many crappy sentences.

[abstauber]

For dithering, there's always DepthDither, which is free.

So if your crippled Photoshop can handle plugins, this might be an option.



Get it here:
http://depthdither.graphest.com/

[ThreeOhFour]

TheRedPress: Good luck with getting the tablet stuff started man! I wish I had been a bit more motivated to learn how to use mine but I'm trying to learn now. I enjoy concept art too, so I look forward to seeing your stuff

Loominous: Wow, very helpful post, thanks!

Yep, I do seem to be doing this backwards, but I really cannot stand illustrating with plain colours. Hopefully as long as I get all the steps in eventually it won't matter which direction I do them in .

Interesting approach to tinting, I'm completely ignorant of how to use adjustment layers properly (or at all really) but I've noticed your stuff really does have a very "sunlit" feel to it, which is very nice! Perhaps once I've worked out the whole painting thing a bit more I might try to learn a bit about adjustment layers!


I really like the way the sunlight looks on that image, that's a very eye catching effect, very warm! I'm definitely going to try doing something like this!


With regards to the composition, I totally agree that it took a step backwards for a while there. I was focusing on the shape of the buildings more than the background, which is quite silly of me. I see what you're saying about a high viewpoint, I'll definitely try to lower it a bit and sow what I come up with.


Regarding anti aliasing the character sprite, I have been thinking for a while of trying some hand done anti aliasing, so I'll give it a shot and see if I can achieve something workable here. I should be able to manually set a couple of alpha layers and do it like that, I hope.

Thanks for pointing out the dithering tool, I never thought to look in there 

Dirk: Haha, thanks, I don't know if my version can support plugins... I guess anything is worth a try. I'll keep it in mind for if I decide to do dithering


As for what I have been focusing on:

I thought a good thing to try would be an extended version of my 'sprite over background' experiment. What I'm concious of is that I need to be able to produce images that all look part of the same world, so I need to make sure my backgrounds all match each other to some extent. What I've done is create a 3 room example game, with no puzzles but just trying to make sure that I can effectively reproduce a background style multiple times for a game.

If you're interested in seeing how I went, the download is here (please forgive the lack of a few key animations and the slow walk speed).

I tried to make the scenes with a little bit of variety as to composition and subject matter, and I also tried a walkbehind object with an alpha layer (which turned out reasonably well).

If you can't be bothered downloading but would still like to see a screenshot, here is one:



I'm fairly concious that some parts of the backgrounds could stand cleaning up... also that there is not much in the way of interactivity potential there. I'm not really sure whether the best solution here would be to paint the interactive things or pixel them, as I'd probably have a fairly hard time animating something that is painted.

I am also thinking that it might be a better idea do draw a brighter character so as to help it 'pop out' from the backdrop.

Your thoughts would be appreciated.

I've got a ton of things I want to try now, so it's full steam ahead!

[Dualnames]

Wow, Ben304, if you release this, I'm going to have to make a game based on you..

[loominous]

Last one looks great!

Think the composition/focal point/framing works, the colours are really cool, and the design of everything is really nice.

Looking at the other backgrounds in the game, the last one (featured below) has one strength that I haven't mentioned yet, and has to do with "arrows".

"Arrows" marked with #1:


So basically these are objects pointing towards the/a focal point. We follow objects with our eyes, and in the best cases, the "arrows" leads the eye towards the/a focal point or another point leading to the/a focal point. The other backgrounds in the game lacked these, which makes them a bit more "scattered".

The area marked with #2 is an unfortunate tangent, which makes the objects merge which confuses the viewer. When I first looked at the image, I didn't actually catch that the right rock wasn't part of the left rock area due to this.

Looking forward to your progress!

[ThreeOhFour]

Actually, I read your post before doing that background, whereas the other two I had done before hand and thought to myself "I'd better do good composition here, because the other two suck".

I am vaguely aware of the arrow like effect, and tried to do this here, I'm pretty pleased that it actually worked out! I tried doing it before in the stone head background, but didn't think anyone picked up on it (maybe it wasn't so effective?)

I've been told off for doing tangents like in spot #2 before, and didn't notice this until you pointed it out. I'll try and make sure I keep these sorts of things out of the image from now on!

Thanks for the tips as usual!

[bog]

Ben that looks great! Your pixel character works pretty good now with the painted backgrounds, probably also because they share more colors than the one with the statue head. Hope you make your next game like this