Home Free Art Portfolio Tutorials Request a tutorial

Sunday, July 28, 2013

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.

Character designer, 2D game

artist, animator and illustrator.

Indie game dev eloper in my spare

time.

Right now av ailable for freelance

and part-time v ector artwork,

animation, 2D game art and

illustration.

All work © Olga 'AhNinniah'

Bikmullina

About

Olga Bikmullina

174Follow

2D game artist and animator. I use

Inkscape and other Open Source

software.

View my complete profile

About Me

Subscribe To

Posts

Comments

Share this on Facebook

Tweet this

View stats

(NEW) Appointment gadget >>

Share It

▼ 2013 (20)

► August (5)

▼ July (4)

Creating a female cartoonavatar in Inkscape

Mission accomplished

Dead Island Fan Art

Little Red Riding Hood

► June (1)

► May (3)

Blog Archive

109Deila Meira Næsta blogg» Búa til blogg Innskráning

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.

— 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.

— 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

Fill with color

Add a volume

► April (1)

► March (3)

► January (3)

► 2012 (10)

Name

Email *

Message *

Send

Contact Form

Join this sitew ith Google Friend Connect

Members (7)

Already a member? Sign in

Followers

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.

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

(F7).

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

Draw

Fill with color

Add a volume

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

— 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.

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.

Fill with color

Draw

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.

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.

Add a volume

Newer Post Older PostHome

Subscribe to: Post Comments (Atom)

Posted by Olga Bikmullina at 8:36 AM

Labels: Inkscape, tutorial

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.

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

+109 Recommend this on Google

Enter your comment...

Comment as: Google Account

Publish

Preview

Create a Link

5 comments:

doctormo July 29, 2013 at 3:15 PM

Nice work, great expressions in the finale.

Reply

Jose Navas July 29, 2013 at 9:40 PM

Cool tips Olga! I also like the nice expressions in the final image :)

Reply

RootStriker July 29, 2013 at 9:46 PM

Awesome tutorial and great tips, very useful , thanks a lot

Reply

Olga Bikmullina July 30, 2013 at 3:42 PM

Thank you all! Glad it was useful :)

Reply

Gutierri Barboza August 27, 2013 at 1:59 PM

Very Good!

Reply

Links to this post

© 2012 - 2013 Olga @AhNinniah Bikmullina. Simple template. Powered by Blogger.