Making game art from hand drawing?

Started by
9 comments, last by riuthamus 11 years, 6 months ago
Hey, I'm a programmer and I suck at making pixel art. Although, I'm really good at hand drawing so I can draw concept art. When it comes to pixel art I use GIMP or Photoshop and putting each pixel at a time ends up looking really bad for me (especially when drawing characters with an animation that needs to have the same ratios).
Is there an effective way to convert my hand drawings into pixel art I can use with my games? It would make the whole art process a lot easier without having to pay someone or depend on someone else.
Advertisement
If you have a tablet or a phone theres a lot of apps/youtube tutorials on how to link that to your computers photoshop. Whenever I'm doing art I just hook up my kindle fire to photoshop and use a stylus. Heres a youtube video.

I'm a game programmer and computer science ninja !

Here's my 2D RPG-Ish Platformer Programmed in Python + Pygame, with a Custom Level Editor and Rendering System!

Here's my Custom IDE / Debugger Programmed in Pure Python and Designed from the Ground Up for Programming Education!

Want to ask about Python, Flask, wxPython, Pygame, C++, HTML5, CSS3, Javascript, jQuery, C++, Vimscript, SFML 1.6 / 2.0, or anything else? Recruiting for a game development team and need a passionate programmer? Just want to talk about programming? Email me here:

hobohm.business@gmail.com

or Personal-Message me on here !

You could use something like Inkscape to trace your lines and perform coloration and shading, to produce clean and sleek vector art. Conversely, you could also use your drawings as references and use something like Blender to model it in 3D, then skin/rig/animate it. From there, if you desire 2D sprites, you can simply pre-render it from different viewpoints and in different poses.
Pretty neat solutions suggested above, so I'll focus on pixel art specifically.

If you want pixel art from your line art (rather than vector like JTippets suggested with Inkscape or pre-rendered like Blender), my solution would be to scan it, scale it down, then re-trace the line since scaling is going to make it super fuzzy. Lemme break it down.

The easiest way to transform a sheet-paper drawing is to scan it, but a digital camera will also work if you're a little careful with lighting (since the only thing you care about is the lines). It's best to ink the drawing before scanning/photographing so the lines are more distinct. After it's digital, you'll probably want to mess with the levels in GIMP or Photoshop to make the lines more distinct (Ctrl+M in Photoshop).

Once you have the line art set up in your software of choice, scale it down to your desired sprite size. The following example is from pre-existing line art, but the basic principle is the same.

Basically, this..:
[attachment=11517:J-20.png]

...turns into this:
[attachment=11518:J-20_2.png]

Notice how the lines aren't clean thanks to the scaling? Well this is where your artistic gumption comes in. Sort of, anyway; it's just tracing. Basically, just draw over the fuzzy scaled-down version with the pencil tool to grab the essence of the lines in pixel form. Usually for this step I switch to MS Paint since I think Photoshop and GIMP are irritatingly overwrought for pixel-level editing. You might find it way easier to draw the basics in Paint and then switch to something else for clean-up or color correction (which is what I do).

Here is the traced version (I use a completely different color so it's more distinct):

[attachment=11519:J-20_3.png]

Now you can just select out the lines or just erase all the leftover fuzzy crap from the initial scaling, leaving you with pure pixel lines ready for coloring (this might be helpful if you're also having trouble with that: http://www.gamedev.n...r-my-pixel-art/).

Only the lines shall remain:
[attachment=11520:J-20_4.png]

I also happened to explain pretty much exactly what you want to know in of my chapters in this book.

Note:Sorry about the small image sizes, does anyone know how to scale attached images in BBcode?

-Mark the Artist

Digital Art and Technical Design
Developer Journal

Thanks all! +1 rep each
there is NO WAY ms Paint beat Photoshop in ANY level of work, other than that you are good to go, just learn a little bit about the standard programs to make this kind of work and you'll see the difference. Cheers.

there is NO WAY ms Paint beat Photoshop in ANY level of work, other than that you are good to go, just learn a little bit about the standard programs to make this kind of work and you'll see the difference. Cheers.


I disagree. For basic pixel lineart and even shading, I prefer Paint because at the pixel level (128-64[sup]2[/sup] or lower) it's simply faster do very simple things like mirror a side, move a portion of the sprite, etc than the Photoshop interface, which requires layers for pretty much everything. That being said, GraphicsGale is probably the best for pixel art in general since it maintains the kind of interface that's good for pixel-level editing while having some more of the advanced features of Photoshop.

-Mark the Artist

Digital Art and Technical Design
Developer Journal

Before you go down the pure pixel approach, also consider that 2d vector art or 3d art can be much easier to animate, once you start thinking about more than 2fps or something.

I personally find 3d packages incredibly tedious and time consuming, but have recently been converted to 2d vector animation. I'm currently using Anime Studio, but SynFig is another free option.

If you build your art out of vectors, you can then rescale it, animate it (with bones etc), easily change colours etc down the line without needing to do loads of extra work.

As for creating the artwork from line drawings, there is PoTrace in Inkscape and a few other options. In the end I wrote a little app for doing centreline autotracing (from e.g. a scan or photo) which is a bit more what you typically want for easy editing:

http://www.facebook.com/doodletrace

The results still require cleanup though, so I tend to use a combination of this and mouse vector editing in Anime Studio.

End result is something like this (character in little 2d game I am currently making) :

iw7ji0.gif
Here is a really nice pixelart tutorial :
http://www.derekyu.com/?page_id=219
Just use the Next/Previous buttons : some links on the right are broken.

If you want more tutorials/inspirations, you must go on PixelJoint.com. There are a lot of pixelart gurus on this website.
http://www.pixeljoint.com/default.asp
The tutorials are in the Feature menu.

Pixelizing your drawing as Prinz Eugn suggests is a good way to start. But remember that you must remove some parts if you downscale a lot to have a readable sprite. And here begins the fun part of pixelart : optimization of the pixels to draw what you want with a limited number of pixels smile.png
Thanks guys!

This topic is closed to new replies.

Advertisement