Creating a female cartoon avatar in Inkscapesalvor/myndvinnsla/inkscape... · Creating a female...
Transcript of Creating a female cartoon avatar in Inkscapesalvor/myndvinnsla/inkscape... · Creating a female...
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.