How draw game art

Discussion in 'Game Design, Development And Publishing' started by Toxicosis, Aug 28, 2016.

  1. Toxicosis

    Toxicosis Member

    Joined:
    Jun 25, 2016
    Posts:
    95
    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.
     
  2. Roderick

    Roderick Member

    Joined:
    Jun 22, 2016
    Posts:
    577
    Since I'm still in learning mode, I get most of my assets from free/open source asset sites.

    However, one of the tutorial channels I use, HeartBeast, has a playlist that he calls Let's Pixel. You could check that out as a starting place.
     
    Genetix and Galladhan like this.
  3. Galladhan

    Galladhan Member

    Joined:
    Jul 1, 2016
    Posts:
    119
  4. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    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:

    [​IMG]

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

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,556
    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).
     
    Alunite, Llama_Code and Genetix like this.
  6. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    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[​IMG] 160x112[​IMG]

      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:
     
  7. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,556
    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)
     
    MishMash likes this.
  8. MishMash

    MishMash Member

    Joined:
    Jun 20, 2016
    Posts:
    376
    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:

    [​IMG]
    [​IMG]
    [​IMG]

    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
     
  9. Robert

    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.
     
  10. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,556
    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
     
    MishMash likes this.
  11. Genetix

    Genetix Member

    Joined:
    Jun 22, 2016
    Posts:
    611
    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.)

    [​IMG]
     
    Last edited: Aug 29, 2016
  12. Jaqueta

    Jaqueta Member

    Joined:
    Jun 23, 2016
    Posts:
    338
    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.
     
  13. Electros

    Electros Member

    Joined:
    Jul 19, 2016
    Posts:
    318
    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
     
  14. Aura

    Aura Guest

    MishMash likes this.
  15. zendraw

    zendraw Member

    Joined:
    Jun 20, 2016
    Posts:
    1,362
    draw practice trial and error
     
  16. Toxicosis

    Toxicosis Member

    Joined:
    Jun 25, 2016
    Posts:
    95
    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.
     
  17. Adrien Dittrick

    Adrien Dittrick Member

    Joined:
    Jun 29, 2016
    Posts:
    345
    Lately i've decide to screw graphics and just use solid coloring.
    [​IMG]
    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.
     
  18. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,556
    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
     
    Adrien Dittrick likes this.
  19. Adrien Dittrick

    Adrien Dittrick Member

    Joined:
    Jun 29, 2016
    Posts:
    345
    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.
     
  20. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,556
    So you're going to rework it into a text adventure? That's a cool idea. Is it still going to involve platform mechanics?
     
  21. Adrien Dittrick

    Adrien Dittrick Member

    Joined:
    Jun 29, 2016
    Posts:
    345
    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.
     
  22. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,556
    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.
     
  23. Adrien Dittrick

    Adrien Dittrick Member

    Joined:
    Jun 29, 2016
    Posts:
    345
    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 ._. )
     
  24. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,556
    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...
    [​IMG]

    And here's an exaggerated contrast version:
    [​IMG]

    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.
     
  25. Nexusrex

    Nexusrex Nexusrex Games

    Joined:
    Jun 20, 2016
    Posts:
    211
    Welp, i agree with all people. At the moment, i did just make characters based of boring squares :D
    [​IMG]

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

    jazzzar Member

    Joined:
    Jun 29, 2016
    Posts:
    514
    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
     
  27. Adrien Dittrick

    Adrien Dittrick Member

    Joined:
    Jun 29, 2016
    Posts:
    345
    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.
    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)
     
  28. jazzzar

    jazzzar Member

    Joined:
    Jun 29, 2016
    Posts:
    514
    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 :
    [​IMG]
    [​IMG]
    [​IMG]
     
    Nexusrex likes this.
  29. zircher

    zircher Member

    Joined:
    Jun 21, 2016
    Posts:
    379
    On the trees, just putting a slight curve on the base would help with creating the illusion that they are cylinders.
     
  30. pixeltroid

    pixeltroid Member

    Joined:
    Jul 23, 2016
    Posts:
    661
    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: Sep 6, 2016
  31. McWolke

    McWolke Guest

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

    jazzzar Member

    Joined:
    Jun 29, 2016
    Posts:
    514
    I still didn't start to use the things i draw with game maker, because i'm still learning, maybe do a google search
     
  33. Toxicosis

    Toxicosis Member

    Joined:
    Jun 25, 2016
    Posts:
    95
    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.
     
  34. nlolotte

    nlolotte Member

    Joined:
    Aug 3, 2016
    Posts:
    465
    [​IMG]
    What do you guys think of this? to me it looks.... weird. Really need to learn pixel art.
     
  35. Vxss57

    Vxss57 Member

    Joined:
    Aug 31, 2016
    Posts:
    68
    Best way to judge pixel art is to view it in size it will appear in your game. And this doesnt look bad at all
     
  36. nlolotte

    nlolotte Member

    Joined:
    Aug 3, 2016
    Posts:
    465
    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!
     
  37. Toxicosis

    Toxicosis Member

    Joined:
    Jun 25, 2016
    Posts:
    95
    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.
     
    Ninety likes this.
  38. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,556
    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.
     
  39. nlolotte

    nlolotte Member

    Joined:
    Aug 3, 2016
    Posts:
    465
    I'll keep working on it! Thanks guys! i personally think it looks too "cute" to be a protagonist in a gothic styled game
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice