Introduction: How to Create a Collection of SVG Yogi Illustrations

By

During a phase of life when my interests in yoga, drawing, and design constantly pulled me in different directions, I decided to find overlap in these topics by creating project that incorporated all of them. The outcome is a set of vectorized yoga pose drawings, that could be used by anyone at any size or medium.

I add each new .svg yogi illustration to a collection on the Noun Project, where members can download the vector files to use with a Creative Commons or Public Domain license.

This is a small project that you could work on, little by little, over time.

I'll walk you through my process as I take a yoga pose, study it, sketch it, and translate it into a 2-D vector form. I won't go into detail on how to use drawing software, as I'd like to focus more on the process of developing these illustrations. But if you have any technical questions, I'll do my best to answer them in the comments section.

Materials and Tools Used

  • Pen and paper
  • Mirror
  • Flatbed Scanner (or, alternatively, a camera)
  • Adobe Illustrator (or another vector drawing program)

Estimated time needed

  • 5 hours for first illustration, and fewer hours for subsequent ones

Pre-requisites

  • Knowing how to use the vector pen tool to draw curves

Step 1: Pick a Pose

The first step is to pick a pose to study and draw. These are considerations for picking a pose:

  • Which pose do you want to get to know better? Drawing a pose is a great way to learn more about it, so choose strategically.

  • How essential is this pose in an everyday yoga practice? In my case, I’d like my collection to have at least several of the widely known poses that represent yoga, rather than esoteric ones. This is because the more commonly understood the pose is, the more relatable it will be to the audience. For example, downward facing dog would be a more commonly understood representation, compared to mayurasana, or peacock pose. That said, if you wanted to represent yogis as those with unusually flexible or esoteric forms, then you could go for the more eccentric options.

  • What kind of set do you want to end up with? It helps for your collection to have a theme that unifies the group of illustrations. For example, the Sun Salutations sequence provides a good number of common poses like downward facing dog, upward facing dog, and chatturanga, that flow from one to another.

Step 2: Sketch Pose From Memory

Sketching the pose from memory will help you diagnose what parts you need to learn more about. As you draw the figure, notice which parts you feel more or less confident depicting. When you later reference yourself or photos, you will know which details to look out for.

For instance, for Triangle pose or Downward facing dog, or Half forward fold, you might not be sure which angle the upper body should be sloping at. The hands and feet are difficult to get right as they contain a lot of detail, and have lots of variations depending on the position.

At this step, you’ll start to develop a general style for the final illustration. Also keep in mind that pen lines and vector lines naturally lend themselves to different line styles, so imagine how you see your drawing translating to digital form.

Early on, for my whole collection, I decided that my characters would look simple but realistic. The hand drawn images at this step hint at that direction.

Step 3: Study the Pose to Refine the Sketch

Now that you have a rough draft, now it’s time to step back and observe so that you can correct or enhance your draft. There are various ways to study the pose:

  • Looking into the mirror as you come into the pose yourself.
  • Looking up an image of the pose online. I consult Yoga Journal as they often have high quality images of yogis in very good form.
  • Looking up a video of the pose. Video often does a better job at explaining mechanics of the body than images, since you can look at how the joints and muscles move. You can pause the video at an informative moment, copy a screenshot of the frame and paste it into your Adobe Illustrator file to reference.
  • Reading about the pose. Articles that detail out the principles of alignment are helpful for gaining a very detailed, precise idea of the pose.

With more knowledge, you will be able to draw the pose more precisely. In my collection, it has been important to represent correct alignment and form, since it’s possible that someone look at these drawings to practice yoga.

Step 4: Define Style Guidelines to Unify All Illustrations

For my collection, I wanted to make a series of feminist topless yogis, who were showing off their bare chests with confidence.These yogis are wearing black solid tights, because this is a popular fashion of the times that I agree with, and because a dark fill gives visual weight to the figures, making them look solid and sturdy.

The Noun Project icon requirements constrained some of the style choices. Icons must be black and white, be 100px X100px or less in dimension, and be simple and clear.

To simplify the look of my lines further, I made it so that all lines are 1px thick. All lines have round ends. Details such as eyes or breasts can use an oval filled with black.

Step 5: Vectorize the Illustration

To digitize the drawing, you need to import the drawing onto your computer screen. You can use any scanner to do this. If you do not have access to one, you could take a picture of your drawing - being mindful of the angle you take it at so that it doesn't get distorted - and open it up with your drawing program.

Then using the vector tool, trace the image. I recommend tracing the image using a pen tool, and manually drawing each node. This manual method - as opposed to an automated tracing process - ensures that you are deliberately choosing each of your nodes and curves, and only choosing what is essential.

The level of detail has to drop a lot as the drawing goes from a pen sketch to a vector drawing. In this case, the drawing itself is a mere 90X90 pixels, and drawing at this size with 1px strokes means that there is not much detail you could squeeze in even if you wanted to.

Step 6: Refine, Export, and Share

Next we want the drawing to stand on its own.

I move the reference image away and work on tweaking details of the icon.

When I am ready to export, I will combine all of the layers, and turn all of the lines and shapes into expanded shapes. In Illustrator I do this by applying Object > Path > Outline to my drawing, then Object > Expand from the menu. You can read about the functions of these on Adobe's short help articles. These commands help turn the drawing elements created by various tools become simplified into outlines and fills.

At this point, you can choose to share an exported copy of the image to a blog or social media account, along with some of the process photos.

Step 7: Repeat Previous Steps to Build a Collection

You can choose to work slowly on the collection, adding one illustration at a time whenever you are ready. Or, you can create many in a short amount of time. The flexibility in pacing is what makes this project doable for busy people who still would like to work on a creative project.

As the collection builds up, you can start to reuse parts of the figures that you made for past illustrations. For example, plank pose is basically standing pose (tadasana), tilted at an angle, with different arms angles, and with toes curled under. The efficiency that builds up as you make more illustrations in the same set, helps you grow the collection.

As your collection builds up, you can strengthen and refine the style and theme of your illustrations. For example, my latest icons have smoother, more simplified hands and fingers compared to my earliest drawings.

When you share your illustrations on the Noun Project, you will be able to check download stats and find out which are more appealing and popular.

I hope you find this process tutorial useful. I'd love to see your process for creating icons or illustrations in the comments section.

Step 8: Iterate and Evolve

Take note of any offshoot or related ideas that come to mind during this project. They may define the next project that you work on. In my case, I am planning to add animations and movement to my illustrations once I have enough of them.