Pixel Art Training

Discussion in 'Game Design, Development And Publishing' started by Blakkid489, Sep 16, 2016.

  1. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    Trying to improve on my art skillz and I think Im heading in the right direction. . maybe

    [​IMG]

    The old image was last done in 2010 i think. The New image is what I learned looking at other sprites.

    Is there something I'm doing wrong here or something I can change/add.

    Tips and critiquing are always welcome
     
  2. Vxss57

    Vxss57 Member

    Joined:
    Aug 31, 2016
    Posts:
    68
    Im not an expert in pixel art, but i would say you need to reduce the amount of pixels. Its something i struggle with as well, Heartbeast has some amazing tutorials on youtube.
     
  3. pixeltroid

    pixeltroid Member

    Joined:
    Jul 23, 2016
    Posts:
    599
    When I train interns in graphic design, I give them images and tell them to trace over it with the pen tool. In just a few weeks, many get the hang of it and start creating their own stuff.

    So try tracing over existing sprites for a while. Take a megaman or samus or whatever sprite and just trace over it. You could modify features to customize it or you could just trace over it as is. In time you'll start to figure out anatomy, proportion and shading.
     
    0042, Chris S., Ampersand and 3 others like this.
  4. ForgePlays

    ForgePlays Guest

    Try making an entire game with items set below 32x32, main character and enemies 14x14 and items 6x8 to 3x8, it's what I'm doing, goodluck!
     
  5. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    Ill try that. Megaman is actually a great sprite to trace over

    Thats pretty small.. .Is it possible to design a game around with so little detail?
     
  6. ForgePlays

    ForgePlays Guest

    Yes, in the gamemaker preferences you can make the game turn off the colour interpolation(so it's not rendered blurry) and again yea it can be made doing so, have your game zoomed out as 1280x720 (unless you want it zoomed in on the character go ahead) I am currently working on my game if you want to see some of its art -> http://gamejolt.com/games/zombrex/190054

    But again, try to find the correct colours and bam! You should be able to draw things into the correct shapes (circles aren't the easiest to do so go for that blocky feel untill you learn/realize how to do them)

    If you need to know more just ask!
     
  7. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    Okay. . .I went ahead and did 20x20 version of the "new image" without any shadows (yet)

    [​IMG] (currently stretched to 256x256 for visual purpose)

    How would I apply the shading if the sun was coming directly from the right? My example would be my attempt in the image in post above
     
  8. Fanifacation

    Fanifacation Guest

    1st off this is a much better improvement to your sprite but if you really want to learn an art style i wouldn't trace. I would instead look at the sprite and draw along side it. When i do that it helps me learn how to draw in that style better than if i were just tracing.

    2nd thing is with shading, you should not only use it to show shade but also highlight details in the sprite. To help the process, limit yourself to 3 types of color: the normal color, a lighter version, and a darker version. You can make a set of 3 colors per main color you'll be using and then you have yourself a color palette to pool from.
     
    Yal likes this.
  9. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    Thanks for all the help guys. This has definitely opened my mind to new things. I do have a concern though in regards to backgrounds.

    Lets say the sprites are 32x32 and below and the room size is about 1000x800. How would go by drawing that?

    I mean I know can either
    • Draw a tile set
    • Draw a background that is 1/2, 1/3, or 1/4 the size of the room and have is stretched.

    Are those my only options?
     
  10. DariusWolfe

    DariusWolfe Member

    Joined:
    Sep 23, 2016
    Posts:
    32
    I can't see the images, so my question may be answered by looking at them, but what sort of game is it? What you do with the background is going to be based a lot on what sort of game it is. If it's a space game, then you've got the super simple black background with stars. Other games will have other types of answers.

    Also, why does the room need to be 1000x800? Have you looked into viewports, to limit the amount of visible background?

    As a general rule, never, ever upscale an image, and downscale only if absolutely required. If you need to scale an image at all, it's best to do so in square multiples (4x, 2x, 1/2x, 1/4x, etc) but still avoid it whenever possible, and instead create the image at whatever size you need it to be.
     
    Chris S. and Ninety like this.
  11. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    Well I was just give out random encounters really but mostly for a platformer. I know this can easily be done for top-down rpg types. I just never understood how 8/16 bit backgrounds are done for pixel art

    Like this:
    [​IMG]
     
  12. Cpaz

    Cpaz Member

    Joined:
    Jun 20, 2016
    Posts:
    308
    Talking from personal experience, yes.
    While I'm not confident in my art design and the details that go along with it, I've learned I don't need anything complex. Just have a simple design you understand, and give it a lot of detailed animations. (That is very much easier said than done, I must warn.)
     
  13. fawf

    fawf Member

    Joined:
    Sep 10, 2016
    Posts:
    9
    The background section of the room editor should have options to tile your background horizontally and vertically. Alternatively you can have an object draw a tiled background for you but you may not need to if you aren't doing anything fancy with it.

    With regards to shading, the first principle is that it is about the 3d form and not the 2d shapes. By which I mean you should observe and consider how objects fit into a space and how light hits it. A common method for practising this concept is to draw basic objects(sphere, cube, tube) in a space with only one light source, like a darkened room with one lamp. You could probably find this kinda stuff on the internet already, esp for just starting out.
    It might seem like a bit of work but this knowledge is helpful for drawing anything and everything.
     
  14. csanyk

    csanyk Member

    Joined:
    Jun 20, 2016
    Posts:
    821
    I really like this; it's much improved over your initial character.

    There are some good pixel-art web sites with tutorials and community forums, where you may get better advice. Check out sites like Way of the Pixel, etc. Just google around, you'll find lots.

    For this character, I'd probably recommend removing the heavy black outline and replace it with more subtle shaded colors. Be sparing with black, and avoid using pure #000000 black except rarely.

    With shading, know where the light is coming from, the color of the light (for example, sunrise will tend to be a bit more yellow or red), and what the first surface is that the light will hit. The high surfaces that get hit first by the light will be lightened with the color of the light, while the parts of the object that are further away from the light source, or in shadow, will be darkened with the compliment of the light source color.
     
    0042 likes this.
  15. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,587
    Ok I had some fun tonight reworking your little sprite. Let's say am giving you an extremely short crash course on pixel art. I'll be glad if it inspires or help you somehow.
    I'll comment my images like we read a book, from left to right, from top to bottom.

    [​IMG]

    1) I reproduced your sprite almost exactly like it was. I couldn't recover it perfectly 'cause you had anti-aliasing on it. Still, its all there.
    2) I think he was looking a bit derp. While it could have been ok not to touch it (everything is a bit subjective after all), I thought moving the right eye a tad more towards center was looking more like a "normal human".
    3) When you look at someone from profile, the head is never symetrical. Since the character is having a profile style stance, I removed a pixel on the right side of his hair so the head shape conveys better that he's looking to the right.
    4) At first your character looks like he have no ear. Especially since he's looking right, we are supposed to see his right ear better.

    5) Still with the logic that he is looking on the right (profile stance), his left shoulder should be more hidden behind him than the right one. So I had to make that right shoulder bigger.
    6) Yet again, because of profile stance, the shirt's neck cannot be in the center. I moved it a bit to the right and made it wider for better proportions.
    7) You character didn't have boots or shoes. By changing the last row of colors, it makes so he's actually wearing something.
    8) He didn't have a mouth either. That's a bit subjective but I feel its better to have one. (else he will starve, poor guy)

    9) Ok now the fun part. The shading. For a start you should always roughly decide where to put the shadows and were to put the light. Its easier to start by deciding on 3 shades for each color (shadow/base/light). I personally start by the shadows because I find it easier to place it first compared to lights.
    10) Now I added the light too. Notice that I have given the hair a color. Hair is never exactly black, you can have some "reflecting" color on your black. Personally I like blue reflects.
    11) Now to make the character look less blocky and more soft, its always good to leave the black color only for the outline of the character. Hell you could even remove all the blacks and only use the corresponding dark colors for contours. This one is with black contours.
    12) This one is an extra personal shade of my liking. I fixed the ear by making it more visible, retouched some lights and shadows, remove the black outline (only dark colors now) and gave him a belt! :)
     
    Last edited: Aug 4, 2017
    0042, Kobold, Abdulmatin and 8 others like this.
  16. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    So been practicing on not using so much black on my pixels. . . thoughts or suggestions?

    [​IMG]
     
  17. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,587
    Well, that's a perfectly valid Apple.
    I'll pixel my own version tonight for fun.
     
    Blakkid489 likes this.
  18. gamedev4life

    gamedev4life Member

    Joined:
    Jun 22, 2016
    Posts:
    152
    for the apple, make the shadow on the left more darker, you need to increase the contrast
     
  19. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    I was considering that really. It did bug me a bit but wasn't 100% sure on the shade
     
  20. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    I went ahead and darkened the apple shadow a bit (I think). Also here are my other tryouts.

    [​IMG]

    I'm not digging the strawberry too much. In fact I'm still not satisfied with it.....
    Each fruit is 24x24 (banana is 32x32)
    I used the program Pyxel Edit to make these and used an nes palette I found on the internet.
     
    Cpaz likes this.
  21. FrostyCat

    FrostyCat Member

    Joined:
    Jun 26, 2016
    Posts:
    4,306
    The strawberry looks off because the seeds aren't shaded the way the rest of the berry is, and the berry is missing its highlights.
     
  22. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    807
    This is already 10x better than your original sketch:)

    Now you should add some shading and your sprite will look good
     
  23. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    So I took a crack at techniques and redesigned my character and animated him myself
    [​IMG]
     
    sitebender, Cpaz and Rivo like this.
  24. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,587
    Your running character there is infinitely better than the first time you draw that main character of yours! Keep up the practice!!

    Oh and here a couple of fruits, keeping my promise and I decided to redo the orange also...

    [​IMG]

    I think they are a great example because the apple's shape is hard to convey. It hard to not make it look like a cherry or a tomato. Even my apple there isn't cool enough to my own taste. But that's the beauty of it, we all improve.
    For the orange, notice how I created "imperfections" on it. Telling the eye that the skin is irregular and giving it much more style. I am pretty happy with how that orange turned out.
     
    Cpaz, IndianaBones and Rivo like this.
  25. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    I see. . . .that orange is very nice. I definitely need more practice. I was actually going off an image i seen and did my best to recreate it in pixels. That goes for all fruits. That detail you have on the apple and orange is close to an actually fruit lol (in my opinion)

    I spent 4 hours on that running animation because I was trying my best keep things natural. That could be better, but at the same time I'm pretty satisfied with the results
     
    Cpaz likes this.
  26. Ampersand

    Ampersand Member

    Joined:
    Jan 30, 2017
    Posts:
    216
    Good advice. I know a lot of good pixel artists that started off by making pokémon edits. Most of pixel art is not drawing skill, it's just a bunch of tricks and rules you teach yourself for desired shapes. Can't think too much about lines, think about shapes and their textures and curves.
     
  27. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    I tried to recreate the waterfall from Earthbound.

    [​IMG]
     
    Chris S., Rivo and Niels like this.
  28. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    I need help with this one. This is quite cringe worthy to look at so please send advice this way

    [​IMG]
     
  29. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,587
    There's something I guess could help. You should start by making a canvas character and then draw ALL your characters from it.
    Its much easier to have a consistent quality and art style for the same game. If you look at the cast from The Life Ruby, notice how they basically are all made with the same logics, same canvas.
    I drew the main character over my canvas (not much different) and then all others are modifications of that main character.

    [​IMG]

    I hope it inspires you. When you're not an experimented artist, strategy is important!
     
    Ninety likes this.
  30. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    What do you mean by canvas? I have a layout (or outline) for the style of characters I want. I just. . . .shading. . . .shading is. . . .just. . . .NOT my strong point.
    My understanding of it is non-existent. I think if I understood that concept, then I would probably nail this a little better
     
  31. Ampersand

    Ampersand Member

    Joined:
    Jan 30, 2017
    Posts:
    216
    Will edit this in a moment with some tips and a sprite edit. But to begin with: pillow shading is a no. Single pixel shading on one side rarely works even in very small (16x16) graphics. Decide on a light source. Cel shading is a good technique to learn, you assume a general broad light source on either the left or right and assume it is only just a little closer to you than the sprite is. Will edit shortly.

    Edit:
    [​IMG]
    A, D: Using shading to create lines that are not a part of the base shape, implying folds
    B: Undershading to help imply the brim's depth
    C: Light source, just in front of and to the right of the wizard
    E: Back arm entirely shaded to imply depth
    F: Always make a palette. If the colors don't look good in blocks next to each other, they won't look good in a pile of pixels
    G: A 1:1 of the sprite

    Hope this helps. I'm not the best pixel artist myself, and it's frustrating because I'm a good illustrator. Most of pixel art isn't about literally making what you're trying to make, it's often about making implications about shapes and trying to convince the eye there's something more going on than a few colors mushed together.

    Double edit: I still do not understand why these forums fuzzify every clean image I post here, regardless of where I upload it :(
     
    Last edited: Feb 23, 2017
    IndianaBones and Blakkid489 like this.
  32. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,587
    What I meant by a canvas is having a base character, per example mine is this:

    [​IMG]

    Notice I have put my Hero character right beside its canvas. I have 3 frames for walking, a "generic" skeleton to create all my characters from the game.
    With a canvas like this (that you are happy with) you can create tons of characters pretty fast just by modifying the canvas a little and all your characters will also look homogenic as "belonging to the same game".
     
    Last edited: Feb 24, 2017
  33. if shading truly isn't your strong suit. you could try my route and get a sprite drawing app ( I used Pixly on the android store, but try out a couple and see which one you perfer) then get a stylus (fine point ones tend to work the best for me) and just practice drawing and shading your characters. The best part of the app that im using is that it can be saved to google drive and if your collaborating with a team they can have instant access to it

    Before:
    Game_ScreenShot4.png


    After:
    Game_ScreenShot5.png
     
  34. Thexel PIN

    Thexel PIN Member

    Joined:
    Feb 10, 2017
    Posts:
    97
    [​IMG]

    I would like some critique in this one. If you wonder about the hair and the movement, she is standing on a train in movement.
     
    sitebender and Blakkid489 like this.
  35. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,587
    Is there wind? Because the back hair and right side white sheet on the dress really are conveying that there's wind.
     
  36. Blakkid489

    Blakkid489 Member

    Joined:
    Jun 30, 2016
    Posts:
    257
    This was. . . quite interesting to read through XD. I appreciate the help all the same though.

    Side note: @Ampersand , I noticed your signature and thought I've seen this game before. In fact I think its the same game I was following in old forums. . . i think the last version I played was 0.1.6. The art was different though. it's more refined now.

    So here's what I got after reading and trying to do it myself when it comes to shading

    • Understanding where the light source is hitting the image
    • Use slightly darkened lines to display detail
    • Limit my palette so my colors aren't all over the place
     
    Cpaz likes this.
  37. JackTurbo

    JackTurbo Member

    Joined:
    Oct 19, 2016
    Posts:
    821
    While I certainly dont consider myself a pixel art expert, I do think I'm fairly reasonable at it.

    Personally I dont like making palettes at the start, unless I'm carrying one over from a completed sprite for consistency's sake. I prefer to experiment with colour as I go. I do however define the number of colours relatively early in my process.

    A good technique that I've developed for this is to work out how much space a colour is going to take up and decide on the number of shades it'll have based on that.

    For example look at my avatar, when I made that I knew the orange would be dominant over the white so I decided to go with three shades. where as the white only has two. I feel that this helps keep the piece coherent.
     
  38. Ladi_Pix3l

    Ladi_Pix3l Member

    Joined:
    Jul 9, 2017
    Posts:
    324
    I'm learning how to pixel art myself. . . .
    [​IMG]

    My older brother gave me his honest opinion and said it was trash to say the least so I know I've got lots of practice coming my way lol
     
  39. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,587
    For a starter this tree is actually pretty good! I've seen worse tress in pro games!
     
  40. SnotWaffle Studios

    SnotWaffle Studios Member

    Joined:
    Jun 21, 2016
    Posts:
    272
    [deleted]
     
    Last edited: Feb 21, 2018
  41. RichHopefulComposer

    RichHopefulComposer Member

    Joined:
    Jun 20, 2016
    Posts:
    1,372
    Which "pro" games are you thinking of?
     
  42. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,587
    I've played a shockfull lot of NES, Master System, GameGear, Gameboy, SNES, Genesis, TG-16 games.
    Fact is alot of awful looking games have been released there. Some with horribles trees. I can't possibly start tracking this now just to answer your question.
    I would actually be surprised that you find his tree so crappy looking that you can't tell if you've seen a game with worse graphics...
     
  43. RichHopefulComposer

    RichHopefulComposer Member

    Joined:
    Jun 20, 2016
    Posts:
    1,372
    I'm honestly surprised you can't think of even one example off the top of your head, despite your confident claim. :p

    Not disparaging his art, but I think "looks better than some pro stuff!" is a bit of a stretch. It's probably one of his first pixel art pieces. Why would it be surprising that it's no match for even lower professional work?

    And if you're counting ****ty games from thirty years ago that just had the programmers slapping art together as "professional artwork," then what's the point of even mentioning it? It becomes completely meaningless at that point. I dunno. Just doesn't make much sense to me.

    @Ladi_Pix3l: You should try drawing a tree from reference using pencil and paper. Look hard at your reference photo, and try to find four or five distinct shades from light to dark on your reference. Instead of "drawing a tree," look for those abstract shapes, and then try copying them down on your paper. You don't even need to use lines, unless they help you plan out your drawing. Try creating a drawing using flat areas of color, based on the abstract shapes you can find in your reference photo, kind of like doing a "paint by numbers," except you have to decide what the shapes and shades are yourself. Then do the same for your pixel art tree. It'll look a thousand times better. Drawing traditionally from reference will teach you a lot more than just saying "I want to do pixel art!" and trying to cook up a tree from imagination. Everyone needs to consult references to build a mental library. Try drawing a tree on paper using the method I described. Take just twenty minutes or a half hour of your time. I bet you'll be really pleasantly surprised at what you can do.
     
    Last edited: Aug 3, 2017
  44. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,587
    This I can agree with.
     
    RichHopefulComposer likes this.
  45. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,460
    I would say it's easier to first draw blocks of a medium color, then add lighter highlights and darker shadows to them. Some people prefer outlines, but I like how the block-and-detail way adds more room for "happy little accidents". The creative process gets easier if you can focus on being creative, and outlines feels like just wasting energy on an inane task a lot of the time... you can usually get decent outlines if you use the outline tool and then manually polish it a bit with much less time spent on it, and for small sprites outlines easily just make the sprites look cluttered, unless you're doing stuff in 8-bit and your outline also doubles as shading.
     
  46. Wayfarer

    Wayfarer Member

    Joined:
    Jan 3, 2017
    Posts:
    188
  47. RichHopefulComposer

    RichHopefulComposer Member

    Joined:
    Jun 20, 2016
    Posts:
    1,372
    I use sketch lines and blocks of colors, depending on what's easiest for whatever I'm working on. I almost always paint over the lines instead of "coloring in" my drawings, though. The finished outlines on a drawing are usually what gets done at the very end for me.

    Edit: Also @Blakkid489: The logo in your signature reads as "HearHess Dream" at first glance. Might want to change it a little!
     
  48. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,587

    I re-uploaded the images in my most important post in this thread. Could be useful for people making some 8-bit/16-bit looking pixel art.
     
  49. 0.Bytes

    0.Bytes Member

    Joined:
    May 25, 2017
    Posts:
    106
    Wow you made a lot of progress since your first pixel art,

    Loving this topic, some good tips I didnt know !
     
  50. RichHopefulComposer

    RichHopefulComposer Member

    Joined:
    Jun 20, 2016
    Posts:
    1,372
    pixelation.org, pixeljoint.com
     

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