How draw game art

T

Toxicosis

Guest
Another thing that stumps me at the time is how to draw the game art. I can draw... on pencil. Pretty good, I'd say, but when it comes to pixels, I can't tell what's the deal with the 50 shades of gray. I've used the fill tool, but I tend to stick to the basic palette, and it's starting to show its ugliness.

Anyone know any good tutorials on how to draw the drawing stuff in a game? How to pick the right colors, how to keep a consistent look across the game, etc.? I'm working 2D, and while I've managed some rudimentary animations, nothing's good enough to keep.

Of course, I'm looking for experiences and advice as well.
 
B

Blakkid489

Guest
I completely agree with the above comments but also it takes a lot of trial and error and knowing what works. I'm in the same boat as you and I've been using MS Paint for. . . ever
Here's what my garbage looks like:



I'm not at all saying my art is Golden. or good. but I'd say its better than stick figures
 

Yal

🐧 *penguin noises*
GMC Elder
I completely agree with the above comments but also it takes a lot of trial and error and knowing what works. I'm in the same boat as you and I've been using MS Paint for. . . ever
Here's what my garbage looks like:



I'm not at all saying my art is Golden. or good. but I'd say its better than stick figures
To scrutinize your art a bit as an example...
  • Pillowshading. It's generally frowned upon, and it gives the "depth" the wrong direction, which messes up the perspective. You'd generally want to imagine a light in the top-left corner, making the top-left corner of blocks and protusions lighter while its bottom and right sides are darker.
  • Way too many colors in the shading of the blocks and background. The smooth blur effect just makes things look artificial, real stone is more jagged. Adding more colors also makes handling the palette harder, making it more difficult to make repalettes, palette tweaks, and other blocks belonging to the same graphics set.
  • Obvious use of the circle and rectangle tool. You might want to hide that when trying to make something organic like a face, freehand drawing isn't that bad. You would like the hair to stick out from the head a bit, and faces generally are taller than wide even if they are elliptical.
  • You're mixing black outlines and colored outlines (since his clothes have dark gray outlines). This is also a bad practice, and I'd suggest not using pure black and pure white in the graphics at all since it clashes subtly with intermediate colors - use extreme gray shades instead.
  • The HUD could use symbols and rearrangement to remove text and clutter. For instance, the 'health' text could be removed and you could put a "x3" next to his face in the HUD instead of drawing lives elsewhere, and have a skull sprite and a x00 text next to it as well. Removing text makes the game easier to play even for people that are fluent in english, because it's easier to grasp a single symbol than a sequence of them (which is why "a picture says more than a thousand words" - words are made up of several symbols called letters, and parsing them is a several-step procedure).
 
B

Blakkid489

Guest
To scrutinize your art a bit as an example...
  • Pillowshading. It's generally frowned upon, and it gives the "depth" the wrong direction, which messes up the perspective. You'd generally want to imagine a light in the top-left corner, making the top-left corner of blocks and protusions lighter while its bottom and right sides are darker.
  • Way too many colors in the shading of the blocks and background. The smooth blur effect just makes things look artificial, real stone is more jagged. Adding more colors also makes handling the palette harder, making it more difficult to make repalettes, palette tweaks, and other blocks belonging to the same graphics set.
  • Obvious use of the circle and rectangle tool. You might want to hide that when trying to make something organic like a face, freehand drawing isn't that bad. You would like the hair to stick out from the head a bit, and faces generally are taller than wide even if they are elliptical.
  • You're mixing black outlines and colored outlines (since his clothes have dark gray outlines). This is also a bad practice, and I'd suggest not using pure black and pure white in the graphics at all since it clashes subtly with intermediate colors - use extreme gray shades instead.
  • The HUD could use symbols and rearrangement to remove text and clutter. For instance, the 'health' text could be removed and you could put a "x3" next to his face in the HUD instead of drawing lives elsewhere, and have a skull sprite and a x00 text next to it as well. Removing text makes the game easier to play even for people that are fluent in english, because it's easier to grasp a single symbol than a sequence of them (which is why "a picture says more than a thousand words" - words are made up of several symbols called letters, and parsing them is a several-step procedure).
