AuthorTopic: [GUIDE] 10 Steps You'll Need to Follow to Get Better At Pixel Art  (Read 5658 times)

Offline James Ball

  • 0001
  • *
  • Posts: 15
  • Karma: +0/-0
  • Creating pixel art for any needs required!
    • View Profile
    • Pixel Art Gallery
Hello,

I've made a really helpful guide for inexperienced or new pixel artists looking for how they can improve at pixel art.
It covers everything from picking the best color palette you possibly can to general practices outside of creating big pieces so that you can passively improve!

The post can be found here: http://www.pixelartgallery.net/10-steps-youll-need-to-follow-to-get-better-at-pixel-art/

Some steps indicated in the post could even be of use to more experienced pixel artist that maybe haven't had all the practice they should have or need a refresher on pixel art essentials.

I'd be really happy if you could check it out and tell me what you think in the comments below :)

Thanks a lot, and if you like the post, be sure to share it!
James Ball - Pixel Art Gallery
James Ball - http://pixelartgallery.net/ - jamesball@pixelartgallery.net - @lolface5000

Do you need custom pixel art for your project? Contact me above ^ and visit my portfolio on my website: http://pixelartgallery.net/portfolio/ Thanks!

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile
While there are several steps I strongly agree with (steps 1, 8, 9)
, there are also steps that make significant omissions or include wrong 'facts', and others which do not appear to communicate meaningfully:

* step 5: "those featured on a 256-color display" -- Firstly, *any* colors can be displayed on a 256-color display[1]. The only restriction is that only 256 colors may be displayed at once.
* step 5: "or and 8-bit-depth color chart" -- what do you mean here? Each 8-bit platform had different color restrictions (and, ironically, most 8-bit platforms did NOT have 8-bit color or palette; they usually had less.)

* step 7: while the basic understanding of line structure is excellent, the failure to mention anti-aliasing at all is a glaring omission, as with anti-aliasing, 'awkward'/chunky line patterns such as the one marked with red Xes can easily be made to look good; this is important because you can't always get ideal angles on everything (and arguably because certain rendering styles outright require antialiasing)

* step 2: You state a difference between 'flat' and 'depth' shading, but do not define precisely what these terms mean. As an experienced artist, I can understand what is going on in the image below, but this is not a reasonable expectation for a new pixel artist. The crucial information that is omitted, IMO, is that what you call 'depth' shading  involves establishing the location of the light source in 3d space, understanding the 3d forms of the object you are drawing, and lighting those forms according to the relationship between the angle of each face and the location of the light source.

* step 3: Interesting point. IMO it needs some reference to prioritization. Is the scar really an important element, or does it just need to be somewhat legible? Personally I would suggest that elements that need priority are those that move a lot, for example if your character has large flappy clothes, the resolution needs to be high enough to resolve them; whereas a necklace or earring has limited motion and can be expressed adequately with a handful of pixels. If their expression is important, they need enough pixels to resolve that clearly. This may involve a trade-off in proportions (eg. sprites in early Final Fantasy games heavily distorted body proportions, rendering characters with a huge head and tiny body).

* step 4: True. I was surprised you didn't reference the importance of silhouette though, as this is an even more fundamental guideline than greyscale values : 'if you can't tell what is happening just from the silhouette, it's probably a poor design'

* step 6: 32bit color is mostly not a real thing. Modern displays generally have 24bit color[2], ie 16.7 million colors; the additional 8 bits in so-called '32bit color' is used for alpha, which does not provide additional colors, only controls blending.

* step 10: "The more you avoid tutorials, the more your pixel art will have its own style of its own and stand out to other artists in the same area.". To be blunt, this is a poor reason to avoid tutorials. A better reason is that you need to learn to analyze things for yourself, as the quote states. Tutorials are a fine resource IF you take the time to break down why they are doing what they are doing, and how it fits into your overall aim.

I hope this feedback was helpful.

