• Hey Guest! Ever feel like entering a Game Jam, but the time limit is always too much pressure? We get it... You lead a hectic life and dedicating 3 whole days to make a game just doesn't work for you! So, why not enter the GMC SLOW JAM? Take your time! Kick back and make your game over 4 months! Interested? Then just click here!

Pixel Art Training

B

Blakkid489

Guest
Trying to improve on my art skillz and I think Im heading in the right direction. . maybe



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
 
pixeltroid

pixeltroid

Member
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.
 
F

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!
 
B

Blakkid489

Guest
pixeltroid said:
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.
Click to expand...
Ill try that. Megaman is actually a great sprite to trace over

ForgePlays said:
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!
Click to expand...
Thats pretty small.. .Is it possible to design a game around with so little detail?
 
F

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!
 
B

Blakkid489

Guest
Okay. . .I went ahead and did 20x20 version of the "new image" without any shadows (yet)

(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
 
F

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.
 
  • Like
Reactions: Yal
B

Blakkid489

Guest
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?
 
D

DariusWolfe

Guest
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.
 
B

Blakkid489

Guest
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:
 
Cpaz

Cpaz

Member
Blakkid489 said:
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?
Click to expand...
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.)
 
fawf

fawf

Member
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.
 
csanyk

csanyk

Member
Blakkid489 said:
Okay. . .I went ahead and did 20x20 version of the "new image" without any shadows (yet)

(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
Click to expand...
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.
 
RangerX

RangerX

Member
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.



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:
G

gamedev4life

Guest
for the apple, make the shadow on the left more darker, you need to increase the contrast
 
B

Blakkid489

Guest
I went ahead and darkened the apple shadow a bit (I think). Also here are my other tryouts.



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.
 
FrostyCat

FrostyCat

Redemption Seeker
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.
 
Niels

Niels

Member
Blakkid489 said:
Okay. . .I went ahead and did 20x20 version of the "new image" without any shadows (yet)

(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
Click to expand...
This is already 10x better than your original sketch:)

Now you should add some shading and your sprite will look good
 
RangerX

RangerX

Member
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...



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.
 
B

Blakkid489

Guest
RangerX said:
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...



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.
Click to expand...
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
 
A

Ampersand

Guest
pixeltroid said:
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.
Click to expand...
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.
 
B

Blakkid489

Guest
I need help with this one. This is quite cringe worthy to look at so please send advice this way

 
RangerX

RangerX

Member
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.



I hope it inspires you. When you're not an experimented artist, strategy is important!
 
B

Blakkid489

Guest
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
 
A

Ampersand

Guest
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:

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 by a moderator:
RangerX

RangerX

Member
What I meant by a canvas is having a base character, per example mine is this:



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:
M

MicroFireStudios

Guest
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
 
RangerX

RangerX

Member
Is there wind? Because the back hair and right side white sheet on the dress really are conveying that there's wind.
 
B

Blakkid489

Guest
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
 
JackTurbo

JackTurbo

Member
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.
 
Ladi_Pix3l

Ladi_Pix3l

Member
I'm learning how to pixel art myself. . . .


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
 
RangerX

RangerX

Member
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...
 
RichHopefulComposer

RichHopefulComposer

Member
RangerX said:
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...
Click to expand...
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:
Yal

Yal

🐧 *penguin noises*
GMC Elder
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.
 
RichHopefulComposer

RichHopefulComposer

Member
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!
 
RangerX

RangerX

Member
RangerX said:
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.



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! :)
Click to expand...

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.
 
0

0.Bytes

Guest
Wow you made a lot of progress since your first pixel art,

Loving this topic, some good tips I didnt know !
 
You must log in or register to reply here.
Top