ZoSo Pixel Tutorial - Colours, Shading, Volumes, Hue-Shifting, Outlines…

[ZoSo]

These tutorials were originally posted at Essence, all made by me..

Part I

> **This tutorial has been created by me "ZoSo".. And all pictures in this tutorial are Copyrighted in my name. If you'd like to post this tutorial or the pictures on some other site you'll have to ask ME for permission.**
>
> **Backrounds**
> One very important thing when starting pixeling is working under a mid-grey backround, that way you have a bigger change of not messing up your shading and volume and working with a white color in the backround will trick they eye, especially when zoomed out. Its harder to see the colors and shading and you'll have to give the sprite a more defined outline. And really, very few games actually use a total-white backround or tiles.
>
> Here is an example of how Sprites may look totally different on different backrounds.. This sprite was made for a mid-bright shaded Backround, basically since the tiles were to be not black or white.. like all other Tiles out there.. See how bad it looks on the white backround? While it works very well on the black and grey.
> 
>
> **Volumes**
> This i'll try to explain as best as i can, its also how ive percieved volume shading. But it has to do with depth and.. yeah volume. Shadows inside the sprite, its especially important when trying to create depth like shading an inner part of the body more dark. (By inner i mean more far away from the lighting, like an leg or arm in the backround or a cape) Further more i can't really go into this to far so check the examples below.
>
> Greater Volume < | > Less Volume
> 
> Less Volume < | > Greater Volume
> 
>
> **Outlines**
> This being something you can do if you like it, in some games having a pitch black outline around every important object can look wonderfull, i myself like to shade it along side the original shading.
> The goal in this is to make the important parts stand out in-front of an backround. Like the face, hands or anything you'd like to be seen. Without having a dark lining around the character making it seperated from the backround.
>
> 
> It might also give the object more depth.
> 
> This has ofcourse alot to do with what kind of backround you're planning on putting the character on-top. If its very dark, having a quite light outline shading can make the sprite stand out better as you can make certain featuers like ears stand out by giving them a lighter shade.

Part II

> **This tutorial has been created by me "ZoSo".. And all pictures in this tutorial are Copyrighted in my name. If you'd like to post this tutorial or the pictures on some other site you'll have to ask ME for permission.**
>
> **Colors**
> 
> Jump alot more in your color choice, pick a few and pixel something.. zoom out and check if you actually notice the color change in all places. If you got pixels there that arent noticed or blend away with other colors, replace it.
> Picking your colors are very important, also the more restricted you are the more use of each color will become important. Try to restrict yourself to only a few colors and hues, and only add in more if you really cant replace it or you need a totally different tone. Its good practice and its a true skill to master, putting out alot of colors is easy, making it looks great with just a few is the real art.
>
> **Hue-Shifting**
> A beautiful technique, very simple but very usefull. Its called hue-shifting and its great for giving your pieces an certain depth and feeling. You can make objects "shine" in different ways by shading the different light and dark shades different colors. Its also great for making objects stand out, having blue as a dark shade in forest tiles/pictures will make the green pop out alot more.. And so on.
> 
> The first palette is without Hue-Shifting any colors, its just different shades or Orange.. but in the second you can clearly see how it goes all way from Purple to Yellow.
>
> Here is the kind of effect you can get from Hue-Shifting.
>  
>
> **Basic Shading**
> 
> This picture shows four different type of Balls. I'll start by explaining the two ones on the first row.
> The Metallic one shows a good example on how you need to shade if you want to make metallic objects.. Some of the most important aspects are **Contrast** and noticable **Highlights**. You can see how obviously the Highlight is shown, and how close the dark colors are to the light.. That give the character to a metallic object, and makes it reconizable as a shiny object.. Wood doesnt shine as much, so the right Ball which is Wooden clearly shows how you can by just changing the colors make a huge difference.. I also removed the Highligh, which clearly makes it look even more wooden.
>
> Now dithering is a very usefull technique, there are several dither patterns but the most used ones are simply the chess-board dither. Where you'd put Shade A, Shade B and repeat. Its a good way to blend colors without using to many. It can also be used as texturing if done in a more chaotic way but either way its good to practice and is a technique known by every good pixel-artist.

[ZoSo]

Bumping this old tutorial as i think it still might be usefull.
Also updated it with re-written text, as i wrote alot of crap before.

[Dark Crusade]

Great tutorial, the tutorials board definitely needs to be categorised again so tutorials like this can be stickied.

[_Her0]

@Kreator:

> Great tutorial, the tutorials board definitely needs to be categorised again so tutorials like this can be stickied.

Agreed. Two great pixel artists that need their tutorials stickied!