[1] to be precise, an old (VGA or MCGA) 256color display with a 18bit DAC was capable of displaying any 256 out of a total of 262144 colors (64 * 64 * 64 -- 64 levels each of R,G,B). For a pixel artist, this is essentially indistinguishable from what you can get out of newer 256color displays which have a 24bit DAC (any 256 out of 16.7 million colors (256 * 256 * 256 -- 256 levels each of R,G,B))
[2] There are some that provide >24bit color, but these are generally specialist displays, not mainstream consumer items.
« Last Edit: October 18, 2015, 08:55:15 am by Ai »
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline James Ball

  • 0001
  • *
  • Posts: 15
  • Karma: +0/-0
  • Creating pixel art for any needs required!
    • View Profile
    • Pixel Art Gallery
Thank you so much for the helpful reply
James Ball - http://pixelartgallery.net/ - jamesball@pixelartgallery.net - @lolface5000

Do you need custom pixel art for your project? Contact me above ^ and visit my portfolio on my website: http://pixelartgallery.net/portfolio/ Thanks!

Offline James Ball

  • 0001
  • *
  • Posts: 15
  • Karma: +0/-0
  • Creating pixel art for any needs required!
    • View Profile
    • Pixel Art Gallery
Updated with lots more accurate points :)
James Ball - http://pixelartgallery.net/ - jamesball@pixelartgallery.net - @lolface5000

Do you need custom pixel art for your project? Contact me above ^ and visit my portfolio on my website: http://pixelartgallery.net/portfolio/ Thanks!

Offline astraldata

  • 0010
  • *
  • Posts: 391
  • Karma: +1/-0
    • View Profile
    • MUGEN ZERO
I looked over your tutorial and, while it makes a lot of good attempts at explaining the issues with pixel art for a beginner's struggles, it doesn't do enough to explain the reasons behind those struggles. My feeling is that it's clear you're only just past the point of constant struggle.

I know it's exciting when you finally reach a point where you understand (somewhat) what it was you were doing wrong all that time and how to somewhat fix it because you've now got the ability to finally verbalize it to others, but it's best you be careful not to offer other beginners a red-herring unintentionally because, even as a moderately-skilled pixel artist, you are still unsure somewhere.

I suggest you only list what you know for sure as advice and stop attempting to be farther ahead than where you actually are. Once you're at the top of something, you can only go down.

Ai was right about the silhouette thing -- if you missed something like that in your original article, then it's clear you've still got a ways to go.

About Resolution

So, in the spirit of improvement for both yourself and others, I want to make some mention about the topic of resolution because it's a difficult subject and it's clear you're struggling with it in your article, and because of that, those struggles will only serve to muddy the understanding of it for others who read your article.

That being said, my thoughts on resolution are as follows:

------------

In pixel art, particularly from a game-art perspective, resolution is constant. Whatever resolution you start with is the resolution you get.

Ai made a great point about the importance of the scar being a vital consideration -- if the scar is really that important to define your character, then you've obviously got little else to offer with that character in terms of story. And I don't mean 'story' in the context of just game development either. Even a very tiny static image can tell a story. For example, a character at 16x16 pixels can tell a story! You want to show people he's a warrior badass? Draw some dead bodies near him and blood on the ground. The fact that he's still standing says a lot. You don't need a higher resolution than that to indicate he's a person and that he's capable of bad things. The fun about art -- especially pixel art -- is it happens to be more about interpretation than what's exactly the case! In the example above, the dead guys on the ground around him could have just as easily been his allies and they just lost a battle, making him a weakling instead. If you want to make it clearer, put a sword with blood in his hand or put the bodies closer to him -- simple placements like that make an image more vivid than simply drawing the details themselves!

To put it simply:

-- Resolution doesn't matter! --

It's making choices like that in which makes an artist good or bad, not the details he is capable of drawing or the cool story he is trying to tell. It takes a lot of practice to do that, but even a ton of practice isn't any good unless you're practicing the right thing!

