Drawing snowman in 3D with Inkscape

Drawing snowman in 3D with Inkscape

With this Inkscape tutorial you will learn to draw a 3D looking snowman, but ultimately you will get a grasp of creating shadows and reflections the right way.

Inkscape is a relatively young yet fast evolving generic vector graphics editor in the lines of Adobe Illustrator and Corel DRAW. The application can be run on Linux, Windows and Mac and it's freely distributable along with source code. Its main file format is SVG (Scalable Vector Graphics, a W3C standard recommended for publishing vector graphics on the Web).

I'm going to show you how to use this great application to create 3D looking images and I'll use my snowman postcard as an example.

Final version

For a start let's create very basic shapes and play with them. Inkscape has specific tools to create graphic elements like ellipses, rectangles, stars and polylines. However, if you want your drawing to look more vivid, it's better to outline a shape (Ctrl+Shift+C) and bend it. More complex shapes should rather be drawn with Pen (Bezier curve tool). Usually I just draw a curved line and then bend it, refine nodes placement and change their type (cusp, smooth etc.).

Here I started drawing snow balls and eyes from ellipses, then I used arcs of ellipses to create bottom and top edge of the bucket. For "nose" I used Bezier curves, and the same tool was used to finish the bucket after performing union of parts of ellipses via "Paths > Union".

1

Inkscape 0.47 features path outline highlight upon hovering it with Node tool. This really has made looking for a particular path a lot easier in cases when there's a lot of them on canvas already or when they are grouped or when they are covered by other objects. And of course you still can use the good old Ctrl+Alt+Click combination using Selector tool. As a matter of fact there's a lot of such combinations in Inkscape. The application provides hints about using them in the status bar, so it's easy to learn them.

Let's keep drawing. Now that we are done with base shapes, let's go for three-dimentionality. To create smooth transitions from light to shadow we'll use gradients and for more complex cases we'll combine them with Gaussian blur.

One of the ways to apply a gradient fill to an object is to use a flat fill first, and then switch to Gradient Fill Tool, in the tool's options toolbar choose the type of gradient fill — linear or radial, and draw over the object. In that case the chosen flat fill color will gradually fall off to 0% opacity. In the very same toolbar you can click "Edit" button to open a dialog where you can manage color stops of the currently used gradient.

2

However, in most cases you really want dragging color stop and changing their colors right on canvas. Just pick the Gradient Fill Tool and click with it on an object. The very next thing you will see is handles that you can use to change position, direction and linear size of the gradient, shift color stops, add (double-click on the line) or delete them (use Del key on the keyboard). You can also press Shift and move focus of a radial gradient away from center.

By the way, gradient handles are displayed when you edit nodes which is very handy for adjusting objects look and feel really fast, even though in that case you won't be able to add or remove color stops, only move them around.

3

When you click to select a color stop, in the Fill'n'Stroke dialog you'll see only the color of that color stop. This is probably not quite expected, but in the end it makes managing gradients quite easier than via the aforementioned old-fashioned dialog.

Make sure you play with different color models long enough to pick your favorite or just the one that suits the task best. To work on color I usually use HSL, because I get better precision due to being able to adjust brightness and saturation for a hue of interest selectively. Inside the document values of colors are usually saved as RGB plus alpha channel, so it doesn't make much sense using CMYK when tweaking colors, if you expect to print the drawing commercially later.

Unfortunately, there is a number of other limitations. For example, to better represent shape of the bucket and the carrot a conical gradient fill would be best, but since SVG lacks this type of fill and therefore Inkscape lacks it as well, we'll do out best to work around this.

The simplest thing you can come up here with is interpolation of a thin segment or a rectangle of same color to a differently filled and rotated copy of this very shape. To do it select both path and apply the "Extensions > Generate from Path > Interpolate..." effect.

Now you can blur all the segments created by the effect and thus make intermediate steps much less visible. The only thing to mention here is that it's better to first group all the intermediate paths (Ctrl+G or "Object > Group") and then blur them, otherwise every object will be blurred separately, so the final look won't be as good. The easiest way to apply blur is to drag Blur slider in the Fill'n'Stroke dialog.

I don't really favor this approach with interpolation, so I decided to simulate angled gradient by blowing up radius of hues blurring from vertex of the cone to its base.

