2D Game Art for Programmers

I'm reminded of the John Gnagy art lessons where you make everything out of boxes. But the flow tended to be like:

Box -> Two boxes -> Three boxes -> Horse!

I guess it made it seem plausible that you can draw things just fine with rectangles. Never got the hang of it though.

> It's meant to be a little snarky - from a macro level everything looks simple if you just segment it into ten steps. The problem is that each steps contains many many details and years of experience and hard work that can't even be verbalized properly.

What part of the tutorials did you find hard to follow?

Yes it's hard to verbalize the "why?"'s of the choices made in the tutorial, but that's why you just have to plonk down with Inkscape and recreate what's in the tutorial. That's not too hard, is it? To manipulate the spheres and boxes so they appear like in the tutorials, a programmer isn't daunted by an unknown GUI, are they?

The only way to learn it is by experience, actually doing the exercises. You can't explain the "why?" beforehand, but as you simply follow the steps, you will encounter the same states/stages as the original artist/author did, and the choices they made will become obvious only after you experienced them from that point of view. (you can't use words to teach that kind of understanding)

FTR, I did do a number of the tutorials a while back already. But then, I already knew how to draw. Except on paper and in raster-based image editors. Working with vectors in Inkscape was a new and very fun experience. Plus it turns out to be super-useful for taking PDFs apart!

Also the workflow from the tuts was something I might not have trivially figured out myself: Find an existing object whose shape has the qualities you need (or a circle or box if needed), duplicate it, tweak it, get to know the deformation effects, set operations, etc, whatever you have to do to have to tweak as little actual vector nodes as possible. But to do this, you need a type of 2D spatial insight, and you can only train and practice it, nobody can explain it until you got your hands dirty a bit.

But a programmer should be able to do that. It is however a terribly frightening step for a programmer to take: "Okay, I'm doing this, but I don't know WHY ..."

I totally get that, I feel the same way and hate it when a coding tutorial does it. But for drawing it's different, it's more like those "VIM kata's" that were posted a while back on HN. Ok they too explained the "why?", but the main intent was to train that muscle memory. And fortunately it turns out you don't even need much muscle memory to make cool things with vector drawings (unlike, say, pencil-and-paper drawings) which is why they're particularly good for people that can't really draw freehand.

That said, of course there are certain parts of drawing/art that can be taught with words and explanations. But they are advanced topics like perspective or colour theory.

That may be one thing where I can imagine somebody with no graphical experience to (possibly) go wrong with these tutorials: they will probably pick awful colour combinations at first. Also they may not understand when it's a good idea to add a black border around something for good contrast (in cartoony drawings), fortunately the author does (IIRC) point out this trick. But it's the same as for shadows or any other type of drawing "trick", you just gotta wonder "why doesn't my image look quite as good as this other one?" and then look very hard what's the difference. And the nice thing about vectors is that unlike paper drawing, you can actually go back and insert those shadow or outline shapes between the layers of your image, so you can just keep non-destructively playing around until you get the exact result you intend. That's a lot harder with Photoshop or GIMP, not only will you be cruising through the undo-history, when your inspiration can effortlessly draw freehand sketch lines that take you minutes to make look acceptable, it becomes very frustrating (that's why you want to practice that on paper first, and then buy a drawing tablet :) ). With vector-drawing it's more like cutting paper shapes and arranging them (like Southpark :) ), except that in this case, doing it on the computer is actually easier than messing around with scissors and glue.

Well, thank you for the great tutorials :) I played with Inkscape before, but before these tuts I never managed to actually produce something useful with it.

Only a week later I was making things like this: http://i.imgur.com/iluDL.jpg [1] -- I know it's nothing like your tutorials and they were indeed also partly done in GIMP, but Inkscape was incredibly useful for quickly trying out different styles when masking out the fore- and backgrounds. I only had a rough idea what I was going for at first, and trying out different variations of shading was a much quicker process than it would have been with just GIMP. Also, combining several (linear/radial) gradients so they fill the background just right like that, I wouldn't even have attempted in GIMP (and instead end up with something that only looks sorta right).

