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.
0
Making game art from hand drawing?
Started by CryoGenesis, Sep 29 2012 08:14 AM
10 replies to this topic
Ad:
#2 Crossbones+ - Reputation: 1373
Posted 29 September 2012 - 08:48 AM
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.
Edited by superman3275, 29 September 2012 - 08:50 AM.
I'm a game programmer and photo editor.
Here's Breakout:
Breakout!
If you need some photo editing done, contact me:
superman3275@gmail.com
if you want some programming help, or are recruiting for a game development team, either PM me on here or email me up there
!
Here's Breakout:
Breakout!
If you need some photo editing done, contact me:
superman3275@gmail.com
if you want some programming help, or are recruiting for a game development team, either PM me on here or email me up there
!
#3 Moderators - Reputation: 5018
Posted 29 September 2012 - 09:23 AM
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.
#4 Crossbones+ - Reputation: 2648
Posted 29 September 2012 - 11:14 AM
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..:
...turns into this:
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):
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:
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?
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..:
...turns into this:
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):
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:
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
#7 Crossbones+ - Reputation: 2648
Posted 29 September 2012 - 05:08 PM
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-642 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
#8 Members - Reputation: 382
Posted 30 September 2012 - 04:48 AM
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) :
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) :
#9 Members - Reputation: 385
Posted 30 September 2012 - 07:29 AM
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
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
Edited by Rakilonn, 30 September 2012 - 07:39 AM.
#11 Crossbones+ - Reputation: 2462
Posted 10 October 2012 - 10:04 AM
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!
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!
RuinValor - Birth of Talos
My game project blog.
My game project blog.