To create light and dark areas I just duplicated carrot's path (Ctrl+D or "Edit > Duplicate"), rotated it around cone's vertex (double-click the object and drag rotation point to the vertex), changed the color, added a gradient and blurred. I needed gradients to distribute blurred hues along the cone.

But surely I couldn't leave everything out of boundaries of the carrot as is, so I cropped it by applying a clipping path. Carrot's shape was just fine for that, so I duplicated it again, then grouped all parts of the carrot except the clipping path shape and applied that shape to the newly created group ("Object > Clipping Path > Apply"). Usually I fill the clipping path with some specific color so it stands out among similar ones not to be mixed with them. You can't see a clipping path after you have had applied it, but you can still edit objects that are clipped.

Now let's finish the carrot and add a couple of light slopes on the "nose" and a reflection of snow from beneath. Then use either Calligraphic Pen or Pencil tool to draw "eyes" on the carrot.

Talking of reflections... They are actually as important as shadows and highlights. All objects more or less reflect light, and the reflected light hits other objects lighting them as well as it goes along. Even more, objects with a very saturated color, like our carrot, usually colorize objects around them wither way. This is why we don't really see pure white snow or pure white sheet of paper — we see some hues.

I made snow balls blueish from the very beginning, assuming that the snowman will be under clean blue sky somewhere. Now I only need to add shadows and reflections.

When you work on dropped shadows, you need to bear in mind that the further they fall from an object, the more blurred they should be. Sharpness of shadow borders very much depends on the lighting source.

Now let's work on the bucket. The gradient I used in the very beginning is good enough already even though it's linear, so I'll just fix it a bit. First I added a highlight from sun — a blurred white segment, then I accentuated the cone using a shadow — some more blurred dark stripes. And finally I put on top of all that a couple of transparent light gradients representing a reflection from snow and a highlight from top. The highlights and shadows objects were created by duplication of the bucket's object itself and consecutive removal of its parts that I didn't need. It is better to draw shapes of blurred hues using Pencil.

I used dedicated clipping paths for both the bucket and the snow balls. The clipping paths were used to clip blurred objects just like before for the carrot.

Now you need to add an "eye" to the bucket and extrude a grooving. I decided against painting a bucket handle to not introduce visual noise.

Edge of the bucket and the grooving I created from copies of the ellipse that is used to build up bucket's outline. Two such ellipses were shifted relative to each other by width of the edge, then selected and subtracted (Ctrl+- or "Path > Difference").

As for the eyes, everything's really simple: a highlight, a soft reflection of light in the pupil and a shading above the eyes to make them stand out a bit. Here is what it looks like in the No Filters view mode ("View > Display Mode > No Filters"):

