1. Hello Guest! It's with a heavy heart that we must announce the removal of the Legacy GMC Archive. If you wish to save anything from it, now's the time! Please see this topic for more information.
    Dismiss Notice

Graphics Help Me Improve My Sprites

Discussion in 'Game Design, Development And Publishing' started by Red Phantom, Sep 12, 2019.

  1. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    176
    Here is the history of change of my character:

    [​IMG]

    Despite everything else being in 2D, I've noticed 2D platformer games still have the character in an isometric view. So I'm going to put the characters in an isometric view because they look a lot better that way.

    Do you agree?
    How could I improve my final character?
     
    Rizlad, Niels and Zuurix like this.
  2. Siolfor the Jackal

    Siolfor the Jackal Member

    Joined:
    Jun 21, 2016
    Posts:
    788
    Final image looks the best to me.
    Not sure if this would help, but I would make the shading areas a wee bit darker and add some highlights.
     
    Zuurix and Red Phantom like this.
  3. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    176
    Thanks Siolfor the Jackal, advice taken! Here's the change, looks good to me, how about you all?
    (face highlights seem a bit intense but don't worry it looks better when the image is smaller which it is in game)

    [​IMG]
     
    KPJ, Siolfor the Jackal and Zuurix like this.
  4. Siolfor the Jackal

    Siolfor the Jackal Member

    Joined:
    Jun 21, 2016
    Posts:
    788
    I think it looks great, character feels a lot less flat now. Good job.
     
    Red Phantom likes this.
  5. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    828
    Looks great, you are improving really fast!
    2 more tips:
    -make the characters colors a bit more brighter to make it pop out (not more saturated, but just brighter)
    -the pose could look more natural (upper slightly bend back, lower part of left leg slightly bend back)
     
  6. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    176
    Thanks Siolfor the Jackal and Niels : )

    'Ross' on TIG Forums:
    https://forums.tigsource.com/index.php?topic=68504.0
    suggested a few more changes.

    "
    That's pretty awesome progress. A couple more suggestions:
    • Is the character a zombie? If he is, it's fine, but if not I would make his skin colors less green.
    • A little bit less "lightbulb head" syndrome.
    • A nose?
    • Add hair to the temple/sideburn area.
    • Cut down the top of the chest a bit, so it doesn't look like he has a stick up the front of his shirt. If you look at a person you'll see that the shoulders are high at the back of the neck, while the chest slopes down in the front. It's not symmetrical front-to-back. (Actually my version is pretty symmetrical, but at least it's closer to correct.)
    "

    2nd image - applied Siolfor the Jackal 's suggestions.
    3rd image - applied 'Ross's' suggestions.
    4th image - +5 value for everything except outline and pants. Clear hamstrings and arch in back.
    5th image - further +5 value for everything except outline. Added a pixel to the lower back to make it look a bit better.
    [​IMG]

    Niels for some reason the lower slightly lower value (3rd image value) looks best to me, perhaps I applied the value changes wrongly though.
    Also the arch in the lower back in the 5th image looks best to me, but I don't like the change to the legs, perhaps I also did that wrong.

    What do you think?
     
  7. Siolfor the Jackal

    Siolfor the Jackal Member

    Joined:
    Jun 21, 2016
    Posts:
    788
    That's some good improvements, dude. I think what I would do is take the shape from the third image and instead of removing pixelsfor the lower back, add some for a butt. Should achieve the same effect in the last image but less weird looking.
     
    Red Phantom likes this.
  8. HayManMarc

    HayManMarc Member

    Joined:
    Jun 21, 2016
    Posts:
    939
    Hey, Red Phantom! I've been watching your progress for a while now, and your work keeps improving. Good job, and bravo to you for taking the criticism and suggestions so well!

    I just wanted to say that I've never been a fan of black outlines, but I understand it's a style choice. Notice the hair behind the ear... Looks like the black outline gets thicker because of how dark it's shaded. You might want to lighten up that shading.

    Also, the right eye (the character's left eye) could lose one pixel of width to give some depth to the face. I would replace the right-side of the eye with skin color, making the right eye 2 pixels wide instead of three.

    Also, perhaps round the top of the head a bit more so he doesn't look like an octagon-head.

    Most people don't point their feet exactly straight ahead, so maybe make the left foot (his right foot) look like its coming straight towards the camera more.

    With my cartoon characters, I usually leave the shirt untucked, so letting the shirt width be wider than the pants by a pixel. I don't think making the back arch is necessary for this small of a character sprite.

    I'm not so sure about those knobby knees, but that may be a style preference.

    His left hand looks too big to me (because of depth). Maybe make it one pixel smaller and see if that helps... or just move it back behind the character (to the left) one pixel.

    One more thing, the eyes are still kinda bugging me. It's like an optical illusion... whether you consider the white part his pupil or the black part. With such a small canvas, you can get away with removing the "whites of his eyes" altogether, if you wanted to. But again, that might be a style preference.

    Anyway, again, nice progress with your adventures in pixel art! Well wishes to you and keep at it! You will only ever improve!
     
    Last edited: Sep 30, 2019
  9. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,127
    That’s exactly what I would say.

    Looking good. Details are important.
     
    Red Phantom likes this.
  10. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    176
    Thank you both.

    I tried lightening up the outlines and I personally didn't like it. My personal preference/style choice is darker outlines.

    I lightened up the shading there.

    I tried this, it did give the face an impression of depth however, the different in width of the eyes looked peculiar and in-consistent, I didn't like the overall look and decided against it.

    I agree, done.

    It is easier to animate a character that has his legs pointing in the same direction. So I decided against this.

    Yes great idea. I agree with the shirt idea and yes it isn't necessary to make the back arch in such a small pixel space.

    I agree, they stand out too much in a negative way and aren't very appropriate in such a small pixel space again. Also it doesn't make sense to shape the legs too much unless he is wearing tights pants, which he is not. Rather I left a subtle impression of knees with a bit of lighting.

    I agree, I moved it left 1 behind the character.

    I see what you are saying, however I don't think many people will look at the eyes for as long as you have ---> "Whether you consider the white part his pupil or the black part." --> To me it doesn't matter, they look like eyes and they look good to me. I did try removing the whites of his eyes, leaving his eyes completely black but it didn't look good at all.

    Thank you for your kind words of encouragement, I appreciate the feedback.
    [​IMG]

    If anyone has any further suggestions to improve the character please say so.

    Also, please give me feedback on the graphics in these scenes in my game:

    Hell/Intro

    [​IMG]

    Graveyard
    [​IMG]

    City
    [​IMG]
     
    Siolfor the Jackal likes this.
  11. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    176
    Please give me feedback on the graphics in these scenes in my game:

    Interior of Houses:
    [​IMG]


    Water Path:
    [​IMG]

    Laboratory Interior:
    [​IMG]

    PSI Building Interior:
    [​IMG]



     
  12. Sean Catherine

    Sean Catherine Member

    Joined:
    Nov 10, 2017
    Posts:
    193
    My advice to anyone doing "pixel art" would be first be to find out where on the continuum of abstraction and representation you want your aesthetics to land... In your case —given that you are going for simple highlights/shadows (dimension)— try the following.
    Blow this guy up to 16 times his current size. If his sprite size is not even, adjust the canvas to a size multiple of 16 (and then blow him up).
    Create another blank layer on top of that blown up image.
    Get a drawing tool that is 16 pixels and draw any and all outlines in your preferred color, then proceed to fill in all of your solid colors.
    Make yourself another blank layer on top of that and color in black in the areas where your want shadows to go. Color in white where you want highlights to go. Blur these at about "20x Box."
    Shrink the entire sprite down to the size it was originally.
    To review the changes, make invisible the original blown up layer of the guy.
    Doing this may reveal a lot more precise subtitles in his appearance as apposed to the screwdriver work you're doing right now.
    If you really want a cool pixelated look with more nuance in the outlines, Surround your guy with the selector tool and blur him at like "x4 Box," before shrinking (the layer that you did the new outline and fill-in colors).
    When dealing with the highlights/shadows layer, don't forget that you'll be able to adjust opacity to get a desired look.
     
    Last edited: Oct 2, 2019
    Red Phantom likes this.
  13. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,127
    Last edited: Oct 2, 2019
  14. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,127
    I read a couple times and still cant get my head around it. I will have take some time later and try and get what your trying to do. But looks interesting!!!
     
  15. sitebender

    sitebender Member

    Joined:
    Sep 13, 2016
    Posts:
    840
    I took a closer look at the latest set of photos on the bottom.

    - Shift your hues. So it's not just red with darkness shifted. It makes everything look better. Especially when you have the back wall hue the same as the solid walls. They can be similar hues, but not exact.
    - Get your pixel art on a grid. Are you using a tileset for these?
    - Are those paintings or windows. I assume windows. Maybe they're eyelids and the outside of this location is a face?
    - Everything is much taller than your door. Perhaps the structure has a single slope of a roof rather than double sloped roof like the common method for roofing?
    - Lower the ceiling, raise the floor. Dark boxes.
    - Make a floor, brick floors are pretty rare. Brick ceilings are too. Even if a building is make out of brick, there tends to be something as a floor. I assume you're going for realism and not Mario.
    - Look how giant those tables and laptops are. I am going to guess it's a tech building that has brick walls?
    - Those are some dark cracks in your back wall. Keep dark lines for outlines. Soften up anything that a player can pass through.
    - Add rafters, beams, supports, wires to tighten up unused space.
    - Be mindful of where your light is in this case above. Some of your crate shadows originally made it look like the light was both top left and top right.

    This might be too bright, but well... there are lights.


    [​IMG]

    Speaking of too bright:

    [​IMG]
     
    Last edited: Oct 2, 2019
    Red Phantom, Calvert and Toque like this.
  16. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,127
    The lava hand animation is a cool idea. Fingers are too small and short for me. They are reaching and grabbing. Extend them out. Maybe its not human??? It has six fingers...... but maybe its not human??
     
    Red Phantom likes this.
  17. Sean Catherine

    Sean Catherine Member

    Joined:
    Nov 10, 2017
    Posts:
    193
    I have a useful set of screenshots to upload, but I keep getting an error message (how did I do this in the past)? :)
     
    Red Phantom likes this.
  18. Raonak

    Raonak Member

    Joined:
    Sep 28, 2019
    Posts:
    8
    I must say, it's quite neat watching you improve your art style bit by bit.

    something which i've found with pixel art... is to avoid using thin black outlines for everything.
     
    Red Phantom likes this.
  19. sitebender

    sitebender Member

    Joined:
    Sep 13, 2016
    Posts:
    840
    Is this blinding anyone else?

    [​IMG]

    - I don't know what kind of lab you are going for, but I recommend image searching labs to give you different inspiration. When I see your laboratory I can make an argument that it's a classroom.
    - Microscopes, beakers, big test things, sterile environments, glass, waist high tables will help give a feeling of laboratory.
    - Tighten up your ceiling and floor unless there is a 2 story lab that houses dinosaurs.
    - Ugly colors in general. 50% of what's going wrong here.
    - That checkerboard pattern is super ugly, is it to simulate darkness over yellow without using alpha? If you need to do a checkerboard, make it larger so the checkers blend in less together. It looks like you're trying to keep everything to a certain scale with doorways and bricks, but you can make an exception. In the case of art, style over realism.

    [​IMG]

    Brightness might kill the mood. Maybe you meant high school science lab and not industrial laboratory? I tried to keep the ceiling height the same to show there's something other than "lower the ceiling, raise the floor." Nothing says spooky like orange doors and glass! I should have probably dimmed all colors, but I assume labs are bright, until the lights go out. Less detail also seems to take away from the realism.

    [​IMG]

    [​IMG]

    I should also mention that a sprite would be any moving art like Mario and Goombas. Most of the art you're showing off should all be tilesets and backgrounds, which are static art that you can tile so you don't have to make an entire giant image, you can just use 16 x 16 tiles or whatever size you prefer. Like Nintendo / Super Nintendo.
     
    Last edited: Oct 4, 2019
    Toque, Rayek, pixeltroid and 2 others like this.
  20. vdweller

    vdweller Member

    Joined:
    Jun 24, 2016
    Posts:
    135
    This might sound like Dropping the Manual then leaving, but...

    1) Go to Pixel Joint and study the art there. Weekly challenges are also a great place to learn, as they make some very clever use of whatever limitations each challenge may have.

    2) This is also good, discovered it recently:
    https://blog.studiominiboss.com/pixelart

    If nothing else, it's fun to browse and watch :)
     
    Red Phantom and Rayek like this.
  21. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,960
    upload_2019-10-12_19-52-44.png
    Mostly fine, but those pillars are indistinguishable from walls, and the pure white lamps stick out and kinda hurts your eyes.


    upload_2019-10-12_19-53-36.png
    This thing just hurts my eyes, get rid of that 1x1 pixel grid instantly. You've sucessfully replicated one of the worst things that could be achieved with CGA graphics: retina-burning dithering.


    upload_2019-10-12_19-54-53.png
    It's obvious you started with a brick wall and then drew strokes of a single color all over it. Add in some more brick-lines so the transition between full brick and single color is smoother.
     
  22. NeutronCat

    NeutronCat Member

    Joined:
    Mar 9, 2017
    Posts:
    20
    Tried to draw my own version of the first image. (Not enough space for some stuff though)
    It's a good learning process for me!
    out.PNG
     
  23. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    828
    Also have you thought about giving your player character a unique visual characteristic? Right now it's just a guy. (unless that's what you are going for)
     
    Red Phantom likes this.
  24. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    828
    During my lunchbreak I had some time browsing the forum and decided to draw my suggestions instead of typing them out:

    Things I changed:

    -Color saturation (Player character shouldn't blend in with the background)
    -Stance, gave him a more energetic stance, like he is ready to take on any challenge you will throw at him.(notice how your version has a very closed body language)
    -Some proportional edits (these are just a matter of taste ofcourse).

    character_gamemakerforum.png
     
    pixeltroid, Rayek, Toque and 5 others like this.
  25. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,127
    I wonder if a trench coat would add to the character?
     
    Red Phantom likes this.
  26. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    176
    Thank you Sean Catherine for your great suggestion. I tried to understand it and try it but it went completely wrong.

    Like Toque I wasn't able to understand the process.

    Thanks for pointing that out Toque. I might leave it for now and possibly come back to it later.

    Thank you so much sitebender, for not only the amazing suggestions but the amazing edits as well! I seriously appreciate the time and effort you took to do this for me. I will be going with these superb edits. I love the changes to the: doors, floor, ceiling, side-walls, crates, vases, lighting and everything else. Thanks : )

    Thanks Toque, I'll make the fingers a bit longer. Indeed you are correct, I deliberately gave it 6 fingers so that it's a bit strange and non-human.

    Sean Catherine there are two methods I use to upload images:
    1. click 'upload an image'
    2. upload an image to imgur,, copy the direct link to the image in imgur then go back into GMC page and click the 'Image' icon in the toolbar when creating a post/reply, and paste the direct link to the image there

    Thank you for your kind words Raonak, I will take your advice : )

    Thank you again sitebender. Yes I agree the background I had is blinding.
    I appreciate your edits very much and will probably be going with the green/purple (final) image. : )

    Thanks vdweller. The link you sent has some amazing content, I have saved it to my favourites bar and will definitely be using it a lot to learn!

    Thanks Yal, I will take your advice.

    I really like your version NeutronCat and I think it's pretty great. In particular I love the: ceiling, floor, side-walls, spider-web, lights and bed. I like your edit of the character too however, I won't be using that mostly-front-isometric-view perspective of the character in my game I am using a different angle/perspective where the character is more to the side (yet still an isometric perspective).

    These are good suggestions Niels and Toque however, for now I want him to seem like a regular guy, in a sequel to the game (if I ever get there) his appearance changes a lot and is more interesting.

    I think a lot of people would agree that your edit Niels is quite superb and is indeed a further improvement. I will likely be going with it, with some minor tweaks that I will do like removing: the overhanging hair on the right and giving the eyes less height making them look sharper and more keen. Thank you for taking the time to do this edit though, I appreciate it.

    Apologies to everyone for the very slow response.

    Now I currently have my work cut out for me and am trying to update all the visual changes and release a new demo : )
     
  27. babfoxj

    babfoxj Member

    Joined:
    Dec 28, 2017
    Posts:
    9
    That is amazing! How long have you been practicing pixel art?
     
    Red Phantom and Niels like this.
  28. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,127
    Glad you keep pushing forward. Good for you. Most people get stuck and quit. You can always move forward on other stuff too and come back to the art.

    Looking great.
     
    Red Phantom likes this.
  29. sitebender

    sitebender Member

    Joined:
    Sep 13, 2016
    Posts:
    840
    Back to your water path. Is that a beaver dam spaceship?

    I figure this one would be the toughest to nail down since that beaver dam has a lot of abstractness rather than NES made to fit tiles.
    - Is that a bridge? What's holding it up? Get some supports. Even a hanging light.
    - What's that red pile next to it? Dust or bricks? Saw dust? Red dust?
    - Needs less colors as always.
    - Is the beaver damn made out of sticks or books? I assume sticks, but you need branches hanging off, even if beavers would eat those branches off. You might want to have a less defined parts,
    - Calm water is always realistic, but... is it video game? Put the video into video game by having water chop, even if slightly or just add a murky reflection.
    - Your background is empty and vacant.
    - Is the beaver damn on the deck?
    - Conform to the grid, a lot of your stuff such as the deck is at the bottom of your grind lines 16 x 16 rather than at the top of the grid. Sure you can do it either way, but it's traditionally at the top.
    - Stripe pattern for water? Not sure about that.

    Well this was perhaps the most challenging re-art since that Bieber dam. Mine was apparently made by giant muskrats. Go big or go home I guess?

    [​IMG]

    The "happy" version

    [​IMG]
     
    Last edited: Oct 25, 2019
    Red Phantom and Yal like this.

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