Cel-Shading

As most of the games I’ve designed so far, it has come to me that I finally have my favorite and primary drawing style. I’m not a fantastic nor a pure talent but I believe I don’t completely lack the skills needed for me to draw my own art. And so I’ve been comfortable with drawing in 2d cartoons then shading them properly to add life – and so, cel-shading.

I first discovered my quirky drawing skills back when I was in grade school but soon after I just lost interest and my drawing did not improve by then. But during flash development, the need was called forth again, “Learn to draw!!”. From my previous games until now the progress of digital art is noticeable should I say. Digital art is present in almost all online and video games these days. From poker games to Nintendo, you hardly ever find animations that are completely 2D. 3-dimensional or realistic graphics are getting more streamlined than ever but that doesn’t mean that traditional designs would be outdated.

Cel shading or toon shading has been a traditional drawing style, which expresses the hand drawn style of comics and cartoons. The term came from painted cels from clear sheets of acetate which was used for traditional 2D animations.

Figure: Square and cel-shaded square

Cel shading looks quite easy but is not really and could be well complicated especially for those who are not trained, educated or simply not inclined with the art field itself. Basically, from your 2 dimensional shape (see figure), you have to imagine a 3rd dimension which is practically affected by lighting and shadows. A basic rule is to keep consistent the light source, if it will be from the top left then shadows would usually be found on the lower right of the object and light glares or shines will be on the top left also. From the figure, after having a light source and some shade, the box appears to be least flat.

Some advantages when cel-shading is applied on your flat shapes and objects:

• Depths would be more clear – which side or area is deeper or more beveled.
• light texture is displayed – rocky, spiky or simply varying surfaces can be expressed from proper shades.
• contrast can be improved by having varying borders and edges are usually thicker.
• having a light 3d effect while still being in 2d.
• and lastly it gives more life into the shape/object.

Of course, cel-shading is not the best there is with regards to drawing, but it is one of those which are most easiest to implement.

With the tools provided in Flash, we can apply this technique from various methods and get similar results – but I’ll leave that to another post.