And yet another important thing. Even though its a vector image, the plan was to publish its small size bitmap version, so I chose the size from the very beginning and took it into account when drawing all the tiny details. Eyes, thin lines on the bucket, fingers — all of these elements had to be aligned to pixel grid. So what I did is toggling wireframe view mode (Ctrl+5 on the numeric keypad or via "View > Display mode > Outline"), enabling grid (# or via "View > Grid") and then moved objects and bent curves so that paths preferably were inside grid cells. This is why the final image looks so crisp.

Arms of the snowman are slightly curved lines. I used a flat fill for them and added light reflections to add 3D feel.

Leafs of the vegetation was drawn mostly with Calligraphic Pen and then the resulted strokes were united via boolean operation and filled with a linear gradient. The Calligraphic Pen's options are more or less these:

  • Thinning: -60 (strokes become thinner as you lower speed)
  • Caps: 2 (slightly protruding)
  • Fixation: 0 (pen is perpendicular to stroke)
  • Angle: 0, not really important for fixation

But I used a stylus, so the pressure sensitivity option was enabled too, which is why strokes look more natural, with sharp caps.

Stalks are flat-filled paths highlighted by their lighter and blurred copies.

To make the carrot's stub more dimensional a couple of blurred spots will suffice.

Don't forget about shadows and reflections on the snow: the sky will give us a blueish shadow, the green vegetation and the carrot will give us greenish and orange spots.

That's about it. Below is the final version in No Filters mode:

You can also download the file which is licensed under terms of CC Attribution Non-commercial Share Alike, meaning you can edit and share it, but can't sell and have to credit the author when sharing.

Was it useful? There's more:

29 Comments

Leave a comment
  1. It’s great to see how apparently complex drawings are just basic ones with many little details added. And how the light/shadow/reflection is so important to our perception of realism.

    Thanks Yuri Apostol for this great tutorial and Alexandre Prokoudine for the translation.

  2. @rndmerle: you are welcome. there’ll be another tutorial from him really soon now :)

  3. Great tutorial! Is there any chance that the .svg file could be reuploaded and/or the download link updated? The link given : http://libregraphicsworld.org/images/articles/vector/snowman/snowman.svg appears to be a dead link.

  4. Oh noes! And it’s been so since forever, what a shame. Please check again and let me know if it works now.

  5. WOW! That was fast. Yes, it’s working great now. Thanks a million!

  6. Great work! Thanks.-

  7. I like this 3D work so much. However, I am a beginner in drawing. I don’t have the basic concept… Thus it’s a little bit hard to follow this tutorial. Could you show these steps in video? Please!

  8. Alexandre Prokoudine 24 December 2011 at 8:32 pm

    A video had been requested before, but Yuri didn’t seem to be too fond of the idea.

  9. ok, I’ve finally finally done my snowman. I’m still happy. :)

    Merry Christmas!!

    http://wudaudau.posterous.com/89320088 (my snowman)

  10. very good tutorial, thank you !!!

  11. Great final pic! Amazing! I might have missed but how do you get the carvings in the carrot so even and how did you make the grooving of the bucket? It looks so realistic with the shades…
    THANKS!

  12. Thanks! This is very good tutorials

  13. Wow, looks great. Thank you for the tutorial!

    I love Inkscape and GIMP

  14. Thanks for sharing this tutorial. It’s easy to look at but a little bit difficult to make . Oh well , I need to study more .

  15. The svg file link just takes me to a css coding page.  Is it possible to find it somewhere? I’ve been holding off on teaching myself inkscape. Finally Gimp is becoming second nature to me and it’s time to take the skillset up a notch. I’m really loving Gimp 2.8 - the layer groupings is wonderful!!!

  16. Alexandre Prokoudine 12 December 2012 at 6:38 pm

    Sorry, what CSS coding page? :) It opens an XML formatted file which is what SVG is :) You can try to use right click on the URL and choose “Save target as…” to save SVG to your local folder.

  17. Sorry, Alexandre. Bet I made you roll your eyes. Thanks for being patient. I just learned a whole lot with that one comment of yours. Things are starting to make a little more sense now. lol

  18. Alexandre Prokoudine 12 December 2012 at 10:38 pm

    No probs :) Nobody was born with preinstalled knowledge of technology. Let me know if you need any further assistance.

  19. Woow ..., very impressive I would try it, and it would be back here when needing help ...!

    Thanks ...

  20. I really like the 3D animation, but I could not make it. you are really great, friend

  21. I’m struggling a lot with photoshop to design 3D objects with its picky elements, and I never heard about Inkscape, it seems very easy tool to make 3D designs with this easy to use tool.

    Thank you for this detailed tutorial

  22. Amazing tutorial, thanks for shared :)

  23. Wonderful 3D look!  I can’t use gradients or blurs (they rasterize) since I’m trying to learn how to create images for stock, but this snowman is cute!

  24. CFL is a effective, actually customized path to
    nutrition related health. CFL is a state-of-the-art nutritional software
    that once in conjunction with your regular workout, will torch physique fat in record breaking speed whilst saving your
    lean muscle. It’s exclusively designed to break open fat removal level while having you turning heads Year long!

  25. Awww this looks awesome, I’ve been looking for this kind of tutorial, as I would definitely class myself as an amateur! I’m going to try this out and try to learn some more.

    Thanks for the great post

  26. I always come across this tutorial and every time I wish it was more detailed. What a waste.

  27. awesome post.. hope i can do it for tutorials

  28. I am a beginner to inkscape so can you elaborate every step. Thanks

  29. really excellent tutorial, I followed one almost the very same as this on Adobe Illustrator once

Tell us what you think

Submit the word you see below: