How to add new SVG Illustrations in Pose-Animator ???

There are so many Developers (who are not familiar with computer graphics, Illustrations) struggling to know the logic behind how to create own illustrations in Pose-animator tool.

Who should continue reading this full blog?

1. Any Developer who is working with Pose-Animator.
2. Any Developer who has an interest in knowing what is Pose-Animator and how it works.
3. Any developer who wants to make your favourite cartoon illustrations to mimic you, in the browser.

Starting with, there is a common explanation given in the GitHub repo on how to create new illustrations. But, for people who still find it difficult, there is an alternative.

STEPS TO FOLLOW:

Have a look at the Github repo of Pose-Animator

(link: https://github.com/yemount/pose-animator)

1. In the folder, go to Resources=>Illustration =>and download any of your favourite illustrations(Let’s say I am downloading oy.svg file)
2. Go to Illustration=>samples=> download the skeleton Svg file.
3. Open any of t=your favourite graphic editor tools(Inkscape, CoralDraw, Illustrator etc…)
4. Open the Boy .svg file (you should be able to see a boy illustration with the skeleton file embedded to it.)
5. Go to Objects option and notice the layers in it. You can see that for any svg file that you download from the repo, there is a similarity in grouping and layering the objects of the illustration and the Skeleton. You can see that the layer 1 has a group of objects named illustration on top of which our skeleton group lies. So, our Object panel should show a hierarchy of something like this,
6. [Layer 1]
|---- skeleton
|---- illustration
|---- path 1
|---- path 2
|---- path 3
7. But, Pose-Animator works on well, only when it finds two layers as the file structure and nothing more than that. So, when we add any new object, there is a problem.
8. So, we should not disturb the hierarchy but still make changes in the file. We can accomplish this task by adding all the object paths to the Illustration layer. If you are dealing with an already vectorized svg file, then make sure you ungroup all the objects of the vectorized file and then add it to the existing Illustration layer.
9. Once done, delete all the other objects that belong to boy.svg file. If you are editing the Boy .svg file without including any additional objects, then do not disturb the hierarchy, let ti be the same.
10. As the last step, move the skeleton.svg on top of the present illustration in the same way how it was when downloaded.

Now, save the illustration in the same filename or into a new file in the illustration folder, then open the demo site of Pose-Animator and drag&drop the svg file. Your svg file should appear in Browser now!!

TIPS THAT CAN HELP YOU:

• Start with editing existing objects in the file.
• While creating new svg illustrations, make it very simple. The simpler the layers are, the more effective Pose-animator will work.
• When working with more number of layers, make sure that the particular number of layers forming a hand or an eye in your illustration is grouped so that the layers do not go out of scope while getting animated.
• Always try to save it in another file(this minimises the number of downloads from the Github :P

/////////////////////////

HAPPY ANIMATION

////////////////////////

INSPIRATION FROM:

Pose Animator — An open source tool to bring SVG characters to life in the browser via motion capture

Pose Animator - An open source tool to bring SVG characters to life in the browser via motion…