Help to improve

[lisky8]

Hello everyone. I'm very new on the forum but long time lurker. My coding is decent, but my art is terrible. I drew this by eye based off a familiar scene, of a very well known game. But my question is, how can I improve something like this? Any basic tips? Things I should/shouldn't be doing?



Thank you!

[Ghost]

It's not eye-clawingly bad but I see your point. There's lots of rooms for improvement.

Three things that I'd like to mention; do not take them as rude. It's just my opinion and especially when art and style are concerned opinions are subjective.

I think I got the reference at first glance though. That cursed chicken island from COMI, right?

Composition
The picture has large objects to left and right with an almost empty space in the centre. Not too bad, the large objects "balance" each other. But one's in the foreground and one in the background, and that tilts the image. And since the fortress to the right is the brightest thing in the picture it draws the eye to it; you basically distract the viewer from the (more important) foreground. And the very empty centre is (subjectively) a waste of space; it could be reasonably used to introduce another light object like a cloud swirl to soften the impact of the fortress.

Shading
You have gradients, many of them. Gradients are easy. In my book they are also lazy. There is no texture to any of the objects. The fortress is crumbly and withered, shade
the stone so that it looks like it. The ocean is a flat surface. This really is what I think is the weakest point of the picture. I'm not even suggesting realistic shading; cartoony is enough, but there should be texure. The viewer relies on you to communicate how things feel and look. Add some detail there.

Palette
The colours are very bright; not a bad thing since this is the sunny seaside of the Monkey Island universe, but I'd mute the colours a lot. Not to the "real is brown" level but defenitely a lot. This is very subjective, but you have a primary light source here, the sun, and it reflects off the water; that creates a base colour. Work with that; check some photographs of tropical islands and see how sand is mostly beige but never really earthy-brown, and how water is often darker when close to the beach.

[Anian]

Gradients are mostly used in "realistic" images, stuff like polished metal and shiny plastic can benefit from a skillful use of gradients but otherwise, I'd start of with flat color surfaces (maybe even in grayscale), decide on a composition and perspective first and how everything looks when looked as a whole, then add details.
Also, you'll have to go back and analyse some things in CoMI (Bill Tiller's) art - stuf like transition between deep and shallow water, beach to water line, plants to sand transition, waves on cliffs etc., detailing.
Plus what Ghost said.

@Ghost: EL POLLO DIABLO! ...sorry, when there's a chance to say it, you have to say it, damn it!

[lisky8]

Thanks for the great feedback!

Haha, it is indeed that scene. I would never use anything like this because it's pretty much plagiarism, i'm trying to teach myself how to correctly add depth/perspective to objects and adapt it into something original I can use.
The original scene has a large palmtree right in the foreground with those cool swirly clouds in the back, so I can definitely see what you mean, the middle is empty.

I think my lineart isn't totally rubbish, but then when it comes to adding colour and shading, is where everything falls apart. I now see the Castle/Fort is shiny and that's a bit silly. I'll try and bring the ocean to life, it's those things I struggle with, to correctly add detail. I used gradients on the sky and ocean because I didnt feel confident enough to blend the colours, i'll try using the eyedropper to establish a better palette by hand rather than just having gradients everywhere. I also added a *little* noise afterwards to try and bring out a kind of texture in a few areas, I think perhaps that's too subtle or doesn't have the desired effect.

It is very bright, I wanted the cartoon-y nature but also I don't want it to be over saturated, because that just hurts the eyes and anyone playing a game like that will likely get a headache.
The transitions need alot of work, however, I was worried by removing some heavier lines, i'd lose perspective slightly?
The sand is certainly a bit too brown haha, darker at the far right, than that small mud bit.

Maybe i'll take the image back to BnW and re-colour it better, adding texture in the process.

[Ghost]

Maybe i'll take the image back to BnW and re-colour it better, adding texture in the process.

That's how many people do it, actually, first establishing shadow/light, and then adding colour. Keep us posted!

[Snarky]

Just to expand on some of what Ghost has said: gradients=bad, but also these wishy-washy "slight smudge of shadow drawn with a soft brush" that you have on the sign, palm leaf and castle.

