Some selective outlining tutorials (pixel art)

[Diarandor]

Hi! I am posting here some links of tutorials that explain the technique of "selective outlining", also known as "selout" or "broken outlines", which is just a type of anti-aliasing in the borders of the sprites. I am still learning this useful technique, which seems complicated to master, and it may be bad to abuse too much from it.

http://www.yarrninja.com/pixeltutorial/chapter12.htm
http://pixeljoint.com/forum/forum_posts.asp?TID=11299
http://www.lesforges.org/article/cours-pixel-art-anti-aliasing?scroll_to=article_content
http://makegames.tumblr.com/post/42648699708/pixel-art-tutorial

Selective outlining is used to show borders in a good way independently of the background color. For instance, if all borders of an NPC are black, these will not be seen over a dark ground, which may make ugly "saw" borders to appear. To avoid this problem, we use color borders with a darker color very close to the inner one; some artists also use some kind of "dithering" in these darker borders, but others say that this is not very clean and bad. My guess is that if this is done in the wrong way, the result may be bad, but if done correctly and in the correct proportions, the result is impressive. Using this technique is also a choice for the pixel artist.

My current personal choice will be just to keep it simple, with just a slightly darker color border, close to the inner color (but without discontinuous color alternance in the borders because my sprites are too small and also to avoid extra-work). I don't know if color borders really are or not considered as selout (maybe that depends on the definition each artists give to the concept), but I think that using color borders, without color alternance, is good enough for very small sprites.

[Zefk]

@Diarandor
Those tutorials are indeed good finds. The tutorials mention shading as well.

For Selective outlining, I sometimes lighten the black pixels and darken the ones not touching the background tiles. I guess that is similar to dithering.



I think sprite size is a major factor when it comes to shading techniques. I tend to have light pixels near the upper edges spread out to dark ones. Even wrong shading can look nice.



Another major factor would be distance. For example, a sprite tends to look better when it is not zoomed in so close.



Sprite used: here (Credit Diarandor and Zane Kukta. Follow the CC-BY-SA 4.0 rules. I modded Diarandor's male Eldran sprite.)

[Diarandor]

(Remark: You should credit yourself too for that sprite. Most of it was re-drawn by you.)

[Zefk]

(Remark: You should credit yourself too for that sprite. Most of it was re-drawn by you.)

I fixed it. I wanted to ensure that you are credited because you put a lot of time and effort into the animation style. I forgot myself in the process, haha.