Creating a female cartoon avatar in Inkscape

Avatar is the graphical representation of the user in social networks, forums, games etc. In other words, it’s his alter ego. Usually 2D-avatar is a square image which has a small size (100x100px, 64x64px). And that's why we should delete all unwanted items and keep the most important ones when you create it. Otherwise, it would be either difficult to see the details after size reduction, or they will make the image blurry.


There are several useful features in Inkscape that can help you create avatar easily:

• View > Icon Preview will let you preview the page or selected objects as an icon in different resolutions (16x16px/24x24px/32x32px/48x48px and 128x128px).
• View > Duplicate Window will open a new window with the same document in which you are working. By editing the original document, the changes will be made in duplicated one. However, you can make changes in both windows. This feature can be useful when working in Inkscape as a whole, not just for creating an avatar.

Today we look at the process of creating female cartoon avatar in Inkscape. And we'll start with simple objects like circles, ellipses, rectangles and squares.

Draw

1. Create a circle using the “Create circles, ellipses, and arcs (F5)” tool
2. Convert the circle to path (Path > Object to Path)
3. Edit the path by nodes (F2) to make it look like a human head
4. Similarly create an ellipse and edit its nodes, so that the object began to resemble the ear. Duplicate the ear (Ctrl+D) and flip it horizontally (Object > Flip Horizontal). Place both ears somewhere in the middle of our head.
5. To create a neck we need to draw a rectangle (F4), convert it to the path and place two lower nodes closer to each other. To do this select them and press Ctrl+< repeatedly.
6. Create shoulders with rectangle tool (F4) and make the top nodes smoother. Shoulders have intentionally small size so that all the viewer's attention was focused on the head.

Fill with color

— It’s difficult enough to find the right skin tone for your character, so I use a small hint — “Catalogue of Human Features” authored by majnouna. This catalogue can also be used for choosing nice colors for eyes and hair.

Add a volume

— To visually separate the head from the neck, we need to add a shadow under it. To do this, duplicate the neck and fill it with darker skin tone. Duplicate the head and move it down a little while holding Ctrl key down. Then select the darker neck, duplicated head and go to the menu Path > Intersection.

Draw

1. Usually eyes have an almond shape and are at the same level with the top edges of the ears. Create an ellipse (F5) and constrict its edges by editing nodes (F2). Create two circles for iris and pupil.
2. Draw an eyebrow with Bezier curve (Shift+F6) in “Triangle in” shape mode. Convert the object to path and smooth needed nodes.
3. Draw a lash line with Bezier curve (Shift+F6) in “Ellipse” shape mode. Two separate lashes can be easily done with Bezier curve in “Triangle in” shape mode.
4. Add details to the ears by using Bezier curve (Shift+F6) in “Ellipse” shape mode. Convert both objects to path and give them the desired shape. After that you can unite both paths through Path > Union.






Note №1: After converting Bezier curve created in “Ellipse” mode to path, it may contain a large number of unnecessary nodes. To reduce their number go to Path > Simplify or just press Ctrl+L after selecting the path.

Note №2: It is worth mentioning that many head elements are symmetrical and it makes our task much easier. In this case, we can create only one eye, duplicate it (Ctrl+D) and flip horizontally (H).


5. Draw objects for mouth, nose and hair as shown at the Pic. 2 (Bezier tool). Give them the desired shape with editing nodes tool (F2).
6. Most likely we will need to lower hair to bottom (Object > Lower to Bottom).
7. Draw a rectangle with a cut above the avatar’s shoulders (Bezier tool). Duplicate the shoulders, select them together with the first rectangle and go to Path > Intersection.

Note: To select an object which is placed under other objects, you need to hold the Alt key down when selecting it.

Fill with color

— You can choose colors by yourself or you can get them from the source file/image by using a color picker (F7).

Add a volume

1. The light in the eyes usually represented as a white spots. Add a white circle to the pupil and a lighter green semicircle to the iris. Mark out the area of eyes even more by adding a shadow under them: create an object with Bezier tool (Shift+F6) and smooth the nodes.


Note: Despite the fact that the eyes are mirrored, the position of the pupil and the highlights stay the same.
2. Hair volume can be added with the help of highlights and shadows: the part on which falls the source light will be lighter. Create two curly locks and a shadow for the hair behind with Bezier tool (Shift+F6).
3. Lips volume can be added with small objects that repeat their outline. After smoothing the nodes, fill it with lighter color and add white highlights (circle and ellipse).
4. Create a shadow from the hair on the head and shadows from arms on the cardigan with Bezier tool (Shift+F6).

Fill with color 

— The easiest way to choose colors for highlights and shadows — is to experiment with the Lightness value in HSL color palette. But it’s not the only way.

Draw

1. To add more variety to our character let’s add a jewelry. First create one bead with Ellipse tool (F5), then draw a necklace path and use “Pattern along Path” extension (Extensions > Generate from Path > Pattern along Path).


Note: It is very important to place the bead on top (Object > Raise to Top), otherwise the extension won’t work correctly. To see the result in advance, please use the preview.

As a result, we should get one object consisting of many beads along the path. Then duplicate the resulting object, fill it with lighter color and reduce it by holding Ctrl+Shift down.

Add a volume

1. Add a shadow from the lashes with Bezier tool (Shift+F6). Fill the path with a dark blue color and make it as transparent as possible.
2. Also add more details to the hair — create several lines with Bezier tool (Shift+F6) in “Ellipse” shape mode.
3. The final step is to add linear gradients to: shadows under the eyes; pink highlights on the lips; and small highlight on the nose (created with Bezier tool).

That's all! Our female cartoon avatar is ready. You will be able to create many different facial expressions based on it. For example: sad, flirting, happiness, anger, fear etc.

If you’ve found any mistakes in the text or you have a better solution feel free to comment. Thank you!

>> Download “Female cartoon avatar” source file (.svg)

*This tutorial in other languages: Russian
If you translated this tutorial, please provide a link to the translation in the comments.

• French translation 

Second part of this tutorial, "Creating a male cartoon avatar in Inkscape", can be found here