BTW do you happen to know what is the best format to save in, so that somebody with Adobe Illustrator can easily use it? A friend of mine who was doing the lettering (not shown) had some issues loading them so I ended up sending him huge rendered PNG images (which worked, but I hate it how any semi-serious graphics design project can turn into tens of megabytes just so you don't have pixels on A2 :) ). OTOH, I don't think he tried very hard, next time I'll make sure he has Inkscape installed so he can do the conversions himself.

[1] these are partial images used as posters for a party tomorrow, and yes I am aware that the maya calendar thing is a few weeks later.

I just went through this process myself. Drawing from your imagination takes taking the rules that a book like "Drawing from the right side of your brain" shows you and basically practicing. For example, once you learn how to draw the basic human face you can take the memory you have of drawing that face and tweak it a bit. You tweak it until you have something more monstrous, like an ogre for example.

That is why most of the stuff that we see drawn from a persons imagination still has very recognizable human components to it. It takes a lot of practice but books these and other lessons you will find are meant to be a building block so that you can draw from your imagination.

Well, from what I've seen the ability to draw from imagination mostly results from drawing from life a lot and remembering how things look.

It doesn't matter that the right brain/left brain thing is a complete myth. This book really works! Don't focus on the book's title so much, it's really all about looking at the world in a different way, and the "right brain" part is just the catch to make you pick the book up. I realize how wishy-washy this sounds, but artists really do look at things very differently than scribblers do when they're drawing, and it makes ALL the difference.

Drawing on the Right Side of the Brain teaches the fundamental concepts of drawing that applies to anything you'll ever draw, and it really just can't be ignored if you want to be able to draw anything without taking classes.

Basically, there's a reason this book keeps coming up in discussions about learning to draw, and it doesn't have anything to do with neural theories.

Do you have a documented case for the claim that the right/left brain ideas are myth?

I ask as someone in neither camp, who found Drawing on the Right Side of the Brain to be a great introductory text on drawing.

You are aware that most people find it hard enough to draw cubes and circles, right?

Your advice is great for the artistic minded but for those 'artistically challenged' the 3D thinking is a very alien concept.

So your advice to a guy who is brand new to art, and self admittedly can't draw, is to jump right in to volume and focal points because it makes the easy task of shading even more easy?

I refuse to believe in such an argument that some people just can't do something. Some people just need _more_ time to get around the art way of thinking. In the case of music it maybe has to do with lack of early (as a child) exposure to more intricate music forms.

More complex programming also involves the grasp of a not evident way of thinking, so carrying on with your argument some people just can't understand why it doesn't work as expected.

You have a point that some people don't have the talent to decompose objects from their mind'e eye into basic shapes. I would argue that some forms of drawing are based more on practical skill sets, which can be learned, as opposed to the ability to detect the pitch released from a musical instrument. (I make that claim as a guitarist myself)

Trying to improve your drawing ability is worth the time and effort spent. I have been working on improving my artistic lens for the past month. Am I yet at the skill level I want to be? No. Have I sacrificed a lot of time? No.

I sit down once a day whenever I can find 10 minutes, set a timer, and sketch whatever comes to mind. On busy days I skip this practice, but always make it up in the following days.

You can see the progress in this imgur album: http://imgur.com/a/GTF6w#0 . These are by no means exact representations of the image in my mind at the time. On the other hand, they are quickly getting closer to my imagination everyday.

For a practical book on the topic of drawing, I recommend http://www.amazon.com/The-Drawing-Right-Side-Brain/dp/087477... .Reading that book helped me gain a lot more confidence and understand a lot of the science behind drawing ability.

I also have a large amount of bookmarks on improving your pixel art skill set. If those would be of interest then I am happy to share those links.

When I first got into programming it took me months to truly understand the purposes of methods/functions. I picked up on pointers quicker than I picked up on functions. This was a little over 15 years ago. I could write them out but I could not understand why they were needed. I can admit it now but it was embarrassing then. I know the problem now was because I was teaching myself and really had no exposure to the concept until that point. I was really bad at math in high school.

That is the same thing with learning an artistic endeavor. There are going to be even seemingly simple parts that some people struggle with. It takes time to break through that wall but it will be broken at some point. Sometimes you just have to advance past that lesson and come back to it. Maybe then the person will be able to understand why they were having problems.

> Some people just don't have eye for it.

True. Though, some people may seem hopeless, I've seen wonders by having people critique each others' work.

Developing a critical vocabulary is probably one of the most important things an aspiring artist (or even someone who wants to contribute) can develop.

So how do you explain people like me who can differentiate "OMG the design is so 1995" vs "This pastel-colored theme looks rad!" but sucks when tasked to design it himself (end up with 1995 design).

Perhaps you were an incompatible teacher? It happens all the time. One size does not fit all when it comes to teaching which is why we're so hit an' miss these days.