• Looking for something?

Using Cel-Shading

Cel-Shading

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.

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.

Fig 1: Square and cel-shaded square

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. ;)


Have something about this? There are 3, where's yours?
  1. Michael J Williams

    Hey, that looks really cool, JayC!
    Looking forward to “another post” ;)

  2. Bob

    Technically, it’s not cel-shading unless it’s an actual 3D object being rendered as flat color 2D. You’re taking 2D and trying to make it feel 3D. Kinda the opposite idea.

    • Jayc Santos

      Hey Bob,
      Well I guess technically speaking you are correct. What I’m trying to achieve here is the same effect/style although there is no need to render it in 3d as graphics are already pre-rendered (no rendering manipulation). Overall its basically flat 2d which appears to have 3d depth. So unless that method has it’s own name, I’ll stick with the cel-shading. ;)

      Thanks for pointing it out.

Leave a Comment


 (not published)


= Sum of 5 + 12 ? If this is your first post, your comment will be moderated.
Please use english and keep it punctual.