In this style, you are IMO much better off with clear, distinct shadows and texture, drawn with a sharp brush (or the pencil tool) in a clearly darker version of the color. The way you've done the palm tree trunk is the right approach. Maybe Ghost is too modest to mention it, but it's worth looking at some of his screens for examples (e.g. http://indiegames.com/2012/05/interactive_portmanteau_mythau.html), since he's very good at making the most out of simple shading.

Yes, Bill Tiller can make that soft-shaded, airbrushed (almost watercolor) thing work with this style, but that's Bill Tiller.

The other thing: It looks like you're drawing with a mouse. That's very tough, particularly if you're unhappy about shaky lines. If you're going to be doing a good deal of drawing, it's definitely worth investing in a drawing tablet. You can get a good one for $50.

[danbuddle]

I've been trying to do the same as yourself these last few weeks and found that it has really helped to start at a much lower resolution and work up. I am working with 320 x 200 at the mo and still spending hours playing with patches of lighting. So my first suggestion might be to scale down a bit so you can be more focused. Then I'd probably focus on the fort and really try to give it some realistic texture. I've just been googling things to get ideas, e.g. "Pixel Art Concrete" in Images returned this and then I'd try to apply some of this to the picture.

I might be wrong here but I can't seem to trace a vanishing point which all your lines should converge to to give realistic perspective. I have been setting a layer up with a vanishing point and then using this to help:
First created a 640 x 400 layer (twice as big as I need) and marked out a 320 x 200 grid as my canvas.

http://tinypic.com/r/29caz9w/8
Then I am using the extra space to place a vanishing point  and some perspective lines on a separate layer.

http://tinypic.com/r/10iatxk/8
Then letting these guide my structure.

http://tinypic.com/r/33tteev/8
Then I can just drop the other layers out when I need!

http://tinypic.com/r/289m04l/8

Any way, I like the cartoony quality and, particularly how cooky the sign looks; it is very endearing. Keep up the good work!

[Eric]

I think you've got a good start to the composition, and the right sorts of people chiming into help you here. I just want to note that there's a specific problem with the gradients, in case you decide to keep them. It looks as though you've just sort of placed them willy-nilly to provide some color variation, without giving thought to the true properties of light and color. For instance, you have a diagonal gradient across the sky. Is there a situation in which this would ever happen? Additionally, your ocean gets darker as it recedes into the distance, whereas, with this lighting, it would likely get lighter. See here:



Gradients, used properly and tastefully, can be helpful, and I don't personally consider them lazy. But if you use them incorrectly, they stick out like a sore thumb.

[Snarky]

I might be wrong here but I can't seem to trace a vanishing point which all your lines should converge to to give realistic perspective.

Just as a comment on this: parallel lines converge towards a vanishing point (in realistic perspective). If you don't have any straight parallel lines, vanishing points are meaningless (though often you can construct parallel guidelines even if there aren't any actual straight lines in the picture). The more general concept to keep in mind is the horizon, with things being over and under it (anything over the horizon is seen from below, while anything under the horizon is seen from above), and how scale/distance/apparent vertical distance from horizon are related for things that sit on a surface (look at Eric's picture, and try to imagine how Jesus walking away into the distance would look).

So in this case, the big problem with the perspective IMO isn't that the lines don't converge (that's common in "goofy" cartoon style), but that the "horizon" seems to be right behind the fortress, as if there's a waterfall right there.

[danbuddle]

Noted

[lisky8]

Wow, great responses! Thank you to all. I've been away so hadn't been monitoring the thread. Since posting here, i've gone to do some research on pixel art and composition. I came across this 30 Great Pixel Art Tutorials and have been just practicing on basic objects so far. I had absolutely no knowledge of things such as dithering, and adding texture. I've also recently started using the altogether easier HSV rather than RGB.

With regards to the willy-nilly gradients, I was unsure how to colour the sky, so just went with whatever the program gave me rather than doing the sensible thing of looking at real life skies for reference material and going from there. Also yeah, the resolution of this is much higher than necessary. I had intended to draw at higher resolution and downscale the whole image, but with nothing complete, I can't say how that would have worked.

I am drawing by mouse, but I do have enough patience to go back and edit pixel by pixel as I need to. As I progress I'll look into drawing tabs though, but perhaps in the short term, a mouse that has a higher DPI, unlike my current one which is akin to an Ogre attempting to pull the legs off a daddy long-legs.

[danbuddle]

GraphicsGale is free and lets you use the arrow keys to draw which I find amazingly useful especially at low resolutions like 320x200.

[lisky8]

I'll try it out! I've been using an old outdated program called ArtGem, recommended by a tutorial I found on here somewhere. It's very simple to use but powerful, and that's what I like. No necessary over complication. 

[Ghost]

30 Excellent PATs is a good read; allow me to add to your reading backlog

Basic texturing, low-res: http://jazisnake.deviantart.com/art/TUTORIAL-Texture-Color-Theory-188959239
Palette choices: http://opengameart.org/content/chapter-5-color-palettes

and a selection of awesome screenshots from what I consider the most beautiful low-res game ever:
https://www.google.de/search?q=legend+of+kyrandia+hand+of+fate+screenshotsbm=ischbo=u&source=univ&sa=X&ei=osbVUpLbIqf_ygPWooCQAQ&ved=0CDIQsAQ&biw=1510&bih=934