Sign in to follow this  

Making game art from hand drawing?

This topic is 1888 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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. [url="http://www.youtube.com/watch?v=rV1zd0oWgIo"]Heres[/url] a youtube video. Edited by superman3275

Share this post


Link to post
Share on other sites
You could use something like [url="http://inkscape.org/"]Inkscape[/url] 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 [url="http://www.blender.org/"]Blender[/url] 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.

Share this post


Link to post
Share on other sites
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: [url="http://www.gamedev.net/topic/629704-dithering-help-in-for-my-pixel-art/"]http://www.gamedev.n...r-my-pixel-art/[/url]).

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[url="http://www.amazon.com/Design-Content-Creation-GameDev-net-Collection/dp/1598638084"] this book.[/url]

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

Share this post


Link to post
Share on other sites
[quote name='Wilson Guerrero' timestamp='1348959042' post='4985177']
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.
[/quote]

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.

Share this post


Link to post
Share on other sites
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:

[url="http://www.facebook.com/doodletrace"]http://www.facebook.com/doodletrace[/url]

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) :

[img]http://i46.tinypic.com/iw7ji0.gif[/img]

Share this post


Link to post
Share on other sites
Here is a really nice pixelart tutorial :
[url="http://www.derekyu.com/?page_id=219"]http://www.derekyu.com/?page_id=219[/url]
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.
[url="http://www.pixeljoint.com/default.asp"]http://www.pixeljoint.com/default.asp[/url]
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 [img]http://public.gamedev.net//public/style_emoticons/default/smile.png[/img] Edited by Rakilonn

Share this post


Link to post
Share on other sites
When i was doing pixel art I very much enjoyed having full control and range of the tools I would be using, that said my stuff never looked as good when people would come in with photoshop and throw down some work and make it all pixelated after. There is a guy i use to follow "Rakilonn" linked you the profile, he is amazing at pixel art and very much worth reading about.

I would suggest using photoshop if you have it. The ability to manage your layers is a very good tool ( btw. gimp can do pretty much do anything photoshop can so if you have that you can use that as well ) and seriously unmatched when it comes to testing out different styles and looks. Anyway, great advice so far just practice with the tools you are using. Photoshop has the option to make hard edges... so you can certainly get that pixel look you are going for!

Share this post


Link to post
Share on other sites

This topic is 1888 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this