Naturally I'd take offense to criticism and/or critiquing, but lately I've been throwing away my pride and realizing that I'm not great at what I do and if I wanna get better, I'll have to get help. With that said:

  • Pillowshading? I've never heard of the term. As seen before you, art is not something I'm at all talented with. In fact I've always been curious about shading in order to make my graphics. . .well. . appealing. At least natural. I understand how light should reflect the image but I'm uncertain how it should be addressed.
  • I agree with adding more colors makes things harder in terms or of palette choices. If anything that's what I as going for. The previous sequel before this one was a little under-toned and wasn't appealing in the slightest. Then again I pretty much used the same style I used for the image above with slight alterations.
  • Obvious use of circle and rectangle tool. . . .I'm working on that. Really I am.
    40x28
    160x112


    The head is an obvious circle but I'm starting out small and working my way up.
  • The mixing of black and white outlines was an old gimmick I used in that particular game that I never revisited. I didn't like it myself.
  • For the HUD. I'll take your advice on that. In fact I enjoy images over reading text. . . . not sure why I didn't use my own expectations as a base for design :oops:
 

Yal

🐧 *penguin noises*
GMC Elder
  • Pillowshading? I've never heard of the term.
Here's an explanatory image:
upload_2016-8-29_18-22-10.jpeg

Basically, you make stuff darker close to outlines, evenly distributed. This isn't how light works, so it'll most likely look wrong. Instead, you want to shade irregularly, with light in the top left and dark in the bottom right:
upload_2016-8-29_18-23-47.png

(or wherever you've got the lightsource, but for outdoors stuff, having the light in the top left looks the most natural)
 
M

MishMash

Guest
I've recently been delving into creating pixel art myself, as creating simple things can save me a fair bit of money, if its something I can make to a good enough standard. A few of the bits and pieces I attempted to create recently:





One thing I really struggle with at the moment is pallet creation, I also find organic shapes quite tricky. Though yeah, my main barrier to entry is creating a good pallete, finding colours that complement each other well. I tend to just take one colour and change the darkness of that colour, though that creates quite flat looking textures.

If anyone knows good tutorials on palette creation, i'd be interested in knowing :p
 
R

Robert

Guest
Hard to answer really because art is subjective and you can't just verbally explain how to create good art. In my humble opinion good quality art comes from patience and practice. With that said there is also a very technical side to art as you can break it down into a myriad systems. That's more the kinds of things you learn with actual art studies. I'd actually think the technical side of art is more important for games than just the creative because once you have an idea panned out you need to implement it in a vast number of ways and having the technical understanding of things like lightning, colors, contrast, proportions, etc will really help you create a strong style and consistency to your ideas.
 

Yal

🐧 *penguin noises*
GMC Elder
If anyone knows good tutorials on palette creation, i'd be interested in knowing :p
There's a pretty simple rule of thumb... for lighter shades, shift the hue towards red (if you use GM's sprite editor, just change the 'hue' value a little bit, around 2-6 is usually enough). For darker shades, shift towards blue. There's more stuff to know about palette creation, but it's a good start :3
 

Genetix

Member
This is actually a good post, and that first reply from Yal had some really good basic tips. I can't talk much though - this is what my current project looks like: (On the other hand, i've focused almost soley on the mechanics so far, leaving little time to perfect the programmers art - this screen also doesn't have any shadows implemented in yet which are coming.)

 
Last edited:
J

Jaqueta

Guest
Pillowshading is actually pretty useful if you have an Light Engine built into the game (Such as Smartlight or Glare for example), it gives you a nice fake ambient occlusion effect on the sprites, and the light sources... well, will actually come from the Lights in the game. However, if this is not the case, it should be avoided.
 

Electros

Member
Another approach could be to take a different tack and go with vectors. My art skills are pretty bad, so I have been reading a lot of art and drawing books, and then trying to recreate characters and styles in Inkscape.

E.g. below I drew based on some examples from a Manga book, and then imported in as a layer to trace with Inkscape, before creating out of vector shapes:

Mon_Capitan.png
 
T

Toxicosis