Helm made a good attempt at describing what he called "infinite resolution" in his Cluster Study thread -- (I hope I'm quoting that correctly! I may have just remembered it that way! Either way, the concept is still a great one, no matter what you call it.) -- I tend to call it "resolution independence" sometimes too, but the concept is still the same.

To a layman, this might sound like artsy mumbo-jumbo, but to a skilled pixel artist, it's a very powerful concept and really defines what "resolution" truly means to a skilled pixel artist.

In Helm's example, he showed that pixel clusters aim to achieve a single goal -- that goal is to hide the apparent resolution of the sprite by not allowing the size of a single pixel to be revealed. In that aim, one almost NEVER puts a single pixel alone on its own anywhere unless it is a very specific detail like an eye or a nose that cannot be expressed otherwise. The reason for that is because, if you reveal the pixel size, you lose the ability for the rest of the image to be seen as a whole -- otherwise, the image remains almost vector-like -- it reads as a single blob of an image.

A great example of this is the original Super Mario Bros. little mario sprite -- it has been used in countless Super Mario games, even 3d ones, and yet, somehow, it always seems to stand up on its own without looking too out of place! The question any good artist should ask themselves is "how??" because it never seems to break the game it's in visually!

The answer is that it displays that "resolution independence" I mentioned before!

A funny thing is, that NES sprite has specific colors placed in a specific way giving it resolution independence (or "infinite resolution" in other words) which allows it to be independent of its pixel size and still hold up well at any resolution. Despite first glance, the color limitation isn't what does this. For example, if you put the Super Mario Bros 3 sprite in these 3d games, it would still clash in a stupid way, but, somehow, that original Mario sprite still stands up! How?



The reason is because it uses 'flat' color clusters that blend and separate only where needed. These flat clusters allow it to seem that there are hand-painted 'blobs' of color on mario that are there to specifically define his features. If you notice though, the same mario in the blue overalls doesn't have the same timeless effect as the resolution independent version just above it -- and that ain't just because it lacks nostalgia either!

Add 'shading' and you instantly kill the "resolution independence" this sprite offers because you break up those clusters and make new ones while exposing the pixel size haphazardly (even Nintendo is guilty of this in their sprites, so don't feel bad):



So what's the difference between the SMB1 and the SMB3 sprites?

The short answer is -- there's no 'blending' occurring in the colors of the SMB3 sprite like there is in the SMB1 sprite.




You can see the pixel size more clearly in the SMB3 sprite due to the color choices made. The stark white and black contrasts to clearly break out the pixel clusters and separate them into compartmentalized shapes (like the nose, ears, mouth, mustache, and eyes), leads them to feel separate and ultimately shows the size of the pixel used in the process.

Even the exact same sprite done a slightly different color breaks its resolution independence:



You might be wondering how one could possibly shade a sprite this small to make it look correct while keeping its resolution independence and the answer is that the SMB3 sprite isn't so bad -- with a little help -- if it's colors are selected and placed carefully enough:



Each pixel there has a meaning, and none of them, even the one on the foot, break the resolution independence of the mario sprite. The reason is because they correlate to other pixels of the same contrast in brightness (turn it grayscale so you can see the clusters, despite being different colors, retain the same brightness).

If you're still unsure what I mean by the "resolution independence" or "infinite resolution" terms I've thrown around, I mean that your pixels aim to achieve something like the following to some extent while you construct your image:



To put it simply, the dolphin in the low-res version should look more like the dolphin in the high-res version cluster-wise (and this means eliminating the shading in some areas or increasing the contrast of the highlighted area's clusters where the light falls in order to get the simplistic but more-accurate and timeless look of the high-res image of the dolphin.

An example of this done well (the face/head) and then poorly (everywhere else, especially torso/groin) in the same image is that of donkey-kong here:



I'm going to leave this as a stub for now, hopefully I have time to add more later, but I hope this gives you some insight on the concept of resolution and how it relates to pixel art (especially low-res) because, if you aim at slightly higher resolution pixel art with more realistic color palettes, the rules of execution change a little bit, though these foundational principles still help to keep it looking fresh and scalable since you're more aware of what colors and clusters to use for a given sprite as a whole.

Hopefully this helps someone! :)
I'm offering free pixel-art mentorship for promising pixel artists. For details, click here.

     http://mugenzero.userboard.net/