Hi everyone. Let me rephrase - I have found a way to achieve a cel-shading effect, but I'm wondering if there's an easier way to do it (I've seen the look I want in some of the finished works, so maybe someone has figured out a better way...).

As an example, say I want to create the "sphere" shown in Fig-1 below. It's two colors, but only the outer edge (and NOT the shading boundary) has a stroke associated with it. My method involves creating two copies of the same circle, clipping one of them with a third path, and then aligning everything up and adjusting the fill colors as necessary. Details below. Is there a better way?


Fig-1. A sphere showing cel-shading effect.

The only way I've figured out how to achieve this effect is to use clipping. When I tried using the path operations (like Division or Difference) I always ended up with a line between the two colors. Anyway, first I create the path I want to shade then I create the path that I'll use to define the shading boundary. For the sphere, I arranged the two paths as shown in Fig-2.

Fig-2. Getting ready to clip.

Then I perform the clip, ending up with only the top portion of my sphere. For the final step, I then make a copy of the circle and align it with the clipped portion of the circle. By adjusting the fill colors of the two paths, I get the cel-shaded look.

So for any shaded "object", I actually have to create three paths - two to use for clipping (to define the shade boundary and the "unshaded" portion of the final object) and one to define the shaded portion. Seems like a lot of "extra" paths to have laying around, but maybe this is the only way to do this?

Any recommendations would be appreciated - thanks!

Welcome ScaryBinary
There may be several ways to create the shading you describe. And what you describe is probably as good a way as any. I think it's pretty much a matter of your own personal preference. I think some artists may draw the shadow freehand, which is the only easier/faster way I can think of. You might read up on some tutorials, to learn other ways (see Inkscape Resources forum for links to some good ones).

All best

I think using path tools would be better in terms of file size and number of objects in you image. You're probably seeing a line between the two colors because you've left the stroke on. Remove the stroke and you should be fine.

I use clips for my work also. Note that a clip object has no display properties of its own, it only displays what is inside of it. So you can't easily get an stroke like you see in your first example. But you obviously have a good understanding about clips already so that probably doesn't come as a surprise

I do work a little differently with clips though. With your example I would start by creating 3 objects

1. The clipping shape - which will be a circle whose fill and stroke properties will be irrelevent to the result
2. A background shape - which is larger than the clipping shape and will provide the base colour for the resulting object (in this case "red"). It actual shape does not matter because it'll be clipped away.
3. The shadow shape - which will be partial obscured by the clipping shape to create the shadow.

I then group the background shape and the shadow shape and clip the group with the clipping shape.

If you don't group the shapes before clipping them you'll end up with a clip per shape rather than one overall clip. If you want to add a hilight shape to your object you can enter the clip, and enter the group, then draw the hilight shape.

That's what I've done with link to build up complicated lighting and colouring without having to worry about staying within the lines.

Thanks for the replies everyone. After reading the replies, poking around the internet for more tutorials/examples, and thinking about things a bit more, it turns out I've been...overthinking quite a bit...!

I believe all I need to do is create my lines separately from the fills. Then I can use the z-order to hide the fill boundaries behind the lines and other fills. For instance, for my sphere, I would start with just an empty circle (e.g., the stroke set, but no fill). Then I would create another path with the dark red fill (but no stroke) and put it below the circle to hide the rough edges. Then add lighter red above that path, and so forth. Guess I was trying to hard to do it all in a few steps, instead of using layers and/or z-order to my advantage...

For whatever it's worth, here's a "red marble", and an exploded view showing the individual paths.

You could still set the fill of the circle as your "base" color, you just have to arrange the different values in the proper order. Your way works too, it just creates an extra object.

Inkscape SVG: http://kaioa.com/svg/chemicalzen2.svg

Compressed viewBox-ed plain SVG:


Dismantling:
(Note: The left shows layer deltas. So "+red" means "master"+"outline"+"white"+"red" layers enabled.)



Also note: The master shape has all styles unset via the XML editor. Otherwise you wouldn't be able to set the stroke-width for example.

Oh yea, I forgot... there is a regression bug in Firefox3. You cannot clip something with a clone anymore. Clipping a clone with some other path still does work there, however.

Edit:
Here is an easier method. However, it's not compatible with Firefox3.

Inkscape SVG:
http://kaioa.com/svg/chemicalzen3.svg

Dismantling:
http://kaioa.com/svg/chemicalzen3_parts.png (too wide to inline, sorry)

I just discovered the calligraphy tool.

I love it.

So, to answer my own question, here's how I achieve the cel-shading effect.

1. I use the calligraphy tool to draw all the lines (I do this on a layer called "Ink"). Tracing over a scanned image or roughed-in shapes helps.
2. After simplifying the resulting calligraphy paths (CTRL+L followed by some manual node tweaking), I then add the color fills as necessary on a lower layer called "Color". The width of the calligraphy strokes gives me plenty of room to hide rough edges beneath them.
3. Within each layer (mostly on the Color layer), I use the z-order to get a smooth shading effect using multiple paths (same approach used in the marble example above).

Overall this approach avoids clipping (...not that theres anything wrong with clipping), and I suspect it would be better suited for scanning in hand-drawn line art. Plus, I really like how I can alter the width of the calligraphy outlines as I see fit, instead of having the constant width of the stroke/fill path. I'm not sure if my use of layers is a benefit or not yet.

For whatever it's worth, I used this method to draw my alien mob boss and I had a lot of fun with it.

Thanks everyone - your comments lead me to an approach that fits my style.