Guest
Found the spreading tool. It's softened and sweetened up my workload. So much, in fact, that refraining from using it too often will be a problem.

The pixel editor on GMS is neither the best of ideas nor intended for most of the work; I should try to phase out of it ASAP.

I'll see how my art looks when trace bitmapped out of inkscape, guys.
 
Lately i've decide to screw graphics and just use solid coloring.

My opinion is that as long as your graphic style is coherent, anything goes!

For instance on this image notice how most game items are solid colored but the main character has shading. Well obviously this main character will be changed in a future version to look more plain.
 

Yal

🐧 *penguin noises*
GMC Elder
Lately i've decide to screw graphics and just use solid coloring.
IMO those foreground trees look awfully flat when they're completely solid-colored, and the way stuff gets darker further back basically emulates shading... it feels sort of "off". Screw graphics indeed, I guess :p
 
IMO those foreground trees look awfully flat when they're completely solid-colored, and the way stuff gets darker further back basically emulates shading... it feels sort of "off". Screw graphics indeed, I guess :p
I just don't have time for graphics in this game, I gotta finish it for november :p so i'm making a physics-only engine. Besides it allows me to do neat visual tricks with blue butterflies.
 
So you're going to rework it into a text adventure? That's a cool idea. Is it still going to involve platform mechanics?
I feel a high level of snark there :eek:
And no, I'm just going to use the simplest most minimalist shapes I can get. Each shape will correspond to the actual collision model of itself in-game.

Mostly I'll just draw impressions of things. It's also art!

Edit: although I could work a bit on the trees, yes. I wont shade them but I might give them an actual shape instead of just a rectangle.
 

Yal

🐧 *penguin noises*
GMC Elder
IMO the main problem with the trees is that they look flat. Tree trunks are cylindrical, and that effect is really hard to convey without shading... right now they look flat both figuratively and literally, so they seem more like planks. Color-flat graphics simply work better with shape-flat objects, I guess.

Anyway, if your hard deadline is due to a teacher or something, I guess it's not as bad as if you're having a deadline to publish this, so don't take the criticism too hard.
 
IMO the main problem with the trees is that they look flat. Tree trunks are cylindrical, and that effect is really hard to convey without shading... right now they look flat both figuratively and literally, so they seem more like planks. Color-flat graphics simply work better with shape-flat objects, I guess.

Anyway, if your hard deadline is due to a teacher or something, I guess it's not as bad as if you're having a deadline to publish this, so don't take the criticism too hard.
Oh nah no teachers are involved, this is a self-imposed deadline. Fail more, fail faster, and all that!
Also I usually lose interest in a project whenever I spend too much time on it. I do this as a hobby, not as a job :p
Criticism and in general feedback is the best way to get me to improve (I mean thanks to your criticism I'm probably going to re-work the damn tress now ._. )
 

Yal

🐧 *penguin noises*
GMC Elder
I'm not sure whether intentionally making your graphics worse is a good decision if you're trying to get more experienced :p
I think completely flat graphics work the best the less colors you use, so that the lack of shading isn't highlighted. If you reduced your game to grayscale, it might even look better... hang on a second.
Here's a sepia version...


And here's an exaggerated contrast version:


Quality is so-so because it was a screenshot of your GIF, but it should give you a rough idea on what you could do. Note how the spider contrasts too little with the other stuff to stand out when you remove the hue difference, and note how changing the colors to a more... conscious scheme drastically change what the game expresses.
 
N

Nexusrex

Guest
Welp, i agree with all people. At the moment, i did just make characters based of boring squares :D


As many said, keep trying. Maybe you can come out with your style!
 

jazzzar

Member
I'm learning vector art from a site snoutup pointed me to, it's called something like 2dgameartguru, it's pretty good, using inkscape with it, if you want to see some of the things i recreared, take a look at blacklightindie.blogspot.com
I made a post about learning game art and i showcased some of the stuff i've drawn
 
Here's a sepia version...

.
Oh gawd this sepia version looks amazing! I'll need to add a sepia shader to my game on top of the saturation shader.
BRB, looking up shaders.

Also yeah the spider's colour is easy to change I can do something about this.
I'm not sure whether intentionally making your graphics worse is a good decision if you're trying to get more experienced :p
it's not about making graphics intentionally worse, it's about making them faster to draw :) Using only one color is the fastest thing I found.
I'm trying to get more experience in actual skeletal animating and object activation optimization. (this game has a 16 km long map)
 

jazzzar

Member
just for the sake of it, i'll post some pictures here, bear in mind i've been only learning for a few days, remaking things and stuff :


 
Z

zircher

Guest
On the trees, just putting a slight curve on the base would help with creating the illusion that they are cylinders.
 

pixeltroid

Member
Op, does it have to be pixel art? Unless its really, really good, its going to go over peoples heads. I'm also starting to think the pixel art style is overused, just for the sake of being "retro".

There are so many possibilities to create game art! Especially if you can hand draw. You could experiment and just scan hand drawn figures, edit them and use them as sprites!
 
Last edited:
M

McWolke

Guest
just for the sake of it, i'll post some pictures here, bear in mind i've been only learning for a few days, remaking things and stuff :


How do you convert the Inkscape Datatype into swf? :/
or is there a way to use other types than swf in Game Maker?
 

jazzzar

Member
How do you convert the Inkscape Datatype into swf? :/
or is there a way to use other types than swf in Game Maker?
I still didn't start to use the things i draw with game maker, because i'm still learning, maybe do a google search
 
T

Toxicosis

Guest
Op, does it have to be pixel art? Unless its really, really good, its going to go over peoples heads. I'm also starting to think the pixel art style is overused, just for the sake of being "retro".

There are so many possibilities to create game art! Especially if you can hand draw. You could experiment and just scan hand drawn figures, edit them and use them as sprites!
I thought of that, but the thing is, while I'd like to think it's nifty, my hand drawn figures are all over the place. I find it nearly impossible to keep a consistent style, and if I haven't learned in 26 years, I better try something else.
I picked pixels because I've got a better idea, with them, of how big will things look on the screen. Besides, there's a few rules (use groups of 2n+1 colors) that I can use as a guide to how not to make it impossible to find the game's style consistent. Of course, I'm gonna try pencil + ink + scan + black level, might let me use my full power, but it's difficult to edit it on computer afterwards, or even to use the same tools available on computer for consistent animation. Consistency's my weak spot, that's the thing. I need something that'll force me to stay consistent.
 
N

nlolotte

Guest

What do you guys think of this? to me it looks.... weird. Really need to learn pixel art.
 
N

nlolotte

Guest
Thanks, I just downloaded Pyxel so I'm learning slowly. been using MS paint for the last decade! graphics dont make a game but they damn well help in getting interest in it!
 
T

Toxicosis

Guest
nlolotte, yes, I'd say it looks kinda weird. I'd try to fix a few things with it before continuing.

The billowing of the cape is too focused on the bottom of it, making the rest appear stiff. Try to make the whole cape billow, if possible.
To give yourself more room, make the cloak narrower, so it can billow out during only the end of the cycle.
Your arms are visibly shortening. Consider making them swing outwards a little instead, to give more of an impression of "looseness".
The cravat is swinging, rather than billowing: as it swings both forward and backwards, it looks like a pendulum. Make it go no further than the center, so it looks like it stops at this man's chest, and make it swing forward, away from his chest. If possible, it should move only one pixel, and wrinkle as it does. It's a short piece of cloth, so it can't have a lot of inertia to it.
 

Yal

🐧 *penguin noises*
GMC Elder
What do you guys think of this? to me it looks.... weird. Really need to learn pixel art.
My biggest complaint is how the arms are one pixel wide... it's not bad per se, but in certain situations it can look bad, like if you're not forcing the game to scale up an integer amount in fullscreen mode, the arms will visibly shift in size depending on the number of pixels they get upscaled to. If your game has a relatively low resolution, the arm may also look 'broken' because it's not actually connected all the way. Be aware of these things.
 
N

nlolotte

Guest
I'll keep working on it! Thanks guys! i personally think it looks too "cute" to be a protagonist in a gothic styled